figure{margin:0}figcaption{color:var(--muted);font-size:.85rem}.reading-progress{background:var(--accent);transform-origin:0;z-index:20;height:3px;position:fixed;inset:0 0 auto;transform:scaleX(0)}@supports (animation-timeline:scroll()){.reading-progress{animation:linear both grow;animation-timeline:scroll(root)}}@keyframes grow{to{transform:scaleX(1)}}.subgrid-cards{grid-template-rows:auto auto auto;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));column-gap:1rem;display:grid}.subgrid-cards article{grid-row:span 3;grid-template-rows:subgrid;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);gap:.4rem;padding:.8rem 1rem;display:grid}.subgrid-cards h3{margin:0}.subgrid-cards p{color:var(--muted);margin:0}.subgrid-cards footer{color:var(--accent);border-top:1px solid var(--line);padding-top:.4rem;font-size:.8rem}.areas{font-family:var(--mono);grid-template:"head head"2.5rem"side body"6rem"foot foot"2rem/8rem 1fr;gap:.4rem;margin-top:1.25rem;font-size:.8rem;display:grid}.area{background:color-mix(in oklch, var(--accent) 18%, var(--surface));border-radius:6px;place-items:center;display:grid}.head{grid-area:head}.side{grid-area:side}.body{grid-area:body}.foot{grid-area:foot}[aria-pressed=true].ghost{background:var(--accent);color:var(--accent-text)}.card-grid{gap:.75rem;width:100%;transition:width .2s;display:grid;container-type:inline-size}.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);outline:2px solid #0000;grid-template-columns:1fr;gap:.6rem;padding:.75rem;transition:outline-color .15s,box-shadow .15s;display:grid}.card:has(input:checked){outline-color:var(--accent);box-shadow:var(--shadow)}.card h3{margin:0}.card p{color:var(--muted);margin:0;font-size:.9rem}.thumb{background:linear-gradient(135deg, oklch(70% .15 var(--hue)), oklch(52% .17 calc(var(--hue) + 40)));border-radius:8px;height:4.5rem}.select-card{align-items:center;gap:.4rem;font-size:.85rem;display:inline-flex}@container (width>=34rem){.card{grid-template-columns:6rem 1fr auto;align-items:center}.thumb{height:4rem}}.logical{padding:.5rem 0}.logical-quote{border-inline-start:4px solid var(--accent);background:linear-gradient(to right, color-mix(in srgb, var(--accent) 10%, transparent), transparent);border-start-end-radius:var(--radius);border-end-end-radius:var(--radius);margin-block:.5rem;margin-inline-start:1.5rem;padding-block:.4rem;padding-inline:1rem .5rem}[dir=rtl] .logical-quote{background:linear-gradient(to left, color-mix(in srgb, var(--accent) 10%, transparent), transparent)}.tategaki{writing-mode:vertical-rl;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);max-width:100%;height:18rem;padding:1rem;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:1.05rem;line-height:1.9;overflow-x:auto}.tategaki h3{margin:0 0 0 .8rem;font-family:inherit}.tategaki p{margin:0 0 0 .6rem}.tategaki rt{font-size:.5em}.tcy{text-combine-upright:all}.type-grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem 1.5rem;display:grid}.type-grid figure{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:.75rem 1rem}.type-grid h3{max-width:15rem}.no-balance{text-wrap:wrap}.balanced{text-wrap:balance}.clamped{-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;margin-top:0;display:-webkit-box;overflow:hidden}.numbers{justify-items:end;margin:.2rem 0;font-size:1.1rem;display:grid}.numbers.tabular{font-variant-numeric:tabular-nums}.drop:first-letter{initial-letter:2;font-family:var(--heading);color:var(--accent);margin-inline-end:.3rem}.swatches{flex-wrap:wrap;gap:.4rem;margin:.75rem 0;display:flex}.swatches span{color:#fff;border-radius:8px;place-items:end center;width:3.2rem;height:3.2rem;padding-bottom:.2rem;font-size:.65rem;display:grid}.mixes span{background:color-mix(var(--mix), #2563eb, #facc15);color:#000;width:6rem;font-size:.75rem}.gradients{flex-wrap:wrap;gap:.75rem;display:flex}.gradients span{border-radius:var(--radius);width:7rem;height:5rem;font-family:var(--mono);place-items:center;font-size:.75rem;display:grid}.conic{background:conic-gradient(in oklch longer hue, oklch(70% .2 0), oklch(70% .2 0))}.stripes{background:repeating-linear-gradient(45deg, var(--accent) 0 8px, transparent 8px 16px)}.adaptive{color-scheme:inherit;color:var(--lightningcss-light,#78350f)var(--lightningcss-dark,#dbeafe);background:var(--lightningcss-light,#fde68a)var(--lightningcss-dark,#1e3a8a)}.snap-strip{scroll-snap-type:x mandatory;gap:.75rem;margin:1rem 0;padding-bottom:.5rem;display:flex;overflow-x:auto}.swatch{border-radius:var(--radius);scroll-snap-align:start;color:#fff;background:oklch(62% .17 var(--hue));flex:0 0 9rem;place-items:end start;height:6rem;padding:.5rem .75rem;font-weight:600;display:grid}.motion-row{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.pulse{background:var(--ok);border-radius:50%;width:1rem;height:1rem;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.4;transform:scale(1.6)}}.lift:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.marquee{white-space:nowrap;color:var(--muted);flex:14rem;font-size:.85rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.marquee span{padding-left:100%;animation:12s linear infinite marquee;display:inline-block}@keyframes marquee{to{transform:translate(-100%)}}.limits{padding-left:1.6rem}