
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#e9e8f3;background:#0b0b10}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #9a80ff;outline-offset:2px}.app{height:100dvh;display:flex;overflow:hidden}.sidebar{width:226px;flex:none;background:#101016;border-right:1px solid #25232d;display:flex;flex-direction:column;padding:18px 11px;gap:6px}.brand{display:flex;align-items:center;gap:10px;padding:6px 12px 25px;font-size:21px;font-weight:750;letter-spacing:-.8px}.mark{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#8065f4;color:#fff;font-size:18px}.section{font-size:10px;letter-spacing:1.6px;color:#777484;font-weight:750;padding:15px 13px 7px}.nav{border:0;background:transparent;color:#a5a2b1;text-align:left;display:flex;gap:12px;align-items:center;border-radius:9px;padding:11px 13px;font-size:13px;width:100%}.nav:hover{background:#201d2b;color:#fff}.nav.active{background:#28223e;color:#cdbfff}.nav .ico{font-size:17px;width:20px;text-align:center}.sidebar-bottom{margin-top:auto;border-top:1px solid #26232e;padding:14px 11px 2px;color:#676475;font-size:11px}.main{flex:1;min-width:0;display:flex;flex-direction:column;background:#0c0c12}.tabs{height:43px;background:#111117;border-bottom:1px solid #25232d;display:flex;align-items:end;padding:7px 10px 0;gap:6px;overflow:auto;scrollbar-width:none}.tab{height:35px;min-width:135px;max-width:200px;padding:0 9px 0 13px;border-radius:9px 9px 0 0;background:#1a1922;color:#a7a3b2;display:flex;align-items:center;gap:8px;border:1px solid #26232e;border-bottom:0;font-size:12px;flex:0 1 180px}.tab.active{background:#22202c;color:#f5f1ff}.tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.close{background:none;border:0;color:#77717f;padding:2px 4px;font-size:15px}.add{border:0;background:transparent;color:#a8a4b4;padding:6px 11px;font-size:21px}.toolbar{display:flex;align-items:center;gap:9px;padding:10px 15px;background:#17161e;border-bottom:1px solid #2b2834}.iconbtn{border:0;background:transparent;color:#c4bfce;width:30px;height:32px;border-radius:8px;font-size:19px}.iconbtn:hover{background:#292635}.iconbtn:disabled{opacity:.3;cursor:default}.address{flex:1;min-width:0;border:1px solid #35313f;background:#0f0e15;border-radius:10px;display:flex;align-items:center;padding:0 13px;gap:9px;height:38px}.address .dot{width:7px;height:7px;background:#9178ff;border-radius:50%;flex:none}.address input{width:100%;border:0;outline:0;background:transparent;color:#eeeaf7;font-size:13px}.address input::placeholder{color:#6f6a7a}.viewport{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:30px}.page{width:min(650px,100%);text-align:center}.logo{font-size:76px;letter-spacing:-8px;font-weight:800;line-height:1;color:#b4a1ff;margin-bottom:19px}.logo small{font-size:15px;letter-spacing:2px;vertical-align:top;margin-left:8px}.muted{color:#888395}.headline{font-size:25px;letter-spacing:-.8px;margin:0 0 9px;font-weight:700}.desc{color:#9691a2;font-size:13px;line-height:1.8;margin:0 auto 25px;max-width:460px}.search{display:flex;border:1px solid #373141;background:#17151f;border-radius:12px;padding:6px;gap:8px;max-width:480px;margin:0 auto 24px}.search input{flex:1;min-width:0;border:0;background:none;color:#eeeaf7;outline:0;padding:8px 12px;font-size:13px}.primary{border:0;background:#866bf2;color:white;border-radius:8px;padding:10px 16px;font-size:12px;font-weight:650}.primary:hover{background:#9b84ff}.chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.chip{border:1px solid #302b3b;border-radius:8px;background:#181620;color:#b5aec6;padding:9px 13px;font-size:12px}.chip:hover{border-color:#826de0;color:#fff}.card{background:#17151e;border:1px solid #312d3b;border-radius:15px;padding:28px;text-align:left;max-width:510px;margin:auto}.card h2{font-size:20px;margin:0 0 9px}.card p{font-size:13px;line-height:1.8;color:#aaa4b6}.tag{display:inline-block;font-size:10px;font-weight:750;letter-spacing:1.3px;color:#b29aff;background:#29213c;padding:7px 10px;border-radius:6px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.game{padding:23px 12px;background:#191720;border:1px solid #302c3b;border-radius:11px;color:#bcb5cd;text-align:center;font-size:12px}.game b{display:block;font-size:24px;margin-bottom:10px}.setting{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #302b38;font-size:13px}.switch{appearance:none;width:37px;height:22px;background:#48414f;border-radius:30px;position:relative;cursor:pointer}.switch:checked{background:#8269ed}.switch:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.switch:checked:before{transform:translateX(15px)}.status{font-size:11px;color:#706b7c;padding:7px 16px;border-top:1px solid #25212e;background:#101016;display:flex;justify-content:space-between}.sidebar-toggle{display:none}@media(max-width:740px){.sidebar{width:63px;padding:12px 6px}.brand{padding:8px 9px 24px}.brand .brandtext,.section,.nav .label,.sidebar-bottom{display:none}.nav{justify-content:center;padding:12px 5px}.nav .ico{font-size:20px}.toolbar{padding:8px 7px;gap:2px}.viewport{padding:20px}.grid{grid-template-columns:repeat(2,1fr)}.logo{font-size:60px}.tab{min-width:110px}.address{padding:0 8px}}@media(max-width:380px){.sidebar{width:52px}.toolbar .iconbtn{width:26px}.tab{min-width:100px}}

