/* Page */
:root{
  --bg:#F5EFE2;
  --paper:#FBF7EE;
  --page-ink:#161613;
  --page-ink-2:#4A4A44;
  --muted:#6B6B66;
  --rule:#E1DBCC;
  --hover:#2A2A26;
  --ui:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ui-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Material 3 motion */
  --emph:cubic-bezier(.2,0,0,1);
  --emph-dec:cubic-bezier(.05,.7,.1,1);
  --emph-acc:cubic-bezier(.3,0,.8,.15);
  --std:cubic-bezier(.2,0,0,1);
  --std-dec:cubic-bezier(0,0,0,1);
  --std-acc:cubic-bezier(.3,0,1,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--page-ink);
  font-family:var(--ui);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
.stage{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:28px 16px 28px;
}
.bar{
  width:calc(1440px * var(--s,1));max-width:100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
}
.bar h1{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.2;margin-right:auto}
.jumps{display:flex;flex-wrap:wrap;gap:4px}
.jump{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;
  background:none;border:0;border-radius:8px;padding:6px 10px;cursor:pointer;
  font:inherit;font-size:.9rem;color:var(--page-ink);
  transition:background 180ms var(--ease);
}
.jump:hover{background:var(--paper)}
.jump[aria-current="true"]{background:var(--paper);font-weight:500}
.jump .k{font-family:var(--ui-mono);font-size:.75rem;color:var(--muted)}
.jump:focus-visible,.seg button:focus-visible{outline:2px solid var(--page-ink);outline-offset:1px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;gap:2px;background:var(--paper)}
.seg button{
  font:500 .85rem/1 var(--ui);border:0;background:none;color:var(--muted);
  padding:9px 14px;border-radius:999px;cursor:pointer;min-height:34px;
  transition:color 180ms var(--ease),background 180ms var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--page-ink);color:var(--bg)}
.hint{width:calc(1440px * var(--s,1));max-width:100%;font-size:.85rem;line-height:1.55;color:var(--muted);margin:0}
.hint b{color:var(--page-ink);font-weight:500}
.box{width:calc(1440px * var(--s,1));height:calc(900px * var(--s,1));flex:none}
@media (max-width:1024px){ .jump{min-height:44px} .seg button{min-height:44px} .seg{padding:2px} }
@media (max-width:700px){
  .stage{gap:14px;padding-top:20px}
  .bar h1{width:100%}
  .jumps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;width:calc(100% + 32px)}
  .jumps::-webkit-scrollbar{display:none}
  .jump{flex:none;white-space:nowrap;border:1px solid var(--rule);background:var(--paper);border-radius:999px;padding:6px 14px}
  .jump[aria-current="true"]{background:var(--page-ink);color:var(--bg);border-color:var(--page-ink)}
  .jump[aria-current="true"] .k{color:var(--bg)}
  .box{order:3}
  .hint{order:4}
}
html.embed .stage{padding:0;gap:0;justify-content:center;min-height:100vh}
html.embed .bar,html.embed .hint{display:none}

/* Screen */
.screen{
  --font:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  position:relative;width:1440px;height:900px;overflow:hidden;
  transform:scale(var(--s,1));transform-origin:0 0;
  font-family:var(--font);color:var(--t1);background:var(--ground);
  border-radius:calc(10px / var(--s,1));
  box-shadow:0 0 0 1px rgba(22,22,19,.07),0 24px 60px -18px rgba(22,22,19,.26);
  user-select:none;-webkit-user-select:none;
  font-feature-settings:"tnum" 0;
}
html.embed .screen{border-radius:0;box-shadow:none}

