/* ===== Colors and sizes ===== */
:root{
 --bg:#f5f6fa;--panel:#fff;--sunk:#eef0f5;--text:#11131a;--mute:#646a7d;--line:#e4e6ee;--line2:#d3d6e0;
 --acc:#6d5cff;--hot:#d9480f;--ok:#0f9d72;
 --shadow:0 1px 2px rgba(16,18,27,.05),0 8px 24px rgba(16,18,27,.06);
 --r:14px;color-scheme:light;
 padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --bg:#0a0c12;--panel:#12151e;--sunk:#0d1017;--text:#e8eaf1;--mute:#8a90a4;--line:#1e2230;--line2:#2a2f40;
 --hot:#ffa94d;--ok:#34d399;--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
 --bg:#0a0c12;--panel:#12151e;--sunk:#0d1017;--text:#e8eaf1;--mute:#8a90a4;--line:#1e2230;--line2:#2a2f40;
 --hot:#ffa94d;--ok:#34d399;--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);color-scheme:dark}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 "Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(700px 320px at 50% -120px,color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%)}
main{width:100%;max-width:600px;margin:0 auto;padding:32px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
h1{font:650 clamp(24px,7vw,30px)/1.15 "Geist",sans-serif;letter-spacing:-.025em;margin:0 0 4px}
h2{font:600 16px/1.3 "Geist",sans-serif;letter-spacing:-.01em;margin:0}
.sub,.mute{color:var(--mute);font-size:14px;margin:0 0 12px}
li{margin:4px 0}ul{padding-left:18px;margin:8px 0 0}
input,textarea,button,svg{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ===== Buttons ===== */
button{font:500 14px/1.2 "Geist",sans-serif;padding:9px 14px;border:1px solid var(--line2);background:var(--panel);color:var(--text);border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,filter .15s}
button:hover{border-color:color-mix(in srgb,var(--text) 28%,transparent)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 13%,var(--panel));border-color:var(--acc)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.row button:not(.sw){flex:1 1 auto}
.pri{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.pri:hover{filter:brightness(1.1);border-color:var(--acc)}
.wide{display:block;width:100%;margin-top:16px;padding:12px;font-weight:600}
.link{background:none;border:none;color:var(--acc);padding:6px 0;font-weight:600}
.link:hover{text-decoration:underline;border:none}

/* ===== Tabs (segmented) ===== */
.tabs{display:flex;gap:4px;padding:4px;background:var(--sunk);border:1px solid var(--line);border-radius:11px;margin-bottom:16px}
.tabs button{flex:1;min-width:0;border:0;background:transparent;color:var(--mute);border-radius:8px;padding:9px 4px;font-weight:600;font-size:clamp(12px,3.6vw,14px)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 1px var(--line)}

/* ===== Cards ===== */
.card{width:100%;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--shadow)}
.head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.streak{font:600 12px "Geist Mono",monospace;color:var(--hot);background:color-mix(in srgb,var(--hot) 12%,transparent);padding:4px 9px;border-radius:99px;white-space:nowrap}
.bar{height:6px;background:var(--sunk);border-radius:99px;overflow:hidden;margin:6px 0 10px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--ok));border-radius:99px;transition:width .35s}
.quote{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r);padding:16px 18px;margin:18px 0 16px;box-shadow:var(--shadow)}
.quote p{margin:0;font:500 clamp(15px,4.4vw,17px)/1.5 "Geist",sans-serif;letter-spacing:-.01em}
.quote .row button{padding:6px 10px;font-size:13px}
.rule{background:color-mix(in srgb,var(--hot) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--hot) 40%,transparent);border-radius:10px;padding:10px 14px;font-weight:600;font-size:14px;margin-bottom:14px}

/* ===== Checklists ===== */
label.t{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;flex:none;margin:2px 0 0;border:1.5px solid var(--line2);border-radius:6px;background:var(--panel);cursor:pointer;transition:background .15s,border-color .15s}
input[type=checkbox]:hover{border-color:var(--acc)}
input[type=checkbox]:checked{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.t b{display:block;font-weight:550}
.t span{color:var(--mute);font-size:13px}
.t input:checked~div b{text-decoration:line-through;color:var(--mute)}
.ed{margin-top:10px;border-top:1px solid var(--line);padding-top:4px}
.ed ul{padding:0;margin:8px 0}
.ed li{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ed li button{padding:6px 10px;font-size:13px}

/* ===== Inputs ===== */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid>div{min-width:0}
.full{grid-column:1/-1}
.l,.grid label{display:block;font-size:13px;font-weight:500;color:var(--mute)}
input[type=number],input[type=text],input[type=time],input[type=email],input[type=password],textarea,select{
 width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--sunk);color:var(--text);font:inherit;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--mute) 75%,transparent)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
