:root{font-family:Hiragino Kaku Gothic ProN,Yu Gothic,system-ui,sans-serif;color:#f8f0db;background:#192a2d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select,input,a{touch-action:manipulation}button,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid #e2e7d02b;border-radius:7px;background:#25453ebf;padding:10px 13px;font-size:12px;transition:background .2s}button:hover{background:#547565}button:disabled{opacity:.42;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #fbd588;outline-offset:3px}#stage{position:absolute;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}header{position:fixed;left:35px;right:35px;top:28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;text-shadow:0 1px 8px #233e3480}.emblem{font-family:serif;border:1px solid #f4ebce9c;padding:7px 12px;font-size:27px;background:#2c514443;border-radius:3px}h1{font-size:22px;letter-spacing:.17em;margin:4px 0 0;font-weight:500}small,.eyebrow{font-size:9px;letter-spacing:.2em}.header-right{display:flex;gap:10px;align-items:center}.tag{font-size:11px;margin-right:15px;letter-spacing:.12em;text-shadow:0 1px 5px #182c24}#intro{position:fixed;left:38px;top:137px;text-shadow:0 2px 10px #1b39276b}#intro .eyebrow{font-size:11px;letter-spacing:.2em}#intro p{font-family:serif;line-height:1.9;font-size:25px;letter-spacing:.13em;margin:12px 0}#panel{position:fixed;right:30px;top:112px;width:280px;max-height:calc(100dvh - 164px);overflow:auto;background:#153d35e8;border:1px solid #d9e7c331;border-radius:13px;padding:20px;box-shadow:0 12px 36px #23302b30;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);scrollbar-width:thin}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-heading small{color:#a5b4a3}.panel-heading h2{font-size:16px;font-weight:500;margin:7px 0 0;letter-spacing:.05em}#collapse{padding:2px 9px;background:transparent;border:0;font-size:22px}.primary{width:100%;display:flex;justify-content:space-between;background:#eaca87;color:#243d32;font-size:15px;font-weight:600;border:0;padding:15px}.primary:hover{background:#ffdda0}.row{display:flex;gap:7px;margin-top:8px}.row>*{flex:1;padding:9px 6px;font-size:11px}.divider{height:1px;background:#d1dfca26;margin:18px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{font-size:10px;color:#c6d2c0;display:block;letter-spacing:.06em}select{display:block;width:100%;margin-top:6px;padding:8px 5px;background:#1a332ee0;color:#f3efd9;border:1px solid #dce8d329;border-radius:5px;font-size:11px}.wide{margin-top:13px}.checks{display:flex;justify-content:space-between;margin:12px 0 17px}.checks label{display:flex;align-items:center;gap:4px;font-size:10px}.checks input{accent-color:#e7c477}details{border-top:1px solid #cdddc326;padding-top:14px;margin-top:13px}summary{list-style:none;cursor:pointer;font-size:12px}summary:after{content:"＋";float:right;color:#aabda9}details[open]>summary:after{content:"−"}summary span{font-size:9px;opacity:.6;margin-left:8px}.hint{font-size:10px;line-height:1.9;color:#bbccb9;letter-spacing:.02em}.resolution{align-self:end;padding-bottom:9px;font-size:10px;opacity:.7}.record{width:100%;margin-top:12px;border-color:#e9bd7866;color:#f5d099}#download{display:block;text-align:center;font-size:12px;padding:11px;border:1px solid #e7c985;border-radius:6px;color:#f7d79b;margin:10px 0}#reset{width:100%;margin-top:8px}.subtle{color:#e1d2ae;font-size:10px}#state{position:fixed;bottom:77px;left:38px;display:flex;align-items:center;gap:13px;border-left:2px solid #e6d2a0;padding:12px 17px;background:#20433be6;border-radius:0 8px 8px 0;box-shadow:0 4px 20px #213a3325}#dot{width:7px;height:7px;background:#c4d59f;border-radius:100%;box-shadow:0 0 10px #cee9aa60}#dot.active{background:#ff9b67}#state small{display:block;color:#b4c5af;font-size:8px}#phase{display:block;font-size:13px;font-weight:500;margin-top:5px;letter-spacing:.04em}#fps{font-size:9px;color:#a5bda8;margin-left:15px}footer{position:fixed;left:38px;right:35px;bottom:28px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;text-shadow:0 1px 7px #183323}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#213e36f2;padding:13px 20px;border-radius:8px;font-size:12px;transition:.3s;width:max-content;max-width:90vw;text-align:center;z-index:30}#toast.visible{opacity:1;transform:translate(-50%)}#show{position:fixed;right:15px;bottom:15px;opacity:.25}#show:hover{opacity:1}.clean .overlay,[hidden]{display:none!important}progress{width:100%;height:6px;accent-color:#e2c686;margin-top:10px}.error{padding:60px}body:has(#aspect option[value="9:16"]:checked){background:#182b2e}@media(max-width:800px){header{left:18px;right:18px;top:18px}.tag,#intro{display:none}.emblem{font-size:19px;padding:5px 9px}h1{font-size:17px}.brand small{font-size:7px}.header-right{gap:5px}.header-right button{font-size:10px;padding:8px}#panel{right:15px;top:95px;width:240px;padding:15px;max-height:calc(100dvh - 170px)}footer{left:18px;right:18px;bottom:18px}footer span:last-child{display:none}#state{left:18px;bottom:48px;padding:8px 12px}#phase{font-size:11px}#fps{display:none}}@media(max-width:520px){#panel{top:auto;bottom:100px;width:210px;max-height:50dvh;right:12px}#panel .panel-heading{margin-bottom:12px}#panel h2{font-size:14px}.brand{gap:7px}.header-right #hide,#intro{display:none}#state{bottom:40px}footer{bottom:14px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}#panel .panel-heading{position:sticky;top:-20px;background:#153d35;z-index:3;padding:10px 0}@media(max-width:800px){#panel .panel-heading{top:-15px}}@media(max-width:520px){.header-right #hide{display:block;font-size:0;padding:8px}.header-right #hide:after{content:"画面のみ";font-size:9px}.header-right #sound{font-size:9px;padding:8px}.brand{gap:5px}.brand h1{font-size:15px}.brand small{font-size:6px}}.presets{display:grid;gap:5px;grid-template-columns:1fr}.presets button{font-size:11px;padding:8px;text-align:left;border-color:#d2b98566}.variant-grid{margin-top:12px}#variant-note{margin:9px 0 12px;font-size:9px}