/* ───────── tokens ───────── */
:root{--h:285}
body{
  --text:oklch(.2 .03 var(--h));--muted:oklch(.46 .04 var(--h));--pri:oklch(.5 .18 var(--h));--onpri:#fff;
  --stage1:oklch(.985 .012 var(--h));--stage2:oklch(.9 .05 var(--h));--glow:oklch(.72 .13 var(--h)/.4);--surface:oklch(.93 .03 var(--h));
  /* device */
  --d-bg:oklch(.975 .014 var(--h));--d-surf:oklch(.93 .03 var(--h));--d-card:oklch(.88 .06 var(--h));
  --d-pri:oklch(.5 .17 var(--h));--d-onpri:#fff;--d-text:oklch(.2 .03 var(--h));--d-muted:oklch(.46 .04 var(--h));
  --d-line:oklch(.84 .03 var(--h));--d-tile-l:.88;--d-tile-c:.07;--d-tile-i:oklch(.34 .13 var(--h));
  --d-wall-l:radial-gradient(120% 70% at 0% 0%,oklch(.9 .07 var(--h)),oklch(.975 .014 var(--h)) 70%);
  --d-wall-r:radial-gradient(110% 60% at 100% 0%,oklch(.9 .07 calc(var(--h) + 30)),oklch(.975 .014 var(--h)) 70%);
  --disp:'Bricolage Grotesque',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
}
body.dark-mode{
  --text:oklch(.96 .01 var(--h));--muted:oklch(.76 .04 var(--h));--pri:oklch(.82 .13 var(--h));--onpri:oklch(.22 .06 var(--h));
  --stage1:oklch(.2 .06 var(--h));--stage2:oklch(.12 .03 var(--h));--glow:oklch(.55 .2 var(--h)/.42);--surface:oklch(.22 .04 var(--h));
  --d-bg:oklch(.19 .04 var(--h));--d-surf:oklch(.25 .05 var(--h));--d-card:oklch(.32 .08 var(--h));
  --d-pri:oklch(.85 .12 var(--h));--d-onpri:oklch(.25 .06 var(--h));--d-text:oklch(.96 .01 var(--h));--d-muted:oklch(.78 .04 var(--h));
  --d-line:oklch(.33 .05 var(--h));--d-tile-l:.34;--d-tile-c:.09;--d-tile-i:oklch(.92 .09 var(--h));
  --d-wall-l:radial-gradient(120% 70% at 0% 0%,oklch(.32 .09 var(--h)),oklch(.19 .04 var(--h)) 70%);
  --d-wall-r:radial-gradient(110% 60% at 100% 0%,oklch(.3 .09 calc(var(--h) + 30)),oklch(.19 .04 var(--h)) 70%);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--disp);background:var(--stage2);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;transition:color .4s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--d-pri);outline-offset:2px}
.lang-es{display:none}
body[data-lang="es"] .lang-es{display:inline}
body[data-lang="es"] .lang-en{display:none}
body.dark-mode .stack-icon[alt="GitHub"]{filter:invert(1)}

/* ───────── chrome ───────── */
.nav{position:fixed;z-index:50;top:14px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.nav>*{pointer-events:auto}
.logo{font:800 1.4rem var(--disp);letter-spacing:-.05em;display:flex;align-items:flex-end;gap:2px}
.logo i{width:6px;height:6px;border-radius:50%;background:var(--pri);margin-bottom:6px}
.nav-r{display:flex;gap:6px}
.icon-btn{min-width:40px;height:40px;padding:0 12px;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--text) 9%,transparent);font:600 .72rem var(--mono);transition:.2s;backdrop-filter:blur(10px)}
.icon-btn:hover{background:color-mix(in srgb,var(--text) 16%,transparent)}

