:root{--surface:#0b0c0f;--surface-1:#111318;--surface-2:#171a20;--text:#eef0f4;--muted:#8d93a0;--line:#232730;--accent:#6b98e6;--accent-rgb:107 152 230;--rad:3px;--space:1;--font-ui:Geist,"Geist Variable",ui-sans-serif,system-ui,sans-serif;--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--z-nav:40;--z-bar:30;--z-scrim:35;--z-toast:200;--z-skip:300}
[data-theme="amoled"]{--surface:#000;--surface-1:#050505;--surface-2:#0a0a0a;--line:#202020}
[data-theme="cyber"]{--surface:#090612;--surface-1:#100a1d;--surface-2:#171027;--text:#f7f2ff;--muted:#a89ab9;--line:#342350;--accent:#c3df4d;--accent-rgb:195 223 77}
[data-theme="retro"]{--surface:#201f1a;--surface-1:#292820;--surface-2:#343228;--text:#f4e7bf;--muted:#b5a77d;--line:#504b3b;--accent:#f1a13b;--accent-rgb:241 161 59}
[data-theme="windows"]{--surface:#d9e8f5;--surface-1:#f4f8fc;--surface-2:#fff;--text:#142033;--muted:#58697d;--line:#a9bfd2;--accent:#0067c0;--accent-rgb:0 103 192}
[data-theme="terminal"]{--surface:#050b07;--surface-1:#08120c;--surface-2:#0c1911;--text:#a9f5ba;--muted:#61a670;--line:#173b21;--accent:#45f06b;--accent-rgb:69 240 107;--font-ui:var(--font-mono)}
[data-theme="glass"]{--surface:#111827;--surface-1:#172033;--surface-2:#202b40;--text:#f8fbff;--muted:#9eacc0;--line:#ffffff24;--accent:#73b8ff;--accent-rgb:115 184 255}
[data-theme="minimal"]{--surface:#0a0a0c;--surface-1:#101014;--surface-2:#15151a;--text:#f2f2f7;--muted:#8e8e93;--line:#242429;--accent:#6b98e6;--accent-rgb:107 152 230}[data-theme="light"]{--surface:#f5f5f3;--surface-1:#fff;--surface-2:#fafaf8;--text:#171717;--muted:#70706b;--line:#d9d9d4;--accent:#1b5e4b;--accent-rgb:27 94 75}
[data-theme="future"]{--surface:#081117;--surface-1:#0c1820;--surface-2:#10232c;--text:#edfaff;--muted:#8babb7;--line:#1c3b48;--accent:#29d3c2;--accent-rgb:41 211 194}
[data-theme="nord"]{--surface:#2e3440;--surface-1:#343b48;--surface-2:#3b4252;--text:#eceff4;--muted:#9aa5b1;--line:#4c566a;--accent:#88c0d0;--accent-rgb:136 192 208}
[data-theme="dracula"]{--surface:#282a36;--surface-1:#2f313f;--surface-2:#383a4a;--text:#f8f8f2;--muted:#9ba3c9;--line:#44475a;--accent:#bd93f9;--accent-rgb:189 147 249}
[data-theme="gruvbox"]{--surface:#282828;--surface-1:#32302f;--surface-2:#3c3836;--text:#ebdbb2;--muted:#a89984;--line:#504945;--accent:#fe8019;--accent-rgb:254 128 25}
[data-theme="ocean"]{--surface:#00080f;--surface-1:#000d18;--surface-2:#001424;--text:#ecfeff;--muted:#5d8b98;--line:#0a3040;--accent:#22d3ee;--accent-rgb:34 211 238}
[data-theme="forest"]{--surface:#020c04;--surface-1:#041508;--surface-2:#061e0c;--text:#ecfdf5;--muted:#5a8a70;--line:#0e3818;--accent:#34d399;--accent-rgb:52 211 153}
[data-theme="rose"]{--surface:#120008;--surface-1:#1a000d;--surface-2:#240014;--text:#fff1f2;--muted:#a06478;--line:#3c0022;--accent:#fb7185;--accent-rgb:251 113 133}
[data-theme="solar"]{--surface:#0a0400;--surface-1:#140800;--surface-2:#1e0e00;--text:#fff7ed;--muted:#9a7050;--line:#341e00;--accent:#f97316;--accent-rgb:249 115 22}
[data-theme="slate"]{--surface:#060810;--surface-1:#0b0e18;--surface-2:#111520;--text:#f8fafc;--muted:#6e7a8e;--line:#1f2738;--accent:#94a3b8;--accent-rgb:148 163 184}
[data-theme="grape"]{--surface:#0c040c;--surface-1:#150814;--surface-2:#1e0c1c;--text:#fdf4ff;--muted:#9a62a0;--line:#321830;--accent:#e879f9;--accent-rgb:232 121 249}
[data-theme="midnight"]{--surface:#050810;--surface-1:#080c18;--surface-2:#0e1224;--text:#eef4ff;--muted:#6a7a9a;--line:#1c2240;--accent:#4f8ef7;--accent-rgb:79 142 247}
[data-theme="paper"]{--surface:#faf7f0;--surface-1:#fff;--surface-2:#f2ede1;--text:#2b2620;--muted:#7a7062;--line:#ded6c6;--accent:#a4551f;--accent-rgb:164 85 31}
[data-theme="nordlight"]{--surface:#eceff4;--surface-1:#fff;--surface-2:#e5e9f0;--text:#2e3440;--muted:#697485;--line:#d2d8e2;--accent:#5e81ac;--accent-rgb:94 129 172}
/* System theme — follows the OS light/dark preference */
[data-theme="system"]{--surface:#f5f5f3;--surface-1:#fff;--surface-2:#fafaf8;--text:#171717;--muted:#70706b;--line:#d9d9d4;--accent:#1b5e4b;--accent-rgb:27 94 75}
@media(prefers-color-scheme:dark){
  [data-theme="system"]{--surface:#0a0a0c;--surface-1:#101014;--surface-2:#15151a;--text:#f2f2f7;--muted:#8e8e93;--line:#242429;--accent:#6b98e6;--accent-rgb:107 152 230}
}
[data-accent="blue"]{--accent:#6b98e6;--accent-rgb:107 152 230}[data-accent="purple"]{--accent:#a08bea;--accent-rgb:160 139 234}[data-accent="red"]{--accent:#e8727a;--accent-rgb:232 114 122}[data-accent="green"]{--accent:#4fbf86;--accent-rgb:79 191 134}
[data-font="mono"]{--font-ui:var(--font-mono)}[data-font="serif"]{--font-ui:Georgia,serif}[data-density="comfortable"]{--space:1.2}[data-density="spacious"]{--space:1.45}[data-radius="soft"]{--rad:9px}[data-radius="round"]{--rad:16px}
html{background:var(--surface);scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-ui);transition:background .2s,color .2s}*{box-sizing:border-box}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-shell{min-height:100dvh}.sidebar{position:fixed;inset:0 auto 0 0;width:188px;background:var(--surface);border-right:1px solid var(--line);z-index:var(--z-nav);display:flex;flex-direction:column}.brand{height:60px;padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.16em;line-height:1.5}.brand-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--accent);color:var(--surface);font-size:16px;font-weight:800}.sidebar nav{padding:16px 10px;display:grid;gap:3px}.nav-link{display:flex;gap:12px;align-items:center;padding:10px;color:var(--muted);font-size:13px;border-radius:var(--rad);border:1px solid transparent}.nav-link:hover,.nav-link.active{color:var(--text);background:var(--surface-1);border-color:var(--line)}.nav-link.active:before{content:'';width:2px;height:16px;background:var(--accent);margin-left:-11px}.rail-meta{padding:18px;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line);font:9px var(--font-mono);color:var(--muted);letter-spacing:.12em}
.sidebar-bookmarks{flex:1;min-height:0;overflow-y:auto;padding:4px 10px 8px;border-top:1px solid var(--line)}
.sb-head{font:9px var(--font-mono);color:var(--muted);letter-spacing:.12em;padding:12px 2px 6px;text-transform:uppercase}
.sb-empty{font:10px var(--font-mono);color:var(--muted);padding:2px 2px 8px;line-height:1.6}
.sb-group{margin-bottom:8px}
.sb-group-label{font:9px var(--font-mono);color:var(--accent);letter-spacing:.08em;padding:4px 2px;text-transform:uppercase}
.sb-item{display:block;padding:6px 8px;font-size:12px;color:var(--muted);border-radius:var(--rad);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item:hover{background:var(--surface-1);color:var(--text)}.workspace{margin-left:188px;min-height:100dvh}.command-bar{height:64px;position:sticky;top:0;z-index:var(--z-bar);background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:18px}.global-search{height:36px;max-width:620px;flex:1;border:1px solid var(--line);background:var(--surface-1);display:flex;align-items:center;padding:0 11px;gap:9px;border-radius:var(--rad)}.global-search input{width:100%;background:none;border:0;outline:0;color:var(--text);font-size:13px}.key{font:10px var(--font-mono);color:var(--muted);display:flex;gap:3px;white-space:nowrap}.status-dot{margin-left:auto;color:var(--muted);font:9px var(--font-mono);letter-spacing:.1em}.status-dot i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#31c86a;margin-right:6px}.menu-button{display:none;background:none;border:0}.workspace>footer{display:flex;justify-content:space-between;padding:22px 28px;border-top:1px solid var(--line);font:10px var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
main{min-height:calc(100dvh - 113px)}.hero{min-height:510px;display:grid;grid-template-columns:1.05fr .95fr;border-bottom:1px solid var(--line)}.hero-copy{padding:calc(72px * var(--space)) clamp(28px,6vw,84px);display:flex;flex-direction:column;justify-content:center}.section-code,.section-title>span,.page-heading>span{font:10px var(--font-mono);letter-spacing:.13em;color:var(--accent)}.hero h1{font-size:clamp(44px,6vw,78px);line-height:.98;letter-spacing:-.055em;margin:22px 0 26px;max-width:760px}.hero p{color:var(--muted);max-width:570px;font-size:17px;line-height:1.65}.hero-actions{display:flex;gap:10px;margin-top:22px}.primary-action,.secondary-action,.detail-actions a,.detail-actions button{display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid var(--line);font-size:12px;border-radius:var(--rad);background:var(--surface-1)}.primary-action{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:700}.hero-visual{position:relative;min-height:360px;border-left:1px solid var(--line);overflow:hidden}.hero-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--surface),transparent 45%)}.hero-visual span{position:absolute;z-index:2;right:18px;bottom:16px;font:9px var(--font-mono);color:#c8d0dc;letter-spacing:.1em}.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.stat-strip div{padding:24px 28px;border-right:1px solid var(--line);display:flex;align-items:baseline;gap:12px}.stat-strip b{font:24px var(--font-mono)}.stat-strip span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.section-block{padding:calc(54px * var(--space)) clamp(20px,4vw,54px);border-bottom:1px solid var(--line)}.section-title{margin-bottom:28px}.section-title h2{font-size:30px;letter-spacing:-.035em;margin:9px 0}.section-title p{margin:0;color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.data-card{position:relative;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);transition:background .15s}.data-card:hover{background:var(--surface-1)}.card-body{padding:15px;flex:1;display:flex;flex-direction:column}.card-top{position:relative;z-index:2;display:flex;justify-content:space-between;margin-bottom:9px}.type-code{font:9px var(--font-mono);letter-spacing:.08em;color:var(--accent)}.icon-action{border:1px solid var(--line);background:transparent;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--rad)}.icon-action.saved{color:var(--accent);border-color:var(--accent)}.card-body h3{font-size:19px;margin:0 0 3px;line-height:1.25}.card-cat{font:10px var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.data-card p{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tag-row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}.tag-row a{font:9px var(--font-mono);color:var(--muted);padding:4px 6px;background:var(--surface-2)}.card-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.badge{font:9px var(--font-mono);padding:3px 7px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.badge.ok{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}.personal-group{margin-top:26px}.personal-group>h3{font:10px var(--font-mono);color:var(--muted);letter-spacing:.12em;margin:0 0 10px}.collections-list{border-top:1px solid var(--line)}.collection-card{display:grid;grid-template-columns:60px 1fr 24px;gap:18px;align-items:center;padding:22px 12px;border-bottom:1px solid var(--line)}.collection-card>span{font:13px var(--font-mono);color:var(--accent)}.collection-card h3{margin:0 0 6px;font-size:17px}.collection-card p{margin:0 0 8px;color:var(--muted);font-size:13px}.collection-card small{font:9px var(--font-mono);color:var(--muted)}
.card-stretched-link{position:absolute;inset:0;z-index:1}
.card-top .icon-action{position:relative;z-index:3}
.page-heading{padding:calc(50px * var(--space)) clamp(24px,5vw,64px);border-bottom:1px solid var(--line);position:relative}.page-heading h1{font-size:clamp(42px,5vw,64px);letter-spacing:-.05em;margin:14px 0 12px}.page-heading p{color:var(--muted);max-width:680px;margin:0}.page-heading>b{position:absolute;right:32px;bottom:30px;font:10px var(--font-mono);color:var(--muted)}.split-view{display:grid;grid-template-columns:220px 1fr}.filters{border-right:1px solid var(--line);padding:22px 14px}.filters label{display:block;color:var(--muted);font:9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;margin:15px 9px 8px}.filters button{width:100%;display:flex;justify-content:space-between;border:0;background:none;padding:8px 9px;color:var(--muted);font-size:12px;text-align:left;border-radius:var(--rad)}.filters button.selected{background:var(--surface-2);color:var(--text)}.filters i{font:9px var(--font-mono);font-style:normal}
.cat-sort-select{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font:11px var(--font-mono);padding:6px 8px;border-radius:var(--rad);margin-bottom:6px}
.tag-filter-wrap{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.tag-filter-wrap button{width:auto;flex:none;padding:4px 8px;font-size:10px;border:1px solid var(--line);border-radius:var(--rad);background:var(--surface-2)}
.tag-filter-wrap button.selected{background:var(--surface-2);color:var(--accent);border-color:var(--accent)}.search-page{padding:28px}.search-large{height:58px;border:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--surface-1)}.search-large input{font-size:17px;width:100%;border:0;outline:0;background:none;color:var(--text)}.result-group{margin-top:38px}.result-group>div:first-child{display:flex;justify-content:space-between;align-items:center}.result-group h2{font-size:22px}.result-group>div>span{font:9px var(--font-mono);color:var(--muted)}.empty-state{padding:70px;text-align:center;color:var(--muted)}
.settings-grid{display:grid;grid-template-columns:1.2fr .8fr}.settings-grid>section{padding:32px;border-right:1px solid var(--line)}.settings-grid h2{margin-bottom:5px}.settings-grid section>p{color:var(--muted);font-size:13px}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.theme-grid button{height:100px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--rad);display:flex;align-items:flex-end;gap:8px;padding:12px;position:relative;overflow:hidden}.theme-grid button i{position:absolute;inset:0 0 38px;background:linear-gradient(135deg,var(--surface-2),var(--accent));opacity:.5}.theme-grid button span,.theme-grid button svg{z-index:1;font-size:11px}.theme-grid button svg{margin-left:auto}.theme-grid button.selected{border-color:var(--accent)}.setting-row{padding:18px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.setting-row label{text-transform:capitalize;font-size:12px}.setting-row>div{display:flex}.setting-row>div button{border:1px solid var(--line);background:var(--surface-1);padding:7px 9px;font-size:10px;text-transform:capitalize}.setting-row button.selected{color:var(--accent);border-color:var(--accent)}.switch{width:38px;height:22px;border:1px solid var(--line);background:var(--surface-2);padding:2px;border-radius:11px}.switch i{display:block;width:16px;height:16px;background:var(--muted);transition:transform .2s;border-radius:8px}.switch.on i{background:var(--accent);transform:translateX(16px)}
.detail{padding:clamp(30px,7vw,90px);max-width:1100px}.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;margin-bottom:54px;text-transform:uppercase}.detail-head{display:flex;justify-content:space-between;gap:30px}.detail h1{font-size:clamp(44px,6vw,72px);letter-spacing:-.055em;margin:18px 0}.detail-head p{font-size:18px;line-height:1.6;color:var(--muted);max-width:690px}.detail-meta{display:grid;grid-template-columns:repeat(4,1fr);margin:42px 0;border:1px solid var(--line)}.detail-meta div{padding:18px;border-right:1px solid var(--line)}.detail-meta span,.detail-meta b{display:block}.detail-meta span{font:9px var(--font-mono);color:var(--muted);text-transform:uppercase;margin-bottom:8px}.detail-meta b{font-size:12px}.detail-actions{display:flex;gap:9px;margin-top:28px}
.scrim{display:none}[data-motion="off"] *,[data-motion="off"] *:before,[data-motion="off"] *:after{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-width:980px){.home-grid,.card-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-visual{border-left:0;border-top:1px solid var(--line);height:300px}.settings-grid{grid-template-columns:1fr}.settings-grid>section{border-bottom:1px solid var(--line)}}
@media(max-width:720px){.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.is-open{transform:none}.scrim{display:block;position:fixed;inset:0;background:#0009;border:0;z-index:var(--z-scrim)}.workspace{margin-left:0}.menu-button{display:block}.command-bar{padding:0 14px}.status-dot,.key{display:none}.hero-copy{padding:52px 22px}.hero h1{font-size:44px}.hero-actions{align-items:stretch;flex-direction:column}.stat-strip{grid-template-columns:repeat(2,1fr)}.stat-strip div:nth-child(2){border-right:0}.card-grid,.home-grid{grid-template-columns:1fr}.split-view{display:block}.filters{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow:auto;gap:4px}.filters label{display:none}.filters button{width:auto;white-space:nowrap}.theme-grid{grid-template-columns:repeat(2,1fr)}.settings-grid>section{padding:22px}.detail-meta{grid-template-columns:repeat(2,1fr)}.detail-actions{flex-direction:column}.page-heading>b{display:none}.workspace>footer{gap:12px;flex-direction:column}}
.intro{padding:clamp(48px,9vw,88px) clamp(24px,6vw,64px);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.intro-title{font-size:clamp(38px,6vw,60px);letter-spacing:-.045em;line-height:1;margin:0}
.intro .tagline{font-size:clamp(16px,1.8vw,20px);color:var(--muted);max-width:620px;line-height:1.55;margin:0}
.intro-search{height:54px;max-width:660px;border:1px solid var(--line);background:var(--surface-1);display:flex;align-items:center;gap:12px;padding:0 8px 0 16px}
.intro-search input{flex:1;background:none;border:0;outline:0;color:var(--text);font-size:15px}
.intro-search button{background:var(--accent);color:var(--surface);border:0;padding:10px 18px;font-size:12px;font-weight:700;cursor:pointer;border-radius:var(--rad)}
.intro-quick{display:flex;gap:8px;flex-wrap:wrap}
.intro-quick a{font:11px var(--font-mono);padding:6px 11px;border:1px solid var(--line);color:var(--muted)}
.intro-quick a:hover{color:var(--text);border-color:var(--accent)}
.home-section{padding:clamp(40px,6vw,60px) clamp(20px,4vw,48px);border-bottom:1px solid var(--line)}
.hs-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px}
.hs-head h2{font-size:24px;letter-spacing:-.03em;margin:6px 0 0}
.hs-head>div>span{font:10px var(--font-mono);color:var(--accent);letter-spacing:.12em}
.hs-head a{font:11px var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.card-media{position:relative}
.card-media .icon-action{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.placeholder-image{aspect-ratio:16/10;background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;overflow:hidden;background-image:linear-gradient(rgba(var(--accent-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.05) 1px,transparent 1px);background-size:22px 22px}
.placeholder-image .ph-brand{position:absolute;top:10px;left:12px;font:8px var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.placeholder-image .ph-icon{color:var(--accent);opacity:.75}
.placeholder-image .ph-type{font:10px var(--font-mono);letter-spacing:.1em;color:var(--text);text-transform:uppercase}
.entry-image{aspect-ratio:16/10;width:100%;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.catalog-search{height:40px;max-width:480px;margin-top:20px;border:1px solid var(--line);background:var(--surface-1);display:flex;align-items:center;gap:9px;padding:0 12px}
.catalog-search input{flex:1;background:none;border:0;outline:0;color:var(--text);font-size:13px}
.breadcrumb{display:flex;gap:8px;align-items:center;font:11px var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:28px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb span:last-child{color:var(--text)}
.detail-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;margin-bottom:36px;align-items:start}
.detail-hero h1{font-size:clamp(36px,5vw,56px);letter-spacing:-.045em;margin:14px 0}
.detail-hero p{font-size:17px;line-height:1.6;color:var(--muted);max-width:560px}
.hero-img{border:1px solid var(--line);overflow:hidden}
.hero-img .entry-image,.hero-img .placeholder-image{border:0}
.detail-features{margin:40px 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.detail-features h2{font-size:20px;margin:0}
.detail-features ul{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.detail-features li{font-size:13px;color:var(--muted);padding-left:18px;position:relative}
.detail-features li:before{content:'+';position:absolute;left:0;color:var(--accent)}
.article-body{max-width:720px;font-size:17px;line-height:1.75;margin:40px 0}
.article-body h2{font-size:24px;margin:36px 0 12px;letter-spacing:-.02em}
.article-body p{margin:0 0 18px}
.article-body a{color:var(--accent);text-decoration:underline}
.article-body ul{margin:0 0 18px;padding-left:20px}
@media(max-width:820px){.detail-hero{grid-template-columns:1fr}.detail-features ul{grid-template-columns:1fr}.intro-title{font-size:38px}}

/* --- Embedded play/tool area (in-browser games & tools, not in original CSS spec, additive) --- */
.embed-block{margin:36px 0;border:1px solid var(--line);background:var(--surface-1)}
.embed-block>.embed-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font:10px var(--font-mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.embed-block>.embed-body{padding:20px}
.snake-wrap,.mine-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.snake-wrap canvas{background:var(--surface);border:1px solid var(--line);max-width:100%}
.snake-hud,.mine-hud{display:flex;gap:18px;font:12px var(--font-mono);color:var(--muted)}
.mine-grid{display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.mine-cell{width:26px;height:26px;display:grid;place-items:center;background:var(--surface-2);font:11px var(--font-mono);cursor:pointer;user-select:none}
.mine-cell.revealed{background:var(--surface-1);cursor:default}
.mine-cell.mine{background:rgba(var(--accent-rgb),.35)}
.mine-cell.flag{color:var(--accent)}
.tool-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tool-row select,.tool-row input{background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:8px 10px;font:12px var(--font-mono);border-radius:var(--rad)}
.tool-textarea{width:100%;min-height:160px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:12px;font:12px var(--font-mono);border-radius:var(--rad);resize:vertical}
.tool-output{margin-top:12px;padding:12px;background:var(--surface-2);border:1px solid var(--line);font:12px var(--font-mono);white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto}
.tool-msg{margin-top:8px;font:11px var(--font-mono)}
.tool-msg.err{color:#ff6b6b}
.tool-msg.ok{color:#36c979}
.game-btn{background:var(--accent);color:var(--surface);border:0;padding:9px 16px;font:11px var(--font-mono);font-weight:700;border-radius:var(--rad);cursor:pointer}
.game-btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.g48-board{position:relative;width:100%;max-width:420px;background:var(--surface-2);padding:8px;border:1px solid var(--line);box-sizing:content-box}
.g48-cell{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font:bold 18px var(--font-mono);background:var(--surface-1);color:var(--text);border-radius:4px}
.g48-cell.v2{background:rgba(var(--accent-rgb),.15)}
.g48-cell.v4{background:rgba(var(--accent-rgb),.25)}
.g48-cell.v8{background:rgba(var(--accent-rgb),.35);color:#fff}
.g48-cell.v16{background:rgba(var(--accent-rgb),.45);color:#fff}
.g48-cell.v32{background:rgba(var(--accent-rgb),.6);color:#fff}
.g48-cell.v64{background:rgba(var(--accent-rgb),.75);color:#fff}
.g48-cell.v128,.g48-cell.v256,.g48-cell.v512,.g48-cell.v1024,.g48-cell.v2048{background:var(--accent);color:var(--surface)}

/* =====================================================================
   OVERHAUL LAYER — radius coverage, animations, toasts, fullscreen,
   mobile/tablet support, spacing fixes, richer game visuals.
   Rules here intentionally override earlier ones.
   ===================================================================== */

/* ---- Radius now applies to every interactive/panel element ---- */
.game-btn,.tool-row select,.tool-row input,.tool-textarea,.tool-output,
.cat-sort-select,.filters button,.setting-row>div button,.badge,.tag-row a,
.intro-quick a,.catalog-search,.search-large,.global-search,.intro-search,
.embed-block,.detail-meta,.hero-img,.mine-cell,.g48-board,.g48-cell,
.primary-action,.secondary-action,.detail-actions a,.detail-actions button,
.sb-item,.toast,.wd-cell,.collection-card,.empty-state{border-radius:var(--rad)}
.detail-meta{overflow:hidden}
.intro-search input:first-child{border-top-left-radius:var(--rad);border-bottom-left-radius:var(--rad)}
[data-radius="round"] .brand-mark{border-radius:calc(var(--rad) * .6)}
[data-radius="soft"] .brand-mark{border-radius:calc(var(--rad) * .6)}
[data-radius="round"] .icon-action,[data-radius="round"] .card-media .icon-action{border-radius:50%}
[data-radius="round"] .mine-cell{border-radius:6px}
[data-radius="soft"] .mine-cell{border-radius:4px}

/* ---- Motion: the Animations toggle now genuinely drives everything ---- */
[data-motion="on"] .data-card{transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
[data-motion="on"] .data-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
[data-motion="on"] .game-btn{transition:transform .12s ease,filter .15s ease,background .15s ease}
[data-motion="on"] .game-btn:hover{filter:brightness(1.12)}
[data-motion="on"] .game-btn:active{transform:scale(.96)}
[data-motion="on"] .nav-link,[data-motion="on"] .sb-item{transition:background .15s ease,color .15s ease,padding-left .15s ease}
[data-motion="on"] .sb-item:hover{padding-left:12px}
[data-motion="on"] .filters button{transition:background .15s ease,color .15s ease}
[data-motion="on"] .icon-action{transition:color .15s,border-color .15s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Effects toggle — glows/shadows */
[data-effects="off"] *{box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important}

/* ---- Fullscreen mode for embedded games/tools ---- */
.embed-block:fullscreen,.embed-block:-webkit-full-screen{background:var(--surface);padding:0;overflow:auto;display:flex;flex-direction:column}
.embed-block:fullscreen .embed-body{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.embed-head{gap:12px}
.embed-head .fs-btn{margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--muted);padding:4px 9px;font:10px var(--font-mono);cursor:pointer;border-radius:var(--rad);letter-spacing:.06em}
.embed-head .fs-btn:hover{color:var(--accent);border-color:var(--accent)}

/* ---- Spacing / layout fixes ---- */
.embed-block>.embed-body{padding:22px}
.tool-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tool-row:last-child{margin-bottom:0}
.snake-wrap,.mine-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.snake-hud,.mine-hud{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font:12px var(--font-mono);color:var(--muted);letter-spacing:.04em}
.g48-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.detail-actions{gap:10px;flex-wrap:wrap;align-items:center}
.detail-actions .icon-action{width:38px;height:38px}
.filters{padding:20px 14px 26px}
.filters label:first-child{margin-top:0}
.card-foot{flex-wrap:wrap}
.page-heading>b{position:static;display:block;margin-top:14px;font:10px var(--font-mono);color:var(--muted)}
.hs-head{gap:16px;flex-wrap:wrap}

/* ---- 2048: real tile colours + animations ---- */
.g48-board{position:relative;width:100%;max-width:420px;background:var(--surface-2);padding:8px;border:1px solid var(--line);box-sizing:content-box;aspect-ratio:1}
.g48-cell{display:flex;align-items:center;justify-content:center;font:800 22px ui-sans-serif,system-ui,sans-serif;background:var(--surface-1);color:var(--text);border-radius:4px}
.g48-cell.v2{background:#1a1040;color:#c4b5fd}
.g48-cell.v4{background:#0a2040;color:#93c5fd}
.g48-cell.v8{background:#0a3020;color:#6ee7a0;font-size:21px}
.g48-cell.v16{background:#2a1800;color:#fbbf24;font-size:21px}
.g48-cell.v32{background:#3a0a00;color:#fb923c;font-size:20px}
.g48-cell.v64{background:#3a0020;color:#f472b6;font-size:20px}
.g48-cell.v128{background:#001830;color:#22d3ee;font-size:18px;border:2px solid rgba(34,211,238,.5)}
.g48-cell.v256{background:#002800;color:#86efac;font-size:18px;border:2px solid rgba(134,239,172,.5)}
.g48-cell.v512{background:#280000;color:#fca5a5;font-size:18px;border:2px solid rgba(252,165,165,.5)}
.g48-cell.v1024{background:#201800;color:#fde68a;font-size:15px;border:2px solid rgba(253,230,138,.6);box-shadow:0 0 12px rgba(253,230,138,.2)}
.g48-cell.v2048{background:#100020;color:#e879f9;font-size:15px;border:2px solid #e879f9;box-shadow:0 0 22px rgba(232,121,249,.45)}
[data-theme="light"] .g48-cell.v2,[data-theme="system"] .g48-cell.v2,[data-theme="paper"] .g48-cell.v2,[data-theme="windows"] .g48-cell.v2,[data-theme="nordlight"] .g48-cell.v2{background:#ede9fe;color:#6d28d9}
[data-theme="light"] .g48-cell.v4,[data-theme="system"] .g48-cell.v4,[data-theme="paper"] .g48-cell.v4,[data-theme="windows"] .g48-cell.v4,[data-theme="nordlight"] .g48-cell.v4{background:#dbeafe;color:#1d4ed8}
[data-motion="on"] .g48-cell.vnew{animation:g48pop .18s cubic-bezier(.34,1.56,.64,1) both}
[data-motion="on"] .g48-cell.vmerge{animation:g48merge .2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes g48pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes g48merge{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---- Minesweeper: coloured numbers + animations ---- */
.mine-grid{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);padding:2px;user-select:none;-webkit-user-select:none;max-width:100%;overflow:auto}
.mine-cell{width:30px;height:30px;display:grid;place-items:center;background:var(--surface-2);font:700 14px var(--font-mono);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:1px solid transparent}
.mine-cell:hover:not(.revealed){background:var(--surface-1);border-color:rgba(var(--accent-rgb),.35)}
.mine-cell.revealed{background:var(--surface-1);cursor:default}
.mine-cell.mine{background:rgba(255,83,94,.25);border-color:rgba(255,83,94,.5)}
.mine-cell.flag{color:var(--accent)}
.mine-cell.n1{color:#60a5fa}.mine-cell.n2{color:#36c979}.mine-cell.n3{color:#ff6b74}
.mine-cell.n4{color:#a5b4fc}.mine-cell.n5{color:#fb923c}.mine-cell.n6{color:#22d3ee}
.mine-cell.n7{color:#e879f9}.mine-cell.n8{color:#cbd5e1}
[data-motion="on"] .mine-cell.revealed{animation:cellPop .2s cubic-bezier(.34,1.56,.64,1) both}
[data-motion="on"] .mine-cell.flag{animation:flagPop .22s cubic-bezier(.34,1.56,.64,1) both}
[data-motion="on"] .mine-grid.shake{animation:boardShake .4s ease}
[data-motion="on"] .mine-grid.win-glow{animation:winGlow .8s ease 2}
[data-motion="on"] .mine-cell:active:not(.revealed){transform:scale(.92)}
@keyframes cellPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
@keyframes flagPop{0%{transform:scale(.3) rotate(-16deg);opacity:0}55%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes boardShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(6px)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
@keyframes winGlow{0%,100%{box-shadow:0 0 0 0 rgba(54,201,121,0)}50%{box-shadow:0 0 26px 4px rgba(54,201,121,.35)}}
.result-banner{display:none;margin-top:4px;padding:14px 18px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--rad);font-size:14px;align-items:center;gap:14px;width:100%;max-width:480px}
.result-banner.show{display:flex}
.result-banner.win{border-color:rgba(54,201,121,.45);color:#36c979}
.result-banner.lose{border-color:rgba(255,83,94,.45);color:#ff6b74}
[data-motion="on"] .result-banner.show{animation:fadeIn .16s ease both}

/* ---- Wordle: green / orange tiles + flip animation ---- */
.wd-cell{width:52px;height:52px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font:800 22px ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;background:var(--surface-2);color:var(--text)}
.wd-cell.filled{border-color:rgba(var(--accent-rgb),.55)}
.wd-cell.correct{background:#16a34a;border-color:#16a34a;color:#fff}
.wd-cell.present{background:#d97706;border-color:#d97706;color:#fff}
.wd-cell.absent{background:#3f4451;border-color:#4b5563;color:#9aa3af}
[data-theme="light"] .wd-cell.absent,[data-theme="system"] .wd-cell.absent,[data-theme="paper"] .wd-cell.absent,[data-theme="windows"] .wd-cell.absent,[data-theme="nordlight"] .wd-cell.absent{background:#9ca3af;border-color:#9ca3af;color:#f3f4f6}
[data-motion="on"] .wd-cell.reveal{animation:wdFlip .5s ease both}
[data-motion="on"] .wd-cell.typed{animation:wdBounce .12s ease}
[data-motion="on"] .wd-row.shake{animation:boardShake .4s ease}
[data-motion="on"] .wd-cell.win{animation:wdWin .55s ease both}
@keyframes wdFlip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes wdBounce{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes wdWin{0%,100%{transform:translateY(0)}35%{transform:translateY(-12px)}65%{transform:translateY(-5px)}}
.wd-key{min-width:34px;height:44px;padding:0 8px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font:700 13px ui-sans-serif,system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--rad)}
.wd-key.correct{background:#16a34a;border-color:#16a34a;color:#fff}
.wd-key.present{background:#d97706;border-color:#d97706;color:#fff}
.wd-key.absent{background:var(--surface-1);border-color:var(--line);color:var(--muted);opacity:.55}
.wd-key.wide{min-width:60px;font-size:11px}
[data-motion="on"] .wd-key:active{transform:scale(.94)}

/* ---- Generic game/tool control polish ---- */
.game-btn{background:var(--accent);color:var(--surface);border:0;padding:9px 16px;font:700 11px var(--font-mono);border-radius:var(--rad);cursor:pointer;letter-spacing:.04em}
.game-btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.game-btn:disabled{opacity:.45;cursor:default}
.tool-row select,.tool-row input[type=text],.tool-row input[type=number]{background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:8px 10px;font:12px var(--font-mono);border-radius:var(--rad)}
.tool-row label{display:inline-flex;align-items:center;gap:6px;font:11px var(--font-mono);color:var(--muted)}
.opt-panel{width:100%;max-width:520px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px}
.opt-panel-title{font:10px var(--font-mono);letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.opt-grid{grid-template-columns:1fr}}

/* ---- Mobile & tablet support ---- */
@media(max-width:1024px){
  .split-view{grid-template-columns:190px 1fr}
  .detail{padding:clamp(24px,5vw,56px)}
}
@media(max-width:900px){
  .split-view{display:block}
  .filters{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 14px;align-items:start}
  .filters label{display:block;grid-column:1/-1;margin:10px 2px 4px}
  .filters button{width:auto}
  .tag-filter-wrap{grid-column:1/-1}
}
@media(max-width:720px){
  .sidebar{width:260px}
  .filters{display:block;overflow:visible}
  .filters label{display:block}
  .filters button{width:100%}
  .tag-filter-wrap button{width:auto}
  .g48-board{max-width:340px}
  .wd-cell{width:44px;height:44px;font-size:18px}
  .wd-key{min-width:28px;height:40px;padding:0 4px;font-size:12px}
  .mine-cell{width:32px;height:32px;font-size:14px}
  .embed-block>.embed-body{padding:14px}
  .detail-hero{gap:24px}
  .snake-hud,.mine-hud{gap:12px;font-size:11px}
}
@media(max-width:420px){
  .g48-board{max-width:280px}
  .wd-cell{width:38px;height:38px;font-size:15px}
  .mine-cell{width:28px;height:28px;font-size:12px}
}
/* Touch devices: bigger tap targets, no hover-only affordances */
@media(pointer:coarse){
  .mine-cell{width:36px;height:36px;font-size:15px}
  .game-btn{padding:11px 18px}
  .nav-link{padding:13px 10px}
  .icon-action{width:38px;height:38px}
  .filters button{padding:11px 9px}
  .sb-item{padding:10px 8px}
}
@media(pointer:coarse) and (max-width:600px){ .mine-cell{width:30px;height:30px;font-size:13px} }
canvas{max-width:100%;height:auto;touch-action:manipulation}

/* ---- Home page: about section ---- */
.about-block{padding:clamp(36px,5vw,54px) clamp(20px,4vw,48px);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:22px}
.about-item h3{font-size:15px;margin:0 0 7px;display:flex;align-items:center;gap:8px}
.about-item h3 svg{color:var(--accent)}
.about-item p{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
.about-lead{font-size:16px;line-height:1.7;color:var(--muted);max-width:720px;margin:10px 0 0}
.about-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.about-stats div{display:flex;flex-direction:column;gap:3px}
.about-stats b{font:700 22px var(--font-mono);color:var(--accent)}
.about-stats span{font:9px var(--font-mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* theme swatch check mark slot */
.theme-grid button .theme-check{margin-left:auto;display:flex;z-index:1}
.theme-grid button span:not(.theme-check){z-index:1;font-size:11px}
/* Programmatic scroll restores must be instant, not smooth-animated */
html{scroll-behavior:auto}
@media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
[data-motion="off"] html{scroll-behavior:auto}

/* =====================================================================
   ROUND 3 — icon sizing, minesweeper contrast, custom theme builder,
   nav pinning, compact image-free cards, template-driven modularity.
   ===================================================================== */

/* ---- Bookmark / icon-action sizing (was too small in real use) ---- */
.icon-action{width:36px;height:36px}
.card-top .icon-action{width:32px;height:32px}
.detail-actions .icon-action{width:46px;height:46px}
[data-radius="round"] .icon-action{border-radius:50%}

/* ---- Minesweeper: a clear but moderate shade difference between hidden
   and revealed cells, computed relative to the theme so it works the same
   way in every theme (not just light/dark overrides). ---- */
.mine-cell{background:color-mix(in srgb, var(--surface) 78%, var(--text) 22%);border:1px solid var(--line)}
.mine-cell:hover:not(.revealed):not(.flag){background:color-mix(in srgb, var(--surface) 68%, var(--text) 32%);border-color:var(--accent)}
.mine-cell.revealed{background:var(--surface);border-color:var(--line)}

/* ---- Compact image-free cards (image lives on detail pages only) ---- */
.data-card{position:relative}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.card-top .icon-action.saved{color:var(--accent);border-color:var(--accent)}
.card-kind-icon{color:var(--accent);opacity:.85;display:flex}

/* ---- Detail-page image: always fits regardless of source aspect ratio ---- */
.hero-img{background:var(--surface-2)}
.hero-img .entry-image{width:100%;height:100%;aspect-ratio:16/10;object-fit:contain;background:var(--surface-2);padding:10px}
.hero-img .placeholder-image{aspect-ratio:16/10}

/* ---- Nav pinning: top-right quick-access bar with overflow ---- */
.nav-pins{display:flex;align-items:center;gap:6px;margin-left:8px;flex-shrink:0}
.nav-pin-link{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--rad);color:var(--muted);font-size:12px;white-space:nowrap;background:var(--surface-1)}
.nav-pin-link:hover,.nav-pin-link.active{color:var(--text);border-color:var(--accent)}
.nav-pin-more{position:relative}
.nav-pin-more-btn{border:1px solid var(--line);background:var(--surface-1);color:var(--muted);width:34px;height:34px;border-radius:var(--rad);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nav-pin-more-btn:hover{color:var(--text);border-color:var(--accent)}
.nav-pin-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface-1);border:1px solid var(--line);min-width:180px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:60;display:none;border-radius:var(--rad);overflow:hidden}
.nav-pin-dropdown.open{display:block}
.nav-pin-dropdown a{display:block;padding:10px 14px;font-size:13px;color:var(--text)}
.nav-pin-dropdown a:hover{background:var(--surface-2)}
@media(max-width:900px){.nav-pins{display:none}}

/* ---- Custom theme builder ---- */
.custom-theme-panel{grid-column:1/-1;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.custom-theme-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.custom-theme-field{display:flex;flex-direction:column;gap:6px}
.custom-theme-field label{font:10px var(--font-mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.custom-theme-field input[type=color]{width:52px;height:36px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;padding:2px;border-radius:var(--rad)}
.custom-theme-preview{flex:1;min-width:160px;height:60px;border:1px solid var(--line);border-radius:var(--rad);display:flex;align-items:center;justify-content:center;font:700 12px ui-sans-serif,system-ui,sans-serif}

/* ---- Player chips for minesweeper co-op ---- */
.player-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);padding:6px 11px;font:11px var(--font-mono);border-radius:var(--rad)}
.player-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.room-code-display{font:800 26px var(--font-mono);letter-spacing:6px;color:var(--accent);text-align:center;padding:16px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;user-select:all;border-radius:var(--rad)}

/* File inputs render at a native intrinsic width that ignores max-width by
   default in most browsers — this was overflowing the layout on mobile for
   every tool that lets you upload an image (colour picker, resizer, etc).
   Some of these inputs carry the .tool-row class directly on themselves
   rather than on a wrapper, so match both cases. */
input[type=file]{width:100%;max-width:100%;box-sizing:border-box;display:block}
.tool-row input[type=file]{width:100%;max-width:100%;box-sizing:border-box}
@media(max-width:480px){ input[type=file]{font-size:11px} }


/* =====================================================================
   REDESIGN LAYER — typography, surfaces, bento home grid, states.
   Additive: sits on top of the rules above, no markup contracts changed.
   ===================================================================== */

/* ---- Type: Geist for UI, Geist Mono for labels. Headlines get weight + tight tracking ---- */
body{font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
h1,h2,h3{text-wrap:balance;font-weight:600}
p,li{text-wrap:pretty}
.hero p,.detail-hero p,.page-heading p,.intro .tagline,.about-lead,.article-body{max-width:65ch}
.card-body h3{font-weight:600;letter-spacing:-.015em}
.section-title h2,.hs-head h2{font-weight:600}
.stat-strip b,.about-stats b,.filters i,.page-heading>b,.result-group>div>span,.collection-card>span,.collection-card small{font-variant-numeric:tabular-nums}
html{scroll-padding-top:76px}

/* eyebrow / label strings are written in capitals in the markup; render them quietly instead */
.section-code,.section-title>span,.page-heading>span,.hs-head>div>span,.hs-head a,.card-cat,.rail-meta,.sb-head,.sb-group-label,
.filters label,.detail-meta span,.back-link,.breadcrumb,.workspace>footer,.about-stats span,.stat-strip span,.badge,.status-dot,.ph-brand{text-transform:lowercase;letter-spacing:.04em}
.section-code,.section-title>span,.page-heading>span,.hs-head>div>span{letter-spacing:.06em}
.workspace>footer{letter-spacing:.04em}
.type-code{display:inline-flex;align-items:center;gap:7px;letter-spacing:.02em;font-size:11px}
.type-code:before{content:'';width:5px;height:5px;background:var(--accent);flex:none}

/* ---- Surface: grain, ambient light, tinted shadows ---- */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
[data-effects="off"] body::after{display:none}
main{max-width:1440px;margin-inline:auto;border-inline:1px solid var(--line)}
.intro{position:relative;isolation:isolate;overflow:hidden;padding-bottom:calc(clamp(56px,9vw,104px) * var(--space))}
.intro:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 90% at 88% 0%,rgba(var(--accent-rgb),.16),transparent 70%),
             linear-gradient(var(--line) 1px,transparent 1px) 0 0/52px 52px,
             linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 75% 100% at 85% 0%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 75% 100% at 85% 0%,#000 0%,transparent 72%)}
.intro-title{font-size:clamp(46px,8vw,104px);font-weight:600;line-height:.92;letter-spacing:-.06em;max-width:9ch}
.intro .tagline{font-size:clamp(16px,1.6vw,19px);max-width:44ch}
.placeholder-image{background-image:radial-gradient(circle at 50% 120%,rgba(var(--accent-rgb),.16),transparent 60%),linear-gradient(rgba(var(--accent-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.05) 1px,transparent 1px);background-size:auto,22px 22px,22px 22px}
.hs-head,.section-title{margin-bottom:30px}
.home-section,.about-block{padding-bottom:calc(clamp(48px,7vw,76px) * var(--space))}

/* ---- Layout: break the equal-columns grid ---- */
.card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.home-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.home-grid>.data-card:nth-child(4n+1),.home-grid>.data-card:nth-child(4n+4){grid-column:span 4}
.home-grid>.data-card:nth-child(4n+2),.home-grid>.data-card:nth-child(4n+3){grid-column:span 2}
.home-grid>.data-card:nth-child(4n+1) h3,.home-grid>.data-card:nth-child(4n+4) h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.home-grid>.data-card:nth-child(4n+1) p,.home-grid>.data-card:nth-child(4n+4) p{font-size:14px;-webkit-line-clamp:3;max-width:52ch}
.home-grid>.data-card:nth-child(4n+1) .card-body,.home-grid>.data-card:nth-child(4n+4) .card-body{padding:22px 22px 18px}
.home-grid>.data-card:nth-child(4n+4){background:linear-gradient(120deg,var(--surface-1),var(--surface))}
.about-grid{grid-template-columns:1.3fr 1fr 1fr;gap:0}
.about-item{padding:4px 28px 4px 0}
.about-item:nth-child(n+2){padding-left:24px;border-left:1px solid var(--line)}
.about-item:nth-child(4){grid-column:1/-1;border-left:0;padding:22px 0 0;margin-top:22px;border-top:1px solid var(--line);padding-left:0}
.page-heading{padding-bottom:calc(46px * var(--space))}
.page-heading h1{font-weight:600;letter-spacing:-.055em;line-height:.98}
.detail h1,.detail-hero h1{font-weight:600;line-height:1}
.badge,.tag-row a,.tag-filter-wrap button,.intro-quick a{border-radius:calc(var(--rad) * .5)}
.collection-card{padding:26px 14px 28px}

/* ---- Interaction: hover, press, spotlight, focus ---- */
.primary-action,.secondary-action,.detail-actions a,.detail-actions button,.intro-search button,.game-btn,.intro-quick a,.tag-row a,.back-link,.nav-link,.icon-action,.filters button,.tag-filter-wrap button,.collection-card{transition:background-color .2s ease,border-color .2s ease,color .2s ease,filter .2s ease,transform .12s ease}
.primary-action:hover,.intro-search button:hover,.game-btn:not(.secondary):hover{filter:brightness(1.1)}
.secondary-action:hover,.detail-actions a:hover,.detail-actions button:hover,.game-btn.secondary:hover{background:var(--surface-2);border-color:rgba(var(--accent-rgb),.55)}
.primary-action:active,.secondary-action:active,.detail-actions a:active,.detail-actions button:active,.intro-search button:active,.game-btn:active,.intro-quick a:active{transform:scale(.97) translateY(1px)}
.tag-row a:hover{color:var(--text);background:rgba(var(--accent-rgb),.14)}
.back-link:hover{color:var(--text)}
.collection-card:hover{background:var(--surface-1)}
.collection-card:hover>svg{transform:translateX(4px)}
.collection-card>svg{transition:transform .2s ease;color:var(--muted)}
.filters button:hover{background:var(--surface-1);color:var(--text)}
.tag-filter-wrap button:hover{border-color:rgba(var(--accent-rgb),.5);color:var(--text)}
[data-motion="on"] .data-card:hover{transform:none;box-shadow:none}
.card-stretched-link:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.global-search:focus-within,.intro-search:focus-within,.catalog-search:focus-within,.search-large:focus-within{border-color:rgba(var(--accent-rgb),.6);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.nav-link.active{color:var(--text)}
.nav-link[aria-current="page"]:before{content:'';width:2px;height:16px;background:var(--accent);margin-left:-11px}
.nav-link.active:before{margin-left:-11px}

/* ---- Icons: one stroke weight everywhere ---- */
svg[aria-hidden="true"]{stroke-width:1.75}

/* ---- Skip link ---- */
.skip-link{position:fixed;left:12px;top:-60px;z-index:var(--z-skip);background:var(--accent);color:var(--surface);padding:10px 14px;font:600 12px var(--font-ui);border-radius:var(--rad);transition:top .15s ease}
.skip-link:focus{top:12px}
main:focus{outline:none}

/* ---- Empty and not-found states ---- */
.empty-state{margin:32px clamp(20px,4vw,48px);padding:56px 28px;border:1px dashed var(--line);text-align:left;max-width:640px;font-size:14px;line-height:1.6}
.nf{padding:clamp(56px,12vw,120px) clamp(24px,6vw,72px);max-width:760px}
.nf-code{font:600 clamp(72px,16vw,168px)/.9 var(--font-mono);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--accent);margin:0 0 18px}
.nf h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.04em;margin:0 0 10px}
.nf p{color:var(--muted);margin:0 0 24px;max-width:48ch}
.nf p b{color:var(--text);font-weight:500;font-family:var(--font-mono);font-size:.92em;word-break:break-all}
.nf-links{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Responsive ---- */
@media(max-width:980px){
  .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-grid>.data-card:nth-child(n){grid-column:auto}
  .home-grid>.data-card:nth-child(4n+1){grid-column:1/-1}
  .about-grid{grid-template-columns:1fr 1fr}
  .about-item:nth-child(n){padding:0 18px 0 0;border-left:0}
  .about-item:nth-child(4){grid-column:auto;margin:0;border-top:0;padding:0}
}
@media(max-width:720px){
  .home-grid{grid-template-columns:1fr}
  .home-grid>.data-card:nth-child(n){grid-column:auto}
  .about-grid{grid-template-columns:1fr;gap:22px}
  main{border-inline:0}
  .intro-title{max-width:none}
}


/* =====================================================================
   V2 LAYER — scrollbars, notifications, sectioned catalogue, history,
   saved-data panel, and styles for the newer tools.
   ===================================================================== */
[hidden]{display:none!important}

/* ---- Scrollbars: slim, theme-aware, accent on hover ---- */
:root{--scroll-thumb:color-mix(in srgb,var(--text) 24%,transparent);--scroll-thumb-hover:rgba(var(--accent-rgb),.7)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:3px solid transparent;background-clip:padding-box;border-radius:min(var(--rad),8px)}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--accent);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
@supports (-moz-appearance:none){*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}}
.section-nav,.sidebar-bookmarks{scrollbar-width:thin}
.section-nav::-webkit-scrollbar{height:0}

/* ---- Notifications ---- */
#toast-root{position:fixed;right:20px;bottom:20px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.toast{--tc:var(--accent);position:relative;pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:start;column-gap:10px;padding:11px 6px 14px 14px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--rad);box-shadow:0 10px 28px -14px rgba(0,0,0,.6);overflow:hidden;color:var(--text)}
.toast:before{content:'';position:absolute;inset:0 auto 0 0;width:2px;background:var(--tc)}
.toast.ok{--tc:#36c979}.toast.warn{--tc:#e9a93a}.toast.err{--tc:#ff535e}
.toast .t-icon{color:var(--tc);display:flex;margin-top:1px}
.toast .t-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.toast .t-label{font:9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tc)}
.toast .t-msg{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.toast .t-count{display:none;align-self:center;font:10px var(--font-mono);color:var(--muted)}
.toast.has-count .t-count{display:block}
.toast .t-action{align-self:center;background:none;border:1px solid var(--line);color:var(--text);font:600 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--rad);cursor:pointer}
.toast .t-action:hover{border-color:var(--tc);color:var(--tc)}
.toast .t-close{width:24px;height:24px;display:grid;place-items:center;border:0;background:none;color:var(--muted);border-radius:var(--rad);cursor:pointer;align-self:start}
.toast .t-close:hover{color:var(--text);background:var(--surface-2)}
.toast .t-timer{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tc);opacity:.5;transform-origin:left center}
[data-motion="on"] .toast{animation:toastIn .16s ease-out both}
.toast.leaving{opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:720px){#toast-root{left:16px;right:16px;bottom:16px;width:auto}}

/* ---- Command-bar hint ---- */
.global-search .key{border:1px solid var(--line);border-radius:3px;padding:1px 5px}

/* ---- Games / Tools: sections instead of one long tag-filtered list ---- */
.section-nav{position:sticky;top:64px;z-index:calc(var(--z-bar) - 1);display:flex;gap:6px;overflow-x:auto;padding:10px clamp(16px,3vw,32px);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sec-chip{flex:none;display:inline-flex;gap:8px;align-items:center;padding:6px 11px;border:1px solid var(--line);border-radius:var(--rad);font-size:12px;color:var(--muted);background:var(--surface-1);white-space:nowrap}
.sec-chip i{font:10px var(--font-mono);font-style:normal;color:var(--accent)}
.sec-chip:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.55)}
.cat-section{scroll-margin-top:124px}
.cat-head{border-bottom:1px solid var(--line)}
.cat-head.static{display:flex;align-items:baseline;gap:14px;padding:22px clamp(16px,3vw,32px) 14px}
.cat-toggle{width:100%;display:flex;align-items:baseline;gap:14px;text-align:left;background:none;border:0;padding:22px clamp(16px,3vw,32px) 14px;cursor:pointer;color:inherit}
.cat-toggle:hover .cat-title{color:var(--accent)}
.cat-title{font-size:20px;font-weight:600;letter-spacing:-.02em;transition:color .15s}
.cat-count{font:10px var(--font-mono);color:var(--accent);letter-spacing:.1em}
.cat-blurb{flex:1;min-width:0;color:var(--muted);font-size:13px}
.cat-chevron{margin-left:auto;align-self:center;color:var(--muted);display:flex;transition:transform .15s ease}
.cat-section.is-collapsed .cat-chevron{transform:rotate(-90deg)}
.cat-section .card-grid{border-top:0}
@media(max-width:720px){.cat-blurb{display:none}.section-nav{top:64px}}

/* ---- Recent searches ---- */
.recent-searches{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.recent-searches>span{font:9px var(--font-mono);letter-spacing:.12em;color:var(--muted);margin-right:4px}
.recent-chip,.recent-clear{background:var(--surface-1);border:1px solid var(--line);color:var(--muted);font:11px var(--font-mono);padding:5px 9px;border-radius:var(--rad);cursor:pointer}
.recent-chip:hover,.recent-clear:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.55)}
.recent-clear{border-style:dashed}

/* ---- Saved data panel (Settings) ---- */
.settings-data{padding:32px;border-top:1px solid var(--line);max-width:920px}
.data-rows{border:1px solid var(--line);border-radius:var(--rad);background:var(--surface-1)}
.data-row{display:grid;grid-template-columns:1fr auto 90px;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.data-row:last-child{border-bottom:0}
.data-row span:nth-child(2){color:var(--muted);font:11px var(--font-mono);align-self:center}
.data-row b{font:11px var(--font-mono);text-align:right;align-self:center}
.data-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.data-actions .game-btn{display:inline-flex;align-items:center;gap:7px}
label.game-btn{cursor:pointer}
.game-btn.danger{background:#c4343f;color:#fff}

/* ---- Saved history inside tools ---- */
.hist-panel{margin-top:22px;border:1px solid var(--line);border-radius:var(--rad);background:var(--surface)}
.hist-head{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);font:10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hist-head i{font-style:normal;color:var(--accent);margin-left:6px}
.hist-clear{background:none;border:1px solid var(--line);color:var(--muted);font:10px var(--font-mono);letter-spacing:.08em;padding:3px 8px;border-radius:var(--rad);cursor:pointer;text-transform:uppercase}
.hist-clear:hover{color:var(--text);border-color:var(--accent)}
.hist-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.hist-list li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.hist-list li:last-child{border-bottom:0}
.hist-item{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:9px 14px;text-align:left;background:none;border:0;color:inherit}
button.hist-item{cursor:pointer}
button.hist-item:hover{background:var(--surface-1)}
.hist-main{font:12px var(--font-mono);overflow-wrap:anywhere}
.hist-sub{font:11px var(--font-mono);color:var(--muted);overflow-wrap:anywhere}
.hist-list time{font:10px var(--font-mono);color:var(--muted);padding-right:14px;white-space:nowrap}
.hist-empty{padding:14px;font-size:12px;color:var(--muted)}

/* ---- Shared building blocks for tools ---- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.tool-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.tool-grid.two{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field-label{font:9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-width:0;background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:9px 10px;font:13px var(--font-mono);border-radius:var(--rad)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.tool-textarea:focus{outline:none;border-color:var(--accent)}
.result-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--rad);padding:16px 18px;margin-bottom:14px}
.result-big{font:600 clamp(26px,5vw,42px)/1.15 var(--font-mono);letter-spacing:-.02em;overflow-wrap:anywhere}
.result-sub{font:12px var(--font-mono);color:var(--muted);margin-top:6px;overflow-wrap:anywhere}
.result-card .tool-row{margin:12px 0 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font:12px var(--font-mono);margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
.steps{margin:10px 0 0;padding-left:18px;font:12px/1.8 var(--font-mono);color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;flex-wrap:wrap}
.seg button{background:var(--surface-2);border:0;border-right:1px solid var(--line);padding:8px 12px;font:11px var(--font-mono);cursor:pointer;color:var(--muted)}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--accent);color:var(--surface)}
.hint{font:11px var(--font-mono);color:var(--muted);margin:0 0 12px}
.err-text{color:#ff7b84;font:12px var(--font-mono);min-height:1.4em}
.mono-out{font:12px/1.6 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}

/* fraction calculator */
.frac-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.frac-in{display:flex;align-items:center;gap:8px}
.frac-in input{background:var(--surface-2);border:1px solid var(--line);color:var(--text);font:600 18px var(--font-mono);text-align:center;padding:8px 4px;border-radius:var(--rad);width:64px}
.frac-in input:focus{outline:none;border-color:var(--accent)}
.frac-in .whole{width:58px}
.frac-stack{display:flex;flex-direction:column;align-items:center;gap:5px}
.frac-stack hr{width:100%;border:0;border-top:2px solid var(--text);margin:0}
.frac-op{font:600 22px var(--font-mono);background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:var(--rad);padding:8px 10px;cursor:pointer}
.frac-ops{display:flex;gap:6px}
.frac-ops button{width:42px;height:42px;font:600 20px var(--font-mono);background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:var(--rad);cursor:pointer}
.frac-ops button.on{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.frac-eq{font:600 22px var(--font-mono);color:var(--muted)}

/* markdown preview */
.md-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.md-split{grid-template-columns:1fr}}
.md-out{border:1px solid var(--line);background:var(--surface);border-radius:var(--rad);padding:14px 18px;min-height:280px;overflow:auto;font-size:14px;line-height:1.65}
.md-out h1,.md-out h2,.md-out h3{letter-spacing:-.02em;margin:1.1em 0 .4em;line-height:1.2}
.md-out h1{font-size:26px}.md-out h2{font-size:20px}.md-out h3{font-size:16px}
.md-out>:first-child{margin-top:0}
.md-out code{font:12px var(--font-mono);background:var(--surface-2);padding:1px 5px;border-radius:3px}
.md-out pre{background:var(--surface-2);border:1px solid var(--line);padding:10px 12px;overflow:auto;border-radius:var(--rad)}
.md-out pre code{background:none;padding:0}
.md-out blockquote{margin:.8em 0;padding:2px 14px;border-left:2px solid var(--accent);color:var(--muted)}
.md-out a{color:var(--accent);text-decoration:underline}
.md-out hr{border:0;border-top:1px solid var(--line);margin:1.2em 0}
.md-out ul,.md-out ol{padding-left:22px}

/* regex tester */
.rx-out{border:1px solid var(--line);background:var(--surface);border-radius:var(--rad);padding:12px;font:13px/1.7 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;min-height:90px}
.rx-hit{background:rgba(var(--accent-rgb),.32);border-radius:2px;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5)}

/* contrast checker */
.contrast-preview{border:1px solid var(--line);border-radius:var(--rad);padding:22px;margin-bottom:14px}
.contrast-preview b{display:block;font-size:24px;margin-bottom:4px}
.badge-row{display:flex;gap:8px;flex-wrap:wrap}
.pass,.fail{font:600 10px var(--font-mono);letter-spacing:.06em;padding:4px 8px;border-radius:var(--rad);border:1px solid}
.pass{color:#36c979;border-color:#36c979}.fail{color:#ff7b84;border-color:#ff7b84}
input[type=color].big{width:100%;height:42px;padding:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--rad)}

/* countdown + dice */
.cd-display{font:600 clamp(40px,9vw,84px)/1 var(--font-mono);letter-spacing:-.03em;text-align:center;padding:20px 0}
.cd-display.done{color:var(--accent)}
.dice-row{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 14px}
.die{min-width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--rad);font:600 20px var(--font-mono);padding:0 8px}
.coin{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--accent);font:600 13px var(--font-mono);color:var(--accent);margin:6px 0 14px;letter-spacing:.08em}

/* snake canvas */
.snake-wrap canvas{touch-action:none;width:min(400px,100%);height:auto;aspect-ratio:1}

/* =====================================================================
   SNAPPY — nothing fades, slides or pops in. Pages, cards, notifications,
   banners and game tiles appear instantly. (The 2048 tile slide and the
   short board shake on a lost Minesweeper/Wordle row are the only motion
   left, because they carry information.)
   ===================================================================== */
body,.data-card,.nav-link,.sb-item,.game-btn,.filters button,.icon-action,.cat-title,.cat-chevron,.collection-card>svg,.sidebar,.switch i,.skip-link,
.primary-action,.secondary-action,.detail-actions a,.detail-actions button,.intro-search button,.intro-quick a,.tag-row a,.back-link,.tag-filter-wrap button{transition:none!important}
.result-banner.show,.toast,.g48-cell.vnew,.g48-cell.vmerge,.mine-cell.revealed,.mine-cell.flag,.mine-grid.win-glow,.wd-cell.reveal,.wd-cell.typed,.wd-cell.win{animation:none!important}
@media(prefers-reduced-motion:no-preference){[data-motion="on"] .toast{animation:none}}

/* =====================================================================
   NEW TOOLS — game deals, file converter, to-do list, shared rows
   ===================================================================== */
.gd-h{font:600 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.gd-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 14px}
.gd-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--rad);background:var(--surface);margin:8px 0 12px}
.gd-deal,.fv-row,.td-row{display:grid;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.gd-list>:last-child{border-bottom:0}
.gd-deal{grid-template-columns:72px minmax(0,1fr) auto auto 52px}
.gd-deal:hover{background:var(--surface-1)}
.gd-thumb{width:72px;height:34px;object-fit:cover;background:var(--surface-2);border-radius:2px}
.gd-main{min-width:0}
.gd-title{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-sub{font:11px var(--font-mono);color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.gd-was{font:12px var(--font-mono);color:var(--muted);text-decoration:line-through;text-align:right}
.gd-now{font:600 15px var(--font-mono);text-align:right;min-width:72px}
.gd-now.free{color:#36c979}
.gd-off{font:600 11px var(--font-mono);color:var(--accent);text-align:right}
.gd-stats{display:flex;gap:22px;flex-wrap:wrap;margin:6px 0 4px;font:12px var(--font-mono);color:var(--muted)}
.gd-stats b{color:var(--text);font-size:15px;margin-right:4px}
.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:8px 0}
.gd-card{border:1px solid var(--line);border-radius:var(--rad);background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
.gd-card.claimed{opacity:.55}
.gd-cimg{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2)}
.gd-cbody{padding:12px;display:flex;flex-direction:column;gap:4px}
.gd-card .gd-title{white-space:normal}
.gd-badges{display:flex;gap:8px;align-items:center}
.gd-end{font:10px var(--font-mono);color:#e9a93a;letter-spacing:.06em;text-transform:uppercase}
.gd-worth{font:12px var(--font-mono);color:#36c979}
.gd-worth s{color:var(--muted)}
@media(max-width:640px){.gd-deal{grid-template-columns:56px minmax(0,1fr) auto}.gd-was,.gd-off{display:none}.gd-thumb{width:56px}}

.fv-drop{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;padding:28px 16px;margin:0 0 14px;border:1px dashed var(--line);border-radius:var(--rad);background:var(--surface-1);cursor:pointer;text-align:center;font-size:14px}
.fv-drop:hover,.fv-drop.over{border-color:var(--accent);background:var(--surface-2)}
.fv-drop span{font:11px var(--font-mono);color:var(--muted)}
.fv-row{grid-template-columns:minmax(0,1fr) auto auto}
.fv-row b{color:var(--text)}
.td-row{grid-template-columns:minmax(0,1fr) auto}
.td-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;margin:0}
.td-row.done .td-check span{text-decoration:line-through;color:var(--muted)}

/* Tool and game pages: compact header, the tool itself comes straight after it */
.detail-hero.compact{grid-template-columns:1fr;gap:0;margin-bottom:20px}
.detail-hero.compact h1{font-size:clamp(30px,5vw,44px)}
.detail-hero.compact p{max-width:760px}
#embed-slot{margin-bottom:28px}