@font-face{font-family:system-impact;src:local('Impact')}*{box-sizing:border-box} :root{--ink:#191611;--paper:#eee9d9;--acid:#c8ff00;--orange:#ff4c18;--purple:#713bbc;--text:var(--ink);--muted:#5a554d;--surface:#f9f4e5;--edge:var(--ink);--shadow:var(--ink);--lane:#d7d1bd;--soft-purple:#e4d6f4;--link:var(--purple);--bar:var(--ink);color-scheme:light}body{margin:0;background:var(--paper);color:var(--text);font:14px Arial,sans-serif;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.055' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}button,input,select,textarea{font:inherit}button,.upload{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--link);outline-offset:3px}button{border:0;background:none}button:hover{color:var(--link)}header,nav,main,footer{max-width:1080px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:30px 26px 24px}.brand{display:block;width:min(100%,760px);color:var(--text);text-decoration:none}.brand img{display:block;width:100%;height:auto}.brand small{display:block;margin:12px 0 0 18px;font:bold 24px/1.4 monospace;letter-spacing:.5px}main{padding:0 26px}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:3px solid var(--edge);padding:28px 0 34px}h1{font:900 70px/.95 Impact,'Arial Black',sans-serif;letter-spacing:-3px;margin:20px 0}h1 em{color:var(--purple);font-style:normal;text-shadow:2px 2px var(--acid)}.monster{flex-shrink:0;width:210px;height:235px;transform:rotate(9deg);filter:drop-shadow(6px 5px 0 var(--purple))}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:26px}.section-title h2{font:900 23px Impact,'Arial Black',sans-serif;letter-spacing:-.5px;margin:0}.section-title>span{font:11px monospace}footer{display:flex;justify-content:space-between;gap:14px;padding:20px 26px;border-top:2px solid var(--edge);font:10px monospace}.counter{background:var(--bar);color:var(--acid);padding:4px;letter-spacing:1px}#editor .section-title h1{font-size:38px;letter-spacing:-1px}#reset{font:bold 11px monospace;text-decoration:underline;min-height:44px}.editor-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:25px;margin-bottom:30px}.preview-area{min-width:0}.preview-top{display:flex;justify-content:space-between;background:var(--bar);color:var(--acid);font:10px monospace;padding:10px}canvas{display:block;width:100%;height:auto;border:2px solid var(--edge);touch-action:none;background:#fff}.transport{display:flex;align-items:center;gap:12px;padding:12px 0}.transport button{background:var(--acid);border:2px solid var(--edge);width:44px;height:44px}.transport input{min-width:0;flex:1}.transport output{font:10px monospace;white-space:nowrap}input[type=range]{accent-color:var(--purple)}.properties{border:2px solid var(--edge);padding:16px;background:var(--surface);box-shadow:5px 5px var(--purple)}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading h2{font:900 22px Impact,'Arial Black',sans-serif}.panel-heading button{min-width:44px;min-height:44px}label{display:block;font:bold 10px monospace;letter-spacing:.7px}label input:not([type=checkbox]),label textarea,label select{display:block;width:100%;margin:8px 0 15px}textarea,select,input[type=number]{border:2px solid var(--edge);background:var(--paper);color:var(--text);padding:10px;min-width:0;font:14px Arial;letter-spacing:0}textarea{resize:vertical}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.colors{display:flex;gap:14px}.colors label{flex:1}input[type=color]{height:40px;padding:3px;background:var(--paper);border:2px solid var(--edge)}.toggle{display:flex;align-items:center;gap:10px;background:var(--acid);border:2px solid var(--edge);padding:12px;min-height:48px}.toggle input{accent-color:var(--ink);width:20px;height:20px;margin:0}.toggle b{margin-left:auto;font-size:25px}.hint{font:11px/1.6 monospace;color:var(--muted)}.export{width:100%;background:var(--orange);border:2px solid var(--edge);box-shadow:3px 3px var(--shadow);min-height:54px;font:bold 13px monospace;margin:15px 0 5px}.export span{font-size:10px}.export:disabled{opacity:.5}.track{display:flex;align-items:center;gap:9px;margin:7px 0;font:11px monospace}.track-name{width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:36px;text-align:left}.track-name.selected{font-weight:bold;color:var(--link)}.track-lane{flex:1;position:relative;height:32px;background:var(--lane);border:1px solid var(--edge);touch-action:none}.clip{position:absolute;top:3px;height:24px;background:var(--purple);border:1px solid var(--edge);color:white;display:flex;align-items:center;justify-content:space-between;min-width:14px}.clip span{pointer-events:none;overflow:hidden;white-space:nowrap;padding:0 4px}.clip button{height:24px;min-width:14px;padding:0;background:var(--acid);color:var(--ink);cursor:ew-resize}#add-text{width:100%;min-height:44px;border:2px dashed var(--edge);font:bold 12px monospace;background:var(--acid);margin-top:12px}#keyframes{font:11px monospace}#keyframes button{padding:8px;background:var(--soft-purple);margin:3px;border:1px solid var(--edge)}progress{width:100%;accent-color:var(--purple)}#status{font:12px monospace;color:var(--link);min-height:16px}[hidden]{display:none!important}@media(max-width:600px){header{padding:24px 16px}.brand small{font-size:18px;letter-spacing:0;margin-left:8px}main{padding:0 16px}.intro{padding:24px 0;min-height:225px;gap:8px}h1{font-size:clamp(28px,7.7vw,46px);letter-spacing:-1.5px;margin:18px 0}.monster{width:95px;height:125px}.section-title h2{font-size:21px}.section-title>span{font-size:9px}footer{flex-wrap:wrap;font-size:8px;padding:16px}.editor-layout{display:block}.properties{margin-top:20px}.preview-top{font-size:9px}#editor .section-title{margin-top:10px}}
/* Keep the native file input keyboard-accessible without showing its browser chrome. */
.upload input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.upload:focus-within{outline:3px solid var(--link);outline-offset:3px}
#pane-builder{border:2px solid var(--edge);background:var(--surface);padding:14px;margin:8px 0 24px;box-shadow:4px 4px var(--purple)}#pane-builder summary{font:bold 13px monospace;cursor:pointer;min-height:32px}.pane-upload{background:var(--acid);border:2px dashed var(--edge);padding:16px;text-align:center;margin:12px 0 20px}.pane-item{display:flex;align-items:center;gap:8px;border-top:1px solid #aaa;padding:8px 0}.pane-item img{width:44px;height:44px;object-fit:contain;background:#ddd}.pane-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px monospace}.pane-item button{min-width:40px;min-height:44px;background:var(--acid);border:1px solid var(--edge)}.pane-item button:disabled{opacity:.3}

.mode-choices{display:grid;grid-template-columns:1fr;gap:24px;margin:30px 0 48px}
.mode-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:132px;padding:28px 24px;border:4px solid var(--edge);box-shadow:8px 8px var(--shadow);text-align:center;text-decoration:none;font:900 36px/1.15 Impact,'Arial Black',sans-serif;color:var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.video-choice{background:var(--purple);color:var(--acid)}.trad-choice{background:var(--acid)}
.mode-button:hover{color:var(--ink);background:#dfc6f1;transform:translate(-2px,-2px);box-shadow:10px 10px var(--shadow)}
.mode-button:active{transform:translate(6px,6px);box-shadow:2px 2px var(--shadow)}
.editor-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.editor-tools>button,.editor-tools>.upload{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:2px solid var(--edge);background:var(--acid);font:bold 11px monospace}
.canvas-format{display:flex;align-items:center;gap:8px}.canvas-format select{width:auto;margin:0;min-height:44px;font:bold 11px monospace}
@media(max-width:600px){.mode-choices{gap:20px;margin:26px 4px 36px 0}.mode-button{font-size:24px;min-height:104px;padding:24px 12px;box-shadow:6px 6px var(--shadow)}.editor-tools{gap:8px}.editor-tools>button,.editor-tools>.upload{padding:8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.mode-button{transition:none}}

/* Phone layouts are dark by default; larger screens follow system appearance. */
@media (prefers-color-scheme:dark), (max-width:650px){
 :root{--paper:#111015;--text:#eee9df;--muted:#b9b1c5;--surface:#1c1922;--edge:#655a73;--shadow:#050407;--lane:#302a39;--soft-purple:#382849;--link:#c5a1ff;--bar:#09080c;color-scheme:dark;background:var(--paper)}
 body{background-image:none;min-height:100vh;min-height:100dvh}
 h1 em{color:var(--link);text-shadow:2px 2px #314000}
 .video-choice{background:#30203f;border-color:#a879e8;color:#e2cbff}
 .trad-choice{background:#25301a;border-color:#8eaf35;color:var(--acid)}
 .mode-button:hover{background:#3e2d50;color:#fff}
 .transport button,.toggle,.export,.clip button,#add-text,.pane-upload,.pane-item button,.editor-tools>button,.editor-tools>.upload{color:var(--ink)}
 .pane-item{border-color:var(--edge)}
 textarea::placeholder{color:var(--muted)}
}