/* Community Hub site styles (docs/plans/2026-09-22-community-hub.md, "Website"). Parchment tokens from infra/landing/blog/proposals/index.html, extended with AA-safe link, star, focus and bad colours. Light/dark follows prefers-color-scheme; (rendered by the server from the hub_theme cookie) forces one. CSP forbids inline styles: every dynamic width uses a .w-N class, every per-theme colour comes from /preview.css. */ @font-face{font-family:"Cinzel";src:url("/static/fonts/cinzel-latin.woff2") format("woff2"); font-weight:400 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2122} @font-face{font-family:"Grenze Gotisch";src:url("/static/fonts/grenze-gotisch-latin.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2122} /* ---------- tokens ---------- */ :root{ color-scheme:light dark; --ground:#efeae0; --panel:#f7f4ec; --panel-2:#ebe4d4; --ink:#2b241c; --ink-soft:#5c5244; --line:#d8cfbe; --accent:#8a6d33; --accent-soft:#c9a55a33; --accent-strong:#6f5626; --code-bg:#e9e2d2; --good:#4d7a3a; --link:#6f5626; --warn-ink:#7a5a12; --bad:#a33d2e; --star:#b0801f; --star-off:#cfc4ae; --focus:#6f5626; --btn-ink:#fbf6ea; --hero-ink:#eadfc4; --hero-sub:#cfc3a6; --shade:#1b150f; --gw-bg:#15110d; --gw-ink:#d9cdb4; --gw-line:#4a3d2a; --gw-gold:#c9a55a; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --radius:6px; --wrap:1100px; --measure:72ch; --shadow:0 1px 2px #0001, 0 6px 20px #0002; --f-body:Georgia,"Times New Roman",serif; --f-head:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; --f-brand:"Cinzel","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; --f-mono:Consolas,"Cascadia Mono","SFMono-Regular",Menlo,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ground:#181310; --panel:#221b13; --panel-2:#2a2218; --ink:#ddd5c6; --ink-soft:#a1978a; --line:#3a3226; --accent:#c9a55a; --accent-soft:#c9a55a22; --accent-strong:#dcc084; --code-bg:#2c241a; --good:#7fb36a; --link:#c9a55a; --warn-ink:#d9b25a; --bad:#e0735f; --star:#e0b53c; --star-off:#4a4032; --focus:#dcc084; --btn-ink:#1b150f; --shadow:0 1px 2px #0006, 0 6px 20px #0008; } } :root[data-theme="dark"]{ color-scheme:dark; --ground:#181310; --panel:#221b13; --panel-2:#2a2218; --ink:#ddd5c6; --ink-soft:#a1978a; --line:#3a3226; --accent:#c9a55a; --accent-soft:#c9a55a22; --accent-strong:#dcc084; --code-bg:#2c241a; --good:#7fb36a; --link:#c9a55a; --warn-ink:#d9b25a; --bad:#e0735f; --star:#e0b53c; --star-off:#4a4032; --focus:#dcc084; --btn-ink:#1b150f; --shadow:0 1px 2px #0006, 0 6px 20px #0008; } :root[data-theme="light"]{ color-scheme:light; --ground:#efeae0; --panel:#f7f4ec; --panel-2:#ebe4d4; --ink:#2b241c; --ink-soft:#5c5244; --line:#d8cfbe; --accent:#8a6d33; --accent-soft:#c9a55a33; --accent-strong:#6f5626; --code-bg:#e9e2d2; --good:#4d7a3a; --link:#6f5626; --warn-ink:#7a5a12; --bad:#a33d2e; --star:#b0801f; --star-off:#cfc4ae; --focus:#6f5626; --btn-ink:#fbf6ea; --shadow:0 1px 2px #0001, 0 6px 20px #0002; } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:1rem; line-height:1.6;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column} main{flex:1 0 auto} img,svg{max-width:100%} h1,h2,h3,h4{font-family:var(--f-head);line-height:1.2;text-wrap:balance;color:var(--ink);font-weight:400} h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.6rem);margin:.2em 0 .3em} h2{font-size:1.7rem;margin:1.8em 0 .5em;border-bottom:1px solid var(--line);padding-bottom:.3em} h3{font-size:1.25rem;margin:1.4em 0 .5em} h4{font-size:1.05rem;margin:1em 0 .4em;font-weight:700} p{margin:.7em 0} a{color:var(--link);text-decoration:none;text-underline-offset:.18em} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} code,kbd,samp,pre{font-family:var(--f-mono);font-size:.9em} code{background:var(--code-bg);padding:.08em .35em;border-radius:3px} pre{background:var(--code-bg);padding:var(--s-3) var(--s-4);border-radius:var(--radius);overflow-x:auto} hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0} ::selection{background:var(--accent-soft)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-4)} @media (min-width:700px){.wrap{padding:0 var(--s-5)}} .page{padding-top:var(--s-5);padding-bottom:var(--s-8)} .measure{max-width:var(--measure)} .lede{font-size:1.08rem;color:var(--ink-soft)} .eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);font-weight:700;margin:0 0 .4em} .muted{color:var(--ink-soft)} .small{font-size:.88rem} .mono{font-family:var(--f-mono)} .nowrap{white-space:nowrap} .center{text-align:center} .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- skip link ---------- */ .skip{position:absolute;left:var(--s-3);top:-100px;z-index:100;background:var(--panel);color:var(--ink); padding:var(--s-2) var(--s-4);border:2px solid var(--focus);border-radius:var(--radius)} .skip:focus{top:var(--s-3)} /* ---------- header ---------- */ .site-head{background:var(--panel);border-bottom:1px solid var(--line)} .head-row{display:flex;align-items:center;gap:var(--s-4);min-height:64px;flex-wrap:wrap;padding-top:var(--s-2);padding-bottom:var(--s-2)} .brand{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink);text-decoration:none;margin-right:auto} .brand:hover{text-decoration:none} .brand img{width:34px;height:40px;flex:0 0 34px} .brand-name{font-family:var(--f-brand);font-size:1.28rem;letter-spacing:.04em;font-weight:600;line-height:1.1} .brand-sub{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:400} .nav{display:flex;align-items:center;gap:var(--s-1)} .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);border-radius:var(--radius); font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .nav a:hover{background:var(--accent-soft);text-decoration:none} .nav a[aria-current="page"]{color:var(--accent-strong);box-shadow:inset 0 -2px 0 var(--accent)} .nav .ext::after{content:"\2197";margin-left:.25em;font-size:.9em;color:var(--ink-soft)} .head-tools{display:flex;align-items:center;gap:var(--s-2)} .search{display:flex;align-items:center} .search input{width:12rem;min-height:40px;border:1px solid var(--line);border-right:0;border-radius:var(--radius) 0 0 var(--radius); background:var(--ground);color:var(--ink);padding:0 var(--s-3);font:inherit;font-size:.92rem} .search button{min-height:40px;border:1px solid var(--line);border-radius:0 var(--radius) var(--radius) 0;background:var(--panel-2); color:var(--ink);padding:0 var(--s-3);cursor:pointer;display:inline-flex;align-items:center} .search svg{width:16px;height:16px} .navmenu{display:none} .navmenu>summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;padding:0 var(--s-3)} .navmenu>summary::-webkit-details-marker{display:none} .navmenu>summary svg{width:20px;height:20px} .navmenu-panel{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) 0} .navmenu-panel .nav{flex-direction:column;align-items:stretch} .navmenu-panel .search input{flex:1;width:auto} @media (max-width:899px){ .site-head{position:relative} .head-row{gap:var(--s-2);flex-wrap:nowrap} .head-row>.nav,.head-row>.head-tools>.search{display:none} .navmenu{display:block} .navmenu[open]>summary{border-color:var(--accent);color:var(--accent-strong)} .navmenu-panel{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--panel);border-bottom:1px solid var(--line); box-shadow:var(--shadow);padding:var(--s-3) var(--s-4) var(--s-4)} } @media (max-width:480px){ .brand-sub{display:none} .brand{min-width:0} .brand-name{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .navmenu>summary{padding:0 var(--s-2)} .head-row,.head-tools{gap:6px} .brand img{width:28px;height:33px;flex-basis:28px} .signin-link{padding:0 var(--s-2);font-size:.85rem} .account>summary{max-width:6.5rem} } .theme-toggle button{min-height:40px;min-width:40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ground); color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:.4em;padding:0 var(--s-2);font:inherit;font-size:.82rem} .theme-toggle svg{width:18px;height:18px} .theme-toggle .tt-label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase} @media (max-width:480px){.theme-toggle .tt-label{display:none}} .account>summary{list-style:none;cursor:pointer;min-height:40px;display:inline-flex;align-items:center;gap:.4em;padding:0 var(--s-3); border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);font-size:.9rem;max-width:14rem} .account>summary::-webkit-details-marker{display:none} .account>summary .acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .account{position:relative} .account-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:12rem;background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s-2);display:flex;flex-direction:column;gap:2px} .account-menu a,.account-menu button{display:flex;align-items:center;min-height:40px;padding:0 var(--s-3);border-radius:4px;color:var(--ink); background:none;border:0;font:inherit;font-size:.92rem;cursor:pointer;text-align:left;width:100%} .account-menu a:hover,.account-menu button:hover{background:var(--accent-soft);text-decoration:none} .signin-link{white-space:nowrap;display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-3);border-radius:var(--radius);border:1px solid var(--accent); color:var(--accent-strong);font-size:.9rem} .signin-link:hover{background:var(--accent-soft);text-decoration:none} /* ---------- breadcrumbs, flash ---------- */ .crumbs{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 var(--s-3)} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3em} .crumbs li+li::before{content:"/";margin-right:.3em;color:var(--line)} .flash{margin:var(--s-4) 0 0} .flash:empty{display:none} /* ---------- footer ---------- */ .site-foot{border-top:1px solid var(--line);margin-top:var(--s-7);padding:var(--s-5) 0 var(--s-6);color:var(--ink-soft);font-size:.86rem} .foot-row{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center;justify-content:space-between} .foot-links{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);list-style:none;margin:0;padding:0} .foot-links a{color:var(--ink-soft);display:inline-flex;min-height:32px;align-items:center} .foot-note{margin:var(--s-3) 0 0;font-size:.8rem} /* ---------- hero ---------- */ .hero{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--shade);margin:var(--s-5) 0} .hero img{width:100%;display:block;aspect-ratio:21/8;object-fit:cover} .hero-text{position:absolute;right:4%;top:12%;width:44%;min-width:260px;color:var(--hero-ink);text-shadow:0 2px 14px #000c,0 0 40px #0009;text-align:right} .hero-text h1{color:var(--hero-ink);margin:0 0 .2em;font-family:var(--f-brand)} .hero-text .sub{font-size:1.02rem;color:var(--hero-sub)} @media (max-width:700px){.hero-text{position:static;width:auto;min-width:0;background:var(--shade);padding:var(--s-4) var(--s-4);text-align:left}} /* ---------- notes, chips, progress ---------- */ .note{background:var(--accent-soft);border-left:3px solid var(--accent);padding:.8em 1.1em;border-radius:0 4px 4px 0;margin:1.2em 0} .note b,.note strong{color:var(--accent-strong)} .note.warn{border-left-color:var(--warn-ink)} .note.bad{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)} .note.good{border-left-color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)} .note>:first-child{margin-top:0} .note>:last-child{margin-bottom:0} .chip{display:inline-flex;align-items:center;gap:.35em;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;padding:.14em .6em; border-radius:10px;border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap;background:transparent;line-height:1.6} .chip.t1{border-color:var(--accent);color:var(--accent-strong)} .chip.t2{border-color:var(--good);color:var(--good)} .chip.t3{border-color:var(--warn-ink);color:var(--warn-ink)} .chip.bad{border-color:var(--bad);color:var(--bad)} .chip.author{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)} a.chip:hover{border-color:var(--accent);text-decoration:none} .chips{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:var(--s-3) 0} .chip-x{display:inline-flex;align-items:center;gap:.4em;min-height:32px;font-family:var(--f-mono);font-size:.74rem;padding:0 .7em;border-radius:16px; border:1px solid var(--accent);color:var(--accent-strong);background:var(--accent-soft)} .chip-x::after{content:"\00d7";font-size:1.05rem;line-height:1} .chip-x:hover{text-decoration:none;background:var(--panel)} .progress{text-align:center;font-family:var(--f-mono);font-size:.8rem;color:var(--ink-soft);letter-spacing:.05em;margin:1.4em 0 .4em} .progress b{color:var(--accent-strong)} .hcount{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-soft);letter-spacing:.06em;margin-left:.8em;white-space:nowrap} /* ---------- tiles / cards ---------- */ .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:.4em 0 1.2em;list-style:none;padding:0} @media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.tiles{grid-template-columns:minmax(0,1fr)}} .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:.35em;color:var(--ink);min-width:0;position:relative} a.tile,.tile.link{border-left:3px solid var(--accent);transition:border-color .12s ease,transform .12s ease,box-shadow .12s ease} a.tile:hover,.tile.link:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)} .tile h3,.tile h4{margin:0;font-size:1.08rem;font-weight:700;font-family:var(--f-head);overflow-wrap:anywhere} .tile h3 a{color:var(--ink)} .tile h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)} .tile:focus-within{outline:2px solid var(--focus);outline-offset:2px} .tile:focus-within a:focus-visible{outline:none} .tile .tdesc{margin:0;font-size:.86rem;color:var(--ink-soft);line-height:1.5;flex:1} .tile .tfoot{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:.3em;flex-wrap:wrap} .tile .tcount{font-family:var(--f-mono);font-size:.74rem;color:var(--accent-strong);letter-spacing:.03em} .tile .thumb{width:calc(100% + 32px);margin:-14px -16px .4em;aspect-ratio:3/2;object-fit:cover;border-radius:5px 5px 0 0;display:block;border-bottom:1px solid var(--line)} .tile.blank{background:transparent;border-style:dashed} .tile .byline{font-size:.84rem;color:var(--ink-soft);margin:0} .minitiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:.4em 0 .8em;list-style:none;padding:0} @media (max-width:900px){.minitiles{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:560px){.minitiles{grid-template-columns:repeat(2,minmax(0,1fr))}} .mini{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);font-size:.85rem;line-height:1.35;display:block} .mini:hover{text-decoration:none;border-color:var(--accent)} .mini .mname{display:block;padding:.45em .7em .05em;font-weight:700;font-family:var(--f-head)} .mini .mdate{display:block;padding:0 .7em .5em;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-soft)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-4) var(--s-4);margin:0 0 var(--s-4)} .card>:first-child{margin-top:0} .card>:last-child{margin-bottom:0} .card h2{border:0;font-size:1.2rem;margin:0 0 .5em;padding:0} .card .meta{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-soft);letter-spacing:.04em} .grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)} @media (min-width:900px){.grid-2{grid-template-columns:minmax(0,1fr) 320px}} .stack>*+*{margin-top:var(--s-3)} .row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center} .spread{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:space-between} /* ---------- swatch dots ---------- */ .dots{display:inline-flex;gap:3px;align-items:center} .dots .dot{width:14px;height:14px;border-radius:50%;border:1px solid #0004;display:inline-block} /* ---------- stars (display) ---------- */ .stars{display:inline-flex;align-items:center;gap:.4em;font-size:.88rem;color:var(--ink-soft)} .star-bar{position:relative;display:inline-block;width:5.2em;height:1em;line-height:1;font-size:1rem} .star-bar::before,.star-bar .fill::before{content:"\2605\2605\2605\2605\2605";letter-spacing:.04em;position:absolute;left:0;top:0;white-space:nowrap} .star-bar::before{color:var(--star-off)} .star-bar .fill{position:absolute;left:0;top:0;height:100%;overflow:hidden;display:block} .star-bar .fill::before{color:var(--star)} .stars .avg{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .histo{list-style:none;margin:var(--s-2) 0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:.8rem;font-family:var(--f-mono)} .histo li{display:grid;grid-template-columns:2.5em 1fr 3em;gap:var(--s-2);align-items:center} .histo .track{height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden} .histo .bar{height:100%;background:var(--star);display:block} .histo .n{text-align:right;color:var(--ink-soft)} /* ---------- buttons ---------- */ .btn,.btn-quiet,.btn-danger,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:40px;padding:0 var(--s-4); border-radius:var(--radius);font:inherit;font-size:.95rem;line-height:1.2;cursor:pointer;text-decoration:none;border:1px solid transparent; transition:background-color .12s ease,border-color .12s ease,color .12s ease} .btn{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--btn-ink)} .btn:hover{background:var(--accent);border-color:var(--accent);text-decoration:none} .btn-quiet{background:transparent;border-color:var(--line);color:var(--ink)} .btn-quiet:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none} .btn-danger{background:transparent;border-color:var(--bad);color:var(--bad)} .btn-danger:hover{background:var(--bad);color:var(--btn-ink);text-decoration:none} .btn[disabled],.btn-quiet[disabled],.btn-danger[disabled]{opacity:.55;cursor:not-allowed} .btn svg,.btn-quiet svg{width:16px;height:16px} .btn-sm{min-height:32px;padding:0 var(--s-3);font-size:.85rem} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin:var(--s-3) 0} .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--link);cursor:pointer;text-decoration:none} .linkbtn:hover{text-decoration:underline} .copied{color:var(--good)} /* ---------- forms ---------- */ label{font-weight:600;font-size:.92rem} .field{display:flex;flex-direction:column;gap:var(--s-1);margin:0 0 var(--s-4)} .field .hint{font-size:.82rem;color:var(--ink-soft);font-weight:400} .field .err{font-size:.84rem;color:var(--bad)} input[type=text],input[type=search],input[type=number],select,textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--ground); border:1px solid var(--line);border-radius:var(--radius);min-height:40px;padding:.4em .7em;max-width:100%} textarea{min-height:7em;line-height:1.5;resize:vertical;width:100%} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)} [aria-invalid="true"]{border-color:var(--bad)} .err-summary{border:1px solid var(--bad);border-left-width:4px;border-radius:var(--radius);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-4)} .err-summary h2{font-size:1.05rem;margin:0 0 .3em;border:0;padding:0;color:var(--bad)} input[type=range]{accent-color:var(--accent);width:100%;min-height:28px} input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:18px;height:18px} .check{display:inline-flex;align-items:center;gap:.5em;font-weight:400;min-height:32px} /* ---------- filter bar ---------- */ .filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-4)} .filters>summary{cursor:pointer;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;min-height:40px;display:flex;align-items:center} .filter-row{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:flex-end} .filter-row .field{margin:0;min-width:10rem;flex:1 1 10rem} .filter-row .field.grow{flex:3 1 16rem} .filter-row input[type=search]{width:100%} .filter-row select{width:100%} @media (min-width:900px){.filters>summary{display:none}} /* ---------- pagination ---------- */ .pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-2);margin:var(--s-5) 0;font-family:var(--f-mono);font-size:.82rem} .pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)} .pager a:hover{border-color:var(--accent);text-decoration:none;background:var(--accent-soft)} .pager [aria-current="page"]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--btn-ink)} .pager .gap{border:0;min-width:auto} /* ---------- tables ---------- */ .table-wrap{overflow-x:auto;max-width:100%} table.plain{border-collapse:collapse;width:100%;font-size:.9rem} table.plain th,table.plain td{text-align:left;padding:.45em .6em;border-bottom:1px solid var(--line);vertical-align:middle} table.plain th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:400} .swatch{display:inline-block;width:28px;height:18px;border-radius:3px;border:1px solid #0005;vertical-align:middle; background-image:linear-gradient(45deg,#8883 25%,transparent 25%,transparent 75%,#8883 75%),linear-gradient(45deg,#8883 25%,transparent 25%,transparent 75%,#8883 75%); background-size:8px 8px;background-position:0 0,4px 4px;position:relative;overflow:hidden} .swatch>i{position:absolute;inset:0;display:block} /* ---------- archive-style disclosure ---------- */ details.archive{margin:var(--s-5) 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:0 18px} details.archive summary{cursor:pointer;font-family:var(--f-head);font-size:1.15rem;padding:.8em 0;min-height:44px} details.archive[open] summary{border-bottom:1px solid var(--line);margin-bottom:var(--s-3)} /* ---------- content pages ---------- */ .prose{max-width:var(--measure)} .prose h2{font-size:1.4rem} .prose ul,.prose ol{padding-left:1.3em} .prose li{margin:.3em 0} .error-page{max-width:var(--measure);margin:var(--s-7) auto;text-align:center} .error-page .code{font-family:var(--f-brand);font-size:4rem;color:var(--accent);line-height:1;margin:0} .error-page .search{justify-content:center;margin:var(--s-4) 0} .error-page .search input{width:16rem} .center-card{max-width:560px;margin:var(--s-6) auto} .options{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin:var(--s-4) 0} @media (min-width:760px){.options{grid-template-columns:repeat(2,minmax(0,1fr))}} .options .card{margin:0;display:flex;flex-direction:column} .options .card form{margin-top:auto} .pair-code{font-family:var(--f-mono);font-size:clamp(1.2rem,.9rem + 1.6vw,1.8rem);letter-spacing:.06em;background:var(--code-bg); border:1px dashed var(--accent);border-radius:var(--radius);padding:var(--s-4);text-align:center;overflow-wrap:anywhere} .pair-code code{background:none;padding:0;font-size:1em} .spinner{display:inline-block;width:.9em;height:.9em;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite;vertical-align:-.1em} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- theme preview chrome (tabs, sliders, scenes) ---------- */ .preview{margin:var(--s-4) 0} .tablist{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin:0} .tablist [role=tab]{font:inherit;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;min-height:44px;padding:0 var(--s-3); background:transparent;color:var(--ink-soft);border:1px solid transparent;border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;cursor:pointer;margin-bottom:-1px} .tablist [role=tab]:hover{color:var(--ink);background:var(--accent-soft)} .tablist [role=tab][aria-selected=true]{color:var(--accent-strong);background:var(--panel);border-color:var(--line);border-bottom:1px solid var(--panel)} .preview-panel>h3.no-js-label{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:var(--s-4) 0 var(--s-2)} .js .preview-panel>h3.no-js-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .preview-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3) var(--s-5);align-items:end;margin:var(--s-3) 0;padding:var(--s-3) var(--s-4); background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)} @media (min-width:700px){.preview-controls{grid-template-columns:repeat(3,minmax(0,1fr))}} .preview-controls .field{margin:0} .preview-controls label{display:flex;justify-content:space-between;gap:var(--s-2)} .preview-controls output{font-family:var(--f-mono);font-weight:400;color:var(--ink-soft);font-variant-numeric:tabular-nums} .scene-pick{display:flex;gap:var(--s-1);flex-wrap:wrap} .scene-pick button{font:inherit;font-size:.82rem;min-height:36px;padding:0 var(--s-3);border-radius:18px;border:1px solid var(--line);background:var(--ground);color:var(--ink);cursor:pointer} .scene-pick button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)} .no-js-settings{font-size:.9rem;color:var(--ink-soft);margin:var(--s-2) 0} .js .no-js-settings{display:none} .preview-controls{display:none} .js .preview-controls{display:grid} .font-note{font-size:.8rem;color:var(--ink-soft);font-style:italic;margin:var(--s-2) 0 0} .label-like{font-weight:600;font-size:.92rem} .inline-form{display:inline} /* ---------- school colours (deck pages) ---------- */ .sch-fire{--sch:#c8553d}.sch-water{--sch:#3d7fc8}.sch-air{--sch:#8fb8c9}.sch-earth{--sch:#8a6d33} .sch-life{--sch:#4d9a4a}.sch-death{--sch:#6b5a7a}.sch-sun{--sch:#e0b53c}.sch-moon{--sch:#7a86b8} .sch-chaos{--sch:#9a3d6b}.sch-order{--sch:#c9c3a8}.sch-blades{--sch:#9a9a9a}.sch-bludgeon{--sch:#7a6a55} .sch-archery{--sch:#6d8a3a}.sch-shields{--sch:#6f5626}.sch-ranged{--sch:#6d8a3a}.sch-polearms{--sch:#8a7a5a} .sch-unarmed{--sch:#b08a6a}.sch-bard{--sch:#b06aa0}.sch-other{--sch:#888} /* ---------- motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} a.tile:hover,.tile.link:hover{transform:none} } /* ---------- print ---------- */ @media print{.site-head,.site-foot,.skip,.preview-controls{display:none}} /* ---------- width utilities: .w-0 .. .w-100 (percent). Inline styles are banned by the CSP, so every dynamic width (star fill, histogram bars, school mix) uses one of these. ---------- */ /* @generated-widths */ .w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%} .w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%} .w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%} .w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%} .w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%} .w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%} .w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%} .w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%} .w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%} .w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%} .w-100{width:100%}