:root{color-scheme:dark;--bg:#101415;--panel:#1a2224;--line:#344144;--ink:#f2eddf;--muted:#a9b8b7;--accent:#ff7b36}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.75 'Segoe UI','Yu Gothic',sans-serif}a{color:inherit}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#253034;color:var(--ink);border-radius:6px;padding:8px 14px}button:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}header{padding:20px 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}header a{text-decoration:none}.brand{font-size:30px;font-weight:900}.brand span{color:var(--accent)}main{max-width:1240px;margin:auto;padding:0 28px}.hero{padding:65px 0 36px;max-width:850px}.eyebrow{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:2px}h1{font-size:clamp(42px,6vw,76px);line-height:1.2;letter-spacing:-2px;margin:18px 0}h1 span{display:block;font-size:18px;letter-spacing:3px;color:var(--accent);margin-top:22px}.intro{font-size:22px}.explain{max-width:670px;color:var(--muted)}.hero-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:26px}.hero-controls button{background:var(--accent);color:#101415;font-weight:700}.hero-controls span{color:var(--muted);font-size:12px}.filters{border-top:1px solid var(--line);padding:25px 0}.filters label{display:block;font-size:13px;margin-bottom:8px}input{width:100%;max-width:480px;background:#182023;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:12px}#categories{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}#categories button[aria-pressed=true]{background:var(--ink);color:var(--bg)}#count{font-size:12px;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;min-width:0;scroll-margin-top:20px}.demo{height:190px;position:relative;display:grid;place-items:center;overflow:hidden;background-color:#12191b;background-image:radial-gradient(#ffffff12 1px,transparent 1px);background-size:16px 16px}.demo .object{width:54px;height:54px;background:var(--accent);border-radius:12px;display:grid;place-items:center;position:relative;z-index:2;color:#101415;font-size:24px;font-weight:900;box-shadow:0 8px 30px #0003}.demo .ghost{position:absolute;width:54px;height:54px;border:1px dashed #78908c;border-radius:12px}.demo .ring{position:absolute;width:54px;height:54px;border-radius:50%;border:3px solid var(--accent);opacity:0}.demo .shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#fff9 50%,transparent 65%);opacity:0;z-index:3;pointer-events:none}.demo .trail{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--accent);opacity:0}.demo .back{position:absolute;width:170px;height:70px;background:#335051;border-radius:14px;opacity:0}.demo.parallax .back{opacity:1}.demo.typewriter .object{width:10ch;font-family:monospace;background:transparent;box-shadow:none;color:var(--ink);font-size:20px;white-space:nowrap;overflow:hidden;justify-content:start;border-radius:0;border-right:2px solid var(--accent)}.demo.progress .object{width:180px;height:12px;transform-origin:left;border-radius:6px}.demo.progress .ghost{width:180px;height:12px;border-style:solid}.demo.spinner .object{border-radius:50%;background:transparent;border:6px solid #344144;border-top-color:var(--accent);box-shadow:none;color:transparent}.demo.flip .object{backface-visibility:visible}.card-body{padding:20px}.meta{display:flex;justify-content:space-between;color:var(--accent);font-size:11px;letter-spacing:1px}h2{font-size:20px;margin:12px 0 0}.english{color:var(--muted);font-size:12px;margin:0}.description{min-height:53px;font-size:14px}.actions{display:flex;gap:8px;margin:15px 0}.actions .copy{flex:1;background:var(--accent);color:var(--bg);font-weight:700}details{font-size:12px;color:var(--muted)}summary{cursor:pointer}textarea{width:100%;height:180px;resize:vertical;padding:10px;background:#11191b;color:var(--ink);border:1px solid var(--line);border-radius:5px;margin-top:10px;font-size:12px}.tip{font-size:12px;color:var(--muted);margin:10px 0 0}.guide{padding:40px 0;margin-top:45px;border-top:1px solid var(--line);max-width:800px}.guide p{color:var(--muted)}footer{padding:25px 5vw;border-top:1px solid var(--line);color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90vw;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:8px;z-index:10;display:none}.skip{position:absolute;top:-100px}.skip:focus{top:10px;z-index:20;background:var(--bg)}[hidden]{display:none!important}@media(max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){main{padding:0 18px}.hero{padding-top:35px}.cards{grid-template-columns:1fr}.intro{font-size:18px}header{padding:15px 18px}header>a:last-child{font-size:12px}}
.demo.shine .object{overflow:hidden}.permalink{display:inline-block;font-size:11px;color:var(--muted);margin-top:10px}