textarea{min-height:72px;resize:vertical}
select{-webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;
 background:var(--sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238a90a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/14px no-repeat}
@media (max-width:360px){.grid{grid-template-columns:1fr}}

/* ===== Timer, swatches, badges ===== */
.timer{font:600 clamp(38px,12vw,54px)/1 "Geist Mono",monospace;letter-spacing:-.03em;margin:14px 0 4px}
.sw{flex:none;width:28px;height:28px;padding:0;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line2)}
.sw:hover{box-shadow:0 0 0 2px var(--text)}
.bd{display:inline-block;margin:4px 6px 4px 0;padding:5px 11px;border-radius:99px;border:1px solid var(--line2);color:var(--mute);font-size:13px;font-weight:500}
.bd.on{border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
#p-sleep .grid label,#p-sleep #sr,#p-sleep #sw{text-align:center}

/* ===== Custom time picker ===== */
.tpb{display:block;width:100%;margin-top:6px;padding:12px;text-align:center;font:600 20px "Geist Mono",monospace;background:var(--sunk)}
.tpb:hover{border-color:var(--acc)}
.tpp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--sunk)}
.tpc{position:relative;max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.tpc button{flex:none;padding:8px 0;font:600 15px "Geist Mono",monospace}
.tpd{grid-column:1/-1;background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}

/* ===== Onboarding ===== */
.obm{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:520px}
.obm h2{font-size:clamp(19px,5.5vw,22px);letter-spacing:-.02em}
.obm h3{font:600 14px "Geist",sans-serif;margin:18px 0 4px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.ch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ch button{padding:14px 12px;text-align:left;border-radius:10px}
.plan{padding-left:18px}.plan li{margin:6px 0}.plan .mute{font-size:13px}
.warn{color:var(--hot);font-weight:600}

/* ===== Login ===== */
.auth{max-width:420px}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:650;font-size:16px;letter-spacing:-.01em;margin-bottom:20px}
.logo{width:34px;height:34px;border-radius:10px;background:var(--acc);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px color-mix(in srgb,var(--acc) 45%,transparent)}
.auth-card{padding:28px 24px}
.auth-card h1{font-size:24px;text-align:center}
.auth-card .sub{text-align:center;margin-bottom:20px}
.field{margin-top:14px}
.lrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lrow .link{font-size:13px;padding:0}
.pw{position:relative}
.pw input{padding-right:64px}
.eye{position:absolute;right:6px;top:calc(50% + 3px);transform:translateY(-50%);border:0;background:transparent;color:var(--mute);font-size:13px;padding:6px 8px}
.eye:hover{color:var(--text)}
.eye:active{transform:translateY(-50%)}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:20px 0 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.or+.wide{margin-top:14px}
.foot{text-align:center;margin:16px 0 0}
.foot .link{color:var(--mute);font-weight:500}
.foot .link:hover{color:var(--text)}
.err,.okm{font-size:14px;font-weight:500;margin:14px 0 0;padding:10px 12px;border-radius:8px}
.err{color:var(--hot);background:color-mix(in srgb,var(--hot) 10%,transparent);border:1px solid color-mix(in srgb,var(--hot) 30%,transparent)}
.okm{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
/* profile corner */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.top>div:first-child{min-width:0}
.pf{position:relative;flex:none}
.pf>.pri{padding:8px 14px}
.av{width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--acc);color:#fff;font-weight:600;font-size:15px;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line2)}
.av:hover{border-color:var(--panel);box-shadow:0 0 0 2px var(--acc)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.menu{position:absolute;right:0;top:46px;z-index:20;width:250px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px}
.mh{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.mh .av{width:36px;height:36px;flex:none;border:0;box-shadow:none}
.mh>div:last-child{min-width:0}
.mh b,.mh span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh b{font-size:14px}.mh span{font-size:12px;color:var(--mute)}
.menu>button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:8px}
.menu>button:hover{background:var(--sunk);border:0}
/* header buttons */
.hb{display:flex;align-items:center;gap:8px;flex:none}
.ib{width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.ib:hover{color:var(--text)}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-weight:500;padding:6px 0;margin-bottom:10px;background:none;border:0}
.back:hover{color:var(--text);border:0}
.danger{color:var(--hot)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--text)}
/* quick tour */
.tour{position:fixed;inset:0;z-index:50}
.spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(5,7,12,.72);transition:top .25s,left .25s,width .25s,height .25s;pointer-events:none}
.tcard{position:fixed;left:16px;right:16px;max-width:380px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:16px 18px;box-shadow:0 20px 50px rgba(0,0,0,.45);transition:top .25s}
.tcard h2{margin:2px 0 4px}.tcard p{margin:0}.tcard .mute{font-size:12px;margin:0}
@media (prefers-reduced-motion:reduce){.spot,.tcard{transition:none}}
/* celebration */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--text);color:var(--bg);font-weight:600;font-size:14px;padding:12px 18px;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);animation:tin .25s ease-out;transition:opacity .4s,transform .4s;max-width:calc(100vw - 32px);text-align:center}
.toast.out{opacity:0;transform:translate(-50%,10px)}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}}
.card.win{animation:win .7s ease-out}
@keyframes win{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent),var(--shadow)}100%{box-shadow:0 0 0 14px transparent,var(--shadow)}}
.burst{position:fixed;width:0;height:0;z-index:55;pointer-events:none}
.burst i{position:absolute;width:8px;height:8px;border-radius:2px;animation:pop .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pop{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rt));opacity:0}}
@media (prefers-reduced-motion:reduce){.toast,.card.win{animation:none}}
/* task reorder */
.ed li{padding:4px 0}
.ed .tx{flex:1;min-width:0}
.hd{cursor:grab;color:var(--mute);font-size:18px;line-height:1;padding:6px 4px;touch-action:none;user-select:none}
.ed .mv{padding:6px 9px}
.sortable-ghost{opacity:.35}
/* weekly charts */
.ct{font:600 13px "Geist",sans-serif;color:var(--mute);margin:16px 0 6px}
.wk{display:block;overflow:visible}
.wk .bar-v{fill:var(--acc)}
.wk .bar-e{fill:var(--line2)}
.wk .bh:hover .bar-v,.wk .bh:focus .bar-v{fill:color-mix(in srgb,var(--acc) 75%,var(--text))}
.wk .bh:focus{outline:none}
.wk .bl{font:500 11px "Geist",sans-serif;fill:var(--mute)}
.wk .ax{stroke:var(--line2);stroke-width:1}
.wk .gd{stroke:var(--mute);stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.wk .gt{font:500 10px "Geist",sans-serif;fill:var(--mute)}
.tv{margin-top:12px;font-size:14px}
.tv summary{cursor:pointer;color:var(--mute);font-weight:500}
.tv table{width:100%;border-collapse:collapse;margin-top:8px}
.tv th,.tv td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}
.tv th{color:var(--mute);font-weight:500;font-size:13px}
/* sync spinner */
.spin{display:block;width:38px;height:38px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--acc);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pf.saving .av{box-shadow:0 0 0 2px var(--acc);animation:breathe 1s ease-in-out infinite alternate}
@keyframes breathe{to{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}.pf.saving .av{animation:none}}
/* leaderboard */
.codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border:1px dashed var(--line2);border-radius:10px;background:var(--sunk)}
.codebox span{font:600 clamp(22px,7vw,28px) "Geist Mono",monospace;letter-spacing:.18em}
.lb{list-style:none;padding:0;margin:8px 0 0}
.lb li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);margin:0}
.lb li.me{background:color-mix(in srgb,var(--acc) 8%,transparent);margin:0 -20px;padding:12px 20px}
.lb .rk{width:20px;text-align:center;font:600 14px "Geist Mono",monospace;color:var(--mute)}
.lb li:first-child .rk{color:var(--hot)}
.lb .av{width:34px;height:34px;flex:none;border:0;box-shadow:none;font-size:14px}
.lb .nm{flex:1;min-width:0}
.lb .nm b,.lb .nm span,.lb .sv b,.lb .sv span{display:block}
.lb .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .nm .mute,.lb .sv .mute{font-size:12px;margin:0}
.lb .sv{text-align:right}
.lb .sv b{font:600 20px "Geist Mono",monospace}
.lb .rm{padding:6px 10px;font-size:12px}
.lb .empty{display:block;border-top:1px solid var(--line);padding:16px 0 4px}
.addf{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.addrow{display:flex;gap:8px;margin-top:6px}
.addrow input{margin-top:0;font-family:"Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.addrow button{flex:none}
.av.guest{background:var(--sunk);color:var(--mute)}
/* category colors (checked for colorblind safety) */
:root{--c1:#2a78d6;--c2:#eb6834;--c3:#1baf7a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c1:#3987e5;--c2:#d95926;--c3:#199e70}}
:root[data-theme="dark"]{--c1:#3987e5;--c2:#d95926;--c3:#199e70}
/* quote moods */
.qrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.qrow>.mute{margin:0;font-size:13px}
.qrow .row{margin:0;flex:1}
.qrow .row button{padding:6px 10px;font-size:13px}
.qrow .link{font-size:13px;padding:6px 0}
/* small label pill */
.pill{font-size:12px;font-weight:500;color:var(--mute);border:1px solid var(--line2);border-radius:99px;padding:3px 9px;white-space:nowrap}
/* drill guide */
.dg{margin-top:10px}
.steps{margin:6px 0 0;padding-left:20px}
.steps li{margin:6px 0}
.tip{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:var(--sunk);font-size:14px}
.dgi{padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}
/* rank tracker */
.rkc{font:600 18px "Geist",sans-serif;margin:6px 0 12px}
.rkh{list-style:none;padding:0;margin:8px 0 0}
.rkh li{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);margin:0}
.rkh li>span:first-child{width:52px;color:var(--mute);font-size:13px}
.rkh .mute{margin:0 0 0 auto;font-size:13px}
/* project idea */
.pit{font:600 17px "Geist",sans-serif;margin:8px 0 0}
/* challenges */
.chl{list-style:none;padding:0;margin:10px 0 0}
.chl li{margin:0;padding:10px 0;border-top:1px solid var(--line)}
.chl .head{margin-bottom:6px;font-size:14px}
.chl .head .mute{margin:0;font:600 13px "Geist Mono",monospace}
.chl .bar{margin:0}
.chl li.fin .head span:first-child{color:var(--ok);font-weight:600}
/* notes */
#ntx{margin-top:10px}
.ntp{list-style:none;padding:0;margin:12px 0 0}
.ntp li{margin:0;padding:8px 0;border-top:1px solid var(--line);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.ntp li b{display:block;font-size:12px;font-weight:600;color:var(--mute);margin-bottom:2px}
/* month calendar */
.mnav{display:flex;gap:6px}
.mnav button{width:34px;height:34px;padding:0;font-size:18px;line-height:1}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.cal .dow{text-align:center;font-size:12px;color:var(--mute);padding-bottom:4px}
.cal .day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-radius:8px;background:var(--sunk)}
.cal .day b{font:500 13px "Geist Mono",monospace}
.cal .day.now{box-shadow:inset 0 0 0 1.5px var(--acc)}
.cal .day.fut{opacity:.45}
.dots{display:flex;gap:3px}
.dots i,.lg i{width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2)}
.dots i.on.c-gaming,.lg i.c-gaming{background:var(--c1);box-shadow:none}
.dots i.on.c-sleep,.lg i.c-sleep{background:var(--c2);box-shadow:none}
.dots i.on.c-coding,.lg i.c-coding{background:var(--c3);box-shadow:none}
.lg{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 0;font-size:13px;color:var(--mute)}
.lg span{display:inline-flex;align-items:center;gap:6px}
.lg i{display:inline-block;width:8px;height:8px}
/* nudge banner */
.rule.nudge{background:color-mix(in srgb,var(--acc) 12%,var(--panel));border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
/* focus mode */
body.focus .quote,body.focus #tabs,body.focus .card:not(.fc-keep),body.focus .ed,body.focus #fc,body.focus label[for="fg"],body.focus #fg{display:none!important}
body.focus #p-gaming[hidden],body.focus #p-sleep[hidden],body.focus #p-coding[hidden]{display:block!important}
body.focus #p-summary{display:none!important}
.fx{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:12px 18px}
/* undo toast */
.toast.act{display:flex;align-items:center;gap:14px;text-align:left}
.toast.act button{background:transparent;border:0;color:inherit;font-weight:700;text-decoration:underline;padding:4px 2px}
.rl{list-style:none;padding:0;margin:6px 0 0}
.rl li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);margin:0;font-size:14px}
.rl li .mute{margin:0;font-size:13px;white-space:nowrap}
.ob-imp{text-align:center;margin:12px 0 0}
.ob-imp .link{color:var(--mute);font-weight:500}
.sw-dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px}
.sample{list-style:none;padding:0;margin:6px 0 0}
.sample li{display:flex;gap:12px;margin:0;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.sample li span{width:72px;flex:none;color:var(--mute);font:500 13px "Geist Mono",monospace}
.lb .acts{display:flex;flex-direction:column;gap:4px}
.lb .nd{padding:6px 10px;font-size:12px}
@media (min-width:420px){.lb .acts{flex-direction:row}}
body.focus main{padding-bottom:100px}
input[aria-invalid="true"]{border-color:var(--hot)}
input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--hot) 22%,transparent)}
/* installed app: draw our own title bar when the user hides Chrome's */
.titlebar{display:none}
@media (display-mode:window-controls-overlay){
 .titlebar{display:flex;align-items:center;position:fixed;z-index:70;left:env(titlebar-area-x,0);top:env(titlebar-area-y,0);width:env(titlebar-area-width,100%);height:env(titlebar-area-height,33px);
  padding:0 12px;background:var(--bg);color:var(--mute);font:600 12px "Geist",sans-serif;-webkit-app-region:drag;app-region:drag;user-select:none}
 body{padding-top:env(titlebar-area-height,33px)}
}
/* legal pages */
.legal .card h2{font-size:17px;margin:20px 0 6px}
.legal .card h2:first-of-type{margin-top:16px}
.legal .card p,.legal .card li{color:var(--text);font-size:15px}
.legal .card ul{padding-left:20px}
.legal a{color:var(--acc)}
a.back{text-decoration:none}
.legal-links{text-align:center;font-size:13px;color:var(--mute);margin:14px 0 0}
.legal-links a{color:var(--mute)}
.legal-links a:hover{color:var(--text)}
/* popups */
.dlg{width:min(440px,calc(100vw - 32px));border:1px solid var(--line2);border-radius:16px;background:var(--panel);color:var(--text);padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.dlg::backdrop{background:rgba(5,7,12,.6)}
.dlg h2{font-size:20px;margin:2px 0 4px}
.dlg .mute{margin:0}
.dlg textarea{min-height:110px}
.dlg .row button{flex:1}
.news{padding-left:20px;margin:12px 0 4px}
.news li{margin:8px 0}
.ch.long{grid-template-columns:1fr}
.ch.long button{padding:11px 12px}
/* admin page */
.admin textarea{font:13px/1.5 "Geist Mono",monospace}
.admin h3{font:600 14px "Geist",sans-serif;margin:16px 0 4px}
.admin code{font:12px "Geist Mono",monospace;background:var(--sunk);padding:1px 5px;border-radius:4px}
.crow{display:grid;grid-template-columns:auto 1fr 70px;gap:8px;align-items:center;margin-top:8px}
.crow input{margin-top:0}
.uid{font-size:13px!important;letter-spacing:0!important;overflow-wrap:anywhere}
.vres{list-style:none;padding:0;font-size:13px}.vres .good{color:var(--ok)}.vres .bad{color:var(--hot)}
.savebar{position:sticky;bottom:12px;background:var(--bg);padding:8px;border-radius:12px;border:1px solid var(--line)}
a.btnlink{display:inline-block;text-decoration:none;padding:9px 14px;border-radius:8px}
/* ===== Welcome page ===== */
.lp{overflow-x:hidden}
.lp .skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 12px;border-radius:8px;z-index:90}
.lp .skip:focus{left:12px}
.lp-wrap{max-width:1120px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px))}
.lp-wrap.narrow{max-width:760px}
.lp a{color:inherit;text-decoration:none}
.lp-top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.lp-top.scrolled{border-bottom-color:var(--line)}
.lp-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.lp-brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:16px;letter-spacing:-.01em}
.lp-brand .logo{width:30px;height:30px;border-radius:9px}
.lp-nav{display:flex;gap:28px;font-size:14px;color:var(--mute)}
.lp-nav a:hover,.lp-link:hover{color:var(--text)}
.lp-acts{display:flex;align-items:center;gap:16px}
.lp-link{font-size:14px;color:var(--mute);font-weight:500}
.btn-pri,.btn-out,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;font:600 14px "Geist",sans-serif;padding:10px 18px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s,filter .15s,background .15s,border-color .15s;white-space:nowrap}
.btn-pri{background:var(--acc);color:#fff;box-shadow:0 8px 28px color-mix(in srgb,var(--acc) 40%,transparent)}
.btn-pri:hover{filter:brightness(1.1)}
.btn-out{border-color:color-mix(in srgb,var(--acc) 55%,var(--line2));color:var(--text);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.btn-out:hover{background:color-mix(in srgb,var(--acc) 16%,transparent)}
.btn-ghost{background:none;border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--mute)}
.lp .big{padding:14px 24px;font-size:15px}
.btn-pri:active,.btn-out:active,.btn-ghost:active{transform:translateY(1px)}

/* hero */
.lp-hero{padding:72px 0 88px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.lp .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:6px 14px;margin:0 0 24px}
.lp .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}
.hero-h{font:750 clamp(40px,6.4vw,72px)/1.02 "Geist",sans-serif;letter-spacing:-.045em;margin:0 0 24px}
.hero-h .ln{display:flex;align-items:center;gap:.28em}
.lane-dot{display:inline-block;flex:none;width:.32em;height:.32em;border-radius:50%;font-style:normal}
.lane-dot.g{background:var(--c1)}.lane-dot.s{background:var(--c2)}.lane-dot.c{background:var(--c3)}
.hero-sub{font-size:clamp(16px,2vw,18px);line-height:1.6;color:var(--mute);max-width:34em;margin:0 0 32px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-ctas.center{justify-content:center}

/* preview card */
.preview{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 30px 80px -20px color-mix(in srgb,var(--acc) 35%,transparent),var(--shadow)}
.pv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pv-head b{font-size:18px;letter-spacing:-.01em}
.pv-streak{font:600 12px "Geist Mono",monospace;color:var(--hot);background:color-mix(in srgb,var(--hot) 12%,transparent);padding:4px 10px;border-radius:99px;transition:transform .3s}
.pv-streak.up{transform:scale(1.08)}
.pv-lane{padding:10px 0;border-top:1px solid var(--line)}
.pv-t{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--mute);margin:0 0 6px}
.pv-t .lane-dot{width:8px;height:8px}
.pv-lane ul{list-style:none;padding:0;margin:0}
.pv-i{display:flex;align-items:center;gap:10px;margin:0;padding:5px 0;font-size:14px}
.pv-box{width:18px;height:18px;flex:none;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;color:#fff;transition:background .25s,border-color .25s}
.pv-box svg{width:12px;height:12px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.pv-i.on .pv-box{border-color:transparent}
.pv-i[data-lane=g].on .pv-box{background:var(--c1)}.pv-i[data-lane=s].on .pv-box{background:var(--c2)}.pv-i[data-lane=c].on .pv-box{background:var(--c3)}
.pv-i.on .pv-box svg{opacity:1;transform:none}
.pv-i.on span:last-child{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--line2)}
.pv-bar{height:6px;background:var(--sunk);border-radius:99px;overflow:hidden;margin-top:10px}
.pv-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));transition:width .35s}