/* Bone tokens, Light */
.screen{
  --ground:#f2f0ec;--raised:#fcfbf9;--sunken:#edebe7;
  --t1:#141618;--t2:#5a6068;--t3:#676a71;--on-solid:#fcfbf9;
  --hairline:#141618;--strong:#141618;--card:#e7e3dc;--divider:#ebe8e1;
  --verified:#0e7350;--network:#1a56b8;--sensors:#5b3fa8;--attention:#9c5a03;--danger:#b32e2e;
  --tint-verified:#e2efe9;--tint-network:#e3eaf7;--tint-sensors:#eae6f6;--tint-attention:#f5ebdd;--tint-danger:#f7e4e4;
  --r-row:24px;--r-card:28px;--r-sheet:32px;--r-icon:17px;--r-pill:999px;--r-button:20px;--r-tile:26px;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:24px;--sp8:32px;--sp12:48px;
  --gutter:26px;--row-x:18px;--row-y:15px;--row-gap:14px;--bar-x:22px;--tight:10px;
  --shadow:0 2px 10px rgba(20,23,28,.05);
  --ripple:rgba(20,22,24,.09);
  --glow:rgba(255,229,193,.55);
  --page-bar:#e7e3dc;
}
/* Bone tokens, Dark */
.screen[data-theme="dark"]{
  --ground:#161513;--raised:#23211e;--sunken:#0d0c0b;
  --t1:#ede9e3;--t2:#a8a29a;--t3:#8d877d;--on-solid:#161513;
  --hairline:#6f6860;--strong:#b5ada3;--card:#3a3630;--divider:#2e2b27;
  --verified:#5fd0a2;--network:#7fa9ec;--sensors:#ae9be8;--attention:#e0ac5c;--danger:#ec8a85;
  --tint-verified:#17302a;--tint-network:#1a2836;--tint-sensors:#262038;--tint-attention:#322619;--tint-danger:#35201e;
  --ripple:rgba(237,233,227,.10);
  --glow:rgba(255,196,120,.10);
}

/* Text styles */
.ts-display{font-weight:500;font-size:30px;line-height:1.2;letter-spacing:-.016em}
.ts-headline{font-weight:500;font-size:17px;line-height:1.34;letter-spacing:-.004em}
.ts-row{font-weight:500;font-size:16px;line-height:1.38;letter-spacing:-.003em}
.ts-body{font-weight:400;font-size:15px;line-height:1.5;letter-spacing:-.003em}
.ts-small{font-weight:400;font-size:13px;line-height:1.48;letter-spacing:-.003em}
.ts-label{font-weight:500;font-size:10px;line-height:1.3;letter-spacing:.01em}
.ts-meta{font-weight:400;font-size:12px;line-height:1.4;letter-spacing:-.003em}
.ts-mono{font-family:var(--mono);font-weight:400;font-size:13px;line-height:1.45;letter-spacing:0}

button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.screen svg{display:block;flex:none}
.ic{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

/* Wallpaper */
.wall{position:absolute;inset:0;background:var(--ground);overflow:hidden}
.glow{
  position:absolute;left:-315px;top:-380px;width:1400px;height:1000px;border-radius:50%;
  background:var(--glow);filter:blur(100px);
}

/* Layers */
.layer{position:absolute;inset:0}
.layer[hidden]{display:none}

/* Smartspace pill */
.smart{
  display:inline-flex;align-items:center;height:29px;padding:0 12px;gap:0;
  background:var(--raised);border:1px solid var(--card);border-radius:var(--r-pill);
  white-space:pre;color:var(--t2);
}
.smart .up{color:inherit}

/* Status bar */
.sbar{
  position:absolute;left:0;top:0;right:0;height:32px;z-index:40;
  display:flex;align-items:center;padding:0 var(--bar-x);gap:13px;
}
.sbar .time{color:var(--t1);position:relative;top:1.5px}
.sbar .date{color:var(--t2);position:relative;top:1px}
.sbar .smart{margin-left:0;transition:opacity 220ms var(--std)}
.sbar .smart.off{opacity:0;visibility:hidden}
.tray{
  margin-left:auto;display:flex;align-items:center;gap:8px;height:32px;padding:0 var(--bar-x) 0 12px;
  margin-right:calc(var(--bar-x) * -1);color:var(--t2);position:relative;overflow:hidden;border-radius:16px;
}
.tray svg{transition:opacity 200ms var(--std)}
.tray svg.dim{opacity:.3}
.tray .pct{color:var(--t2)}

/* Lock */
.lock .smart{position:absolute;left:74px;top:64px}
.clock{
  position:absolute;left:74px;top:121px;font-weight:300;font-size:102px;line-height:.88;
  letter-spacing:-.045em;color:var(--t1);
}
.clock div+div{margin-top:-20px}
.lockdate{position:absolute;left:74px;top:282.5px;font-weight:500;font-size:16px;line-height:1.38;color:var(--t2);letter-spacing:-.01em}
.unlock{
  position:absolute;left:0;right:0;top:803px;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--t2);
}
.unlock .ts-small{color:var(--t2)}

