/* App styles on the Evergreen design system (design/evergreen/).
   Every colour, radius, shadow, spacing and timing comes from tokens.css.
   Component looks follow components/bundle.css; nothing here adds a new value. */

@font-face{font-family:"Inter";src:url("/vendor/inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html{min-height:100%}
body{min-height:100vh}
.app{min-height:100vh}
#shell{display:flex;align-items:flex-start;gap:var(--space-6);padding:var(--space-6)}
main{flex:1;min-width:0;max-width:1120px;margin:0 auto}
a{color:inherit}
.hide{display:none!important}

/* ---------- navigation: floating forest rail (desktop), tab bar (mobile) ---------- */
#nav{position:sticky;top:var(--space-6);flex:none;height:calc(100vh - 2 * var(--space-6))}
#nav .ev-rail{height:100%;overflow-y:auto}
#tabbar{position:fixed;left:0;right:0;bottom:var(--space-4);display:none;justify-content:center;z-index:10;padding:0 var(--space-3)}
@media(max-width:860px){
  #shell{display:block;padding:var(--space-4)}
  #nav{display:none}
  #tabbar{display:flex}
  main.withnav{padding-bottom:110px}
}

/* ---------- page header ---------- */
.topbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4);min-height:40px}
.topbar h1{flex:1 1 160px;min-width:0;margin:0;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .meta{font-size:12px;line-height:16px;color:var(--text-3)}
.topbar select{width:auto;max-width:240px}

/* ---------- card ---------- */
.card{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6);margin-bottom:var(--space-4);min-width:0}
@media(max-width:860px){.card{padding:var(--space-5)}}
h2{margin:0 0 var(--space-3);font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
h3{margin:0 0 var(--space-3);font-size:15px;line-height:22px;font-weight:600;color:var(--text)}
p{margin:0 0 var(--space-3)}
.mute{color:var(--text-2)}.small{font-size:12px;line-height:16px}
.meta{font-size:12px;line-height:16px;color:var(--text-3)}

/* ---------- buttons (pill) ---------- */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-full);border:1px solid var(--line);background:var(--surface);color:var(--text);font:500 13px/18px var(--font-sans);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) linear,box-shadow var(--dur-base) var(--ease-out)}
button:hover,.btn:hover{background:var(--sunken)}
button:active,.btn:active{transform:scale(.97)}
button.primary,.btn.primary{background:var(--forest);color:var(--on-forest);border-color:transparent;box-shadow:var(--shadow-card)}
button.primary:hover,.btn.primary:hover{background:var(--forest-hover)}
button.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
button.ghost:hover{background:var(--sunken);color:var(--text)}
button.danger{color:var(--danger)}
button.mini{min-height:32px;padding:0 var(--space-3);font-size:12px;line-height:16px}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* ---------- fields ---------- */
label{display:block;font:500 13px/18px var(--font-sans);color:var(--text-2);margin-bottom:6px}
.field{margin-bottom:var(--space-3);min-width:0}
input,select,textarea{width:100%;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;background:var(--sunken);color:var(--text);font:400 14px/20px var(--font-sans);
  transition:background-color var(--dur-fast) linear,border-color var(--dur-fast) linear,box-shadow var(--dur-base) var(--ease-out)}