/* ───────── stage ───────── */
.stage{--W:min(92vw,41svh);position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,var(--stage1),var(--stage2));transition:background .4s}
@media (min-width:900px){.stage{--W:min(44vw,41svh)}}
.glow{position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--glow),transparent 62%);filter:blur(30px);pointer-events:none}
.shapes i{position:absolute;pointer-events:none;opacity:.5}
.s1{left:8%;top:24%;width:90px;height:90px;border:2px solid color-mix(in srgb,var(--pri) 55%,transparent);border-radius:50% 50% 50% 8%;animation:spin 26s linear infinite}
.s2{right:10%;bottom:18%;width:120px;height:120px;background:color-mix(in srgb,var(--pri) 25%,transparent);border-radius:42% 58% 63% 37%/45% 45% 55% 55%;animation:morph 9s ease-in-out infinite alternate}
.s3{right:20%;top:20%;width:46px;height:46px;background:color-mix(in srgb,var(--pri) 55%,transparent);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:spin 18s linear infinite reverse}
@keyframes spin{to{rotate:360deg}}
@keyframes morph{50%{border-radius:63% 37% 40% 60%/55% 38% 62% 45%}100%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}}
.eyebrow{position:absolute;top:calc(50% + 4.6vw);left:0;right:calc(50% + var(--W)/2 + clamp(12px,3vw,44px));text-align:right;font:500 .76rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--pri)}
.names{position:absolute;inset:0;display:grid;grid-template-columns:1fr var(--W) 1fr;column-gap:clamp(12px,3vw,44px);align-items:center;font:800 clamp(2.2rem,6.4vw,6.6rem)/.94 var(--disp);letter-spacing:-.05em;pointer-events:none}
.w-l{justify-self:end;grid-column:1;text-align:right}
.w-r{justify-self:start;grid-column:3;color:transparent;-webkit-text-stroke:2px var(--pri)}
.ch{display:inline-block}
@media (max-width:899px){.names,.eyebrow{display:none}}
.scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.fold-btn{position:absolute;left:50%;bottom:max(14px,2svh);transform:translateX(-50%);height:42px;padding:0 22px;border-radius:999px;background:var(--pri);color:var(--onpri);font:500 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 24px color-mix(in srgb,var(--pri) 35%,transparent)}
.fold-btn:hover{transform:translateX(-50%) translateY(-2px)}
.fb-close{display:none}
.is-open .fb-open{display:none}.is-open .fb-close{display:inline}