/* Windows */
.wins{position:absolute;left:0;top:0;right:0;bottom:0}
.win{
  position:absolute;display:flex;flex-direction:column;
  background:var(--raised);border:1px solid var(--card);border-radius:var(--r-row);
  box-shadow:var(--shadow);overflow:hidden;
  transform-origin:50% 100%;
}
.win[hidden]{display:none}
.win.is-flat{border-radius:0;box-shadow:none}
.win.dragging{will-change:transform}
.cap{
  height:40px;flex:none;display:flex;align-items:stretch;position:relative;
  touch-action:none;cursor:default;
}
.cap .app{
  display:flex;align-items:center;gap:8px;padding-left:12px;flex:1;min-width:0;color:var(--t1);
}
.lchip{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--card);background:var(--raised);
  display:grid;place-items:center;font-size:10px;font-weight:500;color:var(--t1);flex:none;
}
.cap .name{font-weight:400;font-size:17px;line-height:1;letter-spacing:-.01em}
.cap .dd{color:var(--t3);margin-left:-1px}
.zone{
  display:flex;align-items:center;background:var(--sunken);border-left:1px solid var(--divider);
  padding:0 8px 0 12px;gap:8px;flex:none;
}
.strip{display:flex;align-items:center;gap:4px}
.chip{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:var(--r-pill);
  color:var(--t3);white-space:nowrap;transition:background 220ms var(--std),color 220ms var(--std);
}
.chip svg{color:var(--t3)}
.chip.on{background:var(--tint-network);color:var(--network)}
.chip.ink{color:var(--t1)}
.chip.ink svg{color:var(--t1)}
.ctl{display:flex}
.ctl button{width:32px;height:32px;display:grid;place-items:center;color:var(--t2);border-radius:10px;position:relative;overflow:hidden}
.ctl button:hover{background:rgba(127,127,127,.12)}

/* Vanadium */
.nav{height:66px;flex:none;display:flex;align-items:center;padding:0 12px 0 6px;border-bottom:1px solid var(--divider)}
.nav .navb{width:30px;height:30px;display:grid;place-items:center;color:var(--t2);border-radius:15px;position:relative;overflow:hidden}
.nav .navb.fwd{margin-left:-2px}
.addr{
  margin-left:4px;flex:1;height:49px;border:1px solid var(--card);border-radius:var(--r-pill);background:var(--raised);
  display:flex;align-items:center;gap:10px;padding:0 18px;color:var(--t1);
}
.addr svg{color:var(--t2)}
.page{padding:32px 32px 0;display:flex;flex-direction:column}
.page i{display:block;height:10px;border-radius:5px;background:var(--page-bar);margin-top:12px}
.page i.h{height:16px;border-radius:8px;margin-top:0}
.page i.h2{margin-top:44px}
.page i.h+i{margin-top:12px}

/* Files */
.fbody{flex:1;display:flex;min-height:0}
.fside{width:176px;flex:none;background:var(--sunken);padding:11px 8px 0;display:flex;flex-direction:column;gap:2.5px}
.frow{
  height:40px;display:flex;align-items:center;gap:13px;padding:0 12px;border-radius:var(--r-pill);
  color:var(--t1);border:1px solid transparent;position:relative;overflow:hidden;
}
.frow svg{color:var(--t2)}
.frow{padding-top:2px}
.frow[aria-current="true"]{background:var(--raised);border-color:var(--card)}
.fmain{flex:1;padding:24px 24px 0}
.fhead{display:flex;align-items:baseline;justify-content:space-between;padding:0 18px 0 18px;height:35px}
.fhead .n{color:var(--t3)}
.file{
  height:48px;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid var(--divider);
  color:var(--t1);
}
.file svg{color:var(--t2)}
.file .d{margin-left:auto;color:var(--t2)}
.file span{position:relative;top:1.5px}