/* sections */
.lp-sec{padding:88px 0;border-top:1px solid var(--line)}
.sec-h{font:700 clamp(28px,4vw,40px)/1.1 "Geist",sans-serif;letter-spacing:-.03em;margin:0 0 12px;text-align:center}
.sec-sub{color:var(--mute);font-size:17px;line-height:1.6;max-width:34em;margin:0 auto 40px;text-align:center}
.lp .lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp .lane{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--lane);border-radius:14px;padding:24px}
.lp .lane h3{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 8px;letter-spacing:-.01em}
.lp .lane h3 .lane-dot{width:10px;height:10px}
.lp .lane p{color:var(--mute);margin:0 0 14px;line-height:1.55}
.lp .lane ul{margin:0;padding-left:18px}.lp .lane li{margin:6px 0}
.extras{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
.extras li{display:flex;gap:14px;margin:0;align-items:flex-start}
.extras svg{flex:none;color:var(--acc);margin-top:2px}
.extras b{display:block;margin-bottom:2px}.extras span{color:var(--mute);font-size:14px}
.steps-lp{list-style:none;padding:0;margin:40px auto 0;max-width:760px}
.steps-lp > li{display:flex;gap:20px;margin:0;padding:22px 0;border-bottom:1px solid var(--line)}
.steps-lp > li:last-child{border-bottom:0}
.steps-lp .num{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 16px "Geist Mono",monospace;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
.steps-lp h3{margin:6px 0 6px;font-size:18px}.steps-lp p{margin:0;color:var(--mute);line-height:1.6}
.lp .chips{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px}
.lp .chips li{margin:0;padding:9px 16px;border:1px solid var(--line2);border-radius:999px;font-size:14px;background:var(--panel)}
.lp .chips li.more{border-style:dashed;color:var(--mute);background:none}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 "Geist",sans-serif;color:var(--mute);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 16px;color:var(--mute);line-height:1.6}
.faq a{color:var(--acc)}
.final{text-align:center;background:var(--panel);border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));border-radius:22px;padding:48px 24px;box-shadow:0 30px 80px -30px color-mix(in srgb,var(--acc) 45%,transparent)}
.final h2{font:700 clamp(26px,4vw,36px)/1.15 "Geist",sans-serif;letter-spacing:-.03em;margin:0 0 8px}
.final p{color:var(--mute);margin:0 0 24px}

