/* HALCYON/96 — visual language: enamel cards, ink outlines, hard shadows, dithered dusk */
:root{
  --ink:#141428; --ink2:#262a48; --ink3:#3a3f66;
  --paper:#fbf5e6; --cream:#efe4c8; --sand:#e3d5b3;
  --teal:#14a39a; --teal-d:#0c6f6c; --orange:#ff7a2f; --gold:#f2b632; --rose:#ff6fa3;
  --cobalt:#5b7cfa; --violet:#9b7bff; --lcd:#b8ff9e;
  --ui:'Chakra Petch', 'Trebuchet MS', system-ui, sans-serif;
  --mono:'VT323', ui-monospace, monospace;
  --type:'Courier Prime', 'Courier New', monospace;
  --bar-h:54px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0c1a;font-family:var(--ui);color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
body{position:fixed;inset:0}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* scrollbars */
*{scrollbar-color:var(--teal) var(--cream)}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:repeating-conic-gradient(var(--cream) 0 25%, var(--sand) 0 50%) 0 0/4px 4px;border-left:2px solid var(--ink)}
::-webkit-scrollbar-thumb{background:var(--teal);border:2px solid var(--ink);border-radius:0 6px 0 0}
::-webkit-scrollbar-corner{background:var(--cream)}

/* ---------- glyphs ---------- */
.gl{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.gl .f{fill:currentColor;stroke:none}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:300000;background:#050508;display:grid;place-items:center;overflow:hidden;cursor:pointer}
#boot .crt{position:absolute;left:50%;top:50%;width:0;height:2px;background:#fff;box-shadow:0 0 30px 6px rgba(255,255,255,.7);transform:translate(-50%,-50%);animation:crt .4s ease-out forwards}
@keyframes crt{0%{width:0;opacity:1}50%{width:100%;height:2px;opacity:1}100%{width:100%;height:100%;opacity:0}}
#post{position:absolute;left:max(6vw,16px);top:max(7vh,16px);right:16px;margin:0;font:clamp(17px,2.3vw,26px)/1.22 var(--mono);color:#ffb347;text-shadow:0 0 8px rgba(255,150,40,.65);white-space:pre-wrap;transition:opacity .25s}
#post b{color:#fff4d0;font-weight:400}
#post .ok{color:var(--lcd);text-shadow:0 0 8px rgba(150,255,120,.6)}
#boot-logo{display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;transition:opacity .3s;padding:0 12px;text-align:center}
#boot.logo{background:radial-gradient(ellipse at 50% 60%,#26204a 0%,#141428 55%,#07070f 100%);transition:background .3s}
#boot.logo #post{opacity:0}
#boot.logo #boot-logo{opacity:1}
#boot-mark svg{width:clamp(120px,22vw,180px);height:auto;overflow:visible;filter:drop-shadow(0 10px 30px rgba(255,122,47,.35))}
#boot-mark .s{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--r,0deg)) scale(.3);transform-box:fill-box;transform-origin:center;transition:transform .75s cubic-bezier(.2,1.25,.3,1) var(--dl,0s),opacity .35s var(--dl,0s)}
#boot.logo #boot-mark .s{opacity:1;transform:none}
.wordmark{font:700 clamp(30px,7vw,64px)/1 var(--ui);letter-spacing:.32em;padding-left:.32em;color:var(--paper);text-shadow:4px 4px 0 #000}
.wordmark span{color:var(--orange)}
#boot .wordmark{clip-path:inset(0 100% 0 0);transition:clip-path .6s steps(10) .35s}
#boot.logo .wordmark{clip-path:inset(0 0 0 0)}
.tag{font:500 clamp(10px,1.4vw,13px)/1 var(--ui);letter-spacing:.3em;color:#9aa0c8}
.feathers{display:flex;gap:6px;margin-top:6px}
.feathers i{width:16px;height:9px;background:#2a2d4a;transform:skewX(-24deg);transition:background .1s}
.feathers i.on{background:var(--teal);box-shadow:0 0 10px rgba(20,163,154,.8)}
.feathers i.on:nth-child(n+9){background:var(--orange);box-shadow:0 0 10px rgba(255,122,47,.8)}
#boot .skip{position:absolute;bottom:18px;left:0;right:0;text-align:center;font:18px var(--mono);color:#555a80;letter-spacing:.1em}
#boot .scan,#scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
#boot.out{animation:bootOut .45s ease-in forwards;pointer-events:none}
@keyframes bootOut{to{opacity:0;transform:scale(1.06);filter:brightness(2)}}
#scanlines{position:fixed;z-index:250000;background:repeating-linear-gradient(0deg,rgba(0,0,20,.07) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,20,.28) 100%)}
body.no-scan #scanlines{display:none}

/* ---------- desktop ---------- */
#desktop{position:absolute;left:0;right:0;top:0;bottom:var(--bar-h);overflow:hidden;background:#1b1233}
#wallpaper{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
#icons{position:absolute;top:12px;left:10px;bottom:10px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,94px);grid-auto-columns:88px;gap:4px 8px;align-content:start}
.icon{width:88px;height:94px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px 2px 0;border:0;background:none;cursor:pointer;border-radius:6px;touch-action:manipulation}
.icon .tile{width:50px;height:50px;padding:10px;display:grid;place-items:center;background:var(--accent);border:2px solid var(--ink);border-radius:4px 14px 4px 4px;box-shadow:3px 3px 0 var(--ink);color:var(--ink);transition:transform .12s,box-shadow .12s}
.icon .lbl{font:600 12px/1.15 var(--ui);color:var(--paper);background:rgba(12,12,30,.72);padding:2px 7px 3px;border-radius:3px;text-align:center;letter-spacing:.03em}
.icon:hover .tile{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.icon.sel .lbl,.icon:focus-visible .lbl{background:var(--gold);color:var(--ink)}
.icon:focus-visible{outline:none}
.icon.sel .tile{background-image:repeating-conic-gradient(rgba(20,20,40,.18) 0 25%,transparent 0 50%);background-size:4px 4px}
.desk-in .icon{animation:iconIn .5s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes iconIn{from{opacity:0;transform:translateX(-30px) scale(.6)}}

#windows{position:absolute;inset:0;z-index:2;pointer-events:none}
#windows > *{pointer-events:auto}

/* ---------- windows ---------- */
.win{position:absolute;left:0;top:0;display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);border-radius:3px 16px 3px 3px;box-shadow:7px 7px 0 rgba(10,10,24,.55);min-width:0;will-change:transform;outline:none;transform-origin:50% 50%}
.win.focused{box-shadow:8px 8px 0 rgba(10,10,24,.9)}
.win.anim{transition:transform .2s cubic-bezier(.3,1.2,.4,1),width .2s cubic-bezier(.3,1.2,.4,1),height .2s cubic-bezier(.3,1.2,.4,1)}
.win.max{border-radius:0;box-shadow:none}
.win.max .tb{border-radius:0}
.tb{flex:none;height:32px;display:flex;align-items:center;gap:8px;padding:0 4px 0 6px;background:var(--cream);border-bottom:2px solid var(--ink);border-radius:1px 13px 0 0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:#6c6a7c}
.win.focused .tb{background:var(--accent);color:var(--ink)}
.win.dragging .tb{cursor:grabbing}
.tb .sigil{flex:none;width:22px;height:22px;padding:2px;display:grid;background:var(--paper);border:2px solid currentColor;border-radius:3px 7px 3px 3px;color:var(--ink)}
.win:not(.focused) .tb .sigil{color:#8a8898}
.tb .title{margin:0;font:700 13px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb .grip{flex:1;min-width:8px;height:12px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px);opacity:.35;border-radius:2px}
.win.focused .tb .grip{opacity:.55}
.ctl{flex:none;display:flex;border:2px solid var(--ink);border-radius:3px 9px 3px 3px;overflow:hidden;background:var(--paper)}
.ctl button{width:26px;height:20px;padding:0;border:0;background:var(--paper);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.ctl button + button{border-left:2px solid var(--ink)}
.ctl button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ctl button:hover{background:var(--gold)}
.ctl .b-close:hover{background:var(--ink);color:var(--paper)}
.ctl button:active{background:var(--ink);color:var(--paper)}
.win .body{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column;container-type:inline-size;border-radius:0 0 1px 1px}
.rz{position:absolute;z-index:3;touch-action:none}
.rz-n,.rz-s{left:12px;right:12px;height:10px;cursor:ns-resize}.rz-n{top:-5px}.rz-s{bottom:-5px}
.rz-e,.rz-w{top:12px;bottom:12px;width:10px;cursor:ew-resize}.rz-e{right:-5px}.rz-w{left:-5px}
.rz-ne,.rz-nw,.rz-se,.rz-sw{width:18px;height:18px}
.rz-ne{top:-6px;right:-6px;cursor:nesw-resize}.rz-sw{bottom:-6px;left:-6px;cursor:nesw-resize}
.rz-nw{top:-6px;left:-6px;cursor:nwse-resize}.rz-se{bottom:-6px;right:-6px;cursor:nwse-resize}
.rz-se::after{content:"";position:absolute;right:8px;bottom:8px;width:10px;height:10px;background:linear-gradient(135deg,transparent 0 45%,var(--ink) 45% 55%,transparent 55% 70%,var(--ink) 70% 80%,transparent 80%);opacity:.5;pointer-events:none}
.win.max .rz{display:none}
@media (pointer:coarse){
  .tb{height:40px}
  .ctl button{width:36px;height:28px}
  .rz-se,.rz-sw,.rz-ne,.rz-nw{width:30px;height:30px}
  .rz-n,.rz-s{height:18px}.rz-e,.rz-w{width:18px}
  .rz-se::after{right:14px;bottom:14px}
}

/* modal dialogs */
.modal{position:absolute;inset:0;display:grid;place-items:center;background:repeating-conic-gradient(rgba(10,10,24,.35) 0 25%,transparent 0 50%) 0 0/4px 4px;animation:fade .15s}
.modal .win{position:relative;transform:none;max-width:min(420px,calc(100vw - 30px));animation:pop .22s cubic-bezier(.2,1.4,.4,1)}
.modal .win .body{padding:18px 18px 16px;gap:16px}
.dlg-msg{font:500 15px/1.45 var(--ui)}
.dlg-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@keyframes pop{from{transform:scale(.85);opacity:0}}
@keyframes fade{from{opacity:0}}

/* ---------- shared widgets ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:3px 12px;font:600 13px/1 var(--ui);letter-spacing:.04em;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:3px 8px 3px 3px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;white-space:nowrap;touch-action:manipulation}
.btn:hover{background:#fff}
.btn:active,.btn[aria-pressed=true]{transform:translate(2px,2px);box-shadow:none;background:var(--gold)}
.btn.primary{background:var(--teal);color:var(--paper)}
.btn.primary:active{background:var(--teal-d)}
.btn.ic{width:34px;padding:0}
.btn svg{width:16px;height:16px}
.field{font:500 14px var(--ui);padding:5px 8px;background:#fff;border:2px solid var(--ink);border-radius:2px;box-shadow:inset 2px 2px 0 rgba(20,20,40,.15);color:var(--ink);min-width:0}
.lcd{font:30px/1 var(--mono);color:var(--lcd);background:#10261a;border:2px solid var(--ink);padding:3px 8px 0;border-radius:3px;text-shadow:0 0 6px rgba(150,255,120,.55);letter-spacing:.06em;box-shadow:inset 0 0 0 2px #1d3a28}
.toolbar{display:flex;gap:6px;align-items:center;padding:7px 8px;background:var(--cream);border-bottom:2px solid var(--ink);flex-wrap:wrap}
.sep{width:2px;align-self:stretch;background:rgba(20,20,40,.2);margin:0 2px}

/* ---------- tideline (taskbar) ---------- */
#tideline{position:fixed;left:0;right:0;bottom:0;height:var(--bar-h);background:var(--ink);display:flex;align-items:center;gap:8px;padding:0 8px;padding-bottom:env(safe-area-inset-bottom);z-index:100000}
#tideline::before{content:"";position:absolute;left:0;right:0;top:-5px;height:5px;background:linear-gradient(90deg,var(--teal) 0 40%,var(--gold) 40% 70%,var(--orange) 70% 90%,var(--rose) 90%)}
#nest-btn{flex:none;height:40px;display:flex;align-items:center;gap:8px;padding:0 16px 0 4px;background:var(--paper);border:2px solid var(--paper);border-radius:20px 6px 6px 20px;font:700 15px/1 var(--ui);letter-spacing:.18em;cursor:pointer;box-shadow:3px 3px 0 #000;transition:background .15s}
#nest-btn .nb-logo{width:32px;height:32px;display:block}
#nest-btn .nb-logo svg{width:100%;height:100%}
#nest-btn:hover{background:#fff}
#nest-btn[aria-expanded=true]{background:var(--gold);border-color:var(--gold);transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
#tasks{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;align-items:center;height:100%}
#tasks::-webkit-scrollbar{display:none}
.task{flex:0 1 180px;min-width:46px;height:38px;display:flex;align-items:center;gap:7px;padding:0 10px 0 5px;background:var(--ink2);color:#cfd2ee;border:2px solid var(--ink3);border-radius:3px 10px 3px 3px;cursor:pointer;font:600 12px/1 var(--ui);letter-spacing:.05em;text-align:left;animation:taskIn .25s cubic-bezier(.2,1.4,.4,1)}
.task .g{flex:none;width:24px;height:24px;padding:3px;display:grid;background:var(--accent);color:var(--ink);border-radius:3px 7px 3px 3px}
.task .tl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.task:hover{border-color:#6c72a8}
.task.active{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:inset 0 -4px 0 var(--accent)}
.task.min{opacity:.55}
.task.min .tl{font-style:italic}
@keyframes taskIn{from{transform:translateY(20px);opacity:0}}
#tray{flex:none;display:flex;align-items:center;gap:6px}
.tray-btn{width:38px;height:38px;border:2px solid var(--ink3);background:var(--ink2);color:var(--paper);border-radius:3px 9px 3px 3px;display:grid;place-items:center;cursor:pointer;padding:7px}
.tray-btn:hover{border-color:#6c72a8}
#clock{font:24px/1 var(--mono);color:var(--lcd);background:#10261a;border:2px solid #2f4d3a;padding:6px 9px 3px;border-radius:3px;text-shadow:0 0 6px rgba(150,255,120,.6);min-width:70px;text-align:center;cursor:default;letter-spacing:.05em}
#clock .colon{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}

/* ---------- nest launcher ---------- */
#nest{position:fixed;left:8px;bottom:calc(var(--bar-h) + 12px);width:min(380px,calc(100vw - 20px));max-height:calc(100% - var(--bar-h) - 24px);overflow:auto;background:var(--paper);border:2px solid var(--ink);box-shadow:9px 9px 0 rgba(5,5,15,.75);border-radius:3px 24px 3px 3px;z-index:100001;transform-origin:18px 100%;animation:nestIn .28s cubic-bezier(.2,1.35,.4,1)}
@keyframes nestIn{from{transform:scale(.4) rotate(-6deg);opacity:0}}
.nest-head{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--paper);background:var(--ink) repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.04) 10px 20px);border-bottom:2px solid var(--ink)}
.nest-head svg{width:52px;height:52px;flex:none}
.nest-head .nh-t{font:700 20px/1 var(--ui);letter-spacing:.24em}
.nest-head .nh-t span{color:var(--orange)}
.nest-head .nh-s{font:15px/1.1 var(--mono);color:#aeb3dc;margin-top:5px;letter-spacing:.04em}
.nest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.nest-app{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;border:2px solid var(--ink);background:var(--accent);border-radius:3px 13px 3px 3px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;font:700 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);transition:transform .1s,box-shadow .1s;animation:tileIn .35s cubic-bezier(.2,1.4,.4,1) backwards}
.nest-app:last-child:nth-child(3n+1){grid-column:1/-1;flex-direction:row;justify-content:center;gap:12px;padding:8px}
.nest-app .ic{width:34px;height:34px;padding:5px;background:var(--paper);border:2px solid var(--ink);border-radius:50% 50% 50% 4px;display:grid}
.nest-app small{font:13px/1 var(--mono);text-transform:none;letter-spacing:.02em;opacity:.8;margin-top:-2px}
.nest-app:hover,.nest-app:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);outline:none}
.nest-app:focus-visible{background-image:repeating-conic-gradient(rgba(20,20,40,.14) 0 25%,transparent 0 50%);background-size:4px 4px}
@keyframes tileIn{from{transform:translateY(16px) scale(.8);opacity:0}}
.nest-foot{display:flex;gap:8px;padding:0 14px 14px;flex-wrap:wrap}
.nest-foot .btn{flex:1}

/* ---------- welcome ---------- */
.wel{padding:18px 20px;overflow:auto;height:100%;background:var(--paper) repeating-linear-gradient(0deg,transparent 0 27px,rgba(20,163,154,.08) 27px 28px)}
.wel-top{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.wel-top svg{width:76px;height:76px;flex:none;filter:drop-shadow(3px 3px 0 var(--ink))}
.wel h3{margin:0;font:700 24px/1.05 var(--ui);letter-spacing:.12em}
.wel h3 span{color:var(--orange)}
.wel .sub{font:18px/1.1 var(--mono);color:#5b5a73;margin-top:4px}
.wel p{font:500 14px/1.5 var(--ui);margin:10px 0}
.wel-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.wel-apps button{display:flex;align-items:center;gap:9px;padding:8px;border:2px solid var(--ink);background:var(--paper);border-radius:3px 10px 3px 3px;cursor:pointer;text-align:left;font:600 13px/1.15 var(--ui);box-shadow:2px 2px 0 var(--ink)}
.wel-apps button:hover{background:#fff;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.wel-apps button i{flex:none;width:30px;height:30px;padding:5px;display:grid;background:var(--accent);border:2px solid var(--ink);border-radius:3px 8px 3px 3px;font-style:normal}
.wel-apps button small{display:block;font:14px/1 var(--mono);color:#666;font-weight:400}
.keys{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font:500 13px/1.3 var(--ui);background:var(--cream);border:2px dashed rgba(20,20,40,.35);padding:10px 12px;border-radius:3px}
kbd{font:17px/1 var(--mono);background:var(--paper);border:2px solid var(--ink);border-bottom-width:3px;padding:1px 5px;border-radius:3px;white-space:nowrap}

/* ---------- tint (settings) ---------- */
.tint{padding:14px;overflow:auto;height:100%;display:flex;flex-direction:column;gap:14px}
.tint h4{margin:0 0 8px;font:700 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:#5b5a73}
.scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.scene{padding:0;border:2px solid var(--ink);background:var(--ink);border-radius:3px 12px 3px 3px;cursor:pointer;overflow:hidden;box-shadow:3px 3px 0 var(--ink);text-align:left}
.scene canvas{display:block;width:100%;aspect-ratio:16/10;image-rendering:pixelated}
.scene span{display:block;padding:5px 8px;background:var(--paper);font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase}
.scene[aria-pressed=true]{outline:3px solid var(--orange);outline-offset:2px}
.scene[aria-pressed=true] span{background:var(--gold)}
.opt{display:flex;align-items:center;gap:10px;font:600 14px var(--ui);padding:6px 0;cursor:pointer}
.opt input{width:20px;height:20px;accent-color:var(--teal)}
.about-box{font:17px/1.25 var(--mono);background:var(--ink);color:#c7cbf0;padding:10px 12px;border-radius:3px;white-space:pre-wrap}
.about-box b{color:var(--gold);font-weight:400}

/* ---------- screensaver ---------- */
#saver{position:fixed;inset:0;z-index:280000;background:#000;cursor:none}
#saver canvas{width:100%;height:100%;image-rendering:pixelated}

/* ---------- phones ---------- */
@media (max-width:640px){
  :root{--bar-h:58px}
  #nest-btn{padding:0 4px;border-radius:50%;width:44px;height:44px;justify-content:center}
  #nest-btn .nb-txt{display:none}
  #nest-btn .nb-logo{width:34px;height:34px}
  .task{flex:0 0 auto;padding:0 5px;min-width:44px;max-width:44px}
  .task .tl{display:none}
  .task.active{max-width:130px;padding-right:9px}
  .task.active .tl{display:block}
  #clock{min-width:0;font-size:22px;padding:6px 6px 3px}
  #vol-btn{width:36px;height:36px}
  #icons{grid-template-rows:repeat(auto-fill,90px);grid-auto-columns:80px;left:6px}
  .icon{width:80px;height:90px}
  .nest-grid{gap:8px;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}