:root{--ink:#11110f;--paper:#f3f0e8;--card:#faf8f1;--line:#d6d1c5;--accent:#ff593d;--muted:#77746c}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:"Noto Sans JP",sans-serif}body{margin:0;min-height:100vh;background-image:radial-gradient(#cac5ba 0.7px,transparent .7px);background-size:15px 15px}
button,select,input{font:inherit}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 4vw;background:rgba(243,240,232,.94);position:relative}
.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font:500 13px "DM Mono";letter-spacing:.16em}.brand-mark{width:30px;height:30px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:18px}
.privacy{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);letter-spacing:.05em}.privacy span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#48a96c;margin-right:8px}
.help{margin-left:auto;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;background:transparent;cursor:pointer;font:500 13px "DM Mono"}
main{max-width:1480px;margin:auto;padding:60px 4vw 80px}.intro{text-align:center;margin-bottom:48px}.eyebrow{font:500 11px "DM Mono";letter-spacing:.24em;color:var(--accent);margin:0 0 18px}.intro h1{font-size:clamp(36px,4vw,64px);line-height:1.2;letter-spacing:-.055em;margin:0;font-weight:600}.intro h1 em{font-style:normal;color:var(--accent)}.lead{font-size:13px;line-height:2;color:var(--muted);margin:22px 0 0}.ad-unit{position:relative;width:100%;min-height:90px;margin:0 0 32px;text-align:center;overflow:hidden}.ad-label{display:block;margin-bottom:5px;font:400 7px "DM Mono";letter-spacing:.16em;color:#99958d}.adsbygoogle{min-width:0}
.workspace{display:grid;grid-template-columns:250px minmax(400px,1fr) 220px;align-items:start;gap:20px}.panel,.stage-card{background:rgba(250,248,241,.96);border:1px solid var(--line);box-shadow:0 14px 40px rgba(35,31,24,.06)}.panel{padding:24px}.panel-heading{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:19px;margin-bottom:24px}.panel-heading>span{font:500 10px "DM Mono";width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center}.panel-heading h2{font-size:14px;margin:0 0 2px}.panel-heading p{font:400 8px "DM Mono";letter-spacing:.2em;color:var(--muted);margin:0}
.field-label{display:flex;justify-content:space-between;font-size:11px;font-weight:600;margin:23px 0 10px}.field-label output{font:500 10px "DM Mono";color:var(--accent)}
.ratio-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ratio{height:76px;border:1px solid var(--line);background:transparent;display:grid;grid-template-columns:30px 1fr;grid-template-rows:1fr 1fr;padding:13px 10px;text-align:left;cursor:pointer}.ratio-icon{grid-row:1/3;align-self:center;justify-self:center;border:1px solid var(--muted)}.ratio-icon.landscape{width:22px;height:13px}.ratio-icon.portrait{width:11px;height:20px}.ratio-icon.square{width:17px;height:17px}.ratio-icon.classic{width:20px;height:15px}.ratio strong{font:500 11px "DM Mono"}.ratio small{font-size:8px;color:var(--muted)}.ratio.active{border-color:var(--accent);color:var(--accent);background:#fff4f0}.ratio.active .ratio-icon{border-color:var(--accent)}
.range,#timeline{appearance:none;height:3px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 100%,var(--line) 100%);width:100%}.range::-webkit-slider-thumb,#timeline::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);border:3px solid var(--card);box-shadow:0 0 0 1px var(--accent)}
.select-wrap select{width:100%;height:40px;border:1px solid var(--line);background:var(--card);padding:0 10px;font-size:10px}.info-box{display:flex;gap:10px;background:#ece9df;padding:13px;margin-top:24px}.info-box>span{color:var(--accent)}.info-box p{font-size:9px;line-height:1.7;margin:0;color:var(--muted)}.info-box strong{display:block;color:var(--ink)}
.stage-card{padding:10px}.stage-top{height:35px;padding:0 8px;display:flex;justify-content:space-between;align-items:center;font:400 9px "DM Mono";color:var(--muted)}.stage-top>div{display:flex;align-items:center;gap:7px}.stage-top b{color:var(--ink);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-dot{width:6px;height:6px;background:var(--accent);border-radius:50%}
.stage{height:430px;position:relative;overflow:hidden;background:#181815;background-image:linear-gradient(45deg,#1e1e1a 25%,transparent 25%),linear-gradient(-45deg,#1e1e1a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1e1e1a 75%),linear-gradient(-45deg,transparent 75%,#1e1e1a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.stage video{width:100%;height:100%;object-fit:contain;display:none}.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#e9e5d9}.upload-icon{width:58px;height:58px;border:1px dashed #77766f;border-radius:50%;display:grid;place-items:center;margin-bottom:18px}.upload-icon span{font-size:24px;font-weight:200}.empty-state h2{font-size:16px;margin:0 0 7px}.empty-state p{font-size:10px;color:#9f9d95;margin:0 0 18px}.empty-state button{background:var(--accent);border:0;color:white;font-size:11px;font-weight:600;padding:12px 22px;cursor:pointer}.empty-state small{font:400 8px "DM Mono";color:#77766f;margin-top:12px}
.crop-overlay{position:absolute;inset:0}.hidden{display:none!important}.shade{position:absolute;background:rgba(4,4,3,.62);pointer-events:none}.crop-box{position:absolute;border:1px solid white;box-shadow:0 0 0 1px rgba(0,0,0,.25);cursor:move}.crop-box:before,.crop-box:after{content:"";position:absolute;background:rgba(255,255,255,.4)}.crop-box:before{width:1px;height:100%;left:33.333%;box-shadow:calc(var(--crop-w,100px)/3) 0 rgba(255,255,255,.4)}.crop-box:after{height:1px;width:100%;top:33.333%;box-shadow:0 calc(var(--crop-h,100px)/3) rgba(255,255,255,.4)}.crop-box i{position:absolute;width:12px;height:12px;border-color:white}.crop-box i:nth-child(1){left:-1px;top:-1px;border-left:3px solid;border-top:3px solid}.crop-box i:nth-child(2){right:-1px;top:-1px;border-right:3px solid;border-top:3px solid}.crop-box i:nth-child(3){right:-1px;bottom:-1px;border-right:3px solid;border-bottom:3px solid}.crop-box i:nth-child(4){left:-1px;bottom:-1px;border-left:3px solid;border-bottom:3px solid}.drag-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(20,20,18,.65);color:white;font-size:9px;padding:6px 9px;white-space:nowrap;pointer-events:none}
.player{height:49px;display:flex;align-items:center;gap:11px;padding:0 9px}.player button{border:0;background:none;width:24px;padding:0;cursor:pointer}.player .sound-button{width:30px;height:30px;display:grid;place-items:center;border-radius:50%}.sound-button svg{width:25px;height:22px;overflow:visible}.sound-button .speaker{fill:var(--ink)}.sound-button .wave{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}.sound-button .mute-slash{display:none;fill:none;stroke:var(--accent);stroke-width:3.8;stroke-linecap:round;paint-order:stroke;filter:drop-shadow(0 0 1px var(--card))}.sound-button.is-muted{background:#fff0ed}.sound-button.is-muted .wave{opacity:.25}.sound-button.is-muted .mute-slash{display:block}.player span{font:400 9px "DM Mono";color:var(--muted)}#timeline{flex:1;height:2px;background:var(--line)}
.export-panel{padding:24px}.summary{border-top:1px solid var(--line)}.summary div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;font-size:10px}.summary span{color:var(--muted)}.summary strong{font:500 10px "DM Mono"}.export-button{margin-top:22px;width:100%;height:52px;border:0;background:var(--accent);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 17px;cursor:pointer}.export-button:disabled{background:#c9c4b9;cursor:not-allowed}.export-button span{font-size:12px;font-weight:600}.export-button b{font-size:20px}.export-note{text-align:center;color:var(--muted);font-size:8px;line-height:1.6}.progress{height:3px;background:var(--line);margin-top:10px}.progress div{height:100%;width:0;background:var(--accent)}
.mute-option{display:flex;align-items:center;justify-content:space-between;margin-top:18px;cursor:pointer}.mute-option>span{display:flex;flex-direction:column;gap:3px}.mute-option strong{font-size:10px}.mute-option small{font-size:8px;color:var(--muted)}.mute-option input{position:absolute;opacity:0;pointer-events:none}.mute-option i{position:relative;width:34px;height:19px;border-radius:20px;background:#c9c4b9;transition:.2s}.mute-option i:after{content:"";position:absolute;width:13px;height:13px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s;box-shadow:0 1px 3px #0002}.mute-option input:checked+i{background:var(--accent)}.mute-option input:checked+i:after{transform:translateX(15px)}.mute-option input:focus-visible+i{outline:2px solid var(--ink);outline-offset:2px}
footer{border-top:1px solid var(--line);height:70px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;font:400 8px "DM Mono";letter-spacing:.13em;color:var(--muted)}footer p{font-family:"Noto Sans JP";letter-spacing:0}
dialog{width:min(440px,calc(100% - 30px));border:1px solid var(--line);background:var(--card);padding:34px;box-shadow:0 20px 70px #0003}dialog::backdrop{background:#111a}dialog h2{margin-top:0}dialog li{font-size:12px;line-height:2}dialog button{position:absolute;right:15px;top:15px;background:none;border:0;font-size:20px;cursor:pointer}
@media(max-width:1050px){.workspace{grid-template-columns:230px 1fr}.export-panel{grid-column:1/-1;display:grid;grid-template-columns:190px 1fr 200px;gap:20px;align-items:center}.export-panel .panel-heading{margin:0}.export-button{margin:0}.export-note{display:none}}
@media(max-width:760px){.privacy{display:none}main{padding:38px 14px}.intro h1{font-size:38px}.workspace{display:flex;flex-direction:column}.panel,.stage-card{width:100%}.stage{height:58vw;min-height:280px}.export-panel{display:block}.export-panel .panel-heading{margin-bottom:20px}.export-button{margin-top:20px}.topbar{padding:0 16px}footer{padding:0 16px}.lead br{display:none}}