/* footer */
.lp-foot{border-top:1px solid var(--line);padding:56px 0 32px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-brand p{color:var(--mute);font-size:14px;margin:12px 0 0;max-width:26em}
.lp-foot nav{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.lp-foot h4{font-size:13px;font-weight:600;color:var(--mute);margin:0 0 4px}
.lp-foot nav a,.foot-btn{font-size:14px;color:var(--text);opacity:.85}
.lp-foot nav a:hover,.foot-btn:hover{opacity:1}
.foot-btn{background:none;border:0;padding:0;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.foot-base{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-size:13px;color:var(--mute)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.pv-box,.pv-box svg,.pv-bar i{transition:none}}

@media (max-width:900px){
 .hero-grid{grid-template-columns:1fr;gap:40px}
 .lp .lanes{grid-template-columns:1fr}
 .lp-nav{display:none}
 .foot-grid{grid-template-columns:1fr 1fr}
 .foot-brand{grid-column:1/-1}
}
@media (max-width:560px){
 .lp-hero{padding:40px 0 56px}
 .lp-sec{padding:64px 0}
 .extras{grid-template-columns:1fr}
 .hero-ctas .big{flex:1 1 100%}
 .lp-link{display:none}
}
.brand{color:inherit;text-decoration:none}
.lp main{max-width:none;width:100%;padding:0;margin:0}
/* welcome: richer steps and FAQ */
.steps-lp li > div{min-width:0}
.steps-lp li > div > p{margin:0 0 12px}
.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{margin:0;padding:5px 12px;border-radius:999px;font-size:13px;background:var(--sunk);border:1px solid var(--line);color:var(--text)}
.ticks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.ticks li{position:relative;margin:0;padding-left:24px;font-size:14px;line-height:1.5;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:5px;
 background:color-mix(in srgb,var(--ok) 18%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2L11.5 6' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.faq h3{font-size:15px;font-weight:600;color:var(--mute);margin:0 0 4px}
.faq summary{font-size:15px}
.sec-sub b{color:var(--text);font-weight:600}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr;gap:24px}.ticks{grid-template-columns:1fr}}

/* ===== Game tags (onboarding) ===== */
.tagbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;padding:7px 8px;border:1px solid var(--line2);border-radius:8px;background:var(--sunk);cursor:text;transition:border-color .15s,box-shadow .15s}
.tagbox:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.tagbox #tgs{display:contents}
.tagbox input[type=text]{flex:1 1 120px;min-width:100px;width:auto;margin:0;padding:4px 4px;border:0;background:transparent;box-shadow:none}
.tagbox input[type=text]:focus{box-shadow:none}
.gtag{display:inline-flex;align-items:center;max-width:100%;border:1px solid var(--line2);border-radius:99px;background:var(--panel);overflow:hidden;animation:tagin .18s ease-out}
.gtag.main{border-color:color-mix(in srgb,var(--acc) 55%,transparent);background:color-mix(in srgb,var(--acc) 14%,var(--panel))}
.gtag button{border:0;background:transparent;border-radius:0;box-shadow:none}
.gt-name{display:inline-flex;align-items:center;gap:6px;padding:5px 4px 5px 11px;font-weight:600;font-size:13px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtag.main .gt-name{cursor:default;color:var(--acc)}
.gt-main{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:99px;background:var(--acc);color:#fff}
.gt-x{padding:5px 10px 5px 6px;font-size:15px;line-height:1;color:var(--mute)}
.gt-x:hover{color:var(--bad,#e5484d)}
.tagnote{min-height:1.2em;margin-top:6px;font-size:13px}
@keyframes tagin{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.gtag{animation:none}}

/* ===== Login / Sign up (v2) ===== */
.auth2{max-width:1080px;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr;align-items:center;gap:56px;padding-top:max(32px,env(safe-area-inset-top,0px))}
.auth-main{width:100%;max-width:420px;margin:0 auto}
.auth-side{display:none}
.auth-brand{margin-bottom:22px}
.auth2 .auth-card{position:relative;padding:22px 24px 26px;border-radius:18px;box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--acc) 6%,transparent)}
.auth2 .auth-card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 70%,transparent),transparent)}
.auth-body{will-change:transform,opacity}
.auth2 h1{font-size:25px;text-align:center;margin:4px 0 4px}
.auth2 .sub{text-align:center;margin:0 0 6px}

/* Sliding tab */
.tabs.seg{position:relative;margin-bottom:22px}
.tabs.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:8px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 1px var(--line);transition:transform .32s cubic-bezier(.3,1.3,.5,1)}
.tabs.seg[data-mode="up"]::before{transform:translateX(calc(100% + 4px))}
.tabs.seg button{position:relative;z-index:1;transition:color .2s}
.tabs.seg button[aria-selected="true"]{background:transparent;box-shadow:none;color:var(--text)}

/* Inputs with icons */
.ifield{position:relative}
.ifield .ico{position:absolute;left:12px;top:calc(50% + 3px);transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--mute);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .15s}
.ifield input{padding-left:38px;height:46px}
.ifield:focus-within .ico{stroke:var(--acc)}
.auth2 input[aria-invalid="true"]{border-color:var(--hot)}
.auth2 .l{font-size:13px;font-weight:600;color:var(--text);opacity:.85}

/* Password rules */
.rules{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:10px 0 0}
.rules li{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 10px 4px 8px;border-radius:99px;font-size:12px;font-weight:500;color:var(--mute);background:var(--sunk);border:1px solid var(--line);transition:color .2s,background .2s,border-color .2s}
.rules li::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box;transition:background .2s,border-color .2s}
.rules li.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.rules li.ok::before{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}

/* Buttons */
.auth2 .wide{height:46px;border-radius:10px}
.auth2 #go{margin-top:20px;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--acc) 70%,transparent)}
.auth2 #go.busy{position:relative;color:transparent!important;opacity:1}
.auth2 #go.busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gbtn{display:flex!important;align-items:center;justify-content:center;gap:10px}
.gbtn svg{flex:none}
.switch-line{text-align:center;margin:18px 0 0;font-size:14px;color:var(--mute)}
.switch-line .link{padding:0;font-size:14px}
.auth2 .foot{margin-top:6px}
.auth2 .foot .link{font-size:14px}
.auth2 .legal-links{max-width:340px;margin:12px auto 0;font-size:12px;line-height:1.5}

/* Desktop: side panel */
@media (min-width:900px){
 .auth2{grid-template-columns:1fr 420px;padding-left:32px;padding-right:32px}
 .auth-side{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;min-height:560px;max-height:720px;margin:24px 0;padding:36px;border-radius:24px;border:1px solid var(--line);
  background:radial-gradient(520px 320px at 0% 0%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%),radial-gradient(420px 300px at 100% 100%,color-mix(in srgb,#34d399 14%,transparent),transparent 70%),var(--panel);box-shadow:var(--shadow);overflow:hidden}
 .auth-side .brand{justify-content:flex-start;margin:0}
 .side-copy h2{font:650 40px/1.08 "Geist",sans-serif;letter-spacing:-.035em;margin:0 0 14px}
 .side-copy p{color:var(--mute);font-size:16px;max-width:30em;margin:0 0 26px}
 .side-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
 .side-list li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--panel) 70%,transparent);border:1px solid var(--line);backdrop-filter:blur(6px)}
 .side-list b{display:block;font-size:14px}
 .side-list small{color:var(--mute);font-size:13px}
 .sdot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
 .side-foot{color:var(--mute);font-size:13px;margin:0}
 .auth-brand{display:none}
}
@media (max-width:420px){.auth2 .auth-card{padding:18px 18px 22px}}
@media (prefers-reduced-motion:reduce){.tabs.seg::before{transition:none}}

