:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#ebedf1;background:#111214;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}body.modal-open{overflow:hidden}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button{cursor:pointer}button,input,select{border:1px solid #30333a;border-radius:8px;background:#1a1c20;color:inherit}button{padding:10px 14px}button:hover{background:#292c32}input,select{padding:13px 15px;min-width:0}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #97aed9;outline-offset:3px}input::placeholder{color:#777d87}[hidden]{display:none!important}#nav{height:72px;border-bottom:1px solid #25272c;display:flex;align-items:center;justify-content:space-between;padding:0 40px}.brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;letter-spacing:-.3px}nav{display:flex;gap:8px}nav a{padding:10px 16px;font-size:13px;color:#a5aab4;border-radius:7px}nav a:hover,nav a[aria-current=page]{background:#202228;color:#f0f2f6}.hero{min-height:calc(100dvh - 72px);display:flex;align-items:center;justify-content:center;position:relative;padding:32px 24px 100px}.hero-content{width:min(100%,620px);text-align:center;margin-top:-24px}.eyebrow{font-size:10px;letter-spacing:2.6px;font-weight:600;color:#9096a2}h1{font-size:40px;letter-spacing:-1.5px;font-weight:550;margin:14px 0 22px}.hero h1{font-size:clamp(48px,8vw,76px);letter-spacing:-3.6px;font-weight:550;margin:19px 0 34px;line-height:1.1}.search{display:flex;align-items:center;gap:10px;border:1px solid #353941;border-radius:12px;background:#1a1c20;padding:8px 9px 8px 18px;text-align:left}.search:focus-within{border-color:#8999b7;box-shadow:0 0 0 3px #8999b710}.search>span{font-size:28px;color:#979da8}.search input{width:100%;border:0;background:transparent;padding:11px 5px;font-size:14px;outline:none}.search button{font-size:22px;padding:5px 13px;background:#dce2ed;color:#212630;border:0}.hint{font-size:12px;color:#767d88;margin-top:19px}footer{position:absolute;bottom:25px;font-size:11px;color:#626873}.library{max-width:1360px;margin:auto;padding:58px 40px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.page-heading h1{margin-bottom:0}#filter{width:240px;font-size:13px}#game-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.game{flex:0 0 calc((100% - 144px)/10);min-width:0;padding:10px 8px 12px;border:1px solid #292c32;border-radius:10px;background:#191b1f;display:flex;align-items:center;flex-direction:column;gap:10px}.game img{width:64px;height:64px;border-radius:10px;object-fit:cover}.game span{font-size:11px;line-height:1.4;text-align:center;overflow-wrap:anywhere}.empty{text-align:center;color:#8c939f;padding:90px 16px;font-size:14px}.settings{max-width:640px;padding:58px 24px;margin:auto}.settings h1{margin-bottom:9px}.intro,.setting-section>p{color:#8f96a2;font-size:13px;line-height:1.6}.intro{margin-bottom:38px}.setting-section{padding:27px 0;border-top:1px solid #292c32}.setting-section h2{font-size:15px;font-weight:550;margin:0 0 10px}.setting-section label{display:block;font-size:12px;color:#b8bec8;margin:22px 0 9px}.setting-section>input,.setting-section select{width:100%;font-size:13px}.icon-row{display:flex;align-items:center;gap:14px}.icon-row input{font-size:12px;width:100%}small{display:block;color:#727a86;font-size:11px;margin-top:10px}.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-footer button{font-size:12px}.settings-footer span{font-size:11px;color:#848e9b}#viewer{height:100dvh;display:flex;flex-direction:column}#toolbar{height:54px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #30333a;background:#17191d}#toolbar button,.tool{height:36px;min-width:38px;padding:4px 9px;font-size:22px;text-align:center;border:0;background:transparent;border-radius:6px}#toolbar button:hover,.tool:hover{background:#2a2d34}#address-form{flex:1;display:flex}#address{width:100%;padding:8px 12px;font-size:12px;height:36px}#frame-host{flex:1;min-height:0;background:#fff}#frame-host iframe{border:0;width:100%;height:100%;display:block}#expand{position:fixed;z-index:3;left:50%;transform:translateX(-50%);top:0;width:58px;padding:0 12px 4px;border-radius:0 0 8px 8px;font-size:20px;box-shadow:0 3px 12px #0004}#notice{position:fixed;z-index:10;bottom:24px;left:50%;transform:translateX(-50%);background:#252931;border:1px solid #454c58;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:14px;font-size:13px;width:max-content;max-width:calc(100% - 32px);box-shadow:0 6px 28px #0005}#notice button{padding:4px 8px;flex-shrink:0}.chat{max-width:900px;margin:auto;padding:58px 24px}.chat-heading h1{margin-bottom:9px}.chat-heading p{margin:0 0 32px;color:#8f96a2;font-size:13px}.chat-gate,.chat-room{border:1px solid #2d3037;border-radius:14px;background:#181a1e;box-shadow:0 20px 60px #0003}.chat-gate{padding:28px}.chat-gate label{display:block;margin-bottom:10px;color:#c4c9d2;font-size:12px}.chat-join-row{display:flex;gap:10px}.chat-join-row input{flex:1}.chat-join-row button,.chat-room form button{border-color:#dce2ed;background:#dce2ed;color:#212630;font-weight:600}.chat-join-row button:hover,.chat-room form button:hover{background:#f0f3f8}.chat-room{overflow:hidden}.chat-room>header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #2d3037}.chat-room>header>div{display:flex;align-items:baseline;gap:10px}.chat-room>header strong{font-size:13px}.chat-room>header span{color:#7f8792;font-size:11px}.chat-room>header button{padding:7px 11px;font-size:11px}.chat-messages{height:min(54dvh,500px);overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;scrollbar-color:#444850 transparent}.chat-message{max-width:78%;align-self:flex-start}.chat-message>div{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}.chat-message strong{font-size:12px;color:#dce1e9}.chat-message time{font-size:10px;color:#6f7681}.chat-message p{margin:0;padding:10px 12px;border:1px solid #30343b;border-radius:4px 12px 12px 12px;background:#22252a;color:#d9dde4;font-size:13px;line-height:1.5;overflow-wrap:anywhere}.chat-message.system{max-width:100%;align-self:center;color:#737b86;font-size:10px}.chat-room>form{display:flex;gap:9px;padding:14px;border-top:1px solid #2d3037;background:#15171a}.chat-room>form input{flex:1}.chat-room>form button{min-width:78px}.changelog-modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px}.changelog-backdrop{position:absolute;inset:0;background:#08090bc7;backdrop-filter:blur(7px);animation:changelog-fade-in .22s ease-out both}.changelog-card{position:relative;width:min(100%,500px);padding:30px;border:1px solid #363a43;border-radius:16px;background:linear-gradient(145deg,#1d1f24,#17191d);box-shadow:0 28px 90px #000a;animation:changelog-enter .32s cubic-bezier(.2,.8,.2,1) both}.changelog-topline{display:flex;align-items:center;justify-content:space-between;gap:16px}.version-badge{padding:5px 8px;border:1px solid #393d46;border-radius:999px;color:#aeb5c1;background:#23262c;font-size:10px;font-variant-numeric:tabular-nums}.changelog-card h2{margin:17px 0 8px;font-size:30px;font-weight:550;letter-spacing:-1px}.changelog-card>p{margin:0;color:#8f96a2;font-size:13px;line-height:1.6}.changelog-list{list-style:none;margin:25px 0 27px;padding:0;border-top:1px solid #2d3037}.changelog-list li{display:grid;grid-template-columns:74px 1fr;gap:15px;padding:17px 0;border-bottom:1px solid #2d3037}.changelog-list span{color:#dce1e9;font-size:12px;font-weight:600}.changelog-list p{margin:0;color:#969da8;font-size:12px;line-height:1.55}.changelog-card>button{width:100%;border-color:#dce2ed;background:#dce2ed;color:#212630;font-size:13px;font-weight:600}.changelog-card>button:hover{background:#f0f3f8}.changelog-modal.is-closing .changelog-backdrop{animation:changelog-fade-out .16s ease-in both}.changelog-modal.is-closing .changelog-card{animation:changelog-exit .16s ease-in both}@keyframes changelog-fade-in{from{opacity:0}to{opacity:1}}@keyframes changelog-fade-out{from{opacity:1}to{opacity:0}}@keyframes changelog-enter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes changelog-exit{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(9px) scale(.98)}}@media(max-width:1100px){.game{flex-basis:calc((100% - 112px)/8)}}@media(max-width:850px){.game{flex-basis:calc((100% - 80px)/6)}}@media(max-width:600px){.chat{padding:38px 16px}.chat-gate{padding:20px}.chat-join-row{flex-direction:column}.chat-messages{height:52dvh;padding:16px}.chat-message{max-width:92%}.chat-room>form{padding:10px}.chat-room>form button{min-width:auto}.changelog-modal{padding:16px}.changelog-card{padding:24px 20px;border-radius:14px}.changelog-list li{grid-template-columns:1fr;gap:7px}.changelog-card h2{font-size:27px}#nav{padding:0 20px;height:64px}nav a{padding:10px;font-size:12px}.hero{min-height:calc(100dvh - 64px)}.library{padding:38px 20px}.page-heading{align-items:stretch;flex-direction:column}#filter{width:100%}.game{flex-basis:calc((100% - 32px)/3)}.settings{padding-top:38px}.hero .eyebrow{font-size:9px}.settings-footer{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.changelog-backdrop,.changelog-card,.changelog-modal.is-closing .changelog-backdrop,.changelog-modal.is-closing .changelog-card{animation-duration:.01ms}}