/* Settings */
.sbody{flex:1;display:flex;min-height:0}
.slist{width:360px;flex:none;background:var(--sunken);padding:16px 16px 0;overflow:hidden}
.search{
  height:49px;border:1px solid var(--card);border-radius:var(--r-pill);background:var(--raised);
  display:flex;align-items:center;gap:11px;padding:0 18px;color:var(--t2);
}
.slbl{padding:26px 26px 0;height:56px;color:var(--t3)}
.arow{
  width:100%;height:58px;display:flex;align-items:center;gap:13px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid transparent;color:var(--t1);position:relative;overflow:hidden;margin-bottom:6px;
}
.arow[aria-current="true"]{background:var(--raised);border-color:var(--card)}
.arow.inert{cursor:default}
.aicon{
  width:40px;height:40px;border-radius:var(--r-icon);border:1px solid var(--card);background:var(--raised);
  display:grid;place-items:center;font-size:16px;font-weight:500;color:var(--t1);flex:none;
}
.sdet{flex:1;overflow:auto;padding:28px 48px 24px;scrollbar-width:none}
.sdet::-webkit-scrollbar{display:none}
.phead{display:flex;gap:39px;align-items:flex-start;height:96px}
.pico{
  width:54px;height:54px;border-radius:var(--r-icon);border:1px solid var(--card);background:var(--raised);
  display:grid;place-items:center;font-size:17px;font-weight:500;color:var(--t1);flex:none;margin-top:0;
}
.phead .tt{margin-top:-11px}
.phead .ts-body{color:var(--t2);margin-top:8px}
.seclbl{padding:0 26px;height:30px;color:var(--t3)}
.card{background:var(--raised);border:1px solid var(--card);border-radius:var(--r-row);overflow:hidden;margin-bottom:25px}
.lrow{
  display:flex;align-items:center;gap:var(--row-gap);padding:var(--row-y) var(--row-x);height:97px;
  border-bottom:1px solid var(--divider);position:relative;
}
.lrow:last-child{border-bottom:0;height:96px}
.lrow .lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lrow .lb .ts-row{color:var(--t1);position:relative;top:1px}
.lrow .cons{position:relative;top:1px}
#alist{margin-top:1px}
.search span{position:relative;top:1px}
.tile .tl{position:relative;top:1px}
.notif>.ts-headline{position:relative;top:1.5px}
.lrow .lb .ts-small{color:var(--t2)}
.cons{display:flex;gap:8px;color:var(--attention);align-items:flex-start}
.cons svg{margin-top:2px;color:var(--attention)}
.lrow .val{color:var(--t2)}
.lrow .chev{color:var(--t2);width:20px;height:20px}

/* Switch */
.sw{
  width:46px;height:28px;border-radius:var(--r-pill);flex:none;position:relative;
  background:var(--c,var(--network));transition:background 240ms var(--std),opacity 240ms var(--std);
}
.sw[aria-checked="false"]{background:var(--hairline);opacity:.22}
.sw i{
  position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--raised);
  transition:transform 280ms var(--emph);
}
.sw[aria-checked="true"] i{transform:translateX(18px)}
.sw:active i{transform:scale(1.1)}
.sw[aria-checked="true"]:active i{transform:translateX(18px) scale(1.1)}
.sw.sensors{--c:var(--sensors)}