textarea{padding:var(--space-3) var(--space-4);min-height:96px;resize:vertical}
select[multiple]{padding:var(--space-2);min-height:150px}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:focus,select:focus,textarea:focus{outline:none;background:var(--surface);border-color:var(--mint);box-shadow:var(--shadow-glow)}
.err{color:var(--danger);font-size:13px;line-height:18px;min-height:18px;margin:var(--space-2) 0}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- sign-in ---------- */
.login{max-width:380px;margin:9vh auto 0;text-align:center}
/* Company logos are drawn for a light background, so their tile stays white in dark mode too. */
.login .brandlogo{display:block;width:auto;max-width:240px;max-height:140px;margin:0 auto var(--space-4);object-fit:contain;background:#fff;border-radius:var(--radius-lg);padding:var(--space-3)}
.ev-rail-logo.has-img{height:auto;padding:0 var(--space-2) var(--space-4)}
.ev-rail-logo.has-img img{display:block;width:100%;height:auto;max-height:132px;object-fit:contain;background:#fff;border-radius:var(--radius-lg);padding:var(--space-3);box-sizing:border-box}
.conm{display:inline-flex;align-items:center;gap:var(--space-2)}
.minilogo{width:32px;height:32px;object-fit:contain;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line)}
.logoprev{display:grid;place-items:center;min-height:160px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);margin:var(--space-3) 0;padding:var(--space-4)}
.logoprev img{max-width:260px;max-height:150px;object-fit:contain}
.login .logo{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--space-1)}
.login input{margin:var(--space-2) 0;text-align:center}
.login input.pin{font-size:20px;letter-spacing:.4em;font-variant-numeric:tabular-nums}
.login button.primary{width:100%;margin-top:var(--space-2)}
.login .links{margin-top:var(--space-4);display:flex;justify-content:center;gap:var(--space-2);flex-wrap:wrap}
.qr{display:block;width:176px;height:176px;margin:var(--space-3) auto;border-radius:var(--radius-md);background:var(--surface);padding:var(--space-2)}
.secret{font:600 15px/22px var(--font-sans);letter-spacing:.08em;word-break:break-all;background:var(--sunken);border-radius:var(--radius-md);padding:var(--space-3);margin:var(--space-3) 0;direction:ltr}

/* ---------- chips ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--radius-full);font:500 12px/16px var(--font-sans);background:var(--mint-soft);color:var(--success);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.todo{background:var(--peach-soft);color:var(--peach-ink)}
.pill.off{background:var(--sunken);color:var(--text-2)}

/* ---------- stat cards ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-4);margin-bottom:var(--space-4)}
.kpi{display:flex;flex-direction:column;gap:var(--space-2);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-5);min-width:0}
.kpi span{order:-1;font:500 13px/18px var(--font-sans);color:var(--text-2)}
.kpi b{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text);unicode-bidi:plaintext;overflow:hidden;text-overflow:ellipsis}
.kpi b .r{font-size:15px;line-height:22px;letter-spacing:0;white-space:normal}
.kpi b:has(.r){overflow:visible;line-height:22px;padding-top:6px}
@media(max-width:860px){.kpi b{font-size:22px;line-height:28px}}

/* ---------- table ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
th{text-align:start;font:500 12px/16px var(--font-sans);color:var(--text-3);padding:0 var(--space-3) var(--space-3);white-space:nowrap}
td{padding:var(--space-3);font-size:14px;line-height:20px;color:var(--text);border-top:1px solid var(--line);vertical-align:middle}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums}
td.act{text-align:end;white-space:nowrap}
td input{min-height:38px;padding:0 var(--space-3)}
tbody tr{transition:background-color var(--dur-fast) linear}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--sunken)}
tr.click:hover td:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}
tr.click:hover td:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}
tr.group td{background:var(--sunken);font-weight:600}

/* ---------- rating: always a word and an icon, colour only reinforces ---------- */
.r{display:inline-flex;align-items:center;gap:4px;font-weight:600;white-space:nowrap}
.r-unsatisfactory{color:var(--danger)}.r-needs_improvement{color:var(--peach-ink)}.r-meets_expectations,.r-exceeds_expectations{color:var(--success)}

/* ---------- layout helpers ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.grid2>.card{margin-bottom:0}
.grid2{margin-bottom:var(--space-4)}
form .grid2{margin-bottom:0}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--space-3)}
.row>*{flex:1;min-width:150px}.row>button{flex:0 0 auto;min-width:0}
.row .field{margin-bottom:0}
.chartbox{position:relative;height:320px}

/* ---------- evaluator ---------- */
.task{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line)}
.task:first-of-type{border-top:0}.task .grow{flex:1;min-width:0}
.sec{margin:var(--space-5) 0 var(--space-2);padding:var(--space-2) var(--space-3);background:var(--sunken);border-radius:var(--radius-sm);font:600 15px/22px var(--font-sans)}
.q{padding:var(--space-3) 0;border-top:1px solid var(--line);border-radius:var(--radius-sm)}
.q.missing{background:var(--peach-soft)}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2);margin-top:var(--space-2)}
.scale button{min-height:44px;padding:0;font-weight:600}
.scale button.on{background:var(--mint);color:var(--on-mint);border-color:transparent;box-shadow:var(--shadow-glow)}
.bar{height:8px;background:var(--sunken);border-radius:var(--radius-full);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--radius-full);background:var(--mint);transition:width var(--dur-base) var(--ease-spring)}
.sticky{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:var(--space-3) var(--space-6);margin:var(--space-4) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));display:flex;align-items:center;gap:var(--space-3);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
@media(max-width:860px){.sticky{padding:var(--space-3) var(--space-5);margin:var(--space-4) calc(-1 * var(--space-5)) calc(-1 * var(--space-5))}}