/* Theme system */
:root,[data-theme="graphite"]{--bg:#111214;--panel:#0c0d0f;--surface:#1a1c20;--surface-strong:#202228;--surface-soft:#191b1f;--border:#30333a;--border-soft:#292c32;--text:#ebedf1;--muted:#9096a2;--accent:#dce2ed;--accent-text:#212630;--focus:#97aed9;--toolbar:#17191d;--shadow:#0005}
[data-theme="midnight"]{--bg:#0c1220;--panel:#070c15;--surface:#121b2d;--surface-strong:#1a2840;--surface-soft:#101929;--border:#293956;--border-soft:#22314b;--text:#edf4ff;--muted:#8fa1bd;--accent:#91b8ff;--accent-text:#0b1930;--focus:#74a7ff;--toolbar:#0f1828;--shadow:#02071380}
[data-theme="obsidian"]{--bg:#050506;--panel:#000;--surface:#101011;--surface-strong:#1b1b1d;--surface-soft:#0c0c0d;--border:#323235;--border-soft:#242426;--text:#f4f4f5;--muted:#949499;--accent:#f0f0f2;--accent-text:#101012;--focus:#b9b9c2;--toolbar:#09090a;--shadow:#000a}
html,body{background:var(--bg);color:var(--text)}
body,button,input,select,#nav,#toolbar,.chat-room>form{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
button,input,select{background:var(--surface);border-color:var(--border);color:var(--text)}
button:hover,nav a:hover,nav a[aria-current=page]{background:var(--surface-strong);color:var(--text)}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline-color:var(--focus)}
#nav{border-color:var(--border-soft)}
.eyebrow,.intro,.setting-section>p,.chat-heading p{color:var(--muted)}
.search{background:var(--surface);border-color:var(--border)}
.search:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 12%,transparent)}
.search button,.chat-join-row button,.chat-room form button,.changelog-card>button{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.game{background:var(--surface-soft);border-color:var(--border-soft)}
.setting-section,.chat-room>header,.chat-room>form,.changelog-list,.changelog-list li{border-color:var(--border-soft)}
.chat-gate,.chat-room{background:var(--surface-soft);border-color:var(--border);box-shadow:0 20px 60px var(--shadow)}
.chat-message p{background:var(--surface-strong);border-color:var(--border);color:var(--text)}
.chat-room>form{background:var(--bg)}
#toolbar{background:var(--toolbar);border-color:var(--border)}
#address{background:var(--surface)}
#expand{background:var(--surface);border-color:var(--border);box-shadow:0 3px 12px var(--shadow)}
.changelog-card{background:linear-gradient(145deg,var(--surface-strong),var(--surface));border-color:var(--border);box-shadow:0 28px 90px var(--shadow)}
.version-badge{background:var(--surface-strong);border-color:var(--border);color:var(--text)}
.theme-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.theme-swatches span{height:8px;border-radius:999px;border:1px solid #ffffff1a}
.theme-swatches [data-swatch="graphite"]{background:linear-gradient(90deg,#111214 0 55%,#dce2ed 55%)}
.theme-swatches [data-swatch="midnight"]{background:linear-gradient(90deg,#0c1220 0 55%,#91b8ff 55%)}
.theme-swatches [data-swatch="obsidian"]{background:linear-gradient(90deg,#050506 0 55%,#f0f0f2 55%)}
.version-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:12px;color:var(--muted)}
.version-row strong{font-weight:550;color:var(--text);font-variant-numeric:tabular-nums}
#toolbar-hint{position:fixed;z-index:5;right:18px;top:18px;width:auto;padding:11px 14px;text-align:left;background:var(--surface);border-color:var(--border);box-shadow:0 10px 30px var(--shadow);animation:toolbar-hint-in .24s ease-out both}
#toolbar-hint span,#toolbar-hint small{display:block;margin:0}
#toolbar-hint span{font-size:12px;font-weight:600}
#toolbar-hint small{margin-top:3px;color:var(--muted);font-size:10px}
.nav-left{display:flex;align-items:center;gap:18px;min-width:0}
#bookmark[aria-pressed="true"]{color:var(--accent)}
.bookmarks-panel{position:absolute;z-index:1;left:32px;top:50%;transform:translateY(-50%);width:250px;max-height:calc(100dvh - 150px);padding:15px;border:1px solid var(--border-soft);border-radius:13px;background:var(--panel);box-shadow:0 18px 50px var(--shadow);text-align:left;overflow:hidden}
.bookmarks-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 3px 12px;color:var(--muted);font-size:10px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase}
.bookmarks-panel>header strong{min-width:20px;padding:3px 6px;border-radius:999px;background:var(--surface-strong);color:var(--text);font-size:9px;text-align:center;letter-spacing:0}
#bookmarks-list{display:flex;flex-direction:column;gap:6px;max-height:calc(100dvh - 220px);overflow-y:auto;scrollbar-color:var(--border) transparent}
.bookmark-row{position:relative;display:flex;align-items:center;border:1px solid var(--border-soft);border-radius:8px;background:var(--surface-soft);overflow:hidden}
.bookmark-open{width:100%;min-width:0;padding:10px 39px 10px 11px;border:0;border-radius:0;background:transparent;color:var(--text);font-size:11px;line-height:1.35;text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.bookmark-delete{position:absolute;right:5px;width:29px;height:29px;padding:6px;border:0;background:var(--surface-strong);color:var(--muted);opacity:0;transform:translateX(5px);transition:opacity .15s ease,transform .15s ease,color .15s ease}
.bookmark-delete svg{display:block;width:16px;height:16px;fill:currentColor}
.bookmark-delete:hover{color:#ff9b9b;background:var(--surface-strong)}
.bookmark-row:hover .bookmark-delete,.bookmark-row:focus-within .bookmark-delete{opacity:1;transform:translateX(0)}
#bookmarks-empty{margin:4px 3px 2px;color:var(--muted);font-size:11px;line-height:1.5}
@keyframes toolbar-hint-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1050px) and (min-width:701px){.bookmarks-panel{left:20px;width:190px}.hero-content{width:min(calc(100% - 440px),620px)}}
@media(max-width:700px){.hero{justify-content:flex-start;flex-direction:column;padding:46px 18px 110px;gap:34px}.hero-content{order:1;width:100%;margin-top:0}.bookmarks-panel{position:static;order:2;transform:none;width:min(100%,620px);max-height:300px}.bookmarks-panel #bookmarks-list{max-height:220px}}
@media(hover:none){.bookmark-delete{opacity:1;transform:none}}
@media(max-width:600px){#nav{padding-inline:12px}.nav-left{gap:10px}.brand{gap:7px}nav{gap:1px}nav a{padding-inline:7px}#toolbar{gap:3px;padding-inline:7px}#toolbar button,.tool{min-width:34px;padding-inline:6px}#toolbar-hint{right:12px;top:12px}}
@media(max-width:400px){.brand{font-size:0}.brand img{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){body,button,input,select,#nav,#toolbar,.chat-room>form{transition:none}#toolbar-hint{animation-duration:.01ms}}

/* Home: a quiet starfield and a compact launch grid. */
@font-face{font-family:Unbounded;src:url('/fonts/unbounded-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
.hero{isolation:isolate;min-height:calc(100dvh - 72px);padding:64px 24px 72px;overflow:hidden;align-items:flex-start}
.space-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 24%,#8699891a,transparent 48%),radial-gradient(ellipse at 20% 65%,#35578224,transparent 55%),linear-gradient(145deg,color-mix(in srgb,var(--bg) 80%,#203248),var(--bg) 65%)}
.space-backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,#0003);pointer-events:none}
#starfield{display:block;width:100%;height:100%}
.hero-content{width:min(100%,700px);margin:0;position:relative;z-index:1}
.hero h1{font-family:Unbounded,sans-serif;font-weight:500;font-size:clamp(36px,5.4vw,66px);line-height:1.2;letter-spacing:-3px;margin:0;text-shadow:0 0 50px #c3d8ff1f}
.hero-credit{margin:14px 0 38px;font-size:9px;letter-spacing:3.4px;color:var(--muted);font-weight:600}
.hero .search{position:relative;background:color-mix(in srgb,var(--panel) 85%,transparent);border:1px solid color-mix(in srgb,var(--border) 75%,#9daebf);border-radius:12px;min-height:65px;box-shadow:0 12px 36px #0002}
.hero .search:after{content:"";height:2px;position:absolute;bottom:-1px;left:12%;right:12%;background:linear-gradient(90deg,transparent,#8bceb9,transparent);opacity:.65}
.hero .search input{font-size:15px;padding:13px 5px}
.hero .search button{background:transparent;color:var(--text);border:1px solid var(--border-soft);font-size:22px}
.hero .search button:hover{background:var(--surface-strong)}
.hero .hint{margin:16px 0 33px;color:var(--muted);font-size:11px}
.quick-apps h2{text-align:left;font-size:14px;font-weight:600;letter-spacing:-.2px;margin:0 0 16px}
.quick-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.quick-app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;min-height:126px;padding:20px 8px;border-radius:13px;border:1px solid color-mix(in srgb,var(--border) 85%,transparent);background:color-mix(in srgb,var(--surface) 78%,transparent);box-shadow:0 6px 24px #0001;transition:transform .18s ease,background-color .18s ease,border-color .18s ease}
.quick-app:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--surface-strong) 90%,transparent);border-color:var(--focus)}
.quick-app img{width:38px;height:38px;object-fit:contain;border-radius:8px}
.quick-app svg{width:35px;height:35px;stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.quick-app span{font-size:12px;font-weight:550;line-height:1.4;text-align:center}
.hero .bookmarks-panel{top:64px;transform:none;left:24px;width:210px;background:color-mix(in srgb,var(--panel) 92%,transparent);max-height:calc(100dvh - 180px)}
@media(min-width:1201px) and (max-width:1350px){.hero-content{width:620px}.hero .bookmarks-panel{width:190px;left:18px}}
@media(max-width:1200px){.hero{flex-direction:column;align-items:center;gap:28px}.hero-content{order:1;width:min(100%,700px)}.hero .bookmarks-panel{position:relative;top:auto;left:auto;order:2;width:min(100%,700px);max-height:260px}.hero #bookmarks-list{max-height:180px}}
@media(max-width:600px){.hero{padding:42px 18px 40px;min-height:calc(100dvh - 64px)}.hero h1{letter-spacing:-1.8px;font-size:clamp(29px,8.4vw,46px)}.hero-credit{margin:12px 0 30px;font-size:8px;letter-spacing:2.8px}.quick-app-grid{gap:9px}.quick-app{min-height:104px;gap:13px;padding:16px 5px;border-radius:10px}.quick-app img,.quick-app svg{width:30px;height:30px}.quick-app span{font-size:10px}.hero .hint{margin-bottom:28px}.hero .search input{font-size:13px}}
@media(max-width:370px){.quick-app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.quick-app{transition:none}.quick-app:hover{transform:none}}
