:root {
  --forest:#173c32; --forest-deep:#123128; --lime:#d7e8ab; --ivory:#f8f8f1;
  --ink:#203b31; --muted:#596d61; --white:#ffffff; --line:#d6dfd5;
  --error:#9d352d; --error-bg:#fff1ee; --focus:#2a7953;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ivory); font-size:15px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
[hidden] { display:none !important; }
svg { display:block; flex-shrink:0; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:10; padding:12px 18px; background:white; border-radius:8px; }
.skip-link:focus { top:16px; }
.login-layout { min-height:100vh; min-height:100svh; display:grid; grid-template-columns:1.08fr 1fr; }
.welcome-panel { position:relative; display:flex; flex-direction:column; overflow:hidden; padding:44px clamp(32px,4.8vw,80px) 28px; color:var(--white); background:radial-gradient(ellipse at 80% 65%,#2c5c44 0%,transparent 58%),var(--forest); }
.brand { position:relative; z-index:1; display:inline-flex; align-items:center; align-self:flex-start; gap:11px; font-size:33px; font-weight:720; letter-spacing:-1.8px; line-height:1; }
.brand>svg { width:36px; height:36px; color:#c7e0a6; }
.brand-dot { color:var(--lime); }
.brand small { display:block; margin-top:10px; font-size:8px; font-weight:500; letter-spacing:1.7px; color:#cee0d3; }
.welcome-copy { position:relative; z-index:1; margin-top:clamp(52px,7vh,88px); }
.eyebrow { margin:0 0 16px; font-size:10px; letter-spacing:2.3px; font-weight:600; color:#d1e1c3; }
h1 { margin:0; font-size:clamp(33px,3.5vw,53px); line-height:1.15; font-weight:510; letter-spacing:-1.8px; }
h1 em { color:var(--lime); font-weight:500; font-family:Georgia,"Times New Roman",serif; }
.welcome-copy>p:last-child { margin:20px 0 0; color:#d0e0d4; font-size:14px; line-height:1.8; }
.artwork { position:relative; flex:1; min-height:340px; margin:0 -20px; perspective:1100px; isolation:isolate; }
.artwork-grid { position:absolute; inset:12% -20% 7%; opacity:.18; background-image:linear-gradient(#b7d3b9 1px,transparent 1px),linear-gradient(90deg,#b7d3b9 1px,transparent 1px); background-size:48px 48px; transform:rotateX(64deg) rotateZ(-24deg); mask-image:radial-gradient(ellipse,black 5%,transparent 68%); }
.scene { position:absolute; left:50%; top:45%; width:360px; height:290px; margin:-145px 0 0 -180px; transform:rotateX(-4deg) rotateY(-9deg); transform-style:preserve-3d; will-change:transform; }
.soft-orb { position:absolute; left:235px; top:24px; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#eef8c7 0%,#acc67b 32%,#5c8150 70%,#365b40 100%); box-shadow:inset -12px -14px 20px #183a3033,14px 25px 45px #09291a4a; transform:translateZ(25px); }
.small-orb { position:absolute; left:-3px; top:214px; width:33px; height:33px; border-radius:50%; background:radial-gradient(circle at 30% 20%,#f3d6ad,#c79862 70%,#946c46); box-shadow:8px 10px 16px #0b2b223d; transform:translateZ(70px); }
.card-shadow { position:absolute; left:55px; top:285px; width:275px; height:60px; border-radius:50%; background:#0527198c; filter:blur(20px); transform:rotate(-9deg) translateZ(-50px); }
.task-stack { position:absolute; left:58px; top:45px; width:230px; height:272px; border-radius:19px; border:1px solid #ffffff58; }
.stack-back { background:#99b88b; transform:translate3d(9px,15px,-28px) rotateZ(-15deg); box-shadow:5px 13px 20px #0e2c2421; }
.stack-mid { background:#d9e5c7; transform:translate3d(-8px,9px,-12px) rotateZ(-5deg); }
.stack-front { padding:21px; background:linear-gradient(125deg,#ffffff,#f2f5e8); color:#294d36; transform:translateZ(22px) rotateZ(-10deg); box-shadow:1px 2px 0 #fff9,inset -2px -3px 1px #bdd0ab,10px 20px 35px #0c2d2429; }
.art-card-top { display:flex; justify-content:space-between; align-items:center; font-size:7px; letter-spacing:1.2px; font-weight:650; }
.art-card-top svg { width:17px; height:17px; fill:none; stroke:#557543; stroke-width:1.5; }
.art-card-title { margin:12px 0 18px; font-size:22px; font-weight:600; letter-spacing:-.7px; line-height:1.17; }
.art-task { display:flex; gap:9px; align-items:center; margin:11px 0; }
.art-check { width:15px; height:15px; border:1px solid #adc2a4; border-radius:4px; }
.art-check.done { color:white; background:#4e7542; border-color:#4e7542; }
.art-check svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }
.art-line { width:112px; height:5px; background:#dbe4d3; border-radius:6px; }
.line-complete { width:125px; background:#9db18b; }
.line-short { width:85px; }
.art-card-foot { display:flex; gap:7px; align-items:center; border-top:1px solid #d9e2cf; margin-top:15px; padding-top:10px; font-size:7px; color:#4c6844; }
.art-avatar { display:grid; place-items:center; width:18px; height:18px; background:#dfeacb; border-radius:50%; font-size:8px; }
.check-tile { position:absolute; left:266px; top:215px; display:grid; place-items:center; width:72px; height:72px; border:1px solid #e6f1c9; border-radius:20px; background:linear-gradient(130deg,#dfedb8,#bdd78b); transform:translateZ(70px) rotateZ(12deg); box-shadow:4px 6px 0 #80a367,13px 20px 25px #0c2b2459; }
.check-tile svg { width:44px; height:44px; fill:none; stroke:#355738; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.floating-tag { position:absolute; left:-17px; top:52px; z-index:3; display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid #b9d0b658; border-radius:20px; background:#254e3deb; box-shadow:0 8px 18px #10322540; color:#e0edcf; font-size:9px; letter-spacing:.2px; transform:translateZ(90px) rotateZ(-6deg); }
.tag-dot { width:5px; height:5px; border-radius:50%; background:#ccdea0; }
.orbit { position:absolute; width:400px; height:200px; top:20%; left:50%; margin-left:-200px; border:1px solid #b1cd9f24; border-radius:50%; transform:rotate(-28deg); }
.orbit-two { width:450px; height:275px; margin-left:-225px; transform:rotate(-28deg); border-color:#b1cd9f12; }
.art-caption { position:absolute; bottom:0; width:100%; text-align:center; color:#cadcc8; font-size:8px; letter-spacing:2px; }
.welcome-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:24px; margin-top:18px; border-top:1px solid #72907a54; color:#d0dfd2; }
.privacy-mark { display:flex; gap:7px; align-items:center; font-size:10px; }
.privacy-mark svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; }
.edition { font-size:8px; letter-spacing:1.3px; white-space:nowrap; }
.form-panel { position:relative; display:flex; flex-direction:column; justify-content:center; padding:72px clamp(30px,6vw,100px) 100px; background:var(--ivory); }
.form-wrap { width:100%; max-width:390px; margin:auto; }
.form-kicker { display:flex; gap:8px; align-items:center; font-size:9px; font-weight:650; letter-spacing:1.5px; color:#596c57; }
.form-kicker>span { width:6px; height:6px; border-radius:50%; background:#70894f; }
h2 { margin:17px 0 0; font-size:clamp(26px,2.4vw,34px); line-height:1.25; letter-spacing:-1px; font-weight:600; }
.form-intro { color:var(--muted); font-size:13px; margin:12px 0 32px; }
.field { margin-bottom:20px; }
.field label { display:block; margin-bottom:8px; font-size:12px; font-weight:600; }
.input-wrap { display:flex; align-items:center; position:relative; }
.input-wrap>svg { position:absolute; left:16px; width:18px; height:18px; fill:none; stroke:#667d6c; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.input-wrap input { width:100%; min-width:0; min-height:54px; padding:14px 15px 14px 46px; border:1px solid #99ad9c; border-radius:10px; color:var(--ink); background:#fff; font-size:14px; transition:border-color .15s,box-shadow .15s; }
.input-wrap input::placeholder { color:#637366; opacity:1; font-size:13px; }
.input-wrap input:hover { border-color:#5d8065; }
.input-wrap input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-color:#2a7953; }
.input-wrap input[aria-invalid="true"] { border-color:var(--error); }
.password-wrap input { padding-right:56px; }
.password-toggle { position:absolute; right:5px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:7px; color:#46644f; background:transparent; }
.password-toggle:hover { background:#edf2e8; }
.password-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.password-toggle .eye-closed,.password-toggle[aria-pressed="true"] .eye-open { display:none; }
.password-toggle[aria-pressed="true"] .eye-closed { display:block; }
.field-error { color:var(--error); margin:6px 0 0; font-size:12px; }
.submit-button { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:54px; margin-top:28px; padding:14px 20px; color:#fff; background:var(--forest); border:1px solid var(--forest); border-radius:10px; font-size:14px; font-weight:600; box-shadow:0 4px 9px #173c3210; transition:background .15s,box-shadow .15s; }
.submit-button:hover:not(:disabled) { background:#24533e; box-shadow:0 5px 12px #173c3224; }
.submit-button:disabled { background:#345a47; }
.submit-arrow { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button-spinner { display:none; width:18px; height:18px; border:2px solid #ffffff55; border-top-color:white; border-radius:50%; animation:spin .8s linear infinite; }
form[aria-busy="true"] .button-spinner { display:block; }
form[aria-busy="true"] .submit-arrow { display:none; }
.form-status { min-height:21px; margin:9px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.form-note { display:flex; align-items:flex-start; justify-content:center; gap:8px; margin:24px 0 0; padding-top:23px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.8; }
.form-note svg { width:15px; height:15px; margin-top:3px; fill:none; stroke:currentColor; stroke-width:1.5; }
.form-message { border:1px solid #e4b8ae; border-radius:9px; padding:11px 13px; margin-bottom:21px; color:var(--error); background:var(--error-bg); font-size:12px; line-height:1.6; }
.form-message a { text-decoration:underline; text-underline-offset:3px; }
.form-footer { position:absolute; bottom:27px; left:clamp(30px,4vw,64px); right:clamp(30px,4vw,64px); display:flex; justify-content:space-between; gap:12px; font-size:10px; color:var(--muted); }
.noscript { position:fixed; inset:auto 12px 12px; padding:16px; background:var(--error-bg); color:var(--error); border:1px solid #e4b8ae; border-radius:8px; z-index:10; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (min-width:1500px) { .welcome-panel { padding-left:clamp(80px,8vw,150px); padding-right:clamp(80px,8vw,150px); } .form-wrap { max-width:410px; } .scene { scale:1.12; } }
@media (max-height:760px) and (min-width:901px) { .welcome-panel { padding-top:30px; padding-bottom:22px; } .welcome-copy { margin-top:40px; } h1 { font-size:37px; } .artwork { min-height:290px; } .scene { scale:.88; top:44%; } .welcome-footer { padding-top:15px; margin-top:14px; } .form-panel { padding-top:45px; padding-bottom:80px; } }
@media (max-width:1050px) { .welcome-panel { padding-left:30px; padding-right:30px; } .form-panel { padding-left:35px; padding-right:35px; } h1 { font-size:37px; } .scene { scale:.9; } .edition { display:none; } }
@media (max-width:760px) {
  .login-layout { grid-template-columns:1fr; }
  .welcome-panel { padding:25px 26px 28px; }
  .brand { font-size:28px; gap:9px; } .brand>svg { width:31px; height:31px; } .brand small { font-size:7px; margin-top:8px; }
  .welcome-copy { margin-top:32px; } .eyebrow { display:none; } h1 { font-size:34px; line-height:1.14; letter-spacing:-1.2px; } h1 br { display:none; }
  .welcome-copy>p:last-child { margin-top:13px; max-width:390px; font-size:12px; line-height:1.75; } .desktop-break { display:none; }
  .artwork,.welcome-footer { display:none; }
  .form-panel { padding:34px 26px 32px; justify-content:start; } .form-wrap { max-width:460px; margin:0 auto; }
  .form-kicker { font-size:8px; } h2 { margin-top:12px; font-size:27px; } .form-intro { margin-top:9px; margin-bottom:27px; }
  .field { margin-bottom:18px; } .input-wrap input { font-size:16px; } .submit-button { margin-top:24px; }
  .form-note { margin-top:18px; padding-top:20px; }
  .form-footer { position:static; width:100%; max-width:460px; margin:32px auto 0; font-size:9px; padding-bottom:env(safe-area-inset-bottom); }
}
@media (max-width:360px) { .welcome-panel { padding:24px 20px; } .form-panel { padding:30px 20px 24px; } h1 { font-size:30px; } h2 { font-size:25px; } .form-footer { flex-wrap:wrap; gap:5px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .scene { will-change:auto; } }
@media (pointer:coarse) { .scene { will-change:auto; } }
@media (forced-colors:active) { .submit-button { border:2px solid ButtonText; } .input-wrap input { border:1px solid CanvasText; } .artwork { display:none; } }