body.retro-login{--ink:#202b27;--muted:#30483b;--green:#222;--accent:#222;--accent-ink:#fff;--line:#335e47;--line-strong:#335e47;--danger:#8c1737;--page:#6cbc8c;color:#202b27;font-family:Arial,Helvetica,sans-serif}
body.retro-login:has(.brand-story){display:grid;grid-template-columns:minmax(0,740px) minmax(300px,350px);justify-content:center;align-items:start;gap:54px;min-height:100dvh;padding:120px 48px 60px;background:#6cbc8c;position:relative;isolation:isolate}
.login-masthead{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 48px}.login-wordmark{font-size:27px;letter-spacing:-.06em;font-weight:600}.login-masthead>span{font:10px Consolas,monospace}.login-masthead button{font:11px Consolas,monospace;border:1px solid #244a35;border-radius:0;min-height:28px;padding:5px 8px;color:#202b27}
.retro-login .brand-story{display:block;width:100%;min-height:0;padding:0;background:none;overflow:visible;color:#202b27}.perspective-art{width:100%;aspect-ratio:1.6;background:#f0c2ce;border:5px solid #ca5bac;position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center}.perspective-art:before,.perspective-art:after{content:'';position:absolute;width:80%;height:90%;background-image:radial-gradient(#523e4b 1.2px,transparent 1.7px);background-size:7px 7px;opacity:.3;transform:rotate(-25deg);mask-image:linear-gradient(#000,transparent)}.perspective-art:before{right:-15%;top:-30%}.perspective-art:after{left:-30%;bottom:-55%;transform:rotate(155deg)}.perspective-art svg{width:66%;height:90%;position:relative;z-index:1;color:#463c3f}.art-rays{transform-origin:center;animation:perspective-turn 60s linear infinite}.art-iris{animation:perspective-look 9s ease-in-out infinite}.retro-login .story-label{display:inline-block;margin:20px 0 0;padding:4px 6px;border:0;background:#ca5bac;color:#fff0f7;font:14px Consolas,monospace;letter-spacing:0}.retro-login .brand-story h2{font:500 clamp(34px,3.4vw,54px)/.98 Arial,sans-serif;letter-spacing:-.055em;color:#c44da3;margin-top:28px}.retro-login .brand-story>p:not(.story-label):not(.story-bottom){margin-top:18px;font-size:15px;line-height:1.6}.retro-login .story-bottom{padding:0;margin-top:30px;font:10px Consolas,monospace}
body.retro-login:has(.brand-story)>.login-card{align-self:start;justify-self:stretch;width:100%;max-width:350px;padding:4px;margin:0;background:#f1d5de;border:1px solid #273b30;box-shadow:inset 2px 2px #fff2f6,inset -2px -2px #b59aa5,8px 8px 0 #244a3530;transform:translate(var(--window-x,0px),var(--window-y,0px));position:relative;z-index:5}.login-card.is-dragging{box-shadow:inset 2px 2px #fff2f6,14px 18px 0 #244a3530}.login-titlebar{display:flex;align-items:stretch;background:#222;color:#f7eaf0}.login-titlebar button{min-height:32px;border:0;border-radius:0;background:transparent;color:inherit;padding:6px 8px;font:11px Consolas,monospace}.login-titlebar #window-drag{display:flex;justify-content:space-between;gap:12px;flex:1;text-align:left;cursor:grab;touch-action:none;user-select:none}.login-card.is-dragging #window-drag{cursor:grabbing}.login-titlebar #window-reset{border-left:1px solid #777;font-size:18px}.login-titlebar button:hover{background:#3b3b3b}.login-window-body{padding:27px 22px}.retro-login .eyebrow{display:inline-block;background:#222;color:#f1d5de;padding:2px 4px;font:10px Consolas,monospace;letter-spacing:0;margin-bottom:12px}.retro-login .login-card h1{font:500 37px/1.02 Arial,sans-serif;letter-spacing:-.055em}.retro-login .login-card .subtitle{color:#3c463f;margin-top:12px;font-size:14px;line-height:1.5}.retro-login .login-form{margin-top:26px;gap:18px}.retro-login label{font:12px Consolas,monospace;color:#303b34}.retro-login input{padding:11px;background:#faeef2;border:1px solid #65756a;box-shadow:inset 2px 2px #d8c4cb;border-radius:0;font:16px Arial,sans-serif;color:#222}.retro-login button.primary{border:1px solid #222;border-radius:0;background:#222;color:#fff0f7;box-shadow:3px 3px #ca5bac;min-height:44px}.retro-login button.primary:hover{background:#44323f}.retro-login button.primary:disabled{opacity:.5}.retro-login .login-note{font-size:12px;color:#3c463f;line-height:1.6;border-top:1px dashed #7b8f81;padding-top:16px;margin-top:20px}.retro-login .auth-status{font-size:12px;line-height:1.5;color:#33483a}.retro-login .auth-status.error{color:#8c1737}.retro-login .login-back{display:inline-block;margin-top:20px;color:#222;font:12px Consolas,monospace}.login-window-footer{display:flex;justify-content:space-between;border-top:1px solid #a68f99;padding:8px 6px;font:8px Consolas,monospace;gap:8px}.retro-login :where(a,button,input):focus-visible{outline:3px solid #5c2763;outline-offset:3px}.retro-login.motion-paused .perspective-art *{animation-play-state:paused}[hidden]{display:none!important}@keyframes perspective-turn{to{transform:rotate(360deg)}}@keyframes perspective-look{0%,40%,100%{transform:translateX(0)}50%,65%{transform:translateX(9px)}80%,90%{transform:translateX(-9px)}}@media(prefers-reduced-motion:reduce){.perspective-art *{animation:none!important}}
@media(max-width:800px){body.retro-login:has(.brand-story){grid-template-columns:minmax(0,1fr);padding:90px 24px 40px;gap:34px}.login-masthead{padding:24px}.login-masthead>span{display:none}.retro-login .brand-story{min-height:0;padding:0}.perspective-art{max-height:300px}.retro-login .brand-story h2{font-size:38px;margin-top:18px}.retro-login .brand-story>p:not(.story-label):not(.story-bottom){font-size:14px}.retro-login .story-bottom{display:none}body.retro-login:has(.brand-story)>.login-card{width:100%;max-width:420px;justify-self:center;margin:0}.login-window-body{padding:25px 22px}}

/* Original Omneric catalog artwork; the reference informs the visual treatment. */
.commerce-art{display:block}.catalog-sheet{position:absolute;width:65%;background:#f8e9ee;border:1px solid #463c3f;padding:4px;box-shadow:5px 6px 0 #463c3f25;z-index:1;font-family:Consolas,monospace;color:#463c3f}.sheet-back{top:10%;left:7%;transform:rotate(-6deg)}.sheet-front{right:6%;bottom:12%;transform:rotate(4deg);animation:catalog-float 9s ease-in-out infinite}.sheet-bar{background:#463c3f;color:#f8e9ee;padding:6px 8px;font-size:10px;letter-spacing:.02em}.sheet-content{padding:16px}.sheet-label{font-size:9px;letter-spacing:.06em}.catalog-row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #cbb2bd;padding:10px 0;font-size:10px}.catalog-row:first-of-type{margin-top:16px}.catalog-row b{font-weight:400}.product-preview{display:flex;align-items:center;gap:26px;margin:20px 0}.product-preview strong{font:500 clamp(19px,2vw,30px)/1.05 Arial,sans-serif;letter-spacing:-.04em}.catalog-bottle{width:42px;height:75px;flex-shrink:0;border:2px solid #463c3f;border-radius:10px 10px 5px 5px;background:#83b798;position:relative;margin-left:12px;box-shadow:inset -8px 0 #6a9a7e}.catalog-bottle:before{content:'';position:absolute;width:24px;height:11px;top:-11px;left:7px;background:#463c3f}.catalog-bottle:after{content:'O';position:absolute;top:22px;left:10px;font:24px Georgia;color:#f8e9ee}.copy-line{width:110px;max-width:100%;height:3px;background:#cbb2bd;margin-top:12px}.copy-line.short{width:75px;margin-top:5px}.review-stamp{font-size:9px;background:#dcb2cd;padding:7px}.art-caption{position:absolute;bottom:4%;left:5%;font:8px Consolas,monospace;letter-spacing:.08em;z-index:2}.retro-login.motion-paused .catalog-sheet{animation-play-state:paused}@keyframes catalog-float{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-9px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){.catalog-sheet{animation:none!important}}@media(max-width:800px){.commerce-art{min-height:290px;aspect-ratio:1.5}.catalog-sheet{width:72%}.sheet-content{padding:10px}.sheet-bar{font-size:8px}.sheet-label{font-size:7px}.catalog-row{font-size:8px;padding:7px 0}.product-preview{gap:14px;margin:15px 0}.product-preview strong{font-size:21px}.sheet-back{left:4%;top:8%}.sheet-front{right:4%;bottom:12%}.review-stamp{font-size:7px}.catalog-bottle{width:35px;height:61px}.catalog-bottle:before{left:4px}.catalog-bottle:after{left:7px;top:17px}}
/* Shared homepage product-page demo, beside the sign-in window. */
.retro-login .login-demo{display:block;margin:0;zoom:1}
.retro-login .login-demo .demo-window{width:100%;margin:0}
.retro-login .brand-story .product-demo-heading h2{font:500 24px/1.05 Arial,sans-serif;letter-spacing:-.045em;color:#222;margin:8px 0 0}
.retro-login .login-demo .titlebar button{min-height:32px}
.retro-login .login-demo .preview-title{font-weight:500;letter-spacing:-.045em}
@media(min-width:801px) and (max-width:1100px){body.retro-login:has(.brand-story){padding-inline:28px;gap:28px;grid-template-columns:minmax(0,1fr) 310px}}

.login-masthead>span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