/* Void 0.3: vertical browser tabs, inspired by the supplied sketch. */
.sidebar{width:264px;padding:16px 12px 12px;gap:3px;background:#101015}
.brand{padding:5px 10px 18px}
.sidebar .tabs{height:auto;max-height:43vh;min-height:70px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:stretch;padding:3px;gap:5px;border:0;background:transparent;scrollbar-width:thin}
.sidebar .tab{width:100%;height:40px;min-height:40px;max-width:none;flex:0 0 auto;border:1px solid transparent;border-radius:10px;background:#191820;padding:0 8px 0 12px;cursor:pointer}
.sidebar .tab.active{background:#302743;border-color:#54436e;color:#fff}
.sidebar .tab:hover{border-color:#443c50}
.sidebar .tab span{font-size:12px}
.sidebar .close{margin-left:auto;opacity:.65}
.sidebar .close:hover{opacity:1;color:#fff}
.sidebar .add{width:100%;height:35px;text-align:left;border:1px dashed #37313e;border-radius:9px;background:#16151b;font-size:13px;padding:0 12px;color:#a9a2b8}
.sidebar .add::after{content:'  New tab';font-size:12px}
.sidebar .add:hover{background:#25202f}
.sidebar .section{padding:16px 11px 7px}
.main{background:#0c0b10}
.toolbar{min-height:66px;padding:11px 18px;background:#131219}
.viewport{background:radial-gradient(ellipse at 50% 25%,#17121f 0%,#0c0b10 60%)}
@media(max-width:740px){.sidebar{width:185px;padding:11px 7px}.brand{padding:7px 7px 14px}.brand .brandtext{display:inline}.section{display:block;font-size:9px;letter-spacing:1px}.nav{justify-content:flex-start;padding:9px 8px}.nav .label{display:inline;font-size:11px}.sidebar .tab{padding:0 6px;min-height:38px;height:38px}.sidebar .tab span{font-size:11px}.sidebar .tabs{max-height:40vh}.sidebar-bottom{display:block;font-size:9px;padding:10px 5px}.toolbar{padding:8px 6px;gap:2px}.viewport{padding:16px}.address{padding:0 8px}}
@media(max-width:480px){.sidebar{width:136px;padding:9px 5px}.brand{font-size:17px}.mark{width:25px;height:25px}.sidebar .section{font-size:8px;padding:12px 6px 5px}.nav{gap:5px;padding:8px 5px}.nav .ico{font-size:14px;width:16px}.nav .label{font-size:10px}.sidebar .tab{height:34px;min-height:34px;padding:0 4px}.sidebar .tab span{font-size:10px}.sidebar .close{padding:2px}.sidebar .add{font-size:12px;padding:0 7px}.sidebar .add::after{font-size:10px}.sidebar-bottom{font-size:8px}.toolbar .iconbtn{width:23px;font-size:16px}.toolbar{min-height:56px}.address{height:34px}.address input{font-size:11px}.status{font-size:9px;padding:6px}}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Kaushan+Script&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif}.sidebar{width:236px;gap:4px;padding:15px 10px 10px}.brand{padding:4px 12px 13px;min-height:53px}.brandtext{font-family:'Kaushan Script','Brush Script MT',cursive;font-size:39px;font-weight:400;letter-spacing:0;color:#eee9fa;line-height:1.1}.sidebar .tabs{max-height:none;min-height:0;flex:1;overflow-y:auto;gap:4px}.sidebar .section{padding:9px 11px 8px}.shortcuts{border-top:1px solid #282431;padding-top:6px;flex-shrink:0}.shortcut-row{display:flex;align-items:center;border-radius:9px}.shortcut-row[hidden]{display:none}.shortcut-row .nav{flex:1;min-width:0;padding:10px 11px}.remove-shortcut{background:none;border:0;color:#736d7f;padding:7px;display:grid;place-items:center;opacity:0}.shortcut-row:hover .remove-shortcut,.remove-shortcut:focus-visible{opacity:1}.remove-shortcut:hover{color:#f1eaff}.sidebar-bottom{margin-top:0;padding:10px 11px 3px;font-size:10px}.sidebar .add{display:flex;align-items:center;gap:8px;padding:0 12px}.sidebar .add::after{display:none}.sidebar .add svg{width:16px;height:16px}.sidebar .tab svg{width:15px;height:15px;flex:none}.sidebar .tab .close svg{width:14px;height:14px}.nav svg{width:17px;height:17px;flex:none}.iconbtn{display:grid;place-items:center}.iconbtn svg{width:18px;height:18px}.address-icon{width:15px;height:15px;color:#9686b5;flex:none}.logo{font-family:'Kaushan Script','Brush Script MT',cursive;font-weight:400;letter-spacing:0;font-size:94px}.status>span:first-child{font-family:'Kaushan Script','Brush Script MT',cursive;font-size:18px}.chips{gap:8px}@media(max-width:740px){.sidebar{width:185px}.brandtext{font-size:34px}.sidebar .tabs{max-height:none}.sidebar-bottom{display:block}.remove-shortcut{opacity:1}}@media(max-width:480px){.sidebar{width:145px}.brandtext{font-size:31px}.sidebar .section{font-size:9px}.sidebar .tab svg{width:13px;height:13px}.sidebar .add{font-size:11px}.sidebar .add span{font-size:11px}.shortcut-row .nav{padding:9px 6px}.nav svg{width:14px;height:14px}.remove-shortcut{padding:5px}.sidebar-bottom{font-size:9px}}

/* Keep the new-tab control pinned below the scrolling tab list. */
.sidebar .tabs{flex:1;min-height:0;overflow-y:auto;margin-bottom:0}
.sidebar>.add{flex:none;display:flex;align-items:center;gap:8px;width:100%;height:38px;min-height:38px;margin:0 0 7px;padding:0 9px;border:1px solid #302c3b;border-radius:9px;background:#1a1922;color:#aaa5b8;text-align:left;font-size:12px;font-weight:500}
.sidebar>.add:hover{background:#292436;color:#fff;border-color:#57476e}
.sidebar>.add svg{width:15px;height:15px;flex:none}
.sidebar .tab{height:38px;min-height:38px}
@media(max-width:480px){.sidebar>.add{height:34px;min-height:34px;padding:0 6px;font-size:10px}.sidebar>.add svg{width:13px;height:13px}.sidebar .tab{height:34px;min-height:34px}}

/* Void 0.6: full-width address bar, vertical tabs below it. */
.app{position:relative;padding-top:64px}
.sidebar{height:100%;padding-top:12px}
.main{min-height:0}
.toolbar{position:absolute;top:0;left:0;right:0;height:64px;min-height:64px;z-index:10;padding:10px 17px;background:#15131c;border-bottom:1px solid #302b3a;box-shadow:0 2px 12px #0002}
.sidebar .tabs{gap:5px}
.sidebar .tab{transition:background-color .19s ease,border-color .19s ease,color .19s ease,transform .18s ease;}
.sidebar .tab.active{animation:tab-select .23s ease-out both}
.sidebar .tab.tab-enter{animation:tab-appear .25s cubic-bezier(.2,.75,.25,1) both}
.sidebar .tab.tab-enter.active{animation:tab-appear .25s cubic-bezier(.2,.75,.25,1) both}
@keyframes tab-select{from{background:#1a1922;border-color:transparent}to{background:#302743;border-color:#54436e}}
@keyframes tab-appear{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.bookmark-btn.saved{color:#bda8ff;background:#29213c}
.bookmarks{border-top:1px solid #282431;padding:7px 2px 3px;max-height:132px;overflow:auto;flex-shrink:0}
.bookmarks[hidden]{display:none}
.bookmark-link{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:0;color:#aaa5b8;text-align:left;padding:9px 11px;border-radius:8px;font-size:12px}
.bookmark-link:hover{background:#24202e;color:#fff}
.bookmark-link svg{width:15px;height:15px;flex:none}
.bookmark-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shortcuts{padding-top:4px}
@media(max-width:740px){.app{padding-top:56px}.toolbar{height:56px;min-height:56px;padding:7px 8px}.sidebar{padding-top:9px}}
@media(max-width:480px){.app{padding-top:52px}.toolbar{height:52px;min-height:52px;padding:6px 5px}.bookmark-link{font-size:10px;padding:8px 5px;gap:6px}.bookmark-link svg{width:13px;height:13px}}
@media(prefers-reduced-motion:reduce){.sidebar .tab,.sidebar .tab.active,.sidebar .tab.tab-enter{animation:none!important;transition:none!important}}
body.animations-off .sidebar .tab{animation:none!important;transition:none!important}

/* Fixed lower sidebar: bookmarks above a permanent Games / Settings / Info footer. */
.sidebar-lower{margin-top:auto;display:flex;flex-direction:column;flex-shrink:0;min-height:0}
.sidebar-lower .bookmarks{border-top:1px solid #302a39;max-height:min(25vh,210px);overflow-y:auto;padding:8px 2px}
.sidebar-lower .shortcuts{border-top:1px solid #302a39;padding:8px 0 0;display:flex;flex-direction:column;gap:3px}
.sidebar-lower .nav{min-height:39px;flex-shrink:0}
.address .bookmark-btn{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;margin-right:-6px;color:#8f889d}
.address .bookmark-btn.saved{color:#c9b5ff;background:transparent}
.address .bookmark-btn.saved svg{fill:#a98cff;stroke:#a98cff}
.address .bookmark-btn:hover{color:#fff;background:#2b2537}
.address input{flex:1;min-width:0}
@media(max-width:480px){.sidebar-lower .nav{min-height:35px}.address .bookmark-btn{width:27px;flex-basis:27px}}

/* Void 1.0 — quiet animated wireframe on the new tab only. No blobs or blur. */
.viewport:has(.newtab-page){background:#0c0b10;overflow:hidden}
.newtab-page{position:relative;isolation:isolate;width:min(740px,100%);min-height:min(560px,78vh);display:flex;align-items:center;justify-content:center}
.newtab-content{position:relative;z-index:2;width:100%;padding:36px 12px;animation:content-arrive .5s ease-out both}
.void-motion{position:absolute;inset:-25% -45%;overflow:hidden;z-index:0;pointer-events:none;opacity:.9;mask-image:linear-gradient(to bottom,transparent 0%,#000 28%,#000 78%,transparent 100%)}
.motion-grid{position:absolute;inset:0;top:25%;background-image:linear-gradient(to right,rgba(148,111,229,.13) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,111,229,.13) 1px,transparent 1px);background-size:58px 58px;transform:perspective(490px) rotateX(62deg) scale(1.6);transform-origin:50% 60%;animation:grid-travel 12s linear infinite}
.motion-beam{position:absolute;height:1px;width:46%;background:linear-gradient(90deg,transparent,rgba(182,151,255,.68),transparent);transform:rotate(-31deg);opacity:0;animation:beam-travel 11s linear infinite}
.beam-one{top:20%;left:-30%;animation-delay:-1s}.beam-two{top:60%;left:-30%;animation-delay:-5s}.beam-three{top:90%;left:-30%;animation-delay:-8s}
.motion-cross{position:absolute;width:8px;height:8px;border:1px solid rgba(186,157,255,.6);transform:rotate(45deg);animation:cross-drift 8s ease-in-out infinite alternate}
.cross-one{top:30%;left:23%}.cross-two{bottom:29%;right:18%;animation-delay:-4s}
@keyframes grid-travel{from{background-position:0 0}to{background-position:0 58px}}
@keyframes beam-travel{0%{translate:0 0;opacity:0}12%{opacity:.75}65%{opacity:.5}85%,100%{translate:240% -90px;opacity:0}}
@keyframes cross-drift{from{translate:0 0;opacity:.2}to{translate:14px -22px;opacity:.7}}
@keyframes content-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.motion-grid,.motion-beam,.motion-cross,.newtab-content{animation:none!important}}
body.animations-off .motion-grid,body.animations-off .motion-beam,body.animations-off .motion-cross,body.animations-off .newtab-content{animation:none!important}
@media(max-width:600px){.void-motion{inset:-15% -35%}.motion-grid{background-size:42px 42px}.newtab-page{min-height:65vh}}

/* Void 1.1 settings */
.viewport:has(.settings-page){display:block;overflow-y:auto;padding:0;background:#0f0e14}
.settings-page{max-width:1050px;margin:0 auto;padding:42px 44px 90px;color:#e9e5f0;font-family:inherit}
.settings-head{padding-bottom:29px;border-bottom:1px solid #2c2935}.settings-head h1{font-size:30px;letter-spacing:-.8px;font-weight:650;margin:0 0 8px}.settings-head p{margin:0;color:#918b9d;font-size:13px}
.settings-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:42px;padding-top:30px}.settings-nav{display:flex;flex-direction:column;gap:5px;align-self:start;position:sticky;top:12px}.settings-category{border:0;border-radius:9px;background:transparent;color:#a39cab;padding:12px 13px;display:flex;align-items:center;gap:12px;text-align:left;font:inherit;font-size:13px;cursor:pointer;transition:background .17s,color .17s}.settings-category svg{height:17px;width:17px}.settings-category:hover{background:#211d2b;color:#f0eafa}.settings-category.selected{background:#2d253f;color:#d5c1ff}
.settings-panel[hidden]{display:none}.settings-panel h2{font-size:15px;font-weight:650;margin:0 0 14px;letter-spacing:-.2px}.settings-panel h2:not(:first-child){margin-top:28px}.settings-group{background:#191720;border:1px solid #302b3a;border-radius:12px;overflow:hidden}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:77px;padding:17px 21px}.settings-row+.settings-row{border-top:1px solid #302b3a}.settings-row strong{font-size:13px;font-weight:550;display:block;margin-bottom:5px}.settings-row small{font-size:12px;line-height:1.5;color:#8f899b;display:block}.settings-row select{background:#25212e;border:1px solid #3c3548;border-radius:8px;color:#eae5f2;padding:10px 28px 10px 11px;font:inherit;font-size:12px;max-width:190px;cursor:pointer}.settings-status{color:#b6adbd;font-size:12px;white-space:nowrap}.settings-dot{display:inline-block;width:7px;height:7px;background:#dc8c86;border-radius:50%;margin-right:6px}.settings-toggle{appearance:none;position:relative;width:37px;height:22px;border-radius:30px;background:#3b3545;flex-shrink:0;cursor:pointer;transition:background .18s}.settings-toggle:before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s}.settings-toggle:checked{background:#8f6bce}.settings-toggle:checked:before{transform:translateX(15px)}.settings-colors{display:flex;gap:10px}.settings-swatch{width:24px;height:24px;background:var(--swatch);border:3px solid #191720;border-radius:50%;cursor:pointer}.settings-swatch.chosen{outline:2px solid #eee}.settings-action{background:#292430;border:1px solid #463c50;color:#ddd4e6;border-radius:8px;padding:9px 12px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}.settings-action:hover{background:#383042}.settings-note{font-size:12px;color:#b5a3d8}.settings-version{font-size:12px;color:#b6adbd}
body.compact-tabs .sidebar .tab{height:30px;min-height:30px}body.compact-tabs .sidebar .tabs{gap:2px}
body[data-accent=blue] .sidebar .tab.active{background:#24364e!important;border-color:#527caa!important}body[data-accent=green] .sidebar .tab.active{background:#20423a!important;border-color:#468b78!important}
body[data-accent=blue] .settings-category.selected{background:#24364e;color:#a6cfff}body[data-accent=green] .settings-category.selected{background:#20423a;color:#a3ebd5}
body[data-accent=blue] .settings-toggle:checked{background:#669fe5}body[data-accent=green] .settings-toggle:checked{background:#53b99a}
@media(max-width:760px){.settings-page{padding:24px 18px 70px}.settings-layout{grid-template-columns:1fr;gap:24px}.settings-nav{position:static;display:flex;flex-direction:row;overflow-x:auto}.settings-category{white-space:nowrap;flex-shrink:0}.settings-row{padding:15px 13px;gap:12px}.settings-row select{max-width:145px}}
@media(max-width:420px){.settings-category{padding:10px 8px;font-size:11px}.settings-category svg{width:14px}.settings-row{align-items:flex-start}.settings-row select{max-width:115px}}

.refract-log{font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;margin-top:10px;color:#a9a8b6}.probe-row{padding:5px 0;border-bottom:1px solid #ffffff12}.probe-ok{color:#74dcb3}
