:root{--ink:#261e28;--red:#ea2540;--pink:#ffbfd3;--yellow:#ffe052;--aqua:#a8e6e9;--blue:#569cf1;--purple:#b9a2d9;--cream:#fff6e8;--line:#30232d;--soft:#5d5560}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:ui-rounded,system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}
body:before{content:"";pointer-events:none;position:fixed;inset:0;z-index:-1;opacity:.28;background-image:radial-gradient(#f4c4bb 1.2px,transparent 1.3px);background-size:22px 22px}
button,input{font:inherit}
button{cursor:pointer}button:disabled{cursor:not-allowed}
.page-shell{max-width:1220px;margin:0 auto;min-height:100vh}
.hero{min-height:142px;overflow:hidden;position:relative;display:flex;align-items:center;padding:19px clamp(24px,5.6vw,70px) 21px;background:#fff9f0;border-bottom:3px solid var(--ink)}
.hero-content{position:relative;z-index:2;max-width:calc(100% - 95px)}
.hero-kicker{display:flex;align-items:center;gap:7px;width:max-content;max-width:100%;font-size:10px;font-weight:950;letter-spacing:.16em;color:#85605d}
.hero-kicker .dot{height:9px;width:9px;border-radius:100%;background:var(--red);box-shadow:0 0 0 3px #ffd9cf}
.hero-title{display:flex;align-items:center;gap:clamp(6px,1.4vw,16px);white-space:nowrap;line-height:1;margin:8px 0 9px;font-size:clamp(31px,5.25vw,61px);font-weight:1000;letter-spacing:-.048em;text-shadow:2px 3px 0 white;font-family:Impact,ui-rounded,system-ui,sans-serif}
.hero-times{display:inline-grid;place-items:center;font-family:ui-rounded,system-ui,sans-serif;font-size:.64em;font-weight:1000;color:var(--red);line-height:1;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;width:1.25em;height:1.25em;transform:rotate(-10deg);flex:none;box-shadow:2px 2px 0 var(--ink)}
.hero-muze{color:var(--blue);-webkit-text-stroke:.7px var(--ink);text-shadow:3px 3px 0 var(--yellow)}
.hero-bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-description{font-size:12px;line-height:1.5;margin:0;font-weight:750;color:#64545c}
.unofficial{display:inline-block;padding:4px 10px;background:#f3e1cf;border-radius:99px;color:#615151;font-size:10px;font-weight:750;letter-spacing:.03em;white-space:nowrap}
.hero-scribble{position:absolute;left:0;top:2px}.squiggle{display:block;width:60px;height:38px;border:7px solid var(--blue);border-left:0;border-bottom:0;border-radius:0 38px 0 0;transform:rotate(16deg) translate(-31px,-2px)}.hero-spark{color:var(--red);font-size:31px;position:absolute;left:37px;top:2px;transform:rotate(-25deg)}
.hero-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none}.sunburst{position:absolute;color:var(--yellow);right:3.5%;top:-18px;font-size:118px;text-shadow:4px 5px 0 var(--ink);transform:rotate(18deg);line-height:1}.floating-disc{position:absolute;right:-38px;bottom:-73px;height:145px;width:145px;border:4px solid var(--ink);border-radius:50%;background:var(--aqua);box-shadow:-10px -7px 0 var(--purple)}.floating-star{position:absolute;right:22%;top:58%;font-size:27px;color:var(--pink);-webkit-text-stroke:1.3px var(--ink);transform:rotate(14deg)}.checker{position:absolute;top:15px;right:23%;height:34px;width:34px;transform:rotate(18deg);background:conic-gradient(var(--red) 25%,transparent 0 50%,var(--red) 0 75%,transparent 0) 0 0/17px 17px;opacity:.9}
.ribbon{height:42px;background:var(--ink);color:#fff;display:flex;align-items:center;gap:19px;overflow:hidden;white-space:nowrap;justify-content:space-around;padding:0 8px;font-size:10px;font-weight:950;letter-spacing:.13em}.ribbon-star{color:var(--yellow);font-size:18px}
.workspace{padding:28px clamp(15px,4.5vw,54px) 35px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,354px);gap:15px 23px;grid-template-areas:"stage frames" "stage upload" "stage edit" "stage save" "stage privacy";align-items:start}
.panel{min-width:0;border:2px solid var(--ink);border-radius:20px;background:white;padding:19px 19px 17px;box-shadow:5px 6px 0 rgba(38,30,40,.88)}
.panel-frames{grid-area:frames}.panel-upload{grid-area:upload}.panel-edit{grid-area:edit}.panel-save{grid-area:save}
.panel-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px}.step-marker{font-family:Impact,ui-rounded,system-ui,sans-serif;font-size:22px;font-weight:900;display:grid;place-items:center;background:var(--yellow);color:var(--ink);width:43px;height:43px;flex-shrink:0;border:2px solid var(--ink);border-radius:12px;transform:rotate(-6deg);box-shadow:2px 2px 0 var(--ink)}.panel-upload .step-marker{background:var(--aqua)}.panel-edit .step-marker{background:var(--pink)}.panel-save .step-marker{background:#c6b3ec}
.step-kicker{font-size:9px;letter-spacing:.14em;color:#9a6370;font-weight:900;margin:0 0 2px}.panel h2{font-size:17px;line-height:1.3;letter-spacing:-.035em;font-weight:950;margin:0}
.frame-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frame-card,.frame-placeholder{border:2px solid var(--ink);border-radius:15px;min-height:96px;padding:8px;display:flex;align-items:center;gap:9px;text-align:left;background:#fffaf0;min-width:0;position:relative}
.frame-card[aria-pressed="true"]{background:#ffefba;box-shadow:3px 3px 0 var(--ink)}.frame-card:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.frame-thumb{width:46px;height:75px;object-fit:contain;background:white;border:1px solid #ded6cf;flex:none;box-shadow:1px 2px 2px #0002}.frame-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.frame-title{font-size:13px;font-weight:900;white-space:nowrap}.frame-type{font-size:9px;color:#7a6062;font-weight:800;line-height:1.4}.frame-check{position:absolute;right:8px;top:5px;font-size:13px;font-weight:900;color:var(--red)}
.frame-placeholder{border-style:dashed;border-color:#cbbfc4;background:#faf7f9;color:#a99aa1;align-items:center;justify-content:center;flex-direction:column;gap:0;text-align:center;box-shadow:inset 0 0 0 1px white}.placeholder-plus{font-family:Impact,sans-serif;font-size:24px;line-height:1.15}.placeholder-heading{font-size:9px;font-weight:950;letter-spacing:.02em}.placeholder-sub{font-size:10px;line-height:1.4;margin-top:4px}
.helper-text{font-size:11px;line-height:1.72;color:#72616c;margin:10px 0 0}.helper-text.leading{margin:-2px 0 13px}
input[type=file]{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;pointer-events:none}.upload-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:10px 12px;border:2px solid var(--ink);border-radius:13px;background:var(--red);color:white;cursor:pointer;box-shadow:3px 4px 0 var(--ink);font-weight:950;font-size:15px;transition:transform .15s,box-shadow .15s}.upload-button:hover,.upload-button:focus-within{transform:translate(1px,1px);box-shadow:2px 3px 0 var(--ink)}.upload-symbol{display:grid;place-items:center;border:2px solid white;width:27px;height:27px;border-radius:50%;font-size:21px;line-height:1}.upload-button>span:last-child{font-size:18px}#photoInput:focus-visible+.upload-button{outline:3px solid var(--red)}
.stage{position:relative;overflow:hidden;grid-area:stage;min-width:0;border:3px solid var(--ink);border-radius:25px;background:#d2edf0;box-shadow:8px 9px 0 var(--ink);padding:22px 18px 19px;display:flex;flex-direction:column;gap:12px}
.stage:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#7fc1ca 1.9px,transparent 2px);background-size:18px 18px;opacity:.5}
.stage-top,.stage-center,.stage-bottom{position:relative;z-index:1}.stage-top{display:flex;justify-content:space-between;align-items:center;padding:0 6px}.stage-eyebrow{font-size:10px;letter-spacing:.14em;font-weight:950;color:#256976;margin:0 0 4px}.stage h2{display:flex;align-items:center;gap:10px;margin:0;font-size:23px;font-weight:950;letter-spacing:-.02em}.live-badge{font-size:9px;background:var(--red);color:white;letter-spacing:.12em;padding:4px 7px;border-radius:4px;transform:rotate(6deg)}.stage-star{font-size:50px;color:var(--yellow);-webkit-text-stroke:1.4px var(--ink);transform:rotate(-14deg)}
.stage-center{display:flex;justify-content:center;align-items:center;padding:8px 2px 20px}.frame-scene{position:relative;width:min(100%,365px)}.frame-backdrop{position:absolute;inset:5px -12px -10px;border:3px solid var(--ink);border-radius:25px;background:#ffdd8d;transform:rotate(3deg)}.frame-canvas-wrap{position:relative;overflow:hidden;background:#fff;line-height:0;border:3px solid var(--ink);border-radius:9px;box-shadow:4px 5px 0 var(--ink);touch-action:none}.frame-canvas-wrap canvas{display:block;width:100%;height:auto;cursor:grab;touch-action:none}.frame-canvas-wrap canvas:active{cursor:grabbing}
.stage-bottom{margin:0 auto;background:white;border:2px solid var(--ink);border-radius:30px;min-height:35px;display:flex;gap:8px;justify-content:center;align-items:center;padding:6px 15px;max-width:max-content;box-shadow:2px 3px 0 var(--ink)}.stage-bottom p{font-size:11px;font-weight:800;margin:0;line-height:1.4}.stage-hint-icon{display:grid;place-items:center;font-size:18px;color:var(--red);font-weight:900}.stage-sticker{position:absolute;bottom:80px;right:-23px;display:flex;align-items:center;justify-content:center;gap:4px;z-index:1;width:96px;height:66px;background:var(--yellow);border:2px solid var(--ink);transform:rotate(-11deg);border-radius:15px 24px 16px 25px;box-shadow:2px 3px 0 var(--ink);font-size:26px;color:var(--red)}.stage-sticker span{font-size:13px;line-height:1.05;font-weight:1000;color:var(--ink)}
.slider-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0 9px;font-weight:900;font-size:12px}.slider-top output{background:#fff0b9;padding:3px 8px;min-width:60px;text-align:center;border-radius:6px;border:1px solid var(--ink);font-size:12px;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--red);cursor:pointer;display:block;margin:0 0 17px}input[type=range]:disabled{opacity:.4}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.tool-button{border:1.7px solid var(--ink);border-radius:10px;background:#fff8ed;color:var(--ink);padding:11px 2px;font-size:10px;font-weight:900;line-height:1.3;display:flex;flex-direction:column;align-items:center;gap:4px}.tool-button span{font-size:19px;line-height:1}.tool-button:disabled,.reset-button:disabled{opacity:.45}.tool-button:not(:disabled):hover{background:var(--yellow)}.reset-button{background:transparent;color:#5f4f57;border:0;text-decoration:underline;font-size:11px;font-weight:800;display:block;margin:14px auto 0}
.save-button{width:100%;background:var(--ink);color:white;border:2px solid var(--ink);border-radius:14px;padding:15px 12px;font-size:15px;font-weight:950;min-height:54px;display:flex;gap:8px;align-items:center;justify-content:center;box-shadow:4px 4px 0 #ffaac0}.save-button:not(:disabled):hover{background:var(--red)}.save-button:disabled{opacity:.6;box-shadow:4px 4px 0 #ddd}.button-spark{color:var(--yellow);font-size:19px}.open-button{background:transparent;color:#6b525b;border:0;text-decoration:underline;font-size:11px;font-weight:800;display:block;margin:13px auto 0}.open-button:disabled{opacity:.45}
.privacy-note{grid-area:privacy;display:flex;gap:12px;padding:14px 16px;background:#fdf3d8;border:1px dashed #b79675;border-radius:14px;align-items:flex-start}.privacy-note .privacy-icon{flex:none;display:grid;place-items:center;background:#f9c865;color:#493432;border:1.5px solid var(--ink);height:21px;width:21px;border-radius:50%;font-weight:950;font-size:13px;font-family:Georgia,serif}.privacy-note strong{font-size:12px}.privacy-note p{margin:4px 0 0;font-size:11px;line-height:1.7;color:#6c5960}
.footer{padding:18px clamp(20px,4vw,54px) 29px;text-align:center;color:#78616a;font-size:10px;line-height:1.9}.footer-rule{margin:0 auto 11px;font-family:Impact,system-ui,sans-serif;font-size:18px;letter-spacing:.14em;color:var(--ink)}.footer-rule span{font-size:17px;color:var(--red);padding:0 8px}.footer p{max-width:650px;margin:5px auto}#status{font-weight:750;min-height:18px;color:#b22b47}
@media(max-width:880px){.workspace{grid-template-columns:minmax(0,1fr) 310px;column-gap:17px;padding-left:21px;padding-right:21px}.panel{padding:16px}.hero{padding-left:38px}}
@media(max-width:690px){.hero{min-height:125px;padding:17px 19px 18px}.hero-content{max-width:100%}.hero-title{font-size:clamp(29px,8.8vw,43px);gap:6px;margin:7px 0 7px}.hero-times{border-width:1.5px;box-shadow:1px 1px 0 var(--ink)}.hero-description{max-width:300px;font-size:10.5px;line-height:1.5}.hero-bottom{gap:7px}.unofficial{padding:3px 7px;font-size:9px}.hero-kicker{font-size:8px}.sunburst{font-size:65px;top:-13px;right:-1%}.floating-disc{height:88px;width:88px;right:-48px;bottom:-39px}.floating-star{right:7%;top:57%;font-size:22px}.checker{top:5px;right:16%;width:22px;height:22px;background-size:11px 11px}.hero-scribble{display:none}.ribbon{gap:15px;justify-content:flex-start;padding-left:15px;height:35px;font-size:9px}.workspace{padding:17px 16px 30px;grid-template-columns:minmax(0,1fr);gap:15px;grid-template-areas:"frames" "upload" "stage" "edit" "save" "privacy"}.panel{box-shadow:3px 4px 0 var(--ink)}.stage{box-shadow:5px 6px 0 var(--ink);padding:18px 12px 22px}.stage-center{padding:7px 4px 20px}.frame-scene{width:min(100%,330px)}.stage-sticker{right:-21px;bottom:67px}.frame-grid{gap:12px}.frame-card,.frame-placeholder{min-height:89px}.panel-heading{margin-bottom:12px}.panel-frames{padding-bottom:16px}}
@media(max-width:370px){.hero{padding-left:14px;padding-right:14px}.hero-title{font-size:clamp(25px,8.5vw,30px);gap:4px}.hero-kicker{font-size:8px}.hero-description{font-size:10px;max-width:260px}.hero-bottom{gap:6px}.unofficial{font-size:8px}.frame-thumb{width:39px;height:64px}.frame-card,.frame-placeholder{padding:6px}.frame-copy{gap:3px}.frame-title{font-size:11px}.frame-type{font-size:8px}.panel h2{font-size:15px}.stage h2{font-size:21px}.stage-sticker{transform:rotate(-11deg) scale(.8);right:-20px}.stage-bottom{padding:7px}.stage-bottom p{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}