:root{--paper:#f4efe6;--paper-2:#ece4d4;--ink:#1d1933;--ink-soft:#5a5573;--accent:#ff5d5d;--accent-2:#ffb340;--accent-3:#6c8cff;--mint:#3fd1a5;--violet:#8a6cff;--line:#1d19331f;--shadow:0 24px 60px -22px #1d193373;--font-display:"Fraunces", "Noto Serif SC", serif;--font-body:"Space Grotesk", "Noto Serif SC", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-body);color:var(--ink);background:var(--paper);background-image:radial-gradient(circle at 15% 12%, #ffb3401f, transparent 32%), radial-gradient(circle at 85% 8%, #6c8cff1f, transparent 30%), radial-gradient(circle at 70% 90%, #ff5d5d1a, transparent 34%), radial-gradient(circle at 30% 78%, #3fd1a51a, transparent 30%), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);background-attachment:fixed;overflow-x:hidden}#app{opacity:1;max-width:1240px;margin:0 auto;padding:0 28px 80px;transition:opacity .6s}html.preboot #app{opacity:0;visibility:hidden}.topbar{z-index:50;justify-content:space-between;align-items:center;padding:26px 0 18px;display:flex;position:relative}.brand{align-items:baseline;gap:12px;display:flex}.brand-mark{background:conic-gradient(from 140deg, var(--accent), var(--accent-2), var(--mint), var(--accent-3), var(--accent));border-radius:50%;align-self:center;width:16px;height:16px;animation:9s linear infinite spin;box-shadow:0 0 0 4px #ff5d5d26}@keyframes spin{to{transform:rotate(360deg)}}.brand-name{font-family:var(--font-display);letter-spacing:-.02em;font-size:26px;font-weight:900}.brand-sub{color:var(--ink-soft);letter-spacing:.18em;text-transform:uppercase;font-size:13px}.engine-picker{position:relative}.engine-trigger{border:1.5px solid var(--line);cursor:pointer;font-family:var(--font-body);background:#fff9;border-radius:999px;align-items:center;gap:12px;padding:9px 12px 9px 10px;transition:border-color .25s,box-shadow .25s,transform .15s;display:flex}.engine-trigger:hover{border-color:#1d19334d;box-shadow:0 8px 22px -12px #1d193380}.engine-trigger:active{transform:scale(.97)}.engine-pill{background:var(--ink);color:#fff;letter-spacing:.04em;white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:6px 14px;font-size:13px;font-weight:700;display:inline-flex}.engine-pill:before{content:"";opacity:.7;background:currentColor;border-radius:50%;width:8px;height:8px}.engine-caret{color:var(--ink-soft);font-size:12px;transition:transform .25s}.engine-picker.open .engine-caret{transform:rotate(180deg)}.engine-menu{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid var(--line);min-width:220px;box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;transform-origin:100% 0;background:#ffffffeb;border-radius:18px;padding:8px;list-style:none;transition:opacity .22s,transform .22s,visibility .22s;position:absolute;top:calc(100% + 10px);right:0;transform:translateY(-8px)scale(.96)}.engine-picker.open .engine-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)scale(1)}.engine-menu li{cursor:pointer;color:var(--ink);border-radius:12px;align-items:center;gap:12px;padding:10px 12px;font-size:14px;font-weight:600;transition:background .15s,transform .12s;display:flex}.engine-menu li:hover{background:#1d193312}.engine-menu li:active{transform:scale(.98)}.engine-menu li.active{background:var(--ink);color:#fff}.engine-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.engine-desc{color:var(--ink-soft);opacity:.7;margin-left:auto;font-size:11px;font-weight:400}.engine-menu li.active .engine-desc{color:#fff;opacity:.6}.gallery{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;margin-top:40px;display:grid}.card{border:1.5px solid var(--line);cursor:pointer;opacity:0;background:#ffffff8c;border-radius:22px;transition:opacity .45s,transform .45s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden;transform:translateY(22px)}.card.visible{opacity:1;transform:translateY(0)}.card:hover{box-shadow:var(--shadow);border-color:#1d193338;transform:translateY(-6px)}.card.selected{border-color:var(--accent-3);box-shadow:0 0 0 2px var(--accent-3)}.compare-loading{letter-spacing:.08em;color:var(--ink-soft);opacity:.8;font-size:12.5px}.card-preview{aspect-ratio:1/1.2;place-items:center;padding:18px;display:grid}.card-preview svg{object-fit:contain;width:100%;height:100%;color:var(--ink)}.card-index{font-family:var(--font-display);color:var(--ink-soft);opacity:.6;font-size:13px;font-weight:600;position:absolute;top:12px;left:14px}.card-info{border-top:1px solid var(--line);padding:14px 16px 16px}.card-name{white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:13.5px;font-weight:700;line-height:1.4;overflow:hidden}.card-meta{color:var(--ink-soft);opacity:.8;align-items:center;gap:8px;font-size:11.5px;display:flex}.card-meta .paths:before{content:"· "}.footer{border-top:1.5px solid var(--line);color:var(--ink-soft);text-align:center;letter-spacing:.02em;margin-top:70px;padding-top:26px;font-size:12.5px}#modal{z-index:100;opacity:0;visibility:hidden;pointer-events:none;place-items:center;padding:22px;transition:opacity .3s,visibility .3s;display:grid;position:fixed;inset:0}#modal.open{opacity:1;visibility:visible;pointer-events:auto}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1d193380;position:absolute;inset:0}.modal-panel{background:var(--paper);width:min(720px,100%);box-shadow:var(--shadow);border:1.5px solid #fff9;border-radius:28px;padding:26px;transition:transform .35s cubic-bezier(.34,1.4,.64,1);position:relative;transform:translateY(26px)scale(.96)}.modal.open .modal-panel{transform:translateY(0)scale(1)}.modal-head{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;display:flex}.modal-head>div:first-child{min-width:0}.modal-tag{letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-size:12px;font-weight:700}.modal-title{font-family:var(--font-display);letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:26px;font-weight:900;overflow:hidden}.modal-actions{gap:10px;display:flex}.icon-btn{border:1.5px solid var(--line);cursor:pointer;width:42px;height:42px;color:var(--ink);background:#fff9;border-radius:50%;place-items:center;transition:background .2s,transform .15s,color .2s;display:grid}.icon-btn:hover{background:var(--ink);color:#fff}.icon-btn:active{transform:scale(.9)}#btnReplay.playing svg{animation:1s linear infinite spin}#btnPlayPause .icon-play,#btnPlayPause.paused .icon-pause{display:none}#btnPlayPause.paused .icon-play{display:block}#btnLoop.active,#btnFullscreen.active{background:var(--ink);color:#fff}#btnFullscreen .icon-minimize{display:none}#btnFullscreen.active .icon-minimize{display:block}#btnFullscreen.active svg:not(.icon-minimize){display:none}:-webkit-any(#modal:fullscreen,#modal:-webkit-full-screen){background:#141128e6;padding:20px}:is(#modal:fullscreen,#modal:fullscreen){background:#141128e6;padding:20px}:-webkit-any(#modal:fullscreen .modal-panel,#modal:-webkit-full-screen .modal-panel){flex-direction:column;width:min(96vw,1500px);height:94vh;display:flex}:is(#modal:fullscreen .modal-panel,#modal:fullscreen .modal-panel){flex-direction:column;width:min(96vw,1500px);height:94vh;display:flex}:-webkit-any(#modal:fullscreen .modal-stage,#modal:-webkit-full-screen .modal-stage){flex:1}:is(#modal:fullscreen .modal-stage,#modal:fullscreen .modal-stage){flex:1}:-webkit-any(#modal:fullscreen .stage-frame,#modal:-webkit-full-screen .stage-frame){height:100%;min-height:0}:is(#modal:fullscreen .stage-frame,#modal:fullscreen .stage-frame){height:100%;min-height:0}:-webkit-any(#modal:fullscreen .stage-frame svg,#modal:-webkit-full-screen .stage-frame svg){max-height:none}:is(#modal:fullscreen .stage-frame svg,#modal:fullscreen .stage-frame svg){max-height:none}.modal-stage{border:1.5px solid var(--line);background:#ffffffa6;border-radius:20px;position:relative;overflow:hidden}.stage-frame{place-items:center;min-height:420px;padding:22px;display:grid}.stage-frame svg{object-fit:contain;width:100%;height:100%;max-height:58vh;color:var(--ink)}.stage-hint{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);opacity:0;pointer-events:none;background:#ffffffb3;border-radius:999px;padding:6px 14px;font-size:12px;transition:opacity .3s;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.stage-hint.show{opacity:1}.stage-hint:after{content:"…";animation:1.2s steps(4,end) infinite dots}@keyframes dots{0%{content:"…"}33%{content:""}}.modal-foot{justify-content:space-between;align-items:center;gap:16px;margin-top:16px;display:flex}.foot-left{align-items:center;gap:14px;display:flex}.speed-control{background:#1d19330f;border-radius:999px;align-items:center;gap:4px;padding:4px;display:flex}.speed-label{letter-spacing:.1em;color:var(--ink-soft);margin:0 4px;font-size:11px}.speed-control button{font-family:var(--font-body);color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;transition:background .18s,color .18s,transform .12s}.speed-control button:hover{color:var(--ink)}.speed-control button:active{transform:scale(.94)}.speed-control button.active{background:var(--ink);color:#fff}.ghost-btn{border:1.5px solid var(--ink);color:var(--ink);font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:999px;padding:10px 22px;font-weight:700;transition:background .2s,color .2s}.ghost-btn:hover{background:var(--ink);color:#fff}.foot-path{color:var(--ink-soft);opacity:.7;text-align:right;text-overflow:ellipsis;white-space:nowrap;max-width:60%;font-size:11.5px;overflow:hidden}.ctx-menu{z-index:300;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid var(--line);min-width:200px;box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;transform-origin:0 0;background:#fffffff0;border-radius:14px;padding:6px;transition:opacity .16s,transform .16s,visibility .16s;position:fixed;transform:scale(.96)}.ctx-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.ctx-item{width:100%;font-family:var(--font-body);color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;font-size:14px;font-weight:700;transition:background .15s;display:flex}.ctx-item:hover{background:var(--ink);color:#fff}.ctx-ico{font-size:16px;line-height:1}.ctx-hint{color:var(--ink-soft);opacity:.75;margin-left:auto;font-size:11px;font-weight:400}.ctx-item:hover .ctx-hint{color:#ffffffb3}.compare{z-index:200;opacity:0;visibility:hidden;pointer-events:none;place-items:center;padding:24px;transition:opacity .3s,visibility .3s;display:grid;position:fixed;inset:0}.compare.open{opacity:1;visibility:visible;pointer-events:auto}.compare-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1d19338c;position:absolute;inset:0}.compare-panel{background:var(--paper);width:min(1120px,100%);max-height:calc(100vh - 48px);box-shadow:var(--shadow);border:1.5px solid #fff9;border-radius:28px;flex-direction:column;padding:26px;transition:transform .35s cubic-bezier(.34,1.4,.64,1);display:flex;position:relative;overflow:hidden;transform:translateY(26px)scale(.96)}.compare.open .compare-panel{transform:translateY(0)scale(1)}.compare-head{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px;display:flex}.compare-tag{letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-size:12px;font-weight:700}.compare-title{font-family:var(--font-display);letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap;max-width:60vw;font-size:24px;font-weight:900;overflow:hidden}.compare-actions{gap:10px;display:flex}.compare-body{flex:1;grid-template-columns:1fr 1fr;gap:18px;min-height:0;display:grid}.compare-col{border:1.5px solid var(--line);background:#ffffffa6;border-radius:20px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.compare-label{letter-spacing:.08em;color:var(--ink-soft);border-bottom:1px solid var(--line);background:#1d19330d;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:11.5px;font-weight:700;display:flex}.compare-tools{align-items:center;gap:4px;display:flex}.c-tool{border:1px solid var(--line);cursor:pointer;width:26px;height:26px;color:var(--ink-soft);background:#ffffffbf;border-radius:8px;place-items:center;padding:0;transition:background .15s,color .15s,transform .12s;display:grid}.c-tool:hover{background:var(--ink);color:#fff}.c-tool:active{transform:scale(.92)}:-webkit-any(.compare-frame:fullscreen,.compare-frame:-webkit-full-screen){background:#fff;padding:24px}:is(.compare-frame:fullscreen,.compare-frame:fullscreen){background:#fff;padding:24px}:-webkit-any(.compare-frame:fullscreen svg,.compare-frame:-webkit-full-screen svg){max-height:none}:is(.compare-frame:fullscreen svg,.compare-frame:fullscreen svg){max-height:none}:-webkit-any(.compare-panel:fullscreen,.compare-panel:-webkit-full-screen){border-radius:0;width:100%;max-height:none}:is(.compare-panel:fullscreen,.compare-panel:fullscreen){border-radius:0;width:100%;max-height:none}:-webkit-any(.compare-panel:fullscreen .compare-body,.compare-panel:-webkit-full-screen .compare-body){flex:1}:is(.compare-panel:fullscreen .compare-body,.compare-panel:fullscreen .compare-body){flex:1}:-webkit-any(.compare-panel:fullscreen .compare-frame,.compare-panel:-webkit-full-screen .compare-frame){min-height:0}:is(.compare-panel:fullscreen .compare-frame,.compare-panel:fullscreen .compare-frame){min-height:0}:-webkit-any(.compare-panel:fullscreen .compare-frame svg,.compare-panel:-webkit-full-screen .compare-frame svg){max-height:none}:is(.compare-panel:fullscreen .compare-frame svg,.compare-panel:fullscreen .compare-frame svg){max-height:none}.compare-frame{min-height:0;color:var(--ink);flex:1;place-items:center;padding:18px;display:grid}.compare-frame svg{object-fit:contain;width:100%;height:100%;max-height:70vh}@media (width<=760px){.compare-body{grid-template-columns:1fr;overflow-y:auto}.compare-frame{min-height:300px}.compare-frame svg{max-height:none}}.rough-accent{display:inline-block}@media (width<=640px){.hero-title{font-size:44px}.stage-frame{min-height:300px}.modal-panel{padding:18px}}