/* ===== Legal pages (v2) ===== */
.lgl{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.lgl{scroll-behavior:auto}}
.lgl .lsec{scroll-margin-top:84px}
.lgl-top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.lgl-bar{max-width:1120px;margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(16px,env(safe-area-inset-left,0px))}
.lgl-bar .brand{margin:0;font-size:15px}
.lgl-bar .logo{width:30px;height:30px;border-radius:9px}
.lgl-bar nav{display:flex;align-items:center;gap:4px}
.lgl-bar nav a{color:var(--mute);text-decoration:none;font-size:14px;font-weight:500;padding:7px 10px;border-radius:8px}
.lgl-bar nav a:hover{color:var(--text);background:var(--sunk)}
.lgl-bar nav a[aria-current="page"]{color:var(--text);background:var(--sunk)}
.lgl-bar nav .lgl-app{background:var(--acc);color:#fff;font-weight:600;margin-left:6px}
.lgl-bar nav .lgl-app:hover{background:var(--acc);color:#fff;filter:brightness(1.1)}
.lgl-main{max-width:1120px;padding-top:48px}
.lgl-hero{max-width:720px}
.eyebrow{display:inline-block;font:600 12px "Geist Mono",monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);margin:0 0 12px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 25%,transparent)}
.lgl-hero h1{font-size:clamp(34px,7vw,52px);letter-spacing:-.04em;line-height:1.05;margin:0 0 14px}
.lgl-hero .lead{font-size:clamp(16px,2.4vw,18px);color:var(--mute);margin:0 0 18px;max-width:38em}
.lgl-hero .meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:13px;color:var(--mute)}
.lgl-hero .meta span{display:inline-flex;align-items:center;gap:6px}
.lgl-hero .meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line2);margin-right:12px}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:32px 0 40px}
.gl{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.gl b{display:block;font-size:14px;margin-bottom:2px}
.gl p{margin:0;color:var(--mute);font-size:13px;line-height:1.45}
.gi{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 13%,transparent);color:var(--acc)}
.gi svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lgl-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.toc{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:0;box-shadow:var(--shadow)}
.toc summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.toc[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.toc ol{list-style:none;margin:0;padding:0 8px 10px}
.toc li{margin:0}
.toc a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:8px;color:var(--mute);text-decoration:none;font-size:14px;line-height:1.35;transition:color .15s,background .15s}
.toc a:hover{color:var(--text);background:var(--sunk)}
.toc a[aria-current="true"]{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);font-weight:600}
.tn,.sn{font:600 11px "Geist Mono",monospace;color:var(--mute);opacity:.75}
.toc a[aria-current="true"] .tn{color:var(--acc);opacity:1}
.lgl-doc{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:8px clamp(20px,4vw,44px) 32px;min-width:0}
.lsec{padding:28px 0 8px;border-bottom:1px solid var(--line)}
.lsec:last-of-type{border-bottom:0}
.lsec h2{position:relative;display:flex;align-items:baseline;gap:12px;font-size:clamp(20px,3vw,23px);letter-spacing:-.025em;margin:0 0 14px}
.lsec h2 .sn{font-size:13px;color:var(--acc);opacity:1;min-width:20px}
.anchor{margin-left:2px;color:var(--mute);text-decoration:none;opacity:0;font-weight:500;transition:opacity .15s}
.lsec h2:hover .anchor,.anchor:focus{opacity:1}
.lsec h3{font-size:15px;margin:22px 0 8px;letter-spacing:-.01em}
.lsec p,.lsec li{font-size:15px;line-height:1.7;color:color-mix(in srgb,var(--text) 88%,var(--mute))}
.lsec p{margin:0 0 14px}
.lsec ul{padding-left:0;list-style:none;margin:0 0 14px}
.lsec ul li{position:relative;padding-left:22px;margin:8px 0}
.lsec ul li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--acc);opacity:.75}
.lsec a{color:var(--acc);text-underline-offset:3px}
.lsec b{color:var(--text)}
.short{display:flex;gap:12px;align-items:baseline;margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--sunk);border:1px solid var(--line);border-left:3px solid var(--acc)}
.short b{flex:none;font:600 11px "Geist Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--acc)}
.short p{margin:0;font-size:14px;line-height:1.5;color:var(--text)}
.tbl{overflow-x:auto;margin:6px 0 18px;border:1px solid var(--line);border-radius:12px}
.tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line);line-height:1.5}
.tbl thead th{background:var(--sunk);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.tbl tbody th{font-weight:600;color:var(--text);white-space:nowrap}
.tbl td{color:color-mix(in srgb,var(--text) 85%,var(--mute))}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--sunk) 60%,transparent)}
.lgl-end{margin-top:24px;padding:22px;border-radius:14px;text-align:center;background:radial-gradient(400px 160px at 50% 0%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%),var(--sunk);border:1px solid var(--line)}
.lgl-end p{margin:0 0 4px;font-weight:600}
.lgl-end .row{justify-content:center}
.lgl-end .btnlink{border:1px solid var(--line2);color:var(--text);background:var(--panel);font-weight:600;font-size:14px}
.lgl-end .btnlink.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.lgl-foot{max-width:1120px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-left,0px)) 40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;color:var(--mute);font-size:13px;border-top:1px solid var(--line)}
.lgl-foot nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.lgl-foot a,.lgl-foot .link{color:var(--mute);text-decoration:none;font-size:13px;font-weight:500;padding:0}
.lgl-foot a:hover,.lgl-foot .link:hover{color:var(--text)}
.totop{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:20;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--panel);color:var(--text);border:1px solid var(--line2);box-shadow:var(--shadow)}
.totop:hover{border-color:var(--acc);color:var(--acc)}
@media (min-width:900px){
 .lgl-grid{grid-template-columns:250px 1fr;gap:40px}
 .toc-wrap{position:sticky;top:84px}
 .toc{background:transparent;border:0;box-shadow:none}
 .toc summary{pointer-events:none;padding:0 10px 10px;font:600 12px "Geist Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
 .toc summary::after{display:none}
 .toc ol{padding:0;border-left:1px solid var(--line)}
 .toc a{border-radius:0 8px 8px 0;margin-left:-1px;border-left:2px solid transparent}
 .toc a[aria-current="true"]{border-left-color:var(--acc)}
}
@media (max-width:899px){.toc-wrap{position:sticky;top:68px;z-index:10}.toc[open]{max-height:70vh;overflow:auto}}
@media (max-width:520px){
 .lgl-bar nav a:not(.lgl-app){padding:7px 7px}
 .lgl-bar .brand span:last-child{display:none}
 .lgl-main{padding-top:32px}
 .glance{grid-template-columns:1fr 1fr;gap:8px}
 .gl{flex-direction:column;gap:8px;padding:14px}
 .short{flex-direction:column;gap:4px}
 .tbl table{min-width:0}
 .tbl thead{display:none}
 .tbl tr{display:block;padding:10px 14px;border-bottom:1px solid var(--line)}
 .tbl tr:last-child{border-bottom:0}
 .tbl th,.tbl td{display:block;padding:2px 0;border:0;white-space:normal}
 .tbl td:nth-child(3){color:var(--mute);font-size:13px}
}
@media print{
 .lgl-top,.toc-wrap,.totop,.lgl-end,.lgl-foot nav,.glance,.titlebar{display:none!important}
 body::before{display:none}
 .lgl-doc{border:0;box-shadow:none;padding:0}
 .lgl-grid{display:block}
}
@media (max-width:520px){.lgl-hero .meta span+span::before{display:none}.lgl-hero .meta{gap:4px 14px}}

/* ===== Home page (v2) ===== */
.home main.hm{max-width:1120px;padding-top:20px}
/* App bar */
.appbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.appbar-in{max-width:1120px;margin:0 auto;height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.appbar .brand{margin:0;font-size:15px}
.appbar .logo{width:32px;height:32px;border-radius:10px;box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 40%,transparent)}
.appbar .logo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ab-r{display:flex;align-items:center;gap:8px}
.ab-streak{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:99px;font:600 14px "Geist Mono",monospace;color:var(--hot);background:color-mix(in srgb,var(--hot) 12%,transparent);border:1px solid color-mix(in srgb,var(--hot) 25%,transparent)}
.ab-streak svg{width:15px;height:15px;fill:currentColor}
.icon-btn{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:10px;color:var(--mute);background:transparent;border:1px solid var(--line2);font-weight:600}
.icon-btn:hover{color:var(--text)}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.appbar .brand span:last-child{display:none}#kbd{display:none}}

/* Hero */
.hero2{display:grid;grid-template-columns:1fr;gap:20px;margin:8px 0 18px}
.eyebrow2{margin:0 0 6px;font:600 12px "Geist Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--acc)}
.hero2 h1{font-size:clamp(28px,6vw,42px);letter-spacing:-.035em;margin:0 0 4px}
.hero2 .sub{font-size:15px;margin:0 0 12px}
.goals{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.goals span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--sunk);border:1px solid var(--line);color:var(--mute)}
.next{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 18px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 16%,var(--panel)),var(--panel) 70%);border:1px solid color-mix(in srgb,var(--acc) 30%,var(--line));box-shadow:var(--shadow)}
.next.done{background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 16%,var(--panel)),var(--panel) 70%);border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}
.nx-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nx-k{font:600 11px "Geist Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--acc)}
.next.done .nx-k{color:var(--ok)}
.nx-l b{font-size:16px;letter-spacing:-.01em;overflow-wrap:anywhere}
.nx-l .mute{margin:0;font-size:13px}
.nx-b{flex:none;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px}
.nx-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.today-card{display:flex;align-items:center;gap:20px;padding:18px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.ring{position:relative;display:grid;place-items:center;flex:none}
.ring>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.4}
.ring .rt{stroke:var(--sunk)}
.ring .rv{stroke:var(--lc,var(--acc));stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1)}
.ring.big{width:120px;height:120px}
.ring.big .rv{stroke:url(#none) var(--acc);stroke:var(--acc)}
.ring.big circle{stroke-width:3}
.rn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rn b{font:650 26px/1 "Geist",sans-serif;letter-spacing:-.03em}
.rn small{font-size:12px;color:var(--mute);margin-top:4px}
.ring.sm{width:40px;height:40px}
.ring.sm circle{stroke-width:3.6}
.ring .li{position:absolute;inset:0;display:grid;place-items:center;color:var(--lc)}
.ring .li svg{width:16px;height:16px;transform:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home .lanes{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.home .lane{display:flex;align-items:center;gap:12px;width:100%;padding:6px 10px 6px 6px;text-align:left;border:1px solid transparent;background:transparent;border-radius:12px}
.home .lane:hover{background:var(--sunk);border-color:var(--line)}
.lt{flex:1;min-width:0;display:flex;flex-direction:column}
.lt b{font-size:14px}
.lt small{font-size:12px;color:var(--mute)}
.home .lane.full .lt small{color:var(--ok);font-weight:600}
.lk{display:inline-flex;align-items:center;gap:3px;font:600 12px "Geist Mono",monospace;color:var(--hot)}
.lk svg{width:13px;height:13px;fill:currentColor}
.bedtime{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:500;background:color-mix(in srgb,var(--c2) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--c2) 25%,var(--line))}
.bedtime svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--c2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bedtime.late{font-weight:600}
@media (min-width:900px){.hero2{grid-template-columns:1.25fr 1fr;gap:32px;align-items:end;margin:20px 0 22px}}


/* Quote */
.quote.q2{border-left:1px solid var(--line);border-radius:18px;padding:16px 18px 14px;position:relative;overflow:hidden;margin:0 0 18px}
.quote.q2::before{content:"\201C";position:absolute;right:18px;top:-18px;font:700 120px/1 Georgia,serif;color:color-mix(in srgb,var(--acc) 14%,transparent);pointer-events:none}
.q-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.q2 blockquote{margin:0 0 12px;max-width:62em}
.q2 #qt{font:500 clamp(16px,2.6vw,19px)/1.5 "Geist",sans-serif;letter-spacing:-.012em}
.q2 #qa{font-size:13px;margin-top:6px}
.seg2{display:inline-flex;gap:2px;padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:10px}
.seg2 button{border:0;background:transparent;padding:6px 12px;font-size:13px;color:var(--mute);border-radius:7px}
.seg2 button[aria-pressed="true"]{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips.center{justify-content:center}
.chips button{padding:5px 12px;font-size:13px;border-radius:99px;color:var(--mute)}
.chips button[aria-pressed="true"]{color:var(--text)}
.q2 .qrow{margin:0}

/* Tabs */
.tabs.tabs2{position:sticky;top:70px;z-index:30;margin:0 0 18px;box-shadow:var(--shadow);background:color-mix(in srgb,var(--sunk) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tabs2 button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:color .2s}
.tabs2 button svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs2 button[aria-selected="true"]{background:transparent;box-shadow:none}
.tab-ind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:8px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 1px var(--line);pointer-events:none}
.tab-ind.ready{transition:transform .32s cubic-bezier(.3,1.2,.5,1),width .32s cubic-bezier(.3,1.2,.5,1)}
@media (max-width:420px){.tabs2 button{flex-direction:column;gap:3px;font-size:11px;padding:7px 2px}}
@media (prefers-reduced-motion:reduce){.tab-ind.ready{transition:none}}
.panel{animation:panelin .28s ease-out}
@keyframes panelin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}

/* Columns and cards */
.cols{display:grid;grid-template-columns:1fr;gap:0 18px;align-items:start}
.col{min-width:0}
@media (min-width:900px){.cols{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.home .card{border-radius:18px;padding:20px}
.ch2{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.ci{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)}
#p-gaming .ci{background:color-mix(in srgb,var(--c1) 13%,transparent);color:var(--c1)}
#p-sleep .ci{background:color-mix(in srgb,var(--c2) 13%,transparent);color:var(--c2)}
#p-coding .ci{background:color-mix(in srgb,var(--c3) 13%,transparent);color:var(--c3)}
.ci svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct2{flex:1;min-width:0;padding-top:1px}
.ct2 h2{font-size:16px;line-height:1.3;margin:0}
.ct2 .mute{margin:2px 0 0;font-size:13px}
.ch2 .streak,.ch2 .pill,.ch2 .mnav{flex:none;margin-top:4px}
.prog{display:flex;align-items:center;gap:12px;margin:14px 0 2px}
.prog .mute{margin:0;font:600 12px "Geist Mono",monospace;white-space:nowrap}
.prog .bar{flex:1;margin:0}
.home label.t{padding:13px 4px;border-radius:10px;transition:background .15s;border-top-color:var(--line)}
.home label.t:hover{background:color-mix(in srgb,var(--sunk) 70%,transparent)}
.home label.t b{display:inline;font-weight:600}
.home label.t span{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.home label.t input:checked+div b{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text) 40%,transparent);color:var(--mute)}
.tpill{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;font:600 11px/1.7 "Geist Mono",monospace;font-style:normal;color:var(--mute);background:var(--sunk);border:1px solid var(--line);vertical-align:1px;text-decoration:none}
.home .ed{border-top:1px solid var(--line);margin-top:4px}
.home .ed .row button{background:transparent}
.home .dg .head b{font-size:17px}
.home .steps{counter-reset:s;list-style:none;padding:0}
.home .steps li{counter-increment:s;position:relative;padding-left:34px;margin:10px 0}
.home .steps li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px "Geist Mono",monospace;background:color-mix(in srgb,var(--c1) 14%,transparent);color:var(--c1)}
.home .tip{border-left:3px solid var(--c1)}

/* Timer ring */
.tring{position:relative;width:180px;height:180px;margin:6px auto 12px}
.tring svg{width:100%;height:100%;transform:rotate(-90deg)}
.tring circle{fill:none;stroke-width:7}
.tring .rt{stroke:var(--sunk)}
.tring .rv{stroke:var(--c1);stroke-linecap:round;stroke-dasharray:100 100;transition:stroke-dasharray .3s linear}
.tring .timer{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:38px}
.tring.run .timer{color:var(--text)}
.tring:not(.run) .timer{color:color-mix(in srgb,var(--text) 80%,var(--mute))}
#tpre{margin-bottom:4px}
.home .side .row button{flex:1}

/* Tilt */
.tilt-b button{padding:12px;font-weight:600}
.tilt-b .calm:hover{border-color:var(--ok);color:var(--ok)}
.tilt-b .tilted:hover{border-color:var(--hot);color:var(--hot)}
.tdots{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;min-height:12px}
.tdots i{width:12px;height:12px;border-radius:50%}
.tdots i.c{background:var(--ok)}
.tdots i.t{background:var(--hot)}
.tdots .mute{margin:0;font-size:13px}
.row.sm{margin-top:6px}
.row.sm button{padding:6px 10px;font-size:13px}
button.ghost{background:transparent;border-color:transparent;color:var(--mute)}
button.ghost:hover{color:var(--text);border-color:var(--line2)}

/* Sleep */
.sleep-res{text-align:center;margin-top:14px}
.sleep-res #sr{font:650 22px "Geist",sans-serif;letter-spacing:-.02em;margin:0}
.sleep-res #sr.good{color:var(--ok)}
.sleep-res #sr.low{color:var(--hot)}
.sleep-res .mute{margin:2px 0 0}
#p-sleep .grid label{text-align:left}
.snights{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:92px;margin-top:14px}
.snights .sn{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.snights .sn i{display:block;width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:var(--line2)}
.snights .sn.good i{background:var(--c2)}
.snights .sn.low i{background:color-mix(in srgb,var(--c2) 45%,var(--line2))}
.snights .sn b{font:500 11px "Geist Mono",monospace;color:var(--mute)}

/* Coding */
.inrow{display:flex;gap:8px;align-items:stretch}
.inrow input{margin:0;flex:1;min-width:0}
.inrow button{flex:none;padding:0 18px}
.tlog{list-style:none;padding:0;margin:12px 0 0}
.tlog li{margin:0;padding:10px 0;border-top:1px solid var(--line);font-size:14px;overflow-wrap:anywhere}
.tlog li b{font:600 12px "Geist Mono",monospace;color:var(--mute);margin-right:4px}
.card.idea{background:radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--c3) 12%,transparent),transparent 70%),var(--panel)}
.home .pit{font-size:19px;letter-spacing:-.015em}

/* Summary */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.tile{padding:16px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;min-width:0}
.tile span{font-size:12px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.tile b{font:650 26px/1.2 "Geist",sans-serif;letter-spacing:-.03em}
.tile small{font-size:12px;color:var(--mute)}
@media (max-width:520px){.tiles{grid-template-columns:1fr 1fr}.tile:last-child{grid-column:1/-1}}
.home #sm p{display:flex;flex-direction:column;gap:1px;margin:0;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.home #sm p:first-child{border-top:0;padding-top:0}
.home #sm p b{font-size:12px;font-weight:600;color:var(--mute)}
.home .bd.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.home .ch2 h2 #mot{font:inherit}

/* Keyboard help */
.kl{margin:12px 0 4px;display:grid;gap:6px}
.kl div{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.kl dt,.kl dd{margin:0}
kbd{font:600 12px "Geist Mono",monospace;padding:3px 8px;border-radius:6px;background:var(--sunk);border:1px solid var(--line2);box-shadow:0 1px 0 var(--line2)}

/* Focus mode on the new layout */
body.focus .hero2,body.focus .appbar .ab-r>:not(.pf){display:none!important}
body.focus .cols{grid-template-columns:1fr;max-width:640px;margin:0 auto}
.home #wc{max-width:520px;margin:0 auto}
.q2 .qrow{justify-content:flex-start}
.q2 .chips{flex:0 1 auto}
.quote.q2::before{right:64px;top:-14px}
@media (max-width:420px){.today-card{flex-direction:row;align-items:center;gap:12px;padding:14px}.ring.big{width:92px;height:92px}.rn b{font-size:21px}.home .lane{padding:4px 6px 4px 2px;gap:9px}.ring.sm{width:34px;height:34px}}
.streak.zero{color:var(--mute);background:var(--sunk)}

/* ===== App pop-ups (dialog.js) ===== */
.ui-dlg{width:min(400px,calc(100vw - 32px));padding:24px;border-radius:18px;text-align:center}
.ui-dlg[open]{animation:uiin .22s cubic-bezier(.2,.8,.2,1)}
.ui-dlg::backdrop{background:rgba(5,7,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@keyframes uiin{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.ui-ic{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;font:700 20px "Geist",sans-serif;color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.ui-dlg.danger .ui-ic{color:#e5484d;background:color-mix(in srgb,#e5484d 14%,transparent)}
.ui-dlg h2{font-size:19px;margin:0 0 6px}
.ui-dlg .mute{font-size:14px;line-height:1.55}
.ui-dlg .ui-in{margin-top:14px;text-align:center;font-weight:600;letter-spacing:.06em}
.ui-dlg .row{margin-top:20px}
.ui-dlg .row button{padding:11px;border-radius:10px;font-weight:600}
.ui-dlg.danger .ui-ok{background:#e5484d;border-color:#e5484d;color:#fff}
@media (prefers-reduced-motion:reduce){.ui-dlg[open]{animation:none}}

/* ===== Landing: lane cards + extras (v2) ===== */
.lp .lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
.lp .lane{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:28px 26px 26px;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:20px;overflow:hidden;
 background:radial-gradient(360px 180px at 0% 0%,color-mix(in srgb,var(--lane) 16%,transparent),transparent 70%),var(--panel);box-shadow:var(--shadow);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.lp .lane::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--lane),transparent 85%)}
.lp .lane:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--lane) 45%,var(--line));box-shadow:var(--shadow),0 18px 40px -18px color-mix(in srgb,var(--lane) 55%,transparent)}
.lane-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:18px;color:var(--lane);background:color-mix(in srgb,var(--lane) 15%,transparent);border:1px solid color-mix(in srgb,var(--lane) 30%,transparent)}
.lane-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp .lane h3{display:block;font-size:21px;letter-spacing:-.02em;margin:0 0 8px}
.lp .lane p{color:var(--mute);font-size:15px;line-height:1.55;margin:0 0 20px}
.lp .lane ul{list-style:none;padding:18px 0 0;margin:0;width:100%;border-top:1px solid var(--line);display:grid;gap:10px}
.lp .lane li{position:relative;margin:0;padding-left:28px;font-size:14px;line-height:1.45}
.lp .lane li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
 background:var(--lane) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2L11.5 6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.lp .extras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:22px 0 0}
.lp .extras li{display:flex;flex-direction:column;gap:12px;margin:0;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--panel);transition:border-color .2s}
.lp .extras li:hover{border-color:var(--line2)}
.lp .extras svg{width:36px;height:36px;padding:8px;border-radius:10px;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);flex:none}
.lp .extras b{display:block;font-size:15px;margin-bottom:3px}
.lp .extras span{display:block;color:var(--mute);font-size:13px;line-height:1.5}
@media (max-width:980px){.lp .extras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.lp .lanes{grid-template-columns:1fr}}
@media (max-width:480px){.lp .extras{grid-template-columns:1fr}.lp .extras li{flex-direction:row;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.lp .lane{transition:none}.lp .lane:hover{transform:none}}

/* =====================================================================
   Motion + polish pass
   ===================================================================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes slideBack{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* Every page eases in */
body>main,body>.lgl-main{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both}
.home main.hm{animation:none}

/* Buttons feel pressable */
button,a.btnlink,.btn-pri,.btn-out{transition:background .15s,border-color .15s,color .15s,box-shadow .15s,filter .15s,transform .12s}
button:active:not(:disabled),a.btnlink:active{transform:scale(.97)}
.pri:not(:disabled):hover{box-shadow:0 6px 18px -6px color-mix(in srgb,var(--acc) 70%,transparent)}

/* Checkboxes pop when ticked */
input[type=checkbox]:checked{animation:pop .28s cubic-bezier(.3,1.5,.5,1)}
label.t input:checked+div{transition:opacity .2s}

/* Progress bars: smooth fill + a soft shine when full */
.bar i{transition:width .5s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.bar i[style*="width: 100%"]::after,.bar i[style*="width:100%"]::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 1.4s ease-out 1}

/* Home: staggered entrance on first load */
.enter .hero2-l{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.enter .hero2-r{animation:fadeUp .5s .08s cubic-bezier(.2,.8,.2,1) both}
.enter .q2{animation:fadeUp .5s .14s cubic-bezier(.2,.8,.2,1) both}
.enter .tabs2{animation:fadeUp .5s .2s cubic-bezier(.2,.8,.2,1) both}
.enter .panel{animation:none}
.enter .col>.card{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.enter .col>.card:nth-child(1){animation-delay:.26s}.enter .col>.card:nth-child(2){animation-delay:.32s}
.enter .col>.card:nth-child(3){animation-delay:.38s}.enter .col>.card:nth-child(4){animation-delay:.44s}
.enter .side>.card:nth-child(1){animation-delay:.3s}.enter .side>.card:nth-child(2){animation-delay:.36s}.enter .side>.card:nth-child(3){animation-delay:.42s}
.enter .tiles .tile{animation:fadeUp .5s .26s cubic-bezier(.2,.8,.2,1) both}
.home .card{transition:border-color .2s,box-shadow .2s}
.home .card:hover{border-color:var(--line2)}
.nx-l.swap{animation:slideIn .35s cubic-bezier(.2,.8,.2,1)}
.home .lane{transition:background .15s,border-color .15s,transform .15s}
.home .lane:active{transform:scale(.98)}
.ring .rv{transition:stroke-dasharray .7s cubic-bezier(.2,.8,.2,1),opacity .2s}
.tile{transition:transform .2s,border-color .2s}
.tile:hover{transform:translateY(-2px);border-color:var(--line2)}
.home .tdots i{animation:pop .3s cubic-bezier(.3,1.5,.5,1) both}
.snights .sn i{transform-origin:bottom;animation:grow .6s cubic-bezier(.2,.8,.2,1) both}
.snights .sn:nth-child(2) i{animation-delay:.04s}.snights .sn:nth-child(3) i{animation-delay:.08s}.snights .sn:nth-child(4) i{animation-delay:.12s}
.snights .sn:nth-child(5) i{animation-delay:.16s}.snights .sn:nth-child(6) i{animation-delay:.2s}.snights .sn:nth-child(7) i{animation-delay:.24s}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.wk .bar-v{transform-box:fill-box;transform-origin:bottom;animation:grow .6s cubic-bezier(.2,.8,.2,1) both}
.home .menu,.menu{animation:menuIn .16s ease-out;transform-origin:top right}
@keyframes menuIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.dlg[open]{animation:uiin .22s cubic-bezier(.2,.8,.2,1)}
.dlg::backdrop{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
details.tv[open]>*:not(summary){animation:fadeUp .3s ease-out}
.tv summary{transition:color .15s}.tv summary:hover{color:var(--text)}

/* Better time picker button */
.tpb{position:relative;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 14px 11px 40px;font:600 16px "Geist Mono",monospace;background:var(--sunk);border:1px solid var(--line2);border-radius:10px}
.tpb::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--mute);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
.tpb:hover::before{background:var(--acc)}
.tpp:not([hidden]){animation:fadeUp .2s ease-out}
.tpc button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}

/* ===== Settings + leaderboard pages ===== */
.subpage main.sub-main{max-width:720px;padding-top:28px}
.ab-back{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;background:transparent;border:1px solid var(--line2);color:var(--mute);font-size:14px}
.ab-back:hover{color:var(--text)}
.ab-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.ab-back span{display:none}.ab-back{width:36px;padding:0;justify-content:center}.subpage .appbar .brand span:last-child{display:none}}
.page-hero{margin:4px 0 22px}
.page-hero h1{font-size:clamp(28px,6vw,38px);letter-spacing:-.035em;margin:0 0 4px}
.page-hero .sub{margin:0}
.subpage .card{border-radius:18px;padding:22px}
.subpage .ch2 .mute{font-size:13px;margin:2px 0 0}
.subpage .card{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.subpage .card:nth-of-type(2){animation-delay:.05s}.subpage .card:nth-of-type(3){animation-delay:.1s}
.subpage .card:nth-of-type(4){animation-delay:.15s}.subpage .card:nth-of-type(5){animation-delay:.2s}.subpage .card:nth-of-type(6){animation-delay:.25s}
.subpage .l{font-size:13px;font-weight:600;color:var(--text);opacity:.8}
/* Segmented choices (Look, Sound) */
#md,#snd{display:flex;gap:3px;padding:3px;margin-top:8px;background:var(--sunk);border:1px solid var(--line);border-radius:11px;flex-wrap:nowrap}
#md button,#snd button{flex:1;border:0;background:transparent;color:var(--mute);padding:8px;border-radius:8px;font-weight:600}
#md button[aria-pressed="true"],#snd button[aria-pressed="true"]{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 1px var(--line)}
/* Day pills */
#fd{gap:6px;margin-top:8px}
#fd button{flex:1 1 0;min-width:44px;padding:9px 0;border-radius:99px;font-weight:600;font-size:13px;color:var(--mute)}
#fd button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
/* Theme swatches */
#th{gap:10px;margin-top:8px}
#th .sw{width:32px;height:32px;transition:transform .15s,box-shadow .15s}
#th .sw:hover{transform:scale(1.1)}
#th .sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 4px currentColor;transform:scale(1.05)}
.subpage .danger{color:#e5484d;border-color:color-mix(in srgb,#e5484d 35%,var(--line2))}
.subpage .danger:hover{background:color-mix(in srgb,#e5484d 10%,var(--panel));border-color:#e5484d}
.subpage .legal-links{margin:24px 0 8px}
/* Leaderboard */
.empty-st{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 10px}
.es-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;margin-bottom:16px;color:var(--acc);background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--acc) 28%,transparent),color-mix(in srgb,var(--acc) 10%,transparent));border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);animation:pop .5s cubic-bezier(.3,1.5,.5,1) both}
.es-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty-st h2{font-size:20px;margin:0 0 6px}
.empty-st .mute{max-width:340px;margin:0 0 18px}
.empty-st .pri{padding:11px 22px;border-radius:10px}
.lb li{animation:fadeUp .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 50ms)}
.lb li.me{border-radius:12px;margin:2px -10px;padding:12px 10px;border-top-color:transparent}
.lb li:nth-child(1) .rk{color:#e8a317}.lb li:nth-child(2) .rk{color:#9aa3b5}.lb li:nth-child(3) .rk{color:#c27c4a}
.codebox{border-radius:14px;padding:14px 16px;background:radial-gradient(300px 120px at 0% 0%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%),var(--sunk)}
#cnt.pill{margin-top:4px}

/* ===== Setup page ===== */
.setup .ob-brand{justify-content:flex-start;margin:0 0 28px}
.setup .obm{justify-content:flex-start;padding-top:max(40px,8vh)}
.setup .obm>h1{font-size:clamp(26px,6vw,34px);letter-spacing:-.03em}
.setup .obm>.bar{height:8px;background:color-mix(in srgb,var(--line2) 70%,transparent);margin:10px 0 18px}
.setup .obm .card{border-radius:18px;padding:24px}
.setup .obm .card.swap{animation:slideIn .35s cubic-bezier(.2,.8,.2,1)}
.setup .obm .card.swap.back{animation-name:slideBack}
.setup .ch button{position:relative;padding:15px 40px 15px 14px;border-radius:12px;font-weight:500;transition:background .15s,border-color .15s,transform .12s}
.setup .ch button:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line2))}
.setup .ch button::after{content:"";position:absolute;right:13px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:1.5px solid var(--line2);transition:background .15s,border-color .15s}
.setup .ch button[aria-pressed="true"]::after{border-color:var(--acc);background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2L11.5 6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;animation:pop .25s cubic-bezier(.3,1.5,.5,1)}
.setup .obm>.row button{padding:12px;border-radius:10px;font-weight:600}
.setup #nx:disabled{background:var(--sunk);border-color:var(--line2);color:var(--mute);opacity:1}