/* ───────── device shell ───────── */
.device{font-size:calc(var(--W)/24);width:calc(var(--W)*2);height:calc(var(--W)*2.1);position:relative}
.slide{position:absolute;inset:0;perspective:2400px}
.fold{position:absolute;inset:0;transform-style:preserve-3d}
.panel{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d}
.panel.l{left:0;transform-origin:100% 50%}
.panel.r{left:50%}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0b0b0e;box-shadow:inset 0 0 0 .14em #2b2b31,inset 0 0 0 .2em #4a4a52,0 3em 6em -2em rgba(0,0,0,.55)}
.panel.l .f-front{border-radius:2.9em .9em .9em 2.9em}
.panel.l .f-back{transform:rotateY(180deg);border-radius:.9em 2.9em 2.9em .9em}
.panel.r .f-front{border-radius:.9em 2.9em 2.9em .9em}
.is-open .f-back{pointer-events:none}
.nogsap .panel.l{transform:rotateY(0)}
.screen{position:absolute;inset:.5em;overflow:hidden;color:var(--d-text);font-family:'Roboto',system-ui,sans-serif;line-height:1.35;background:var(--d-bg)}
.inner-l{border-radius:2.5em .35em .35em 2.5em;background:var(--d-wall-l)}
.inner-r{border-radius:.35em 2.5em 2.5em .35em;background:var(--d-wall-r);display:flex;flex-direction:column}
.cover{border-radius:.35em 2.5em 2.5em .35em;color:#fff;cursor:pointer;background:radial-gradient(90% 60% at 80% 10%,oklch(.55 .2 var(--h)),transparent 60%),radial-gradient(80% 60% at 10% 100%,oklch(.4 .17 calc(var(--h) + 50)),oklch(.16 .05 var(--h)) 80%)}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.2));opacity:0;pointer-events:none;z-index:30}
.punch{position:absolute;top:1em;left:50%;width:1em;height:1em;margin-left:-.5em;border-radius:50%;background:#000;box-shadow:0 0 0 .12em #111;z-index:25}
.punch.r{left:auto;right:2em;margin:0}
.gesture{position:absolute;bottom:.7em;left:50%;width:9em;height:1.4em;margin-left:-4.5em;z-index:20;display:block}
.gesture::after{content:"";position:absolute;left:1em;right:1em;top:.55em;height:.32em;border-radius:1em;background:var(--d-text);opacity:.5;transition:opacity .2s,transform .2s}
.cover .gesture::after{background:#fff}
button.gesture:hover::after{opacity:.9;transform:scaleX(1.1)}
.crease{position:absolute;left:calc(50% - .12em);top:.5em;bottom:.5em;width:.24em;background:linear-gradient(90deg,transparent,rgba(0,0,0,.5),rgba(255,255,255,.08),transparent);opacity:0;pointer-events:none;transform:translateZ(3px)}
.status{display:flex;justify-content:space-between;align-items:center;padding:1.3em 2em 0;height:3.2em;font-size:.95em;font-weight:500;flex:none}
.st-ic{display:flex;gap:.5em;align-items:center}
/* cover */
.c-clock{position:absolute;top:5em;left:2em;display:grid;line-height:.82}
.c-clock b{font:700 11em/.82 'Roboto',sans-serif;letter-spacing:-.06em}
.c-clock .c-m{color:oklch(.88 .12 var(--h))}
.c-date{position:absolute;top:3.2em;left:2.1em;font-size:1.2em;font-weight:500;opacity:.9}
.c-pill{position:absolute;left:2em;right:2em;bottom:9em;display:flex;align-items:center;gap:1em;padding:.9em 1.2em;border-radius:1.6em;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);font-size:1.15em;font-weight:500}
.c-pill i{font-style:normal;width:2.2em;height:2.2em;border-radius:50%;background:oklch(.88 .12 var(--h));color:oklch(.25 .06 var(--h));display:grid;place-items:center;font-weight:700;font-size:.9em}
.c-hint{position:absolute;bottom:3em;left:0;right:0;text-align:center;font-size:.95em;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.c-hint em{display:inline-block;font-style:normal;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translate(.3em,-.3em)}}

/* ───────── home (right panel) ───────── */
.glance{padding:1.2em 2em 0;flex:none;transition:opacity .2s}
.g-date{font-size:.95em;font-weight:500;color:var(--d-pri)}
.g-time{font:400 4.2em/1 'Roboto',sans-serif;letter-spacing:-.05em;margin-top:.1em}
.search{margin:1.1em 1.5em 0;display:flex;align-items:center;gap:.8em;height:3.6em;padding:0 1.3em;border-radius:1.8em;background:var(--d-surf);color:var(--d-muted);font-size:1em;flex:none;cursor:text;border:1px solid transparent;transition:border-color .2s,background .2s}
.search:focus-within{border-color:var(--d-pri);background:var(--d-card)}
.search .mag{display:grid;flex:none}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--d-text);font-size:1em}
.search input::placeholder{color:var(--d-muted)}
.clear{display:none;width:2.2em;height:2.2em;border-radius:50%;place-items:center;flex:none}
.searching .clear{display:grid}
.searching .clear:hover{background:var(--d-line)}
.home-body{flex:1;min-height:0;padding:0 1.5em;display:flex;flex-direction:column;gap:.9em;margin-top:1em}
.searching .glance,.searching .home-body{display:none}
.w-exp{display:block;padding:1.1em 1.3em;border-radius:1.8em;background:var(--d-card);flex:none;transition:transform .2s}
.w-exp:hover{transform:scale(1.015)}
.w-exp h4{font-size:.68em;letter-spacing:.14em;color:var(--d-pri);font-weight:500;margin-bottom:.6em}
.w-exp p{font-size:.88em;color:var(--d-muted)}.w-exp p b{color:var(--d-text);font-size:1.5em;margin-right:.2em}
.av{display:flex;margin-bottom:.7em}
.av img{width:2.6em;height:2.6em;border-radius:50%;background:#fff;padding:.25em;object-fit:contain;margin-left:-.6em;box-shadow:0 0 0 .15em var(--d-card)}
.av img:first-child{margin-left:0}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em .5em;flex:none}
.tile{display:flex;flex-direction:column;align-items:center;gap:.5em;font-size:.72em;color:var(--d-text);text-align:center;font-weight:500}
.tile i{width:5.6em;height:5.6em;border-radius:1.9em;display:grid;place-items:center;background:oklch(var(--d-tile-l) var(--d-tile-c) calc(var(--h) + var(--t)));color:var(--d-tile-i);transition:border-radius .3s,transform .2s}
.tile:hover i{border-radius:50%;transform:translateY(-.2em)}
.tile:active i{transform:scale(.92)}
.tile svg{width:2.6em;height:2.6em}
.dock{margin-top:auto;margin-bottom:2.2em;display:flex;justify-content:space-between;padding:.8em 1.1em;border-radius:2em;background:var(--d-surf);flex:none}
.app{width:3.4em;height:3.4em;border-radius:1.1em;background:var(--d-bg);display:grid;place-items:center;transition:transform .25s}
.app:hover{transform:translateY(-.4em)}
.app .stack-icon{width:2em;height:2em;object-fit:contain}
/* search results */
.results{display:none;flex:1;min-height:0;overflow-y:auto;padding:1em 1.5em 2.6em;scrollbar-width:none}
.results::-webkit-scrollbar,.body::-webkit-scrollbar{display:none}
.searching .results{display:block}
.rlabel{font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:var(--d-pri);font-weight:500;margin:.4em .4em .8em}
.res{display:flex;width:100%;align-items:center;gap:1em;padding:.8em;border-radius:1.5em;transition:background .2s}
.res:hover,.res:focus-visible{background:var(--d-surf)}
.res i{flex:none;width:3.2em;height:3.2em;border-radius:1.1em;display:grid;place-items:center;background:oklch(var(--d-tile-l) var(--d-tile-c) calc(var(--h) + var(--t)));color:var(--d-tile-i)}
.res i svg{width:1.5em;height:1.5em}
.res span{min-width:0;display:block}
.res b{display:block;font-weight:500;font-size:1em;line-height:1.25}
.res small{display:block;font-size:.8em;color:var(--d-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
mark{background:color-mix(in srgb,var(--d-pri) 32%,transparent);color:inherit;border-radius:.2em;padding:0 .1em}
.sugg{display:flex;flex-wrap:wrap;gap:.6em}
.sugg button{padding:.6em 1.1em;border-radius:1em;background:var(--d-surf);font-size:.88em;font-weight:500;transition:background .2s}
.sugg button:hover{background:var(--d-card)}
.empty{padding:2em 1em;text-align:center;color:var(--d-muted);font-size:.95em}
.empty b{display:block;font-size:1.6em;color:var(--d-text);margin-bottom:.3em}

/* ───────── apps (left panel) ───────── */
.app-host{position:absolute;left:0;right:0;top:3.2em;bottom:2.4em;overflow:hidden}
.view{position:absolute;inset:0;display:flex;flex-direction:column}
.appbar{display:flex;align-items:center;gap:.8em;padding:.5em 1.5em .7em;flex:none}
.appbar h2{font-size:1.9em;font-weight:500;letter-spacing:-.02em;line-height:1.1;flex:1;min-width:0}
.back{width:2.9em;height:2.9em;border-radius:50%;background:var(--d-surf);display:grid;place-items:center;flex:none;transition:background .2s}
.back:hover{background:var(--d-card)}
.hide-back .back{display:none}
.body{flex:1;overflow-y:auto;padding:.4em 1.5em 1.6em;scrollbar-width:none}
.li{display:flex;align-items:center;gap:1em;width:100%;padding:.9em 1em;border-radius:1.6em;background:var(--d-surf);margin-bottom:.6em;transition:background .2s,transform .2s}
.li:hover{background:var(--d-card);transform:translateX(.2em)}
.li img{width:3.6em;height:3.6em;border-radius:1.2em;background:#fff;padding:.4em;object-fit:contain;flex:none}
.li .tx{flex:1;min-width:0}
.li b{display:block;font-weight:500;font-size:1.02em;line-height:1.25}
.li small{display:block;color:var(--d-muted);font-size:.8em;line-height:1.35}
.li .dt{font:500 .68em 'JetBrains Mono',monospace;letter-spacing:.05em;color:var(--d-pri);margin-top:.3em;display:block}
.li .chev{color:var(--d-muted);flex:none}
.prof{text-align:left}
.avatar{width:8.6em;height:8.6em;overflow:hidden;background:#fff;box-shadow:0 0 0 .3em var(--d-pri);animation:blob 8s ease-in-out infinite alternate;margin-bottom:1.1em}
.avatar img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
@keyframes blob{0%{border-radius:50%}25%{border-radius:38% 62% 63% 37%/41% 44% 56% 59%}50%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}75%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}100%{border-radius:45% 55% 40% 60%/55% 45% 55% 45%}}
.p-name{font-size:2.5em;line-height:1.05;font-weight:500;letter-spacing:-.02em}
.p-role{margin-top:.4em;font-size:1.1em;color:var(--d-pri);font-weight:500}
.dchip{display:inline-flex;align-items:center;gap:.5em;padding:.45em 1em;border:1px solid var(--d-line);border-radius:.8em;font-size:.88em;font-weight:500;margin-top:1em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;margin:1.2em 0}
.stat{padding:.8em .9em;border-radius:1.3em;background:var(--d-surf)}
.stat b{display:block;font-size:1.8em;line-height:1.1;color:var(--d-pri);font-weight:700}
.stat span{font-size:.72em;color:var(--d-muted);line-height:1.2;display:block}
.p-about{font-size:.95em;line-height:1.65;color:var(--d-muted)}
.detail-hero{display:flex;gap:1em;align-items:center}
.detail-hero img{width:5.4em;height:5.4em;border-radius:1.8em;background:#fff;padding:.7em;object-fit:contain;flex:none}
.detail-hero h3{font-size:1.55em;line-height:1.15;font-weight:500;letter-spacing:-.01em}
.detail-hero p{color:var(--d-muted);font-size:.9em;margin-top:.2em}
.pill{display:inline-block;padding:.45em 1em;border-radius:.8em;background:var(--d-pri);color:var(--d-onpri);font:500 .74em 'JetBrains Mono',monospace;letter-spacing:.06em;margin-top:1.1em}
.bigyear{font-size:8.5em;line-height:.85;font-weight:800;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:.025em var(--d-pri);margin:.15em 0 .1em -.03em}
.tl-lab{font-size:.68em;letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted);margin:1.2em 0 .6em;font-weight:500}
.tl{position:relative;padding-bottom:1.4em}
.tl-row{position:relative;height:.9em;margin-bottom:.35em;border-radius:.45em;background:color-mix(in srgb,var(--d-line) 45%,transparent)}
.tl-row i{position:absolute;top:0;bottom:0;border-radius:.45em;background:var(--d-card);transition:background .3s}
.tl-row.sel i{background:var(--d-pri)}
.tl-ax{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font:400 .62em 'JetBrains Mono',monospace;color:var(--d-muted)}
.pn{display:flex;gap:.6em;margin-top:1em}
.pn button{flex:1;min-width:0;padding:.8em 1em;border-radius:1.4em;background:var(--d-surf);font-size:.82em;transition:background .2s}
.pn button:hover{background:var(--d-card)}
.pn small{display:block;color:var(--d-muted);font-size:.8em}
.pn b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn .nx{text-align:right}
.card2{padding:1.2em 1.3em;border-radius:1.6em;background:var(--d-surf);margin-bottom:.7em}
.card2 .dt{font:500 .72em 'JetBrains Mono',monospace;color:var(--d-pri);letter-spacing:.08em}
.card2 h3{font-size:1.15em;font-weight:500;line-height:1.3;margin:.35em 0}
.card2 p{color:var(--d-muted);font-size:.82em}
.btn{display:flex;align-items:center;justify-content:center;gap:.7em;height:3.3em;border-radius:1.7em;font-weight:500;background:var(--d-pri);color:var(--d-onpri);width:100%;margin-top:.8em;transition:transform .2s}
.chero{padding:1.6em 1.4em;border-radius:1.8em;background:linear-gradient(145deg,var(--d-card),var(--d-surf));margin-bottom:.8em}
.chero .ch-i{display:grid;place-items:center;width:3.2em;height:3.2em;border-radius:1.1em;background:var(--d-pri);color:var(--d-onpri);margin-bottom:.9em}
.chero h3{font-size:1.6em;font-weight:500;margin:0 0 .25em}
.chero p{color:var(--d-muted);font-size:.85em;line-height:1.45;margin:0}
.crow{display:flex;align-items:center;gap:.9em;padding:.9em 1em;border-radius:1.5em;background:var(--d-surf);margin-bottom:.6em;transition:background .2s,transform .2s}
a.crow:hover{background:var(--d-card);transform:translateY(-.1em)}
.crow .ci{display:grid;place-items:center;flex:none;width:2.8em;height:2.8em;border-radius:50%;background:var(--d-bg);color:var(--d-pri)}
.crow .ct{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1em}
.crow .ct small{color:var(--d-muted);font-size:.72em;letter-spacing:.04em}
.crow .ct b{font-weight:500;font-size:.95em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .ca{color:var(--d-muted);flex:none}
.btn.t{background:var(--d-surf);color:var(--d-text)}
.btn:hover{transform:translateY(-.15em)}
.sec-l{font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:var(--d-pri);font-weight:500;margin:1.2em 0 .7em}
.chips{display:flex;flex-wrap:wrap;gap:.5em}
.chips span{padding:.6em 1.1em;border-radius:.9em;background:var(--d-surf);font-size:.84em;font-weight:500;letter-spacing:.03em;transition:background .3s,transform .3s}
.chips span.hl{background:var(--d-pri);color:var(--d-onpri);transform:scale(1.08)}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.tools a{display:flex;flex-direction:column;align-items:center;gap:.6em;padding:1em .4em;border-radius:1.5em;background:var(--d-surf);font-size:.72em;text-align:center;font-weight:500;transition:background .2s,transform .2s}
.tools a:hover{background:var(--d-card)}
.tools a:hover .stack-icon{transform:translateY(-.2em) translateZ(0)}
.tools a.hl{background:var(--d-pri);color:var(--d-onpri)}
.tools .stack-icon{width:3em;height:3em;object-fit:contain;transform:translateZ(0);backface-visibility:hidden;will-change:transform;transition:transform .2s;pointer-events:none}
.rings{display:grid;gap:.8em}
.ringc{display:flex;align-items:center;gap:1.2em;padding:1em 1.2em;border-radius:1.8em;background:var(--d-surf)}
.ringc svg{width:6.4em;height:6.4em;transform:rotate(-90deg);flex:none}
.ringc circle{fill:none;stroke-width:8;stroke-linecap:round}
.ringc .rb{stroke:var(--d-line)}.ringc .rf{stroke:var(--d-pri);stroke-dasharray:339.3;stroke-dashoffset:339.3}
.ringc b{display:block;font-size:1.5em;font-weight:500;line-height:1.1}
.ringc span{font:500 .72em 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted)}
.row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1em 1.2em;border-radius:1.5em;background:var(--d-surf);margin-bottom:.6em}
.row b{font-weight:500;display:block}.row small{color:var(--d-muted);font-size:.8em}
.sw-t{position:relative;width:4.2em;height:2.4em;border-radius:1.2em;background:var(--d-line);flex:none;transition:background .25s}
.sw-t::after{content:"";position:absolute;left:.3em;top:.3em;width:1.8em;height:1.8em;border-radius:50%;background:var(--d-muted);transition:transform .25s,background .25s}
.sw-t.on{background:var(--d-pri)}.sw-t.on::after{transform:translateX(1.8em);background:var(--d-onpri)}
.seg{display:flex;padding:.25em;border-radius:1.2em;background:var(--d-line);flex:none}
.seg button{padding:.45em 1.1em;border-radius:1em;font-size:.82em;font-weight:500;color:var(--d-muted);transition:.2s}
.seg button.on{background:var(--d-pri);color:var(--d-onpri)}
.accents{display:flex;gap:.7em;flex:none}
.accents button{width:2.2em;height:2.2em;border-radius:50%;background:oklch(.72 .16 var(--c));box-shadow:inset 0 0 0 .18em rgba(255,255,255,.35);transition:transform .2s}
.accents button.on{transform:scale(1.2);box-shadow:0 0 0 .2em var(--d-bg),0 0 0 .38em var(--d-pri)}
.toast{position:absolute;left:50%;bottom:3.2em;transform:translateX(-50%);padding:.8em 1.4em;border-radius:1.2em;background:var(--d-text);color:var(--d-bg);font-size:.85em;font-weight:500;z-index:40;pointer-events:none;white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.inner-r .status{padding-right:4.4em}
.device{-webkit-user-select:none;user-select:none}
.p-about,.res,.search input{-webkit-user-select:text;user-select:text}

/* ───────── Mobile: the page IS the OS (no device frame) ───────── */
.mobile-os,.mobile-os body{background:var(--d-bg)}
.mobile-os .nav,.mobile-os .fold-btn,.mobile-os .glow,.mobile-os .shapes,.mobile-os .names,.mobile-os .eyebrow,.mobile-os .punch,.mobile-os .crease,.mobile-os .shade{display:none!important}
.mobile-os .stage{background:none;position:fixed;inset:0}
.mobile-os .scene,.mobile-os .float,.mobile-os .tilt{position:static;display:block;animation:none!important;transform:none!important}
.mobile-os .device{position:fixed;inset:0;width:auto;height:auto;font-size:calc(min(100vw,460px,100svh/2.08)/24)}
.mobile-os .slide,.mobile-os .fold{position:absolute;inset:0;transform:none!important;perspective:none;transform-style:flat}
.mobile-os .panel{position:absolute;inset:0;width:100%;height:100%;left:0!important;transform:none!important}
.mobile-os .panel.l{display:none;z-index:5;overflow:hidden}
.mobile-os .panel.l.on{display:block}
.mobile-os .face{box-shadow:none;border-radius:0!important;background:none;backface-visibility:visible;-webkit-backface-visibility:visible}
.mobile-os .f-back{display:none}
.mobile-os .screen{inset:0;border-radius:0!important}
.mobile-os .inner-l{background:var(--d-bg)}
.mobile-os .status{padding:calc(1.1em + env(safe-area-inset-top)) 2em 0;height:calc(3em + env(safe-area-inset-top))}
.mobile-os .inner-r .status{padding-right:2em}
.mobile-os .app-host{top:calc(3em + env(safe-area-inset-top));bottom:2.6em}
.mobile-os .gesture{bottom:0;height:2.6em}
.mobile-os .gesture::after{top:1.2em}
.mobile-os .dock{margin-bottom:calc(2.6em + env(safe-area-inset-bottom))}
.mobile-os .results{padding-bottom:3em}
.mobile-os .home-body{overflow-y:auto;scrollbar-width:none}
/* lock screen */
.cover.lock{position:fixed;inset:0;border-radius:0;z-index:100;touch-action:none;cursor:grab;display:block}
.cover.lock .c-clock{top:calc(4.5em + env(safe-area-inset-top))}
.cover.lock .c-date{top:calc(2.6em + env(safe-area-inset-top))}
.cover.lock .c-hint{bottom:3.4em}
.cover.lock .gesture{display:block}

.g-date{display:flex;flex-wrap:wrap;align-items:center;gap:.2em .5em}
.wx{display:inline-flex;align-items:center;gap:.4em;margin-left:.2em;padding:.18em .7em .18em .5em;border-radius:1em;background:var(--d-card);color:var(--d-text);font-size:.95em;line-height:1.3;white-space:nowrap}
.wx[hidden]{display:none}
.wx-i{display:grid;color:var(--d-pri)}
.wx b{font-weight:500}

.dock{justify-content:space-around}
.dock .app{background:var(--ab);color:#fff;width:3.8em;height:3.8em;border-radius:1.4em;transition:transform .25s,border-radius .3s}
.dock .app:hover{border-radius:50%}
.dock .app svg{width:1.9em;height:1.9em}

/* lock-screen messaging notification */
.notif{position:absolute;left:1.6em;right:1.6em;bottom:8em;padding:1em 1.2em 1.1em;border-radius:1.9em;background:rgba(255,255,255,.17);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;box-shadow:0 .6em 2em rgba(0,0,0,.25);animation:notifIn .7s cubic-bezier(.2,1.3,.4,1) .5s backwards}
@keyframes notifIn{from{opacity:0;transform:translateY(2.5em) scale(.94)}}
.n-head{display:flex;justify-content:space-between;align-items:center;font-size:.78em;opacity:.85;margin-bottom:.8em;letter-spacing:.02em}
.n-app{display:inline-flex;align-items:center;gap:.6em;font-weight:500}
.n-app i{width:1.9em;height:1.9em;border-radius:.6em;background:oklch(.58 .17 252);display:grid;place-items:center}
.n-app svg{width:1.2em;height:1.2em}
.n-body{display:flex;gap:.9em;align-items:flex-start}
.n-av{width:3.2em;height:3.2em;border-radius:50%;background:#fff;object-fit:cover;flex:none;transform:scale(1)}
.n-text{position:relative;min-width:0;flex:1;min-height:3em}
.n-text b{display:block;font-size:1.05em;font-weight:500;line-height:1.3}
.n-msg{font-size:1em;line-height:1.35;margin-top:.15em;color:rgba(255,255,255,.92);animation:msgIn .45s ease 2.1s backwards}
@keyframes msgIn{from{opacity:0;transform:translateY(.5em)}}
.n-typing{position:absolute;left:0;top:1.8em;display:inline-flex;gap:.35em;padding:.55em .8em;border-radius:1em;background:rgba(255,255,255,.18);opacity:0;pointer-events:none;animation:typ 1.6s ease .7s both}
.n-typing u{width:.5em;height:.5em;border-radius:50%;background:#fff;animation:dot 1s ease-in-out infinite}
.n-typing u:nth-child(2){animation-delay:.15s}.n-typing u:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-.3em);opacity:.5}}
@keyframes typ{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
.cover.lock .notif{bottom:7em}

.n-role{font-weight:400;opacity:.85}
.n-slot{display:grid;margin-top:.25em}
.n-slot>*{grid-area:1/1}
.n-typing{position:static;align-self:start;justify-self:start;margin-top:.1em}
.n-msg{margin-top:0}
.n-text{min-height:0}

.st-bat{font-size:.92em;margin-right:-.15em;letter-spacing:.01em}
/* desktop: a single status bar, on the right panel (camera side) */
body:not(.mobile-os) #screenL .status{display:none}
body:not(.mobile-os) .app-host{top:2em}

.st-net{font-size:.82em;font-weight:500;letter-spacing:.02em;opacity:.9;margin-right:-.1em;white-space:nowrap}

/* status bar: unified icon set */
.st-ic{gap:.5em}
.st-ic .sti{width:1.25em;height:1.25em;flex:none;display:block}
.st-net,.st-bat{font-size:.86em;font-weight:500;letter-spacing:.01em;opacity:1;margin:0;line-height:1}
.st-net{margin-right:.1em}
.st-bat{margin-left:.1em;margin-right:-.15em}

/* scroll cue inside apps */
.sb{position:absolute;right:.5em;width:.4em;border-radius:1em;background:color-mix(in srgb,var(--d-line) 75%,transparent);pointer-events:none;z-index:6;display:none}
.sb i{display:block;width:100%;border-radius:1em;background:var(--d-pri);opacity:.7;transition:opacity .2s;animation:sbhint 1.8s ease .9s 1}
.sb.on i{opacity:1}
@keyframes sbhint{0%,100%{opacity:.7}35%,65%{opacity:1;box-shadow:0 0 0 .22em color-mix(in srgb,var(--d-pri) 35%,transparent)}}
.sfade{position:absolute;left:0;right:0;height:3.6em;background:linear-gradient(transparent,var(--d-bg));pointer-events:none;z-index:5;display:none}

.nav-r{margin-left:auto}

/* messages app */
.chat{padding:.4em 0 1em}
.c-day{text-align:center;color:var(--d-muted);font-size:.72em;letter-spacing:.06em;margin:.4em 0 1em}
.msg{display:flex;align-items:flex-end;gap:.7em}
.msg img{width:2.6em;height:2.6em;border-radius:50%;background:#fff;object-fit:cover;flex:none}
.bub{max-width:17em;padding:.8em 1.1em;border-radius:1.5em 1.5em 1.5em .4em;background:var(--d-surf);font-size:.98em;line-height:1.4}
.msg small{display:block;color:var(--d-muted);font-size:.68em;margin:.4em 0 0 .5em}
.reply{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:1.2em;padding:.9em .9em .9em 1.3em;border-radius:2em;border:1.5px solid var(--d-line);color:var(--d-muted);font-size:.92em;transition:background .2s,border-color .2s}
.reply:hover{background:var(--d-surf);border-color:var(--d-pri)}
.reply i{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:var(--d-pri);color:var(--d-onpri);font-style:normal}

/* after unfolding, drop the 3D context of the left panel so clicks always reach its content */
.settled .panel.l{transform-style:flat}
.settled .panel.l .f-back{visibility:hidden}