:root{--ink: #f4f8ff;--muted: #b8c4d4;--panel: rgba(16, 22, 34, .86);--line: rgba(140, 255, 220, .35);--acc: #8cffdc;--hot: #ff6a8a;--font: "M PLUS Rounded 1c", system-ui, sans-serif;--dot: "DotGothic16", monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#10141c;color:var(--ink);font-family:var(--font);user-select:none;-webkit-user-select:none;overscroll-behavior:none;touch-action:manipulation}#view{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh}button{font-family:var(--font);font-weight:800;font-size:15px;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;cursor:pointer}button:hover{border-color:var(--acc)}button.on{background:#8cffdc38;border-color:var(--acc)}button.primary{background:linear-gradient(180deg,#8cffdc,#3ac8a0);color:#062018;border-color:#dfffee}.screen{position:fixed;inset:0;display:none;z-index:2}.screen.show{display:flex}#title,#samples,#saved,#howto,#result{flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;background:radial-gradient(ellipse at 50% 30%,#23304a,#0c1018 75%);overflow-y:auto}#result{background:#080c148c}.logo h1{margin:0;font-family:var(--dot);font-size:clamp(48px,12vw,104px);letter-spacing:.06em;color:#fff;text-shadow:4px 4px 0 #ff6a8a,8px 8px 0 #3a4aa0}.logo p{margin:4px 0 0;text-align:center;font-weight:800;color:var(--acc);letter-spacing:.3em}.lead{max-width:520px;text-align:center;line-height:1.7;margin:0;color:var(--muted)}.lead b{color:var(--acc)}.note{font-size:12px;color:var(--muted);margin:0;text-align:center}.btns{display:flex;flex-direction:column;gap:10px;width:min(320px,100%)}.btns.row{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto}h2{margin:0;font-family:var(--dot);font-size:30px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(900px,100%)}.thumb{display:flex;flex-direction:column;gap:6px;padding:8px;position:relative;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-weight:800;font-size:13px}.thumb .tc{width:100%;height:auto;border-radius:8px;display:block;aspect-ratio:16/9;object-fit:cover}.thumb .del{position:absolute;top:12px;right:12px;padding:4px 8px;font-size:11px}.panel{background:var(--panel);border:1.5px solid var(--line);border-radius:16px;padding:16px 20px;max-width:620px}.panel ul{margin:0;padding-left:18px;line-height:1.8;font-size:14px}.panel.center{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}#resTitle{font-size:48px;color:#fff;text-shadow:3px 3px 0 #ff6a8a}.chk{display:flex;gap:8px;align-items:center;font-size:14px}input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc)}#camera{background:#000;flex-direction:column}#video{width:100%;height:100%;object-fit:contain}.camBar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#000000b3)}.shutter{width:74px;height:74px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.5);box-shadow:0 0 0 4px #000 inset;padding:0}.hint{font-size:12px;color:var(--muted);max-width:140px}.top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:linear-gradient(#0a0e16e6,#0a0e1600);font-size:14px}.top button{padding:6px 12px;font-size:13px}#info{color:var(--muted);font-size:12px;margin-left:auto}#edit{pointer-events:none}#edit>*{pointer-events:auto}#editBar{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:10px 14px max(12px,env(safe-area-inset-bottom));background:#0a0e16eb;border-top:1px solid var(--line)}#editBar .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#editBar .row>span{font-size:13px;color:var(--muted);min-width:92px}#editBar button{padding:7px 12px;font-size:13px}#editBar em{font-style:normal;font-size:12px;color:var(--acc)}#thr{flex:1;min-width:120px;accent-color:var(--acc)}#play{pointer-events:none}#play>*{pointer-events:auto}.hud{font-family:var(--dot);font-size:20px;gap:18px}.hud #hearts{color:var(--hot)}.hud #stars{color:#ffe36a}#pauseBox{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);display:none;flex-direction:column;gap:10px;align-items:center}#pauseBox.show{display:flex}.pad{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));display:none;gap:12px}.pad button,.jump{width:84px;height:84px;border-radius:50%;font-size:28px;background:#1016228c;touch-action:none}.jump{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:none;font-size:15px;width:96px;height:96px;border-color:#ff6a8ab3}body.touch .pad{display:flex}body.touch .jump{display:block}.pad button.on,.jump.on{background:#8cffdc59}#toast{position:fixed;left:50%;top:70px;transform:translate(-50%);background:#0a1e1aeb;border:1px solid var(--acc);padding:8px 16px;border-radius:20px;font-weight:700;opacity:0;transition:opacity .3s;z-index:9;pointer-events:none}#toast.show{opacity:1}@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr)}#info{display:none}}