/* Calm mode: respect "reduce motion" everywhere */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.ct2 p,.ct2 h2,.mh b,.mh span,.rl li,.ntp li,.tlog li,.nx-l b,.lb .nm b{overflow-wrap:anywhere}
/* Leaderboard rows on small phones: actions drop below */
@media (max-width:440px){
 .lb li{flex-wrap:wrap;row-gap:8px}
 .lb .nm{flex:1 1 0}
 .lb .sv b{font-size:18px}
 .lb .sv .mute{font-size:11px}
 .lb .acts{flex-direction:row!important;width:100%;padding-left:66px;gap:6px}
 .lb .acts button{flex:1}
}
/* Small phones: keep the landing header and headline tidy */
.lp-brand{white-space:nowrap}
@media (max-width:380px){.lp-bar .lp-brand{font-size:0;gap:0}.lp-bar .lp-brand .logo{font-size:15px}}
.hero-h{font-size:clamp(32px,10.5vw,72px)}
.lp .btn-pri,.lp a.btn-pri{color:#fff}
/* Touch screens: no "stuck" hover lifts */
@media (hover:none){
 .lp .lane:hover,.tile:hover,#th .sw:hover{transform:none}
 .home .card:hover,.tile:hover{border-color:var(--line)}
}
@media (min-width:600px) and (max-width:899px){.side{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}.side>.card:only-child{grid-column:1/-1}}
.news{max-height:min(52vh,460px);overflow-y:auto;padding-right:6px}.news li{font-size:14px;line-height:1.5}

/* ===== Coding tab v2 ===== */
.ctiles{margin-bottom:14px}
.tring.code .rv{stroke:var(--c3)}
#p-coding .chips button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--c3) 55%,transparent);background:color-mix(in srgb,var(--c3) 12%,transparent);color:var(--c3)}
.cmins{height:70px}
.cmins .sn.good i{background:var(--c3)}
.center{text-align:center}
.ctip{background:radial-gradient(380px 180px at 0% 0%,color-mix(in srgb,var(--c3) 10%,transparent),transparent 70%),var(--panel)}
.ctt{font:500 16px/1.5 "Geist",sans-serif;margin:4px 0 0;letter-spacing:-.01em}
.site{display:flex;align-items:center;gap:12px;padding:11px 12px;margin:0 -12px;border-radius:12px;color:inherit;text-decoration:none;transition:background .15s}
.site+.site{border-top:1px solid var(--line)}
.site:hover{background:var(--sunk)}
.site .st{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.site b{font-size:14px;font-weight:600}
.site small{font-size:12.5px;color:var(--mute);overflow-wrap:anywhere}
.site em{font:600 11px "Geist Mono",monospace;font-style:normal;color:var(--mute);border:1px solid var(--line2);border-radius:6px;padding:2px 6px;flex:none}
.site:focus-visible{outline:2px solid var(--c3);outline-offset:-2px}
#csm{margin-top:6px}
@media (max-width:520px){.ctiles .tile:last-child{grid-column:auto}}