:root{color-scheme:dark;--bg:#080b10;--panel:#0d1219;--panel2:#111925;--line:#263342;--muted:#77889a;--text:#e6edf3;--cyan:#42d6d0;--blue:#6aa9ff;--purple:#bd93f9;--green:#79df9b;--yellow:#f2cd72;--red:#ff6b81;--shadow:0 28px 80px #000b;font-family:"Hack Nerd Font Mono","DejaVu Sans Mono",ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#05070a;color:var(--text);overscroll-behavior:none}button,input{font:inherit;color:inherit}button{cursor:pointer}.stage{min-height:100vh;display:grid;grid-template-columns:minmax(360px,860px) minmax(260px,380px);gap:clamp(24px,5vw,80px);align-items:center;justify-content:center;padding:clamp(14px,4vw,60px);background:radial-gradient(circle at 15% 15%,#162432 0,transparent 32%),radial-gradient(circle at 90% 80%,#211633 0,transparent 30%),#06090d}.device{position:relative;isolation:isolate;width:min(80vh,100%);aspect-ratio:1080/1240;overflow:hidden;border:2px solid #27384b;border-radius:clamp(18px,2.8vw,38px);background:var(--bg);box-shadow:var(--shadow),inset 0 0 0 7px #05070a;user-select:none;touch-action:none}.screen-grain{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.waybar{position:absolute;z-index:12;inset:0 0 auto;height:6.2%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 3.2%;background:#0a0f15e8;border-bottom:1px solid var(--line);backdrop-filter:blur(16px);font-size:clamp(9px,1.55vw,17px)}.brand,.status{appearance:none;border:0;background:none;display:flex;align-items:center;gap:.55em;font-weight:700;letter-spacing:.1em}.brand{justify-self:start}.brand-mark{display:grid;place-items:center;width:1.8em;height:1.8em;background:var(--cyan);color:#071014;border-radius:6px}.status{justify-self:end;font-size:.88em}.net-dot{width:.55em;height:.55em;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}.workspaces{display:flex;gap:.4em}.workspace-dot{border:0;width:1.7em;height:1.7em;border-radius:.55em;background:#1a2330;color:var(--muted);font-size:.92em}.workspace-dot.active{width:2.4em;background:var(--cyan);color:#071014;font-weight:800}.workspace-deck{position:absolute;z-index:2;inset:6.2% 0 4.5%;display:flex;transition:transform .38s cubic-bezier(.2,.8,.2,1)}.workspace{min-width:100%;height:100%;padding:2.2%}.terminal{width:100%;height:100%;overflow:hidden;border:1px solid #33455a;background:linear-gradient(135deg,#0d131b 0,#090d13 70%);border-radius:1.7%;box-shadow:inset 0 0 0 1px #07090d,0 16px 40px #0008;display:flex;flex-direction:column;font-size:clamp(10px,1.7vw,19px)}.terminal-title{height:6.3%;min-height:34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 2%;border-bottom:1px solid var(--line);background:#111a25;color:var(--muted);font-size:.83em}.terminal-title strong{color:var(--text);letter-spacing:.12em}.terminal-title>*:last-child{text-align:right}.online{color:var(--green)}.room-tabs,.mail-folders{display:flex;gap:0;border-bottom:1px solid var(--line);height:6%;min-height:34px}.room-tabs span,.mail-folders span{display:grid;place-items:center;padding:0 3%;font-size:.72em;color:var(--muted);letter-spacing:.08em}.room-tabs .selected,.mail-folders .selected{color:var(--cyan);border-bottom:2px solid var(--cyan);background:#15212c}.chat-log{flex:1;overflow:hidden;padding:2.5% 3%;display:flex;flex-direction:column;gap:2.6%}.chat-row{display:grid;grid-template-columns:7% 1fr;gap:2.2%;font-size:.91em}.chat-row .avatar{aspect-ratio:1;display:grid;place-items:center;align-self:start;border-radius:25%;background:#1b2734;color:var(--cyan);font-weight:800}.chat-row b{font-size:.8em;color:var(--cyan);letter-spacing:.06em}.chat-row time{color:var(--muted);font-weight:400;margin-left:.8em}.chat-row p{margin:.45em 0 0;line-height:1.5;color:#d8e2eb}.chat-row.henry .avatar,.chat-row.henry b{color:var(--yellow)}.chat-row.liza .avatar,.chat-row.liza b{color:var(--purple)}.chat-row.fable .avatar,.chat-row.fable b{color:var(--green)}.composer{margin:0 2.4%;min-height:8%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2%;padding:0 2.5%;border:1px solid #34485c;border-radius:10px;background:#111923}.composer>span:first-child{color:var(--cyan);font-weight:900}.placeholder{color:#67798b}.voice-button{border:0;border-radius:50%;width:2.3em;height:2.3em;background:var(--cyan);color:#071014}.key-hints{height:6%;display:flex;align-items:center;justify-content:space-between;padding:0 2.5%;font-size:.63em;color:var(--muted)}kbd{border:1px solid #405267;border-bottom-width:2px;border-radius:4px;padding:.08em .35em;color:#b9c8d6;background:#17202a}.mail-list{flex:1;overflow:hidden}.mail{height:18.2%;display:grid;grid-template-columns:4% 1fr auto;grid-template-rows:auto auto auto;align-items:center;padding:1.8% 2.4%;border-bottom:1px solid #1d2935;color:var(--muted)}.mail.selected{background:#142230;border-left:4px solid var(--cyan);color:var(--text)}.mail .unread{color:var(--cyan)}.mail time{font-size:.75em}.mail strong,.mail p{grid-column:2/4}.mail strong{font-size:.92em;margin-top:.2em}.mail p{margin:.3em 0 0;color:var(--muted);font-size:.72em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.command-line{height:7%;display:flex;align-items:center;padding:0 2.4%;border-top:1px solid var(--line);color:var(--muted);font-size:.72em}.command-line strong{color:var(--cyan);margin-left:.45em}.date-strip{height:12%;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;border-bottom:1px solid var(--line);text-align:center}.date-strip span{height:70%;display:flex;flex-direction:column;justify-content:center;color:var(--muted);font-weight:800}.date-strip small{font-size:.55em;margin-top:.3em}.date-strip .today{background:var(--cyan);color:#061015;border-radius:8px}.agenda{position:relative;flex:1;padding:3.2%}.now-line{position:absolute;left:2.5%;right:2.5%;top:3%;border-top:1px dashed var(--red);font-size:.58em;color:var(--red)}.now-line span{background:var(--panel);padding-right:1em}.event{display:grid;grid-template-columns:18% 1fr;gap:2%;min-height:20%;align-items:center;border-left:5px solid var(--cyan);padding:1% 2%;margin:2.5% 0;background:#101924}.event time{color:var(--muted);font-weight:700}.event b{font-size:1.02em}.event p{margin:.35em 0 0;color:var(--muted);font-size:.7em}.event.family{border-color:var(--yellow)}.event.focus{border-color:var(--purple)}.event.system{border-color:var(--green)}.calendar-footer{height:7%;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 2.5%;font-size:.68em;color:var(--muted)}.metric-grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1.25fr 1fr;gap:1.8%;height:55%;padding:2%}.metric{border:1px solid #273748;background:#0e1720;padding:4%;display:flex;flex-direction:column}.metric header{display:flex;justify-content:space-between;color:var(--cyan)}.metric small{margin-top:auto;color:var(--muted);font-size:.68em}.spark{flex:1;display:flex;gap:3%;align-items:end;padding:6% 0 3%;border-bottom:1px solid #2a3b4c;background:repeating-linear-gradient(to bottom,transparent 0 24%,#1a2632 25%)}.spark i{width:100%;background:linear-gradient(var(--cyan),#147b82);border-radius:2px 2px 0 0}.donut{align-self:center;margin:auto;width:min(55%,110px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--purple) 0 30%,#1a2632 30%);position:relative}.donut:after{content:"";position:absolute;inset:17%;background:#0e1720;border-radius:50%}.donut span{z-index:1;font-size:.8em}.net-values{display:flex;flex-direction:column;gap:.5em;margin:auto 0;color:var(--green)}.battery-bar{height:30%;margin:auto 0;border:2px solid var(--yellow);padding:3px}.battery-bar i{display:block;height:100%;width:84%;background:var(--yellow)}.processes{flex:1;margin:0 2% 2%;border:1px solid #273748;font-size:.73em}.processes header,.processes>div{display:grid;grid-template-columns:1fr 15% 15%;padding:1.3% 2%}.processes header{color:var(--muted);background:#151f2a}.processes>div:nth-child(odd){background:#101821}.overlay{position:absolute;z-index:30;inset:6.2% 0 4.5%;background:#0a0f15f4;backdrop-filter:blur(22px);transform:translateY(105%);opacity:0;pointer-events:none;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .25s;padding:5%}.overlay.open{transform:translateY(0);opacity:1;pointer-events:auto}.overlay-head{display:flex;justify-content:space-between;align-items:flex-start}.overlay-head small{color:var(--cyan);letter-spacing:.16em;font-size:.68em}.overlay-head h2{font-size:1.35em;margin:.3em 0}.overlay-head p{color:var(--muted);margin:.4em 0}.close{width:2.3em;height:2.3em;border-radius:50%;border:1px solid var(--line);background:#151e28;font-size:1.3em}.search{margin:4% 0;min-height:7%;display:flex;gap:2%;align-items:center;padding:0 3%;border:1px solid #35485c;background:#111923;border-radius:10px;color:var(--cyan)}.search input{width:100%;border:0;outline:0;background:transparent;font-size:.82em}.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2%}.app-grid button{aspect-ratio:1.06;border:1px solid #27384a;border-radius:11px;background:#111923;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:10%;text-align:left}.app-grid button:active,.app-grid button:hover{border-color:var(--cyan);background:#162634;transform:translateY(-2px)}.app-grid i{font-style:normal;font-size:1.6em;color:var(--cyan);margin-bottom:auto}.app-grid b{font-size:.83em}.app-grid small{font-size:.59em;color:var(--muted);margin-top:.3em}.launcher-foot{position:absolute;left:5%;right:5%;bottom:3%;display:flex;justify-content:space-between;color:var(--muted);font-size:.66em}.controls{transform:translateY(-105%)}.controls.open{transform:translateY(0)}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:3%;margin:7% 0}.control-grid button{border:1px solid var(--line);border-radius:12px;background:#121b26;padding:7%;display:flex;text-align:left;gap:8%;align-items:center}.control-grid button>b{font-size:1.4em}.control-grid button span{display:flex;flex-direction:column}.control-grid small{color:var(--muted);margin-top:.3em}.control-grid .enabled{background:#193641;border-color:#2c7d80}.slider-row{display:grid;grid-template-columns:auto 1fr auto;gap:3%;align-items:center;background:#111923;padding:4%;border-radius:12px}.slider-row input{accent-color:var(--cyan);width:100%}.power-row{position:absolute;left:5%;right:5%;bottom:6%;display:grid;grid-template-columns:repeat(3,1fr);gap:3%}.power-row button{padding:12%;border:1px solid var(--line);border-radius:9px;background:#121b26}.app-modal{padding:0;transform:translateX(105%) translateY(0)}.app-modal.open{transform:translateX(0)}.modal-bar{height:7%;display:grid;grid-template-columns:12% 1fr 12%;align-items:center;border-bottom:1px solid var(--line);background:#121b25}.modal-bar button{height:100%;border:0;background:transparent;font-size:1.4em}.modal-bar b{text-align:center;font-size:.82em}.modal-content{height:93%;overflow:hidden;padding:2%;font-size:clamp(10px,1.6vw,18px)}.gesture-bar{position:absolute;z-index:40;inset:auto 0 0;height:4.5%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#090d12;border-top:1px solid #17212c}.gesture-side{height:100%;border:0;background:none;color:var(--muted);font-size:1.25em}.gesture-side:last-child{justify-self:end;width:30%}.gesture-side:first-child{justify-self:start;width:30%}.home-pill{width:4.5em;height:.3em;border:0;border-radius:99px;background:#7e8d9b}.gesture-toast{position:absolute;z-index:50;bottom:7%;left:50%;transform:translate(-50%,20px);background:#1a2733ee;border:1px solid #3d5267;color:#c8d3dc;border-radius:99px;padding:1.2% 2.5%;font-size:clamp(7px,1.1vw,12px);white-space:nowrap;opacity:0;animation:toast 5s .8s ease forwards;pointer-events:none}@keyframes toast{10%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}.prototype-notes{align-self:center;max-width:380px;color:#a8b6c3;font:14px/1.6 system-ui,sans-serif}.prototype-notes>div{border-left:4px solid var(--cyan);padding-left:18px;display:flex;flex-direction:column}.prototype-notes b{color:#eef4f8;letter-spacing:.08em}.prototype-notes span{font-size:.84em}.prototype-notes p{margin-top:24px}.legend{display:flex;gap:18px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.dot.cyan{background:var(--cyan)}.dot.green{background:var(--green)}.dot.purple{background:var(--purple)}
.mock-table{height:100%;border:1px solid var(--line);background:#0b1118}.mock-table .table-head,.mock-table .table-row{display:grid;grid-template-columns:28% 36% 36%;padding:1.5% 2%;border-bottom:1px solid #1c2834}.mock-table .table-head{background:#15202a;color:var(--cyan)}.mock-table .table-row.selected{background:#18303a}.mock-table .preview{height:48%;padding:3%;border-top:1px solid var(--line);color:#cbd7e1;line-height:1.55}.tree{color:var(--muted)}.tree b{color:var(--text)}.player{height:100%;display:flex;flex-direction:column;align-items:center;padding:5%;background:radial-gradient(circle at 50% 20%,#233f4b,transparent 40%)}.album{width:58%;aspect-ratio:1;border:1px solid #3b5964;border-radius:3%;display:grid;place-items:center;background:linear-gradient(135deg,#253847,#101820);font-size:4em;color:var(--cyan);box-shadow:0 15px 45px #0008}.player h2{margin:5% 0 1%;font-size:1.1em}.player p{margin:0;color:var(--muted)}.progress{width:100%;height:5px;background:#24313d;margin:7% 0 2%}.progress i{display:block;width:42%;height:100%;background:var(--cyan)}.times{width:100%;display:flex;justify-content:space-between;color:var(--muted);font-size:.7em}.transport{display:flex;gap:2em;align-items:center;margin:7% 0}.transport button{border:0;background:none;font-size:1.6em}.transport .play{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:var(--cyan);color:#071014}.queue{width:100%;border-top:1px solid var(--line)}.queue div{display:grid;grid-template-columns:auto 1fr auto;padding:3%;border-bottom:1px solid #18232e}.queue span{color:var(--muted)}.remote-list,.feed-list,.git-layout{height:100%;border:1px solid var(--line)}.remote-list .host,.feed-list article{padding:4%;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;gap:3%;align-items:center}.host i{width:.7em;height:.7em;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green)}.host small,.feed-list small{color:var(--muted)}.git-layout{display:grid;grid-template-columns:38% 62%;grid-template-rows:55% 45%}.git-layout>div{border:1px solid #1c2834;padding:3%}.git-layout .branches{grid-row:1/3}.git-layout h3{font-size:.75em;color:var(--cyan);margin:0 0 5%}.git-layout p{margin:.5em 0;color:var(--muted)}.git-layout .selected{color:var(--text);background:#18303a}.wireframe *{border-color:#82909c!important;box-shadow:none!important;background-color:#0b0f14!important;background-image:none!important;color:#d8dde2!important}.wireframe .screen-grain{display:none}.wireframe .selected,.wireframe .active,.wireframe .enabled{outline:2px solid white!important}
@media(max-width:820px){.stage{display:block;padding:0;background:#05070a}.device{width:100vw;height:100svh;max-height:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}.prototype-notes{display:none}.waybar{font-size:clamp(10px,2.6vw,17px)}.terminal,.modal-content{font-size:clamp(11px,2.55vw,18px)}.gesture-toast{font-size:10px}}@media(min-aspect-ratio:1.2) and (max-width:820px){.device{width:min(100vw,calc(100vh * .871));margin:auto}}

/* v5: Q20 companion strip for terminal and coding keys hidden behind firmware layers. */
.extra-keys{position:absolute;z-index:45;left:0;right:0;bottom:4.5%;height:0;display:flex;gap:.45%;align-items:stretch;padding:0 .7%;overflow-x:auto;overflow-y:hidden;background:#080d12f7;border-top:1px solid #304254;box-shadow:0 -8px 22px #0008;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;opacity:0;pointer-events:none;transition:height .18s ease,opacity .14s ease,padding .18s ease}.extra-keys::-webkit-scrollbar{display:none}.extra-keys.open{height:5.2%;padding-top:.38%;padding-bottom:.38%;opacity:1;pointer-events:auto}.extra-key{position:relative;flex:0 0 7.25%;min-width:48px;border:1px solid #354a5d;border-bottom-width:2px;border-radius:6px;background:linear-gradient(#18232e,#101820);color:#e7eef4;display:grid;place-items:center;padding:0}.extra-key b{font-size:.76em}.extra-key small{position:absolute;top:.18em;left:.3em;color:var(--muted);font-size:.42em}.extra-key.selected{border-color:var(--cyan);background:#173039;color:#fff;box-shadow:inset 0 0 0 1px #42d6d066,0 0 10px #42d6d022}.device.keys-open .workspace-deck{bottom:9.7%}.device.keys-open .overlay{bottom:9.7%}.gesture-bar{grid-template-columns:1fr auto 1fr}.key-toggle{height:78%;display:flex;align-items:center;gap:.45em;padding:0 1em;border:1px solid #293a49;border-radius:6px;background:#111923;color:var(--muted);font-size:clamp(7px,1vw,11px)}.key-toggle.active{color:var(--cyan);border-color:#2f6669;background:#13262d}.key-toggle kbd{font-size:.72em}.gesture-toast.key-flash{animation:key-flash 1.45s ease forwards}@keyframes key-flash{0%{opacity:0;transform:translate(-50%,12px)}15%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
.app-system .softkeys{display:none}

/* v2: use the full narrow panel and turn Waybar into an active control surface. */
.waybar{grid-template-columns:auto 1fr auto;gap:2%;padding:0 2%;background:#0a0f15f4}.bar-center{min-width:0;display:flex;justify-content:center;align-items:center;gap:1em}.active-app{color:var(--muted);font-size:.7em;letter-spacing:.12em;white-space:nowrap}.bar-actions{display:flex;align-items:center;justify-self:end;gap:.35em}.bar-launch{appearance:none;border:0;padding:.45em .7em;border-radius:.45em;background:#17222d;color:var(--cyan);font-weight:700;letter-spacing:.08em;font-size:.75em}.status{font-size:.8em;gap:.45em}.workspaces{gap:.28em}.workspace-dot{border-radius:.45em;font-size:.86em}
.chat-log{padding:2.2% 2.5%;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:2.2%}.chat-row{grid-template-columns:12% 1fr;gap:3%;font-size:.88em;padding:3%;border:1px solid #1f2e3c;border-radius:10px;background:#0e161f}.chat-row.henry,.chat-row.codex{grid-column:1/-1;grid-template-columns:6% 1fr}.chat-row.codex{background:#10202a;border-color:#234454}
.app-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);height:66%;gap:1.8%}.app-grid button{aspect-ratio:auto;min-height:0;padding:9%}.app-grid button.keyboard-selected{border-color:var(--cyan);background:#18303a;box-shadow:0 0 0 2px #42d6d044}.launcher-foot{font-size:.59em}
.app-modal.browser-mode .modal-bar{display:none}.app-modal.browser-mode .modal-content{height:100%;padding:0}
.browser{height:100%;display:flex;flex-direction:column;background:#f5f6f8;color:#20242a}.browser-tabs{height:6.5%;min-height:34px;display:grid;grid-template-columns:1fr auto;align-items:center;background:#24282e;color:#e9edf2}.browser-tab{height:100%;display:flex;align-items:center;gap:2%;padding:0 2.5%;background:#353a42;min-width:0}.browser-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browser-tabs button,.browser-toolbar button{border:0;background:transparent}.browser-toolbar{height:7.5%;min-height:42px;display:grid;grid-template-columns:auto 1fr auto;gap:1.5%;align-items:center;padding:0 1.8%;background:#30353c;color:#eef2f5}.browser-nav{display:flex}.browser-nav button{width:2.3em;height:2.3em}.browser-address{height:72%;display:flex;align-items:center;gap:1.2%;padding:0 2%;border-radius:999px;background:#171a1f}.browser-address span:first-child{color:var(--green)}.browser-address b{font-size:.78em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-page{flex:1;overflow:hidden;display:grid;grid-template-rows:auto 1fr}.browser-sitehead{display:flex;justify-content:space-between;align-items:center;padding:3.2% 4%;border-bottom:1px solid #dce1e7}.browser-sitehead b{font:800 1.2em system-ui,sans-serif}.browser-sitehead span{color:#657080;font-size:.75em}.browser-body{display:grid;grid-template-columns:1.28fr .72fr;gap:4%;padding:5% 4%;font-family:system-ui,sans-serif}.browser-copy{display:flex;flex-direction:column;justify-content:center}.browser-copy small{color:#007a73;font-weight:800;letter-spacing:.12em}.browser-copy h1{font-size:2.1em;line-height:1.03;margin:.35em 0}.browser-copy p{color:#566170;line-height:1.55;margin:0}.browser-copy button{align-self:flex-start;margin-top:1.3em;padding:.75em 1.1em;border:0;border-radius:6px;background:#087f7b;color:white;font-weight:700}.browser-card{align-self:center;aspect-ratio:.75;border-radius:14px;background:linear-gradient(155deg,#10202b,#1e4852);color:white;padding:10%;box-shadow:0 18px 40px #18303a33;display:flex;flex-direction:column;justify-content:space-between}.browser-card i{font-size:3em;color:var(--cyan)}.browser-card p{color:#bcd2d6;margin:0}.browser-status{height:4%;min-height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 2%;background:#eceff3;color:#647080;font-size:.62em}