/* Taskbar */
.tbar{
  position:absolute;left:0;right:0;bottom:0;height:56px;background:var(--raised);border-top:1px solid var(--card);
  z-index:20;
}
.tbar .tb{position:absolute;top:7px;width:40px;height:40px;display:grid;place-items:center;color:var(--t1);border-radius:20px;overflow:hidden}
.tapps{position:absolute;left:596px;top:7px;display:flex;gap:12px}
.tapp{
  width:40px;height:40px;border-radius:var(--r-icon);border:1px solid var(--card);background:var(--raised);
  display:grid;place-items:center;font-size:16px;font-weight:500;color:var(--t1);position:relative;
  transition:transform 260ms var(--std);
}
.tapp span{pointer-events:none}
.tapp>span:last-child{position:relative;top:1px}
.tapp .rip-host{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.tapp.run{transform:translateY(-4px)}
.tapp::after{
  content:"";position:absolute;left:17px;top:44px;width:4px;height:4px;border-radius:2px;background:var(--t1);
  opacity:0;transition:opacity 200ms var(--std);
}
.tapp.run::after{opacity:1}

/* Snap preview */
.snap{
  position:absolute;z-index:15;border-radius:0;background:var(--raised);opacity:0;
  border:1px solid var(--card);pointer-events:none;display:none;
}
.snap.on{display:block}

/* Scrim and sheet */
.scrim{position:absolute;left:0;right:0;top:32px;bottom:0;background:var(--hairline);opacity:0;z-index:30;display:none}
.sheet{
  position:absolute;left:1012px;top:36px;width:412px;z-index:35;display:none;
  background:var(--ground);border:1px solid var(--card);border-radius:var(--r-sheet);box-shadow:var(--shadow);
  padding:12px;flex-direction:column;gap:8px;transform-origin:100% 0;
}
.qhead{background:var(--raised);border:1px solid var(--card);border-radius:var(--r-row);padding:16px 18px 16px;height:259px}
.qhead .smart{margin-bottom:0}
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--divider);margin:0 -18px;padding:0 18px}
.kv.two{height:79px;padding-top:8px}
.kv.one{height:48px}
.kv .k{color:var(--t2);max-width:130px}
.kv .v{color:var(--t1);white-space:nowrap}
.btn{
  margin-top:12px;height:57px;display:inline-flex;align-items:center;gap:10px;padding:0 20px 0 21px;
  border-radius:var(--r-button);background:var(--tint-verified);border:1px solid var(--t1);color:var(--t1);
  position:relative;overflow:hidden;
}
.bright{
  height:46px;background:var(--raised);border:1px solid var(--card);border-radius:var(--r-pill);flex:none;
  display:flex;align-items:center;padding:0 18px 0 18px;gap:14px;color:var(--t2);
}
.slider{flex:1;height:28px;position:relative;cursor:pointer;touch-action:none;outline:none}
.slider .tr{position:absolute;left:0;right:0;top:11px;height:6px;border-radius:3px;background:var(--divider)}
.slider .fi{position:absolute;left:0;top:11px;height:6px;border-radius:3px;background:var(--t1);width:38%}
.slider:focus-visible .tr{outline:2px solid var(--network);outline-offset:3px}
.moon{width:28px;height:28px;display:grid;place-items:center;border-radius:14px;color:var(--t2);position:relative;overflow:hidden;margin-right:-6px}
.moon[aria-pressed="true"]{color:var(--t1);background:var(--tint-network)}
.tiles{display:grid;grid-template-columns:188px 188px;gap:8px 10px}
.tile{
  height:110px;border-radius:var(--r-tile);border:1px solid var(--card);background:var(--raised);
  padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;position:relative;overflow:hidden;
  color:var(--t2);transition:background 220ms var(--std),border-color 220ms var(--std);
}
.tile .tl{color:var(--t1);margin-top:0}
.tile .tv{color:var(--t3)}
.tile svg{color:var(--t2)}
.tile[aria-pressed="true"]{background:var(--tint-network);border-color:color-mix(in srgb,var(--network) 42%,transparent)}
.tile[aria-pressed="true"] .tv,.tile[aria-pressed="true"] svg{color:var(--network)}
.tile.sens[aria-pressed="true"]{background:var(--tint-sensors);border-color:color-mix(in srgb,var(--sensors) 42%,transparent)}
.tile.sens[aria-pressed="true"] .tv,.tile.sens[aria-pressed="true"] svg{color:var(--sensors)}
.nslot{touch-action:pan-y}
.notif{
  background:var(--raised);border:1px solid var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:15px 18px 16px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;cursor:pointer;
}
.notif .hd{display:flex;align-items:center;gap:8px;height:20px}
.notif .hd .lchip{width:20px;height:20px}
.notif .an{color:var(--sensors);flex:1}
.notif .tm{color:var(--t3)}
.notif .bd{color:var(--t2)}
.notif .more{color:var(--sensors);align-self:flex-start;border-radius:6px;position:relative}
.notif .cons{margin-top:0}

/* Morph, ripple, dim */
.morph{position:absolute;z-index:50;background:var(--raised);border:1px solid var(--card);pointer-events:none;overflow:hidden}
.rip{position:absolute;border-radius:50%;background:var(--ripple);pointer-events:none;transform:scale(0)}
.dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:60}
.screen button:focus-visible,.screen [tabindex]:focus-visible{outline:2px solid var(--network);outline-offset:-2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .screen *,.screen{transition-duration:1ms !important;animation-duration:1ms !important}
}

.backlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.95rem;color:var(--muted);text-decoration:none;
  transition:color 180ms var(--ease);
}
.backlink span{transition:transform 180ms var(--ease)}
.backlink:hover span{transform:translateX(-2px)}
.backlink:hover{color:var(--page-ink)}

/* Clears the site's fixed nav, which the standalone prototype never had to. */
.stage{padding-top:84px}

/* ?embed=1: whatever hosts the iframe supplies the site chrome, so the page
   drops its own nav, menu, footer and backlink and sits flush. */
html.embed, html.embed body{height:100%}
html.embed .nav, html.embed .menu, html.embed .foot, html.embed .skip-link{display:none}