/* ---------- misc ---------- */
details{border-top:1px solid var(--line);padding:var(--space-3) 0}summary{cursor:pointer;font-weight:600}
.cm{white-space:pre-wrap;background:var(--sunken);padding:var(--space-3);border-radius:var(--radius-md);margin:var(--space-2) 0}
.banner{background:var(--peach-soft);color:var(--peach-ink);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;flex-wrap:wrap;font:500 13px/18px var(--font-sans)}
.pinbox{font-size:32px;line-height:38px;font-weight:600;letter-spacing:.2em;font-variant-numeric:tabular-nums;text-align:center;padding:var(--space-4);background:var(--sunken);border-radius:var(--radius-md);margin:var(--space-3) 0;direction:ltr;word-break:break-all}
.pinbox.text{font-size:20px;line-height:28px;letter-spacing:.04em}
.pinbox.key{font-size:13px;line-height:20px;letter-spacing:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;user-select:all}
.empty{text-align:center;padding:var(--space-8) var(--space-4);color:var(--text-2)}
.empty b{display:block;color:var(--text);font-size:15px;line-height:22px;margin-bottom:var(--space-1)}
dialog{border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-6);background:var(--surface);color:var(--text);width:min(540px,92vw);box-shadow:var(--shadow-lift)}
dialog::backdrop{background:var(--forest);opacity:.4}
.banner.supreq{align-items:center;gap:var(--space-3);flex-wrap:wrap}
.banner.supreq>span:first-child{flex:1 1 320px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-3)}
.qfilter .row{margin-top:var(--space-3)}
.qcharts{margin-bottom:var(--space-4)}
.kv{display:flex;gap:var(--space-4);justify-content:space-between;align-items:baseline;padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.kv>span:last-child,.kv>b{text-align:end;overflow-wrap:anywhere}
.pre{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-2)}
dialog h4{margin:var(--space-4) 0 var(--space-1);font-size:13px;line-height:18px;color:var(--text-3);font-weight:600}
.banner a.btn.mini{text-decoration:none;min-height:32px;padding:0 var(--space-3);font-size:12px;line-height:16px}
.avatar{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);object-fit:cover;background:var(--mint-soft);color:var(--success);font:600 12px/1 var(--font-sans);letter-spacing:.02em;overflow:hidden;vertical-align:middle}
.avatar.lg{width:72px;height:72px;font-size:24px}
.avatar.xl{width:160px;height:160px;font-size:48px}
.person{display:inline-flex;align-items:center;gap:var(--space-3)}
.nowrap{white-space:nowrap}
.rephead{display:flex;align-items:center;gap:var(--space-4)}
.rephead h2{margin:0 0 var(--space-1)}
.photoprev{display:grid;place-items:center;margin:var(--space-4) 0}
.task .avatar{width:40px;height:40px;font-size:14px}
.choice{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);margin:var(--space-2) 0;cursor:pointer}
.choice:has(input:checked){border-color:var(--mint);box-shadow:var(--shadow-glow)}
.choice:has(input:disabled){opacity:.55;cursor:default}
.choice input{flex:none;width:16px;height:16px;min-height:0;padding:0;margin:var(--space-1) 0 0;border:0;background:none;box-shadow:none;accent-color:var(--forest)}
dialog.wide{width:min(760px,94vw)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.toolbar h3,.toolbar p{margin:0}
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-3) 0}
.pill.bad{background:var(--danger-soft,var(--peach-soft));color:var(--danger)}
.bad-text{color:var(--danger);font-weight:500}
.preview{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-md);margin:var(--space-3) 0}
.preview td.pin{font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums}
input[type=file]{padding:var(--space-2)}
@media print{body:has(dialog.printable[open])>*:not(dialog){display:none!important}dialog.printable{position:static;border:0;box-shadow:none;width:auto;padding:0}dialog.printable .preview{max-height:none;overflow:visible;border:0}}
.more-sheet{position:fixed;left:50%;bottom:calc(var(--space-4) + 84px);transform:translateX(-50%);width:min(340px,92vw);z-index:11;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift);padding:var(--space-3);animation:more-in var(--dur-base) var(--ease-out)}
.more-sheet button.on{background:var(--mint-soft);color:var(--success)}
@keyframes more-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.more-sheet{animation:none}}
@media(min-width:901px){.more-sheet{display:none}}
.sheet-list{display:grid;gap:var(--space-2)}
.sheet-list button{justify-content:flex-start;width:100%}
.skeleton{min-height:120px}
#toast{position:fixed;inset-inline:0;bottom:120px;display:flex;justify-content:center;pointer-events:none;z-index:20}
code.link{background:var(--sunken);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);word-break:break-all}

