/* CASA64 access preview. Reuses the shared colour, font and brand tokens. */
.login-page{min-height:100dvh;font-family:Archivo,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:clip;position:relative}
.login-page .login-ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 90% 60%,#b8874a08,transparent 45%);z-index:-1}
.login-page .login-header{height:108px;max-width:1680px;margin:0 auto;padding:0 clamp(24px,4.8vw,84px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.login-page .login-brand{width:167px;height:32px;flex:none}
.login-page .login-header-right{display:flex;align-items:center;gap:27px}
.login-page .login-back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--muted);font-size:11px;min-height:44px}
.login-page .login-back svg{width:16px;height:16px;transition:transform .25s}
.login-page .login-back:hover{color:var(--text)}
.login-page .login-back:hover svg{transform:translateX(-3px)}
.login-page .login-theme{display:flex;padding:3px;border:1px solid var(--line);border-radius:99px;background:var(--surface-bottom)}
.login-page .login-theme button{width:36px;min-height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .25s,color .25s}
.login-page .login-theme svg{width:16px;height:16px}
.login-page .login-theme [aria-pressed="true"]{color:var(--text);background:var(--panel2);box-shadow:inset 0 1px 0 #ffffff0c,0 2px 6px #0001}
.login-page .login-layout{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:clamp(42px,7.2vw,120px);max-width:1680px;margin:0 auto;padding:0 clamp(24px,4.8vw,84px) 32px;min-height:calc(100dvh - 108px)}
.login-page .login-visual{min-width:0;display:flex;flex-direction:column;padding-bottom:8px}
.login-page .login-visual-top{display:flex;justify-content:space-between;gap:20px;font-size:9px;line-height:1.5;letter-spacing:.16em;color:var(--muted);margin:0 2px 17px}
.login-page .login-frame-number{font-variant-numeric:tabular-nums;letter-spacing:.13em;white-space:nowrap}
.login-page .login-art{position:relative;isolation:isolate;border-radius:20px;overflow:hidden;min-height:490px;height:calc(100dvh - 320px);max-height:780px;background:#16181a;border:1px solid #d7c3a827;box-shadow:inset 0 1px 0 #ffffff12}
.login-page .login-art-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:51% 39%;z-index:-3;transform:scale(1.025);animation:login-art-arrive 1.1s cubic-bezier(.16,1,.3,1) both}
.login-page .login-art-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(110deg,#11121588,transparent 80%),linear-gradient(180deg,#11121522 30%,transparent 65%,#0f10134d 100%)}
.login-page .login-art-grid{position:absolute;inset:0;pointer-events:none;z-index:-1;border-radius:inherit;box-shadow:inset 0 0 90px #0003}
.login-page .login-art-coordinate{position:absolute;top:24px;left:26px;right:26px;display:flex;justify-content:space-between;gap:15px;color:#e3ded3;font-size:10px;letter-spacing:.03em;text-shadow:0 1px 7px #0008}
.login-page .login-art-coordinate span:first-child:before{content:'';display:inline-block;width:5px;height:5px;border:1px solid #d8aa75;transform:rotate(45deg);margin-right:8px;vertical-align:1px}
.login-page .login-visual-copy{position:absolute;left:clamp(25px,3vw,49px);right:25px;top:76px;color:#f1eee7}
.login-page .login-overline{font-size:9px;letter-spacing:.16em;color:#d9b785;display:block;margin-bottom:17px;font-weight:500}
.login-page .login-visual-copy h1{font-family:Archivo,Arial,sans-serif;font-weight:400;font-size:clamp(35px,3.15vw,55px);letter-spacing:-.048em;line-height:1.09;max-width:400px}
.login-page .login-visual-copy h1 em{font-family:Newsreader,Georgia,serif;font-weight:400;font-style:italic;color:#e4c5a0;letter-spacing:-.02em}
.login-page .login-visual-copy p{font-size:11px;line-height:1.8;margin:17px 0 0;color:#c9c5be}
.login-page .login-moodboard{display:grid;grid-template-columns:1.12fr 1.12fr .95fr;gap:15px;margin:18px 0 0}
.login-page .login-mood-study{min-width:0;margin:0}
.login-page .login-study-image,.login-page .login-material-swatches{height:83px;position:relative;overflow:hidden;border-radius:9px;border:1px solid var(--line);background:#191a1d}
.login-page .login-study-image img{height:100%;width:100%;object-fit:cover;display:block;opacity:.85;transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .4s}
.login-page .login-study-chess img{transform:scale(1.45);object-position:72% 57%}
.login-page .login-study-tech img{transform:scale(1.2);object-position:50% 88%;filter:saturate(.6)}
.login-page .login-study-image:hover img{transform:scale(1.6);opacity:1}
.login-page .login-study-tech .login-study-image:hover img{transform:scale(1.35)}
.login-page .login-study-cross{position:absolute;right:10px;bottom:4px;font-size:23px;font-weight:400;color:#d0b48c;line-height:1.2}
.login-page .login-material-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-color:#d9c5a921}
.login-page .login-material-swatches i:nth-child(1){background:linear-gradient(125deg,#323438,#151719)}
.login-page .login-material-swatches i:nth-child(2){background:linear-gradient(125deg,#d0a36d,#9c723e)}
.login-page .login-material-swatches i:nth-child(3){background:linear-gradient(125deg,#eee7db,#c9bb9e)}
.login-page .login-mood-study figcaption{font-size:10px;color:var(--muted);display:flex;gap:11px;align-items:center;margin-top:9px;line-height:1.5;white-space:nowrap}
.login-page .login-mood-study figcaption>span{font-size:8px;letter-spacing:.08em;color:var(--accent);font-variant-numeric:tabular-nums}
.login-page .login-access{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:49px 0 8px;position:relative}
.login-page .login-access-inner{width:100%;max-width:390px;margin:auto 0;animation:login-access-arrive .85s cubic-bezier(.16,1,.3,1) both}
.login-page .login-preview-badge{display:flex;align-items:center;gap:7px;width:fit-content;border:1px solid var(--line);border-radius:99px;padding:6px 10px;font-size:9px;color:var(--muted);margin-bottom:33px;letter-spacing:.015em}
.login-page .login-preview-badge>span{width:4px;height:4px;background:var(--accent);border-radius:50%}
.login-page .login-kicker{font-size:9px;letter-spacing:.16em;color:var(--accent);font-weight:500;margin-bottom:15px}
.login-page .login-access h2{font-family:Newsreader,Georgia,serif;font-size:clamp(43px,3.9vw,62px);font-weight:400;letter-spacing:-.035em;line-height:1.02;margin:0}
.login-page .login-introduction{font-size:12px;line-height:1.7;color:var(--muted);margin:18px 0 33px}
.login-page .login-form{margin:0;padding:0}
.login-page .login-field{margin-bottom:18px}
.login-page .login-field label{display:block;font-size:11px;margin-bottom:9px;color:var(--text)}
.login-page .login-input-wrap{position:relative;display:flex;align-items:center;min-width:0;border:1px solid var(--line);border-radius:11px;background:linear-gradient(130deg,var(--surface-top),var(--surface-bottom)),var(--panel);box-shadow:inset 0 1px 0 #ffffff04;transition:border-color .25s,box-shadow .25s}
.login-page .login-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #b8874a12}
.login-page .login-input-wrap>svg{width:17px;height:17px;color:var(--muted);margin-left:15px;pointer-events:none;flex:none}
.login-page .login-input-wrap input{border:0;outline:0;box-shadow:none;background:none;min-height:53px;font-size:12px;padding:13px 12px;min-width:0;width:100%;color:var(--text);border-radius:10px}
.login-page .login-input-wrap input:focus{outline:none;box-shadow:none}
.login-page .login-input-wrap input::placeholder{color:var(--muted);opacity:.7}
.login-page #login-password-toggle{min-width:44px;min-height:49px;display:grid;place-items:center;color:var(--muted);padding:0;border-radius:10px;flex:none}
.login-page #login-password-toggle:hover{color:var(--text)}
.login-page #login-password-toggle[aria-pressed="true"]{color:var(--accent)}
.login-page #login-password-toggle svg{width:18px;height:18px}
.login-page .login-form-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;margin:-3px 0 21px;line-height:1.6}
.login-page .login-form-meta>span{color:var(--muted);max-width:150px}
.login-page #login-forgot{font-size:10px;color:var(--accent);padding:5px 0;min-height:32px;text-align:right;white-space:nowrap}
.login-page #login-forgot:hover{text-decoration:underline;text-underline-offset:4px}
.login-page .login-submit{width:100%;min-height:52px;padding:14px 19px;border:1px solid #dab17763;border-radius:11px;background:linear-gradient(120deg,#d5b07c,#b8874a);color:#17181a;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;font-weight:500;box-shadow:inset 0 1px 0 #ffffff35,0 6px 22px #b8874a10;transition:filter .3s,transform .3s,box-shadow .3s}
.login-page .login-submit:not(:disabled):hover{color:#17181a;filter:brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff35,0 10px 26px #b8874a20}
.login-page .login-submit:not(:disabled):active{transform:translateY(0)}
.login-page .login-submit svg{width:18px;height:18px}
.login-page .login-feedback{margin:15px 0 0;padding:12px 14px;font-size:11px;line-height:1.6;border-left:2px solid var(--accent);background:var(--soft);border-radius:0 8px 8px 0;color:var(--text)}
.login-page .login-feedback[hidden]{display:none}
.login-page .login-access-note{display:flex;align-items:flex-start;gap:9px;padding-top:22px;margin-top:23px;border-top:1px solid var(--line);color:var(--muted)}
.login-page .login-access-note svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent)}
.login-page .login-access-note p{font-size:10px;line-height:1.7;margin:0;max-width:280px}
.login-page .login-access-footer{display:flex;justify-content:space-between;gap:15px;max-width:390px;width:100%;padding-top:52px;font-size:9px;color:var(--muted);letter-spacing:.02em}
.login-page .login-access-footer span:first-child{color:var(--text);letter-spacing:.14em;font-size:8px}
.login-page noscript{margin:0}
.login-page .login-noscript{padding:16px 24px;font-size:12px}
[data-theme="light"] .login-page .login-input-wrap{box-shadow:0 4px 12px #17181a03}
[data-theme="light"] .login-page .login-submit{background:linear-gradient(120deg,#b8874a,#9e6f35);border-color:#8d612c;color:#fff}
[data-theme="light"] .login-page .login-submit:not(:disabled):hover{color:#fff}
[data-theme="light"] .login-page .login-art{box-shadow:0 16px 46px #17181a12}
@keyframes login-art-arrive{from{opacity:.8;transform:scale(1.07)}to{opacity:1;transform:scale(1.025)}}
@keyframes login-access-arrive{from{opacity:.6;translate:0 9px}to{opacity:1;translate:0 0}}
@media(min-width:1600px){.login-page .login-access-inner,.login-page .login-access-footer{max-width:420px}.login-page .login-layout{gap:135px}}
@media(max-width:1100px){.login-page .login-layout{gap:45px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.login-page .login-header{padding:0 35px;height:96px}.login-page .login-layout{padding-left:35px;padding-right:35px;min-height:calc(100dvh - 96px)}.login-page .login-art{min-height:470px}.login-page .login-visual-copy{left:25px;top:65px}.login-page .login-visual-copy h1{font-size:35px}.login-page .login-art-coordinate{left:22px;right:22px}.login-page .login-access{padding-top:35px}.login-page .login-access h2{font-size:50px}.login-page .login-moodboard{gap:10px}.login-page .login-study-image,.login-page .login-material-swatches{height:68px}}
@media(max-width:800px){.login-page .login-header{padding:0 25px;height:88px}.login-page .login-layout{padding:0 25px 32px;gap:32px;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);min-height:calc(100dvh - 88px)}.login-page .login-art{height:520px;min-height:0}.login-page .login-access{padding:34px 0 8px}.login-page .login-visual-copy h1{font-size:32px}.login-page .login-visual-copy{left:22px;right:18px}.login-page .login-art-coordinate{font-size:8px;left:18px;right:18px}.login-page .login-visual-top{font-size:8px;letter-spacing:.1em}.login-page .login-visual-copy p{font-size:10px}.login-page .login-overline{font-size:8px;letter-spacing:.12em}.login-page .login-moodboard{gap:8px}.login-page .login-study-image,.login-page .login-material-swatches{height:60px}.login-page .login-mood-study figcaption{gap:5px;font-size:8px}.login-page .login-mood-study figcaption>span{font-size:7px}.login-page .login-access h2{font-size:45px}.login-page .login-preview-badge{margin-bottom:27px}.login-page .login-introduction{font-size:11px;margin-bottom:27px}.login-page .login-form-meta{display:block}.login-page .login-form-meta>span{display:block;max-width:none}.login-page #login-forgot{display:block;text-align:left;min-height:30px}.login-page .login-access-footer{font-size:8px;padding-top:32px}}
@media(max-width:640px){.login-page .login-header{height:80px;padding:0 22px}.login-page .login-brand{width:136px;height:27px}.login-page .login-header-right{gap:12px}.login-page .login-back{min-width:32px;justify-content:center}.login-page .login-back span{display:none}.login-page .login-theme button{width:34px;min-height:36px}.login-page .login-layout{display:flex;flex-direction:column;padding:0 22px 25px;gap:29px;min-height:0}.login-page .login-visual{display:block;padding:0}.login-page .login-visual-top{font-size:8px;margin-bottom:12px}.login-page .login-art{height:270px;max-height:none;border-radius:15px}.login-page .login-art-image{object-position:50% 38%}.login-page .login-art-shade{background:linear-gradient(90deg,#101114c4,#11121515 90%),linear-gradient(0deg,#101114af,transparent 75%)}.login-page .login-art-coordinate{top:17px;font-size:8px}.login-page .login-art-coordinate span:last-child{display:none}.login-page .login-visual-copy{top:62px;left:22px;right:20px}.login-page .login-visual-copy h1{font-size:34px;max-width:310px}.login-page .login-visual-copy p{display:block;font-size:11px;margin-top:11px}.login-page .login-overline{font-size:7px;letter-spacing:.15em;margin-bottom:12px}.login-page .login-moodboard{gap:11px;margin-top:13px}.login-page .login-study-image,.login-page .login-material-swatches{height:51px;border-radius:7px}.login-page .login-mood-study figcaption{margin-top:6px;font-size:9px;gap:7px}.login-page .login-access{padding:4px 0 0}.login-page .login-access-inner{max-width:440px;margin:0 auto}.login-page .login-preview-badge{margin-bottom:22px;font-size:9px}.login-page .login-access h2{font-size:47px;line-height:1.04}.login-page .login-access h2 br{display:none}.login-page .login-kicker{font-size:8px;margin-bottom:12px}.login-page .login-introduction{margin:14px 0 26px;font-size:12px}.login-page .login-field{margin-bottom:17px}.login-page .login-input-wrap input{min-height:54px;font-size:13px}.login-page .login-form-meta{display:flex;gap:10px;margin-bottom:18px}.login-page .login-form-meta>span{font-size:9px;max-width:145px}.login-page #login-forgot{font-size:10px;text-align:right;min-height:36px}.login-page .login-submit{min-height:54px;font-size:13px}.login-page .login-access-note{padding-top:19px;margin-top:22px}.login-page .login-access-note p{font-size:10px;max-width:none}.login-page .login-access-footer{max-width:440px;margin:0 auto;padding-top:33px;font-size:9px}}
@media(max-width:360px){.login-page .login-header{padding:0 17px}.login-page .login-layout{padding-left:17px;padding-right:17px;gap:26px}.login-page .login-brand{width:126px;height:25px}.login-page .login-header-right{gap:4px}.login-page .login-theme button{width:30px;min-height:36px}.login-page .login-art{height:240px}.login-page .login-visual-copy h1{font-size:31px}.login-page .login-visual-copy{left:19px;top:57px}.login-page .login-access h2{font-size:42px}.login-page .login-form-meta>span{max-width:125px;font-size:8px}.login-page #login-forgot{font-size:9px}.login-page .login-moodboard{gap:8px}.login-page .login-mood-study figcaption{font-size:8px;gap:5px}}
@media(prefers-reduced-motion:reduce){.login-page *,.login-page *:before,.login-page *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.login-page .login-submit:hover{transform:none}}

/* Latest camera/mist, contained by the original rounded art frame. */
.login-page .login-scene{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;border-radius:inherit;background:#171514}
.login-page .login-scene-canvas{--camera-x:0px;--camera-y:0px;--camera-scale:1.025;position:absolute;aspect-ratio:1122/1402;transform:translate3d(var(--camera-x),var(--camera-y),0) scale(var(--camera-scale));transform-origin:50% 60%;will-change:transform;overflow:hidden}
.login-page .login-art-image{z-index:0;animation:none;transform:none;object-fit:fill;object-position:initial}
.login-page .login-scene-fog{position:absolute;inset:0;z-index:1;overflow:hidden;mask-image:radial-gradient(ellipse 70% 38% at 30% 17%,#000 18%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 38% at 30% 17%,#000 18%,transparent 70%);mix-blend-mode:screen}
.login-page .login-fog-response{--fog-x:0px;--fog-y:0px;--fog-energy:0;position:absolute;inset:0;transform:translate3d(var(--fog-x),var(--fog-y),0);opacity:calc(.24 + var(--fog-energy)*.25);will-change:transform}
.login-page .login-fog-wisp{position:absolute;inset:-20%;background-repeat:no-repeat;will-change:transform}
.login-page .login-fog-wisp-a{background:radial-gradient(ellipse at 35% 32%,#d0b09042,transparent 38%),radial-gradient(ellipse at 74% 42%,#b9b5ae35,transparent 35%);animation:login-fog-a 25s ease-in-out infinite alternate}
.login-page .login-fog-wisp-b{background:radial-gradient(ellipse at 60% 27%,#cac8c242,transparent 40%),radial-gradient(ellipse at 18% 40%,#9d897c35,transparent 34%);animation:login-fog-b 32s ease-in-out infinite alternate}
.login-page .login-fog-wisp-c{background:radial-gradient(ellipse at 42% 36%,#ded8cb29,transparent 35%);animation:login-fog-c 20s ease-in-out infinite alternate}
@keyframes login-fog-a{from{transform:translate3d(-6%,3%,0)}to{transform:translate3d(6%,-4%,0)}}
@keyframes login-fog-b{from{transform:translate3d(7%,-3%,0)}to{transform:translate3d(-8%,5%,0)}}
@keyframes login-fog-c{from{transform:translate3d(-4%,-6%,0)}to{transform:translate3d(6%,6%,0)}}
.login-page.is-idle .login-fog-wisp{animation-play-state:paused}
.login-page .login-access{padding-bottom:24px}
@media(max-width:640px){.login-page .login-access{padding-bottom:0}}
@media(pointer:coarse){.login-page .login-scene-canvas{will-change:auto}}
@media(prefers-reduced-motion:reduce){.login-page .login-scene-canvas,.login-page .login-fog-response{transform:none!important;will-change:auto}}

.login-page .login-art{user-select:none;-webkit-user-select:none}

/* The panel's exact CSS atmosphere and pointer light, at half its opacity. */
.login-page::before{display:none}
.login-page .login-panel-atmosphere{z-index:-1}
.login-page .login-panel-atmosphere .site-ambient-scene{opacity:calc(var(--motion-opacity) * .5)}
.login-page .login-panel-atmosphere[data-pointer-active="true"] .bronze-follow{opacity:calc(var(--motion-opacity) * .5)}
.login-page .login-header,.login-page .login-layout{position:relative;z-index:1}
/* Both main blocks occupy the same row; their geometric centers stay aligned. */
@media(min-width:641px){
 .login-page .login-layout{grid-template-rows:auto auto;row-gap:0;align-content:start;align-items:center}
 .login-page .login-visual{display:contents}
 .login-page .login-visual-top{grid-column:1;grid-row:1}
 .login-page .login-art{grid-column:1;grid-row:2;align-self:center}
 .login-page .login-access{grid-column:2;grid-row:2;align-self:center;padding:0}
 .login-page .login-access-inner{margin:0}
}
/* A broad feathered shadow sits outside the frame, only in the dark theme. */
.login-page .login-art{transition:box-shadow .65s ease,border-color .65s ease}
@media(hover:hover) and (pointer:fine){
 [data-theme="dark"] .login-page .login-art:hover{border-color:#d7c3a838;box-shadow:0 25px 85px 22px #0007,0 4px 140px 35px #0003,inset 0 1px 0 #ffffff12}
}