:root{color-scheme:dark;font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;color:#e8e8e4;background:#000;font-synthesis:none}*{box-sizing:border-box}body{margin:0;height:100svh;min-height:420px;display:flex;flex-direction:column;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;min-height:44px;padding:8px 12px}a{color:inherit;text-decoration:none}button:hover,a:hover{color:#c1f08c}button:focus-visible,a:focus-visible{outline:1px solid #b6e983;outline-offset:4px}header{height:100px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 44px;z-index:2}.identity{font-size:12px;letter-spacing:.14em;display:flex;align-items:center;gap:10px}.spark{font-size:27px;color:#b6e983;font-family:serif}nav{display:flex;gap:28px}nav button{font-size:12px;letter-spacing:.13em;color:#737773;position:relative}nav button[aria-pressed=true]{color:#e8e8e4}nav button[aria-pressed=true]:after{position:absolute;bottom:0;left:calc(50% - 2px);width:4px;height:4px;background:#b6e983;border-radius:50%;content:""}#fullscreen{font-size:12px;color:#999e98}#fullscreen span{font-size:19px;margin-left:8px}main{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:0 4vw}canvas{width:100%;height:100%;object-fit:contain;max-width:1440px}#message{position:absolute;left:0;right:0;text-align:center;color:#8c9586;font-size:12px;pointer-events:none}footer{flex-shrink:0;min-height:166px;display:flex;align-items:center;justify-content:space-between;padding:24px 44px 40px;gap:26px}.effect-info{min-width:240px;display:flex;flex-direction:column;align-items:flex-start}.eyebrow{font-size:10px;letter-spacing:.12em;color:#858d80}#browse{padding:8px 0;display:flex;align-items:center;gap:20px;text-align:left}#effect-name{font-size:24px;font-family:system-ui,sans-serif;letter-spacing:.02em;font-weight:400}.counter{font-size:10px;color:#888f83}.plus{color:#b6e983;font-size:20px}#english{font-size:10px;letter-spacing:.17em;color:#777f73}.transport{display:flex;align-items:center;gap:12px}.transport button{font-size:14px;color:#b5bcb0}#previous,#next{font-size:24px}#play{width:64px}.separator{height:18px;width:1px;background:#282e25;margin:0 6px}#random{font-size:11px}.source{display:flex;flex-direction:column;gap:10px;font-size:8px;letter-spacing:.075em;color:#73796e;line-height:1.8;text-align:right}.source a{color:#a3ab9c}.progress{height:2px;position:fixed;bottom:0;left:0;width:100%;background:#121710}.progress i{height:100%;width:0;display:block;background:#9ac475}dialog{background:#0c0e0b;color:#e7ebe1;border:1px solid #30362a;padding:28px 32px 20px;width:min(920px,calc(100% - 32px));max-height:85svh;border-radius:2px}dialog::backdrop{background:#000b;backdrop-filter:blur(10px)}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.drawer-head h2{font-family:system-ui,sans-serif;font-size:24px;font-weight:400;margin:12px 0}#close{font-size:18px}#effects{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px}#effects button{display:grid;grid-template-columns:24px 1fr;text-align:left;align-items:center;padding:13px 0;border-top:1px solid #252b20;gap:3px 10px}#effects .number{grid-row:span 2;font-size:9px;color:#687060}#effects .cn{font-size:13px}#effects .en{font-size:9px;letter-spacing:.06em;color:#727c69}#effects button[aria-pressed=true]{color:#b6e983}#effects button[aria-pressed=true] .number{color:#b6e983}.library-note{color:#8c9682;font-size:10px;margin-top:22px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.immersive header,body.immersive footer,body.immersive .progress{opacity:0;pointer-events:none}header,footer{transition:opacity .4s}body:has(dialog[open]) header,body:has(dialog[open]) footer{opacity:1}@media(max-width:700px){header{height:80px;padding:0 20px}.identity{font-size:10px;gap:6px}.spark{font-size:22px}nav{gap:5px}nav button{font-size:10px;padding:8px}#fullscreen{font-size:0;padding:8px}#fullscreen span{font-size:22px;margin:0}main{padding:0 10px}footer{padding:16px 22px 30px;min-height:180px;gap:10px;flex-wrap:wrap}.effect-info{min-width:180px}#effect-name{font-size:22px}#browse{gap:14px}.transport{gap:3px;margin-left:auto}#random,.separator{display:none}.source{flex-basis:100%;text-align:left;flex-direction:row;flex-wrap:wrap;gap:4px 14px;font-size:7px;margin-top:14px}#effects{grid-template-columns:repeat(2,1fr);gap:0 18px}dialog{padding:22px 20px}.drawer-head h2{font-size:20px}.eyebrow{font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}