/* ---------- home page (Website rules in platforms.md) ---------- */
html{scroll-behavior:smooth;scroll-padding-top:96px}
.ws{position:relative;padding:var(--space-5) var(--space-12) var(--space-12);overflow:hidden}
.ws>*{position:relative}
.ws-glow{position:absolute;inset:0;pointer-events:none}
.ws-glow i{position:absolute;border-radius:var(--radius-full);filter:blur(80px);opacity:.55}
.ws-glow i:nth-child(1){width:520px;height:520px;background:var(--mint-soft);top:-180px;left:-120px}
.ws-glow i:nth-child(2){width:460px;height:460px;background:var(--peach-soft);top:120px;right:-140px}
.ws-glow i:nth-child(3){width:380px;height:380px;background:var(--mint-soft);bottom:-160px;left:38%}
.ws-nav{position:sticky;top:var(--space-4);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:10px 10px 10px var(--space-5);border-radius:var(--radius-full);background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));box-shadow:var(--shadow-card);transition:box-shadow var(--dur-base) var(--ease-out)}
.ws-nav.stuck{box-shadow:var(--shadow-lift)}
/* Home page: the nav stays in place for the whole page and is solid enough that the content passing under it does not show through. */
#site>.ws-nav{position:fixed;top:var(--space-4);left:var(--space-12);right:var(--space-12);z-index:30;background:color-mix(in srgb,var(--surface) 86%,transparent)}
#site>.ws-nav.stuck{background:color-mix(in srgb,var(--surface) 96%,transparent)}
#site>.ws{padding-top:96px}
#site::before{content:"";position:fixed;inset:0 0 auto 0;height:96px;z-index:29;pointer-events:none;background:linear-gradient(var(--canvas) 35%,transparent);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
#site.scrolled::before{opacity:1}
.ws-logo{font:700 18px/1 var(--font-sans);letter-spacing:-.04em;white-space:nowrap;color:var(--text);text-decoration:none}
.ws-links{display:flex;gap:var(--space-1);list-style:none;margin:0;padding:0}
.ws-links a{display:block;padding:var(--space-2) 14px;border-radius:var(--radius-full);color:var(--text-2);text-decoration:none;font:500 13px/18px var(--font-sans);transition:background var(--dur-fast),color var(--dur-fast)}
.ws-links a:hover{background:var(--sunken);color:var(--text)}
.ws-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:center;padding:72px 0 56px}
.ws-hero h1{margin:var(--space-4) 0;font:600 52px/58px var(--font-sans);letter-spacing:-.03em;text-wrap:balance}
.ws-hero h1 .w{display:inline-block}
.ws-hero p{margin:0 0 28px;max-width:46ch;font-size:16px;line-height:26px;color:var(--text-2)}
.ws-hero .meta{margin:var(--space-3) 0 0}
.ws-cta{display:flex;gap:var(--space-3);flex-wrap:wrap}
.ws .btn{transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-out),background var(--dur-fast)}
.ws .btn:hover,.ws-plain .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.ws-preview{display:grid;gap:var(--space-4)}
.ws-preview .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.ws-plain{background:var(--canvas);padding:var(--space-12)}
.ws-section{max-width:1120px;margin:0 auto var(--space-12)}
.ws-section>h2{font-size:32px;line-height:38px;letter-spacing:-.02em;margin-bottom:var(--space-2);text-wrap:balance}
.ws-section>p.lead{font-size:16px;line-height:26px;color:var(--text-2);max-width:62ch;margin-bottom:var(--space-6)}
.ws-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.ws-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.ws-contact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.ws-feats .card,.ws-grid4 .card,.ws-contact .card,.ws-steps .card{margin:0;transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-out)}
.ws-feats .card:hover,.ws-grid4 .card:hover,.ws-contact .card:hover,.ws-steps .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.ws-feats h3,.ws-grid4 h3,.ws-contact h3{margin:var(--space-3) 0 0}
.ws-feats p,.ws-grid4 p,.ws-contact p{margin:var(--space-2) 0 0;color:var(--text-2)}
.ws-contact p{font-weight:500;color:var(--text);overflow-wrap:anywhere}
.ws-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);padding:var(--space-6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ws-facts b{display:block;font-size:40px;line-height:46px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--forest)}
.ws-facts span{display:block;margin-top:var(--space-1);color:var(--text-2);font-size:13px;line-height:20px;max-width:26ch}
.ws-show{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:var(--space-5)}
.ws-tabs{display:inline-flex;gap:var(--space-1);padding:var(--space-1);background:var(--sunken);border-radius:var(--radius-full);margin-bottom:var(--space-6);max-width:100%;overflow-x:auto}
.ws-tabs button{position:relative;overflow:hidden;border:0;background:transparent;box-shadow:none;border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);font:500 13px/18px var(--font-sans);color:var(--text-2);cursor:pointer;white-space:nowrap;transition:background var(--dur-base) var(--ease-out),color var(--dur-fast)}
.ws-tabs button[aria-selected=true]{background:var(--forest);color:var(--on-forest)}
.ws-tabs button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--mint)}
.ws-show.auto .ws-tabs button[aria-selected=true] i{animation:ws-fill 6s linear forwards}
.ws-shot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--space-8);align-items:center}
.ws-shot[hidden]{display:none}
.ws-shot .frame{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-lift);overflow:hidden;background:var(--canvas);max-height:440px}
.ws-shot .frame img{width:100%;height:auto;display:block}
.ws-shot .frame.phone{max-width:280px;margin:0 auto;border-radius:var(--radius-xl)}
.ws-shot h3{font-size:20px;line-height:28px;letter-spacing:-.01em}
.ws-shot p{color:var(--text-2);font-size:14px;line-height:21px}
.ws-shot ul{margin:0;padding:0;list-style:none;color:var(--text-2)}
.ws-shot li{position:relative;padding-inline-start:var(--space-6);margin-bottom:var(--space-2)}
.ws-shot li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:10px;height:10px;border-radius:var(--radius-full);background:var(--mint);box-shadow:var(--shadow-glow)}
.ws-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);counter-reset:step}
.ws-steps .card::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--mint-soft);color:var(--success);font-weight:600;margin-bottom:var(--space-3)}
.ws-steps p{color:var(--text-2);margin:var(--space-2) 0 0}
.ws-faq{display:grid;gap:var(--space-3);max-width:820px}
.ws-faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0 var(--space-5);transition:box-shadow var(--dur-base) var(--ease-out)}
.ws-faq details[open]{box-shadow:var(--shadow-card)}
.ws-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;font-weight:600}
.ws-faq summary::-webkit-details-marker{display:none}
.ws-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-full);background:var(--mint-soft);color:var(--success);font-weight:500;transition:transform var(--dur-base) var(--ease-spring)}
.ws-faq details[open] summary::after{transform:rotate(45deg)}
.ws-faq details p{margin:0;padding:0 0 var(--space-4);color:var(--text-2);max-width:68ch}
.ws-faq details[open] p{animation:ws-rise var(--dur-base) var(--ease-out)}
.ws-band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;background:var(--forest);color:var(--on-forest);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-rail)}
.ws-band h2{color:var(--on-forest);font-size:28px;line-height:34px;letter-spacing:-.02em;margin:0 0 var(--space-2)}
.ws-band p{margin:0;opacity:.8;max-width:52ch}
.ws-band .btn.mint{background:var(--mint);color:var(--forest);border-color:var(--mint)}
.ws-band .btn.ghost{background:transparent;color:var(--on-forest);border-color:var(--on-forest)}
.ws-foot{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--space-6);color:var(--text-3);font-size:12px;line-height:16px;margin-bottom:0}
.ws-foot a{color:var(--text-2);margin-inline-start:var(--space-4)}
@keyframes ws-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ws-fill{from{width:0}to{width:100%}}
@keyframes ws-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,28px) scale(1.08)}}
@keyframes ws-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:no-preference){
  .ws-glow i{animation:ws-drift 18s ease-in-out infinite}
  .ws-glow i:nth-child(2){animation-duration:23s;animation-direction:reverse}
  .ws-glow i:nth-child(3){animation-duration:27s}
  .ws-hero h1 .w,.ws-hero .rise{opacity:0;animation:ws-rise var(--dur-enter) var(--ease-out) forwards;animation-delay:calc(var(--i)*60ms + 120ms)}
  .ws-stage{animation:ws-float 7s ease-in-out infinite}
  .ws-shot.on>div:first-child{animation:ws-rise var(--dur-enter) var(--ease-out)}
  .ws-shot.on .frame{animation:ws-rise var(--dur-enter) var(--ease-out) 80ms backwards}
  .anim .reveal{opacity:0;transform:translateY(28px);transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
  .anim .reveal.in{opacity:1;transform:none}
  .anim .reveal .stagger>*{opacity:0;transform:translateY(20px);transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
  .anim .reveal.in .stagger>*{opacity:1;transform:none}
  .anim .reveal.in .stagger>*:nth-child(2){transition-delay:90ms}
  .anim .reveal.in .stagger>*:nth-child(3){transition-delay:180ms}
  .anim .reveal.in .stagger>*:nth-child(4){transition-delay:270ms}
  .anim .reveal.in .stagger>*:hover{transition-delay:0ms}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:1000px){.ws-links li:nth-child(n+4){display:none}}
@media(max-width:900px){
  .ws{padding:var(--space-4)}.ws-plain{padding:var(--space-6) var(--space-4)}
  #site>.ws-nav{left:var(--space-4);right:var(--space-4)}#site>.ws{padding-top:88px}
  .ws-links{display:none}
  .ws-hero{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-8) 0}
  .ws-hero h1{font-size:32px;line-height:38px}
  .ws-feats,.ws-steps,.ws-grid4,.ws-contact{grid-template-columns:1fr}
  .ws-facts{grid-template-columns:1fr 1fr}
  .ws-shot{grid-template-columns:1fr}
  .ws-band{padding:var(--space-6)}
  .ws-section{margin-bottom:var(--space-8)}
}
.legal{max-width:760px;margin:0 auto}
.legal h1{font-size:32px;line-height:38px;letter-spacing:-.02em;margin:0 0 var(--space-2)}
.legal h2{margin-top:var(--space-6)}
.legal p,.legal li{color:var(--text-2)}
.legal-page{max-width:820px;margin:0 auto;padding:var(--space-5) var(--space-5) var(--space-8)}
.legal-page .ws-nav{margin-bottom:var(--space-8)}
.legal pre{background:var(--forest);color:var(--mint);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto;font:13px/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.legal code{font:13px/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.legal table{margin:var(--space-3) 0}
.legal .note{background:var(--sunken);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);color:var(--text-2)}

@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important}}
@media print{#nav,#tabbar,.noprint,button{display:none!important}body,.app{background:var(--surface)}#shell{padding:0}main{max-width:none}.card,.kpi{box-shadow:none;break-inside:avoid;backdrop-filter:none}.chartbox{height:260px}}
/* iPhone zooms the page when a focused field has text smaller than 16px; keep fields at 16px on touch screens. */
@media (pointer:coarse){input,select,textarea{font-size:16px}}