*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--focus,#f3a32b);outline-offset:3px}.login-shell{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(390px,.86fr);overflow:hidden;background:var(--paper,#fff);color:var(--ink,#17212a)}.scene{min-height:100svh;position:relative;display:flex;flex-direction:column;padding:36px 48px;overflow:hidden;background:var(--scene,#eaf0ef);color:var(--scene-ink,#102b33)}.scene-top,.scene-bottom{z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;letter-spacing:.08em}.scene-top{font-weight:700}.scene-bottom{margin-top:auto}.scene-copy{position:relative;z-index:2;margin-top:auto;max-width:670px}.scene-copy h1{font-size:clamp(38px,4.8vw,76px);line-height:1.14;letter-spacing:-.055em;margin:0 0 18px;font-weight:800}.scene-copy p{font-size:16px;line-height:1.8;max-width:440px;margin:0}.scene-art{position:absolute;z-index:1;pointer-events:none}.login-side{min-height:100svh;padding:34px clamp(28px,4.3vw,76px) 26px;display:flex;flex-direction:column;background:var(--paper,#fff);color:var(--ink,#17212a)}.brand{display:flex;align-items:center;gap:12px;z-index:3}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--mark-radius,10px);background:var(--accent,#155b75);color:var(--accent-text,#fff);font-weight:900;font-size:23px;line-height:1}.brand strong{display:block;font-size:18px;letter-spacing:-.03em}.brand small{display:block;margin-top:1px;color:var(--muted,#697680);font-size:11px;letter-spacing:.1em}.form-wrap{width:100%;max-width:410px;margin:auto;position:relative;z-index:3}.edition{display:inline-block;font-size:11px;font-weight:700;color:var(--accent,#155b75);letter-spacing:.12em;margin-bottom:20px}.form-intro h2{font-size:clamp(30px,3vw,42px);line-height:1.2;margin:0 0 12px;letter-spacing:-.05em}.form-intro p{margin:0 0 30px;color:var(--muted,#697680);font-size:14px;line-height:1.6}.login-form{display:flex;flex-direction:column}.login-form>label{font-size:13px;font-weight:700;margin:0 0 9px}.login-form>input,.password-row input{display:block;width:100%;height:50px;border:1px solid var(--line,#d8dfe2);border-radius:var(--radius,8px);background:var(--field,#fff);color:var(--ink,#17212a);padding:0 15px;outline:0;transition:border-color .2s,box-shadow .2s}.login-form>input:focus,.password-row input:focus{border-color:var(--accent,#155b75);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#155b75) 15%,transparent)}.login-form>input{margin-bottom:19px}.login-form input::placeholder{color:var(--placeholder,#9ba7ad)}.password-row{position:relative}.password-row input{padding-right:48px}.show-password{position:absolute;right:10px;top:8px;border:0;background:transparent;color:var(--muted,#697680);width:34px;height:34px;font-size:17px}.form-options{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:18px 0 22px;font-size:12px;color:var(--muted,#697680)}.remember{display:flex;align-items:center;gap:7px;cursor:pointer}.remember input{accent-color:var(--accent,#155b75);width:15px;height:15px;margin:0}.forgot{text-decoration:none}.forgot:hover{text-decoration:underline}.submit{width:100%;min-height:50px;border:0;border-radius:var(--button-radius,var(--radius,8px));background:var(--accent,#155b75);color:var(--accent-text,#fff);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:18px;transition:transform .2s,filter .2s,box-shadow .2s}.submit:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 10px 20px #0002}.submit span{font-size:19px}.error{margin:14px 0 0;padding:11px 13px;border-left:3px solid #d94834;color:#b43227;background:#fff1ef;font-size:13px;line-height:1.5}.error[hidden]{display:none}.error.pulse{animation:pulse .35s ease-out}@keyframes pulse{from{transform:translateY(-4px);opacity:.4}to{transform:translateY(0);opacity:1}}.legal{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted,#697680);font-size:11px;line-height:1.5;position:relative;z-index:3}.legal a{text-decoration:none;border-bottom:1px solid currentColor}.legal a:hover{color:var(--accent,#155b75)}
/* Five clearly different compositions within every visual family. */
.variant-1 .login-shell{grid-template-columns:minmax(390px,.78fr) minmax(0,1.22fr)}.variant-1 .login-side{order:0}.variant-1 .scene{order:1}.variant-1 .scene-copy{margin-top:13vh}.variant-1 .scene-art{bottom:8%;right:0}.variant-2 .login-shell{display:block;position:relative}.variant-2 .scene{position:absolute;inset:0;min-height:100%;padding-right:48%}.variant-2 .scene-copy{margin-top:12vh}.variant-2 .login-side{width:min(460px,43%);margin-left:auto;position:relative;box-shadow:-25px 0 70px #0002}.variant-2 .form-wrap{margin:auto}.variant-2 .scene-art{right:44%;bottom:12%}.variant-3 .login-shell{display:flex;flex-direction:column;min-height:100svh}.variant-3 .scene{min-height:39vh;max-height:430px;padding:30px 5.5vw}.variant-3 .scene-copy{margin-top:30px;max-width:850px}.variant-3 .scene-copy h1{font-size:clamp(36px,4vw,60px);max-width:850px}.variant-3 .scene-bottom{display:none}.variant-3 .scene-art{right:7%;top:6%;transform:scale(.72);transform-origin:top right}.variant-3 .login-side{min-height:61vh;padding:26px 5.5vw 22px;display:grid;grid-template-columns:minmax(180px,1fr) minmax(330px,440px);grid-template-rows:1fr auto;align-items:center;gap:20px 60px}.variant-3 .brand{align-self:start}.variant-3 .form-wrap{grid-column:2;grid-row:1/3;margin:10px 0;max-width:440px}.variant-3 .legal{grid-column:1;grid-row:2}.variant-4 .login-shell{grid-template-columns:minmax(190px,28%) 1fr}.variant-4 .scene{padding:28px 25px}.variant-4 .scene-copy h1{font-size:clamp(28px,3vw,50px);line-height:1.3;writing-mode:vertical-rl;max-height:58vh}.variant-4 .scene-copy p{display:none}.variant-4 .scene-top{display:block;line-height:2}.variant-4 .scene-top span:last-child{display:block}.variant-4 .scene-bottom{display:block;line-height:2}.variant-4 .scene-bottom span:last-child{display:none}.variant-4 .scene-art{opacity:.55;bottom:10%;right:-20%}.variant-4 .login-side{padding-left:clamp(32px,9vw,160px);padding-right:clamp(32px,9vw,160px)}
/* Editorial: open white space, oversized type, surveying ring. */
.family-0{--paper:#f8f8f5;--scene:#edf0ec;--ink:#101a1f;--scene-ink:#102126;--muted:#637174;--accent:#11272c;--line:#b7c4c1;--field:#fff;--radius:2px;--mark-radius:2px}.family-0 .scene{border-right:1px solid #12272b}.family-0 .scene-copy{margin-bottom:72px}.family-0 .scene-copy h1{font-weight:900}.family-0 .scene-art{right:6%;top:12%;width:46%;height:47%}.editorial-art .route-ring{width:min(28vw,400px);aspect-ratio:1;border:1px solid #758883;border-radius:50%;position:relative}.editorial-art .route-ring:before,.editorial-art .route-ring:after{content:'';position:absolute;border:1px solid #91a49f;border-radius:50%;inset:14%}.editorial-art .route-ring:after{inset:30%}.editorial-art i{position:absolute;width:12px;height:12px;border-radius:50%;background:#142c30;z-index:2}.editorial-art i:nth-child(1){top:14%;left:14%}.editorial-art i:nth-child(2){bottom:13%;left:31%}.editorial-art i:nth-child(3){top:29%;right:3%}.editorial-art span{display:block;margin-top:16px;font-size:10px;letter-spacing:.2em}.family-0 .submit{justify-content:space-between;padding:0 19px}.family-0 .brand-mark{font-weight:400}
/* Night operations: operational grid and radar. */
.family-1{--paper:#0d1722;--scene:#07121c;--ink:#f4f8fa;--scene-ink:#f4f8fa;--muted:#9ab2bc;--accent:#35d2e9;--accent-text:#06121b;--line:#38505e;--field:#122432;--placeholder:#7c9ba8;--radius:5px;--mark-radius:5px;--focus:#35d2e9}.family-1 .scene{background-image:linear-gradient(#2e708322 1px,transparent 1px),linear-gradient(90deg,#2e708322 1px,transparent 1px),radial-gradient(circle at 74% 58%,#0a5f7866,transparent 48%);background-size:38px 38px,38px 38px,auto}.family-1 .scene-copy{margin-bottom:55px}.family-1 .scene-copy h1{font-family:Arial,'Noto Sans SC',sans-serif;font-weight:700;letter-spacing:-.04em;text-transform:uppercase}.family-1 .scene-art{right:1%;top:16%;width:61%;height:63%}.radar{width:min(41vw,500px);aspect-ratio:1;border:1px solid #2ebfce88;border-radius:50%;box-shadow:0 0 0 44px #28c4d00a,0 0 0 88px #28c4d006,inset 0 0 70px #25c6e429;position:relative}.radar:before,.radar:after{content:'';position:absolute;inset:20%;border:1px dashed #3ab2c666;border-radius:50%}.radar:after{inset:39%}.radar i{position:absolute;width:9px;height:9px;border-radius:50%;background:#47e4fa;box-shadow:0 0 16px #47e4fa}.radar i:nth-child(1){top:20%;left:17%}.radar i:nth-child(2){top:67%;right:4%}.radar i:nth-child(3){bottom:9%;left:40%}.readouts{position:absolute;top:3%;right:5%;display:flex;flex-direction:column;gap:6px;color:#76ebf2;font-size:10px;letter-spacing:.12em;text-align:right}.readouts b{font-size:25px;font-weight:400}.family-1 .login-side{border-left:1px solid #2e4b57}.family-1 .error{background:#421f24;color:#ffd5d1;border-color:#ed766d}
/* Air-mail: paper, stamps, postal edge. */
.family-2{--paper:#faf5e9;--scene:#efe4cf;--ink:#153451;--scene-ink:#183d61;--muted:#6a7782;--accent:#bf4c38;--line:#b9bdba;--field:#fffdf7;--radius:0;--mark-radius:0}.family-2 .scene{border:15px solid transparent;border-image:repeating-linear-gradient(135deg,#bd4a35 0 18px,#faf5e9 18px 36px,#2a5578 36px 54px,#faf5e9 54px 72px) 15}.family-2 .scene-copy{margin-bottom:60px}.family-2 .scene-copy h1,.family-2 .form-intro h2{font-family:'Noto Serif SC',serif;font-weight:600}.family-2 .scene-art{width:56%;height:54%;right:4%;top:17%}.postmark{width:154px;height:154px;border:3px dashed #b64c37;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-13deg);font-family:'Noto Serif SC',serif;font-size:26px;line-height:1.15;text-align:center;color:#b64c37}.postmark small{font-family:'Noto Sans SC',sans-serif;font-size:10px;margin-top:6px}.scribble{position:absolute;right:0;top:36%;font-family:'Noto Serif SC',serif;font-size:clamp(17px,2vw,28px);line-height:1.6;transform:rotate(-7deg)}.stamp{position:absolute;right:5%;bottom:5%;width:100px;height:120px;border:8px dotted #b24a36;display:grid;place-items:center;font-size:52px;color:#b24a36;transform:rotate(9deg)}.family-2 .login-side{border-left:1px dashed #b8aaa0}.family-2 .submit{box-shadow:4px 4px 0 #173952}.family-2 .brand-mark{border:2px solid #173952;background:transparent;color:#173952}
/* Brutalist: hard lines, yellow blocks, compressed type. */
.family-3{--paper:#f0f0ed;--scene:#f4d432;--ink:#0b0b0a;--scene-ink:#090909;--muted:#525252;--accent:#0b0b0a;--line:#151515;--field:#f8f8f5;--radius:0;--mark-radius:0}.family-3 .scene{padding:32px;border-right:7px solid #0a0a0a}.family-3 .scene-copy{margin-bottom:30px}.family-3 .scene-copy h1{font-size:clamp(48px,6.7vw,110px);font-weight:900;line-height:.94;letter-spacing:-.095em}.family-3 .scene-copy p{border-top:4px solid #111;padding-top:13px;font-weight:700}.family-3 .scene-art{top:15%;right:-2%;width:55%}.brutalist-art strong{font-size:clamp(62px,8vw,130px);line-height:.86;display:block;letter-spacing:-.13em;opacity:.1;transform:rotate(-9deg)}.brutalist-art span{display:block;margin-top:40px;font-size:11px;font-weight:900;letter-spacing:.08em}.barcode{height:53px;width:170px;background:repeating-linear-gradient(90deg,#111 0 3px,transparent 3px 6px,#111 6px 8px,transparent 8px 13px);margin-left:auto}.family-3 .brand-mark{border:3px solid #000}.family-3 .form-intro h2{font-weight:900}.family-3 .login-form>input,.family-3 .password-row input{border-width:2px}.family-3 .submit{box-shadow:5px 5px 0 #e7c92e}.family-3 .edition{border:2px solid #111;padding:4px 7px}
/* Warehouse illustration: friendly shapes and tangible boxes. */
.family-4{--paper:#fffaf0;--scene:#dce8d7;--ink:#214743;--scene-ink:#214743;--muted:#648079;--accent:#2d766a;--line:#b9cec1;--field:#fffdf7;--radius:16px;--button-radius:14px;--mark-radius:14px}.family-4 .scene{border-radius:0 42px 42px 0}.family-4 .scene-copy{margin-bottom:50px}.family-4 .scene-copy h1{font-family:'Noto Serif SC',serif;font-weight:700;letter-spacing:-.04em}.family-4 .scene-art{width:55%;height:55%;top:12%;right:3%}.rack{position:absolute;right:6%;top:6%;width:80%;height:78%;background:repeating-linear-gradient(0deg,transparent 0 27%,#355f57 27% 30%,transparent 30% 33%);border-left:8px solid #355f57;border-right:8px solid #355f57;transform:skewY(-5deg)}.rack .box{position:absolute;width:25%;height:18%;background:#d5a56f;border:2px solid #976f4d;border-radius:4px;box-shadow:inset -8px 0 #b77e4e}.b1{left:5%;top:6%}.b2{left:37%;top:6%;background:#e7c198!important}.b3{left:68%;top:6%}.b4{left:10%;top:38%}.b5{left:44%;top:38%;background:#dcb488!important}.b6{left:67%;top:69%}.forklift{position:absolute;left:4%;bottom:4%;font-size:75px;line-height:1;color:#e3994e;transform:rotate(-4deg)}.forklift small{display:block;font-size:15px;color:#2f5b53;letter-spacing:22px}.family-4 .brand-mark{transform:rotate(-8deg)}.family-4 .submit{box-shadow:0 10px 20px #2d766a22}
/* Cartography: woven route lines and geographic precision. */
.family-5{--paper:#f0f4f1;--scene:#173e48;--ink:#183944;--scene-ink:#edf7f5;--muted:#658087;--accent:#207d83;--line:#b7c9c9;--field:#fff;--radius:4px;--mark-radius:50%}.family-5 .scene{background-image:radial-gradient(#7ab0af55 1px,transparent 1px);background-size:20px 20px}.family-5 .scene-copy{margin-bottom:55px}.family-5 .scene-copy h1{font-family:'Noto Serif SC',serif;font-weight:600}.family-5 .scene-art{right:0;top:15%;width:84%;height:64%}.cartography-art svg{width:100%;height:100%;overflow:visible}.cartography-art path{fill:none;stroke:#8ae1d0;stroke-width:2;stroke-dasharray:7 6}.cartography-art circle{fill:#eec477;stroke:#fff;stroke-width:2}.coordinate{position:absolute;right:5%;bottom:0;font-size:12px;line-height:1.8;text-align:right;letter-spacing:.1em}.family-5 .scene-top,.family-5 .scene-bottom{border-bottom:1px solid #ffffff66;padding-bottom:9px}.family-5 .scene-bottom{border:0;border-top:1px solid #ffffff66;padding-top:9px}.family-5 .submit{letter-spacing:.2em}
/* Commerce: floating product labels and shop-window rhythm. */
.family-6{--paper:#fffaf8;--scene:#f6dadd;--ink:#47354b;--scene-ink:#46344b;--muted:#8c7080;--accent:#a94e70;--line:#e1bdc8;--field:#fff;--radius:22px;--button-radius:100px;--mark-radius:50%}.family-6 .scene{border-radius:0 0 90px 0}.family-6 .scene-copy{margin-bottom:55px}.family-6 .scene-copy h1{font-family:'Noto Serif SC',serif;font-weight:700}.family-6 .scene-art{right:7%;top:14%;width:54%;height:51%}.product{position:absolute;width:34%;height:50%;border-radius:120px 120px 12px 12px;background:#f7b8a9;border:3px solid #50314a;box-shadow:10px 12px 0 #b9758755;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:65px;color:#703f65;transform:rotate(-11deg)}.product small{font-size:10px;letter-spacing:.1em;color:#583747;font-weight:700}.p1{left:3%;top:4%}.p2{left:39%;top:24%;background:#d9b6de;transform:rotate(8deg)}.p3{right:0;bottom:-10%;background:#f4da9b;transform:rotate(17deg)}.family-6 .brand-mark{font-size:19px}.family-6 .login-form>input,.family-6 .password-row input{height:54px}.family-6 .submit{height:54px}
/* Heritage: warm type, gold rules, arched emblem. */
.family-7{--paper:#f8f2e8;--scene:#3a202b;--ink:#3c2933;--scene-ink:#f6e9dc;--muted:#8d777b;--accent:#622f42;--line:#cbbeb1;--field:#fffaf2;--radius:0;--mark-radius:50%}.family-7 .scene{border:13px solid #3a202b;outline:1px solid #b6a279;outline-offset:-27px}.family-7 .scene-copy{margin-bottom:60px;text-align:center;max-width:100%}.family-7 .scene-copy h1{font-family:'Noto Serif SC',serif;font-weight:500;letter-spacing:.01em}.family-7 .scene-copy p{margin:auto}.family-7 .scene-art{top:13%;left:50%;transform:translateX(-50%);width:240px}.arch{border:2px solid #d5bd81;width:230px;height:280px;border-radius:120px 120px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e2c88d}.arch span{font-size:85px}.arch small{font-family:'Noto Serif SC',serif;font-size:12px}.filigree{text-align:center;margin-top:15px;font-size:11px;letter-spacing:.18em;color:#dbc697}.family-7 .brand-mark{border:1px solid #d2aa74;background:transparent;color:#713949}.family-7 .form-intro h2{font-family:'Noto Serif SC',serif;font-weight:500}.family-7 .submit{border:1px solid #b68c63}.family-7 .login-form>input,.family-7 .password-row input{border-bottom:2px solid #7e5c61;border-top:0;border-left:0;border-right:0;padding-left:0;background:transparent}
/* Terminal: monochrome lines and green-on-black output. */
.family-8{--paper:#101715;--scene:#0b1110;--ink:#d5f8d7;--scene-ink:#c1f4c4;--muted:#7fa986;--accent:#9bf697;--accent-text:#0c150d;--line:#3b6843;--field:#0b1e11;--placeholder:#67906d;--radius:0;--mark-radius:0;--focus:#a7ffa3;font-family:Consolas,'Noto Sans SC',monospace}.family-8 .scene{background-image:repeating-linear-gradient(0deg,#2c563013 0 1px,transparent 1px 4px)}.family-8 .scene-copy{margin-bottom:55px}.family-8 .scene-copy h1{font-family:Consolas,'Noto Sans SC',monospace;font-weight:700}.family-8 .scene-top,.family-8 .scene-bottom{border-bottom:1px dashed #58925e;padding-bottom:10px}.family-8 .scene-art{top:22%;right:5%;width:73%}.terminal-art pre{border:1px solid #8edc95;padding:24px;color:#93e59a;font:clamp(12px,1.2vw,18px)/1.8 Consolas,'Noto Sans SC',monospace;box-shadow:10px 10px 0 #185325}.family-8 .brand-mark{border:1px solid #91d88d;background:transparent;color:#91d88d}.family-8 .login-side{border-left:1px dashed #3a6c41}.family-8 .error{background:#30201c;color:#ffd4c5;border-color:#ff9c83}.family-8 .submit{font-family:inherit}
/* Zen: ink-paper restraint and horizon. */
.family-9{--paper:#fafaf7;--scene:#f0f1ec;--ink:#202d32;--scene-ink:#263b42;--muted:#7b8785;--accent:#283f45;--line:#c9d0ca;--field:#fff;--radius:3px;--mark-radius:50%}.family-9 .scene-copy{margin-bottom:70px}.family-9 .scene-copy h1{font-family:'Noto Serif SC',serif;font-weight:500;letter-spacing:.07em;line-height:1.45}.family-9 .scene-copy p{font-family:'Noto Serif SC',serif;letter-spacing:.1em}.family-9 .scene-art{right:5%;top:16%;width:75%;height:58%;overflow:hidden}.zen-art .sun{position:absolute;width:150px;height:150px;border-radius:50%;background:#d6a79e;right:21%;top:0;filter:blur(.2px)}.mountain{position:absolute;bottom:8%;left:-10%;width:120%;height:55%;clip-path:polygon(0 100%,29% 36%,45% 65%,65% 12%,100% 100%);background:#9aa9a8;opacity:.48}.m2{bottom:-10%;left:5%;height:52%;background:#425e63;opacity:.58;transform:scaleX(-1)}.boat{position:absolute;bottom:14%;right:22%;font-size:18px;color:#2b464c;white-space:nowrap}.family-9 .scene-top,.family-9 .scene-bottom{font-family:'Noto Serif SC',serif}.family-9 .brand-mark{background:transparent;border:1px solid #2b464c;color:#2b464c}.family-9 .submit{font-family:'Noto Serif SC',serif;letter-spacing:.3em}
/* Distinct pacing and arrangements for each of the five compositions. */
.variant-1 .form-intro h2{font-size:clamp(34px,3.4vw,50px)}.variant-1 .scene-copy h1{max-width:560px}.variant-2 .login-side{border-radius:0}.variant-2 .scene-copy h1{max-width:690px}.variant-3 .scene-copy p{max-width:610px}.variant-3 .form-intro h2{font-size:34px}.variant-4 .form-wrap{max-width:440px}.variant-4 .form-intro h2{font-size:48px}
/* Collection gallery */
.gallery-page{background:#f5f5f2;color:#182126}.gallery-header{max-width:1500px;margin:auto;padding:75px 48px 50px;display:flex;justify-content:space-between;gap:30px;align-items:end}.gallery-header p{font-size:12px;letter-spacing:.18em;color:#68747a;margin:0 0 25px}.gallery-header h1{font-size:clamp(38px,5vw,72px);line-height:1.13;letter-spacing:-.05em;margin:0 0 22px}.gallery-header span{font-size:15px;color:#536168}.gallery-count{font-size:116px;font-weight:800;line-height:1;color:#cad3d0;letter-spacing:-.1em;white-space:nowrap}.gallery-count span{display:block;font-size:13px;color:#596660;letter-spacing:.08em;text-align:right;margin-top:10px}.gallery-filters{max-width:1500px;margin:auto;padding:0 48px 28px;display:flex;gap:8px;overflow:auto;scrollbar-width:thin}.gallery-filters button{white-space:nowrap;border:1px solid #cdd7d2;background:transparent;border-radius:40px;padding:9px 16px;font-size:12px;color:#415159;transition:.2s}.gallery-filters button:hover,.gallery-filters button.active{background:#1d2f34;color:#fff;border-color:#1d2f34}.sample-grid{max-width:1500px;margin:auto;padding:0 48px 80px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.sample-card{text-decoration:none;background:#fff;border:1px solid #e0e6e1;transition:transform .2s,box-shadow .2s;min-width:0}.sample-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px #142f291c}.sample-card[hidden]{display:none}.sample-preview{height:208px;background:var(--scene);color:var(--scene-ink);padding:18px;position:relative;overflow:hidden}.sample-preview:after{content:'';position:absolute;inset:0 auto 0 54%;width:46%;background:var(--paper);opacity:.97}.sample-card.variant-1 .sample-preview:after{left:0}.sample-card.variant-2 .sample-preview:after{left:64%;width:36%}.sample-card.variant-3 .sample-preview:after{inset:auto 0 0;width:100%;height:38%}.sample-card.variant-4 .sample-preview:after{left:0;width:28%}.mini-brand{position:relative;z-index:1;font-size:14px;font-weight:800}.sample-card.variant-1 .mini-brand,.sample-card.variant-4 .mini-brand{margin-left:45%;display:block}.mini-shape{position:absolute;width:135px;height:135px;border:1px solid currentColor;border-radius:50%;left:8%;top:32%;opacity:.35}.family-3 .mini-shape,.family-8 .mini-shape{border-radius:0;transform:rotate(20deg)}.family-2 .mini-shape{border-style:dashed;border-width:5px}.family-4 .mini-shape{border-radius:8px;transform:skewY(-12deg)}.family-6 .mini-shape{border-radius:70px 70px 12px 12px;background:currentColor;opacity:.18}.mini-form{position:absolute;right:7%;top:29%;z-index:2;width:32%;font-size:12px;font-weight:800;color:var(--ink)}.sample-card.variant-1 .mini-form{right:auto;left:7%}.sample-card.variant-3 .mini-form{top:68%;right:7%;width:38%}.sample-card.variant-4 .mini-form{right:15%;width:35%}.mini-form i{display:block;height:9px;border:1px solid var(--line);margin-top:10px}.mini-form b{display:block;background:var(--accent);color:var(--accent-text,#fff);margin-top:10px;padding:5px;text-align:center;font-size:10px}.sample-info{padding:17px 18px 20px;display:flex;flex-direction:column;gap:6px}.sample-info span{font-size:10px;color:#72807c}.sample-info strong{font-size:17px;color:#172528}.sample-info small{font-size:11px;color:#74817d}.gallery-footer{padding:24px;text-align:center;border-top:1px solid #dfe5e1;color:#7a8580;font-size:12px}
@media(max-width:1100px){.sample-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.scene-copy h1{font-size:clamp(34px,5vw,60px)}.login-side{padding-left:36px;padding-right:36px}.scene{padding:30px}.scene-art{opacity:.8}.variant-3 .login-side{gap:20px}.variant-3 .scene-art{opacity:.5}}
@media(max-width:760px){.login-shell,.variant-1 .login-shell,.variant-4 .login-shell{display:flex;flex-direction:column}.scene,.variant-1 .scene,.variant-4 .scene{order:0;min-height:250px;height:31vh;padding:20px 24px;border-radius:0}.scene-copy,.variant-1 .scene-copy{margin-top:auto;margin-bottom:12px}.scene-copy h1,.variant-4 .scene-copy h1{font-size:clamp(29px,7vw,45px);line-height:1.18;writing-mode:initial;max-height:none;max-width:380px}.scene-copy p{font-size:12px;max-width:330px}.scene-art{right:0;top:5%;transform:scale(.55);transform-origin:top right;opacity:.35}.scene-bottom{display:none}.login-side,.variant-1 .login-side,.variant-4 .login-side{order:1;min-height:69vh;padding:23px 24px 18px}.brand strong{font-size:16px}.form-wrap{margin:40px auto}.form-intro h2,.variant-4 .form-intro h2{font-size:32px}.variant-2 .login-shell{display:flex;flex-direction:column}.variant-2 .scene{position:relative;inset:auto;min-height:250px;height:31vh;padding:20px 24px}.variant-2 .scene-copy{margin-top:auto}.variant-2 .login-side{width:100%;margin:0;min-height:69vh;box-shadow:none}.variant-3 .scene{min-height:250px;height:31vh;padding:20px 24px}.variant-3 .scene-copy{margin:30px 0 0}.variant-3 .scene-copy h1{font-size:clamp(29px,7vw,45px)}.variant-3 .login-side{display:flex;min-height:69vh;padding:23px 24px 18px}.variant-3 .form-wrap{margin:40px auto;max-width:410px}.variant-3 .legal{display:flex}.variant-4 .scene-copy p{display:block}.variant-4 .scene-top span:last-child{display:none}.variant-4 .scene-art{display:none}.family-2 .scene{border-width:8px}.family-7 .scene{border-width:7px}.terminal-art pre{font-size:11px}.gallery-header{padding:42px 22px 35px}.gallery-count{font-size:70px}.gallery-filters{padding:0 22px 22px}.sample-grid{padding:0 22px 60px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sample-preview{height:170px}.mini-form{font-size:9px}.sample-info{padding:13px}.sample-info strong{font-size:14px}}
@media(max-width:480px){.scene{min-height:225px!important;height:27vh!important}.scene-copy h1{font-size:28px!important}.scene-copy p{display:none}.login-side{min-height:73vh!important}.form-wrap{margin:32px auto}.edition{margin-bottom:15px}.form-intro h2{margin-bottom:8px}.form-intro p{margin-bottom:23px}.legal{font-size:10px}.gallery-header{align-items:start}.gallery-header h1{font-size:37px}.gallery-count{font-size:54px}.sample-grid{grid-template-columns:1fr}.sample-preview{height:210px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Final layout refinements from rendered review. */
.variant-2 .scene{inset:0 auto 0 0;width:57%;padding-right:48px}
.variant-2 .scene-art{right:4%;bottom:12%}
.family-3.variant-3 .scene-copy h1{font-size:clamp(54px,5.3vw,78px);max-width:100%}
.family-6.variant-1 .scene-art{top:31%;right:3%;transform:scale(.78);transform-origin:top right}
.error{color:#97271e;background:#fff0ec}
.family-1 .error,.family-8 .error{color:#ffe2d9;background:#4c2224}
@media(max-width:760px){.variant-2 .scene{width:100%;padding-right:24px}.variant-4 .scene-bottom{display:none}.family-6.variant-1 .scene-art{top:5%;transform:scale(.45)}}
.family-2.variant-2 .scene-art{top:37%;right:1%;width:55%;height:50%}
.error{font-weight:600;border-left-width:4px}
.sample-preview img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center}
@media(max-width:760px){.family-2.variant-2 .scene-art{top:5%;right:0;width:55%;height:55%}}