@charset "UTF-8";
:root{color-scheme:dark;--bg:#111;--border:#34322c;--text:#f4f1e9;--gold:#f3c75e;--font:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif}
.number-with-unit{display:grid;grid-template-columns:minmax(0,1fr) auto 62px;gap:6px;align-items:center;min-width:0}.number-with-unit label{white-space:nowrap}
*{box-sizing:border-box}html{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:absolute;top:var(--viewport-top,0px);left:0;width:100%;height:var(--app-height,100dvh);margin:0;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:grid;grid-template-rows:var(--header-height,61px) minmax(0,1fr) auto;gap:6px;overflow:hidden;background:var(--bg);color:var(--text);font:13px var(--font);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent;outline-offset:3px}button{cursor:pointer;color:inherit}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold)}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,p{margin:0}h2:focus{outline:none}
.site-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #292822;gap:10px}.brand{display:flex;align-items:center;gap:9px}.brand-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--gold);color:#181207;font-size:21px;font-weight:900;transform:rotate(-6deg)}.brand h1{font-size:15px;font-weight:900;letter-spacing:.01em}.brand h1 span{color:var(--gold)}.header-note{color:#8b816b;font:9px Arial,sans-serif;letter-spacing:.14em}

.workspace{--stacked:0;width:100%;max-width:1134px;justify-self:center;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;padding-top:0}
.preview-panel{min-width:0;min-height:0;display:grid;grid-auto-rows:max-content;gap:4px;align-content:start;align-self:start}.stage{justify-self:center;min-width:0;min-height:0;overflow:hidden;border:1px solid #69502c;border-radius:12px;background:#080806;display:flex;align-items:center;justify-content:center}.stage canvas{width:100%;height:100%;min-width:0;min-height:0;display:block;object-fit:contain}
.player{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:10px;background:#1b1b18;padding:10px}.play-button,.primary{border:1px solid #ffe2a0;background:linear-gradient(120deg,#ffe297,#edb843);color:#241b0b;border-radius:8px;font-weight:800}.play-button{min-width:150px;height:60px;font-size:20px;flex-shrink:0}.primary:hover,.play-button:hover{filter:brightness(1.08)}.player input{flex:1;min-width:0;width:100%;height:24px;accent-color:var(--gold);cursor:pointer;margin:0}.time{font:11px Arial,sans-serif;white-space:nowrap;color:#bab09a;font-variant-numeric:tabular-nums}.icon-button{width:42px;height:44px;flex-shrink:0;padding:0;border:0;background:none;font-size:27px;color:#bbb4a3}
.editor-panel{align-self:start;width:100%;min-width:0;border:1px solid var(--border);border-radius:12px;background:#191919;overflow:hidden}#editor{padding:10px}fieldset{border:0;padding:0;margin:0;min-width:0}.step-panel h2{display:flex;align-items:center;gap:10px;font-size:16px;margin-bottom:8px}.step-panel h2 span{font:10px Arial,sans-serif;letter-spacing:.08em;color:var(--gold)}
.text-fields{display:grid;grid-template-columns:42px minmax(0,1fr);gap:5px 8px;align-items:center}.text-fields label{font-size:14px;margin-top:7px;margin:0}input[type=text],input[type=number],select{width:100%;min-width:0;height:34px;border:1px solid #464033;border-radius:6px;background:#10110f;color:var(--text);padding:5px 8px;font-size:16px}input.number-input{color:var(--gold);font-weight:800;font-size:21px}input[aria-invalid=true]{border-color:#ec827a}.check-label{display:flex;align-items:center;gap:7px;font-size:12px;color:#c0b9a9;cursor:pointer}input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;margin:0;flex-shrink:0}.comma-label{margin-top:6px;font-size:12px;margin-left:50px}.error{color:#ff9d92;font-size:11px;line-height:1.5;margin-top:8px}
.timing-fields{display:grid;grid-template-columns:minmax(0,1fr) 82px;align-items:center;gap:8px}.timing-fields label{font-size:16px}.seconds{position:relative}.seconds input{padding-right:24px;font-variant-numeric:tabular-nums}.seconds span{position:absolute;right:9px;top:8px;color:#9c9380;pointer-events:none}.seconds input::-webkit-inner-spin-button{appearance:none}.total-time{margin-top:8px;color:#c7bea9;font-size:14px}.total-time strong{font:800 22px Arial,sans-serif;color:var(--gold);margin:0 6px}.hint{font-size:12px;line-height:1.8;color:#969082;margin-top:6px}
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.theme{border:1px solid #464033;border-radius:7px;background:#11110f;color:#bcb3a0;padding:5px 3px;font-size:11px}.theme.selected{border-color:var(--gold);background:#302a1c;color:var(--gold)}.theme-swatch{display:grid;place-items:center;height:34px;margin:0 2px 5px;border-radius:4px;font-weight:900;font-size:26px;font-style:italic;text-shadow:1px 2px #000}.gold{background:radial-gradient(ellipse,#8d4a14,#2d170b);color:#ffe38c}.rainbow{background:linear-gradient(120deg,#761e2d,#5d4130,#164f4a,#502c78);color:#ffedb1}.neon{background:linear-gradient(135deg,#192a3d,#3c1459);color:#a9f5fd}.effect-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.output-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.output-grid label{display:block;font-size:14px;margin-bottom:5px}.output-grid select{font-size:14px;padding:8px}.export-area{margin-top:10px}.export-button{width:100%;height:40px;font-size:15px}.export-info{font:10px Arial,sans-serif;color:#aaa087;text-align:center;margin-top:7px}.wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #353127;margin-top:8px;padding-top:6px}.wizard-actions button{height:30px;min-width:72px;padding:0 12px;font-size:14px}.secondary{border:1px solid #534b3a;border-radius:7px;background:#222019;color:#d2c9b5}#step-count{font:11px Arial,sans-serif;color:#928570}.wizard-actions .primary{margin-left:auto}.wizard-actions:has(#next[hidden]) #step-count{margin-left:auto}
#export-progress{display:flex;align-items:center;gap:12px;margin-top:10px}progress{width:100%;min-width:0;height:8px;accent-color:var(--gold)}#cancel{white-space:nowrap;font-size:10px;background:none;border:0;color:#c7bda4;text-decoration:underline;padding:5px 0}#status{font-size:11px;line-height:1.5;color:#dbc99d;margin-top:8px}#status:empty{display:none}.download-link{display:block;color:var(--gold);font-size:12px;text-decoration:underline;margin-top:8px;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){body{padding-left:12px;padding-right:12px}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:10px}#editor{padding:10px}.play-button{min-width:110px;font-size:17px}}
@media(max-width:700px){
body{grid-template-rows:var(--header-height,61px) minmax(0,1fr) auto;gap:6px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.brand h1{font-size:13px}.brand-icon{width:24px;height:24px;font-size:18px}.header-note{font-size:7px}
.workspace{--stacked:1;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:6px;padding-top:0}.preview-panel{gap:4px}.stage{border-radius:9px}.player{gap:8px;padding:7px;border-radius:8px}.play-button{height:48px;min-width:110px;font-size:17px}.icon-button{width:30px;height:44px}.time{font-size:9px}
.editor-panel{align-self:start}#editor{padding:10px}.step-panel h2{font-size:16px;margin-bottom:8px}.step-panel h2 span{font-size:9px}.text-fields{grid-template-columns:42px minmax(0,1fr);align-items:center;gap:5px 8px}.text-fields label{margin:0;font-size:14px}.comma-label{margin-top:6px;margin-left:50px;font-size:12px}.wizard-actions{margin-top:8px;padding-top:6px;gap:8px}.wizard-actions button{height:30px;min-width:72px;padding:0 12px;font-size:14px}.timing-fields{gap:8px;grid-template-columns:minmax(0,1fr) 82px}.timing-fields label{font-size:16px}.total-time{margin-top:8px;font-size:14px}.hint{margin-top:6px;font-size:12px}.theme-swatch{height:34px;font-size:26px;margin-bottom:7px;margin:0 2px 5px}.theme{font-size:11px;padding:5px 3px}.effect-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.effect-row .check-label{font-size:12px}.export-area{margin-top:10px}.export-button{height:40px;font-size:15px}.export-info{font-size:9px;margin-top:7px}.output-grid select{font-size:14px}.output-grid label{font-size:14px;margin-bottom:5px}
}
@media(max-height:650px){body{gap:6px}.workspace{padding-top:0;gap:8px}#editor{padding:10px}.step-panel h2{margin-bottom:8px;font-size:16px}.text-fields{grid-template-columns:42px minmax(0,1fr);gap:5px 8px;align-items:center}.text-fields label{margin:0;font-size:14px}.comma-label{margin-top:6px;margin-left:50px;font-size:12px}.wizard-actions{margin-top:8px;padding-top:6px;gap:8px}.theme-swatch{height:34px;margin:0 2px 5px;font-size:26px}.effect-row{gap:10px;margin-top:10px;display:flex;flex-wrap:wrap}.hint{display:none;margin-top:6px;font-size:12px}.total-time{margin-top:8px;font-size:14px}.export-area{margin-top:10px}.player{padding:5px}.play-button{height:44px}.error{font-size:10px;margin-top:4px}}
@media(max-height:440px) and (max-width:700px){body{grid-template-rows:var(--header-height,61px) minmax(0,1fr) auto;gap:4px;padding-bottom:4px}.brand-icon{width:21px;height:21px;font-size:16px}.brand h1{font-size:12px}.workspace{grid-template-rows:auto auto;align-content:start;gap:5px}#editor{padding:10px}.step-panel h2{font-size:16px;margin-bottom:8px}.text-fields{gap:5px 8px;grid-template-columns:42px minmax(0,1fr);align-items:center}input[type=text],input[type=number],select{height:34px;padding-top:4px;padding-bottom:4px;padding:5px 8px}.comma-label{margin-top:6px;margin-left:50px;font-size:12px}.wizard-actions{margin-top:8px;padding-top:6px;gap:8px}.wizard-actions button{height:30px;min-width:72px;padding:0 12px;font-size:14px}.seconds span{top:8px}.timing-fields{gap:8px;grid-template-columns:minmax(0,1fr) 82px}.total-time{margin-top:8px;font-size:14px}.player{gap:5px}.play-button{height:36px;min-width:100px}.icon-button{height:36px}.theme-swatch{height:34px;margin:0 2px 5px;font-size:26px}.export-button{height:40px;font-size:15px}.export-info{margin-top:7px}.error{line-height:1.2}}
@media(max-height:500px) and (min-width:701px){body{grid-template-rows:var(--header-height,61px) minmax(0,1fr) auto;gap:5px;padding-bottom:6px}.workspace{grid-template-columns:minmax(0,1fr) 300px}.step-panel h2{margin-bottom:8px;font-size:16px}.text-fields{gap:5px 8px;grid-template-columns:42px minmax(0,1fr);align-items:center}input[type=text],input[type=number],select{height:34px;padding:5px 8px}.wizard-actions{margin-top:8px;padding-top:6px;gap:8px}.wizard-actions button{height:30px;min-width:72px;padding:0 12px;font-size:14px}.effect-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.effect-row .check-label{font-size:12px}.theme-swatch{height:34px;margin:0 2px 5px;font-size:26px}}

@media(max-width:700px){
 body.keyboard-compact{grid-template-rows:var(--header-height,61px) minmax(0,1fr) auto;gap:4px;padding-bottom:4px}
 .keyboard-compact .brand-icon{width:21px;height:21px;font-size:16px}.keyboard-compact .brand h1{font-size:12px}
 .keyboard-compact .workspace{grid-template-rows:auto auto;align-content:start;gap:5px;padding-top:0}
 .keyboard-compact #editor{padding:8px 12px}.keyboard-compact .step-panel h2{font-size:16px;margin-bottom:7px}
 .keyboard-compact .text-fields{gap:5px}.keyboard-compact input[type=text],.keyboard-compact input[type=number],.keyboard-compact select{height:30px;padding-top:3px;padding-bottom:3px}
 .keyboard-compact .comma-label{margin-top:6px}.keyboard-compact .wizard-actions{margin-top:5px;padding-top:4px}.keyboard-compact .wizard-actions button{height:28px}
 .keyboard-compact .hint{display:none}.keyboard-compact .seconds span{top:8px}.keyboard-compact .timing-fields{gap:8px}.keyboard-compact .total-time{margin-top:6px}
 .keyboard-compact .player{gap:5px;padding:5px}.keyboard-compact .play-button{height:36px;min-width:100px}.keyboard-compact .icon-button{height:36px}
 .keyboard-compact .theme-swatch{height:28px}.keyboard-compact .effect-row{gap:12px;margin-top:12px}.keyboard-compact .export-area{margin-top:12px}.keyboard-compact .export-button{height:38px}.keyboard-compact .export-info{margin-top:7px}
 .keyboard-compact .error{font-size:10px;line-height:1.2;margin-top:4px}
}
@media(max-width:700px){.keyboard-compact .total-time{display:none}}
.text-examples{margin-bottom:8px}.text-examples>p{font-size:12px;color:#b6ab95;margin-bottom:4px}.example-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.example-options button{min-width:0;min-height:36px;padding:4px 2px;border:1px solid #5c4c2e;border-radius:6px;background:#262218;color:var(--gold)}.example-options button:hover{border-color:var(--gold);background:#342b1a}.example-options span{display:block;font-size:10px;font-weight:700;white-space:normal;line-height:1.3}.example-options small{display:block;margin-top:2px;font-size:9px;color:#c0b59c;white-space:normal;line-height:1.3}
@media(max-height:650px){.text-examples{margin-bottom:8px}.text-examples>p{margin-bottom:4px;font-size:12px}.example-options button{min-height:36px;padding:4px 2px}.example-options span{font-size:10px}}
@media(max-width:700px){.keyboard-compact .text-examples{margin-bottom:6px}.keyboard-compact .text-examples>p,.keyboard-compact .example-options small{display:none}.keyboard-compact .example-options button{min-height:24px;padding:3px 2px}.keyboard-compact [data-panel="1"] h2{margin-bottom:4px}}
@media(max-height:500px) and (min-width:701px){.text-examples{margin-bottom:8px}.text-examples>p{margin-bottom:4px;font-size:12px}.example-options button{min-height:36px;padding:4px 2px}.example-options small{display:none;margin-top:2px;font-size:9px}}

@media(min-width:701px) and (max-width:1100px) and (orientation:portrait){.workspace{--stacked:1;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:10px}}

/* Promo images keep their original proportions and share the fitted header height. */
.site-header{display:flex;justify-content:flex-start;flex-wrap:nowrap;gap:12px;padding:4px 0;min-height:0}
.site-header .brand{flex:none}
.promo-links{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;margin-left:auto;height:var(--promo-height,52px)}
.promo-links a{display:block;height:100%;flex:none;border-radius:5px;overflow:hidden}
.home-logo{aspect-ratio:290/291;background:#fff}.game-banner{aspect-ratio:462/174}
.promo-links img{display:block;width:100%;height:100%;object-fit:contain}
.promo-links a:hover{filter:brightness(1.12)}
@media(max-width:700px){
 .site-header{gap:8px}
 .site-header .brand{gap:6px}.site-header .brand h1{font-size:12px;white-space:nowrap}.site-header .brand-icon{width:22px;height:22px;font-size:17px}
 .promo-links{gap:5px}
}

.site-footer{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:12px;line-height:20px;color:#a69c87}
.language-options{display:flex;align-items:center;gap:8px;flex-shrink:0}
.language-options label{display:flex;align-items:center;gap:3px;cursor:pointer;white-space:nowrap}
.language-options input{accent-color:var(--gold);width:13px;height:13px;margin:0}
@media(max-width:400px){.site-footer{font-size:10px;gap:4px}.site-footer a{padding-left:0!important;padding-right:0!important}.language-options{gap:5px}}
.site-footer a{display:inline-block;padding:2px 8px}
.site-footer a:hover{color:var(--gold);text-decoration:underline}
/* App result controls: avoid generic social-widget class names that also hide copying. */
a.export-button{display:flex;align-items:center;justify-content:center}
.result-actions{margin-top:10px;border-top:1px solid #353127;padding-top:10px}
.result-action-buttons{display:grid;grid-template-columns:minmax(0,1fr)}
.result-action-buttons.has-post-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.result-action-button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:34px;padding:5px 2px;border:1px solid #534b3a;border-radius:6px;background:#222019;color:var(--text);font-size:11px;font-weight:700;white-space:nowrap}
.result-action-button:hover{filter:brightness(1.2)}
.result-action-x{background:#080808;border-color:#696969}.result-action-bluesky{background:#123455;border-color:#3378b8}
.result-action-note{margin-top:6px;font-size:11px;line-height:1.4;color:#b6ab95}
@media(max-width:700px) and (max-height:600px){
 .result-actions{margin-top:6px;padding-top:6px}
 .result-action-note{margin-top:4px}
 .export-area{margin-top:6px}
 .download-link{margin-top:4px}
 #export-progress{margin-top:6px}
 #status{margin-top:4px}
 .export-info{margin-top:5px}
}
@media(max-height:440px){.result-actions{margin-top:4px;padding-top:4px}.result-action-button{min-height:30px}.result-action-note{margin-top:2px;font-size:10px;line-height:1.2}}
@media(max-width:700px) and (max-height:440px){
 .output-grid{gap:8px}
 .output-grid>div{display:flex;align-items:center;gap:4px;min-width:0}
 .output-grid label{font-size:11px;margin:0;flex:none}
 .output-grid select{font-size:11px;padding:3px 2px}
 .keyboard-compact .export-area{margin-top:4px}
 .keyboard-compact .export-button{height:32px;font-size:14px}
 .keyboard-compact .export-info{margin-top:4px;font-size:9px;line-height:1.2}
 .site-footer a{padding-top:0;padding-bottom:0}
}
@media(max-height:500px){.site-header .brand h1{font-size:12px;line-height:1.3}}

.text-examples>p{font-weight:600}
.sakura{background:linear-gradient(135deg,#fff1f8,#e989b1);color:#8c2956;text-shadow:1px 1px #fff8}
.emerald{background:linear-gradient(135deg,#063328,#248268);color:#baffd9}
.crimson{background:linear-gradient(135deg,#4c101a,#bc3026);color:#ffdd9a}
.font-controls{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 8px;margin-top:10px}
.font-controls label{font-size:14px}
.font-note{font-size:11px;line-height:1.4;color:#b6ab95;margin-top:4px}
@media(max-width:1199px){
 .theme-options{gap:5px}
 .theme{display:flex;align-items:center;gap:4px;padding:5px 3px;font-size:10px;text-align:left}
 .theme-swatch{flex:none;width:24px;height:28px;margin:0;font-size:20px}
}
@media(max-height:650px){
 .theme-options{gap:4px}
 .theme{display:flex;align-items:center;gap:4px;padding:4px 3px;font-size:10px;text-align:left}
 .theme-swatch{flex:none;width:22px;height:24px;margin:0;font-size:19px}
}
@media(max-height:440px){
 .keyboard-compact .theme-swatch{width:18px;height:20px;font-size:17px;margin:0}
 .theme{font-size:9px;min-height:28px;padding:3px 2px}
 .font-controls{grid-template-columns:auto minmax(0,1fr);margin-top:6px;gap:4px 6px}
 .font-note{display:none}
 .keyboard-compact .effect-row{margin-top:6px;gap:8px}
}
.example-options span{white-space:nowrap}
@media(max-width:360px),(min-width:701px) and (max-width:1199px),(min-width:1200px) and (max-height:599px){.example-options span{font-size:9px}}
/* Roomier controls on wide screens, while keeping the preview size capped. */
@media(min-width:1200px) and (min-height:600px){
 .workspace{max-width:1260px;grid-template-columns:minmax(0,1fr) 440px;gap:20px}
 #editor{padding:14px}
 .step-panel h2{font-size:20px;line-height:1.3;margin-bottom:12px}
 .step-panel h2 span{font-size:12px}
 .text-examples{margin-bottom:12px}
 .text-examples>p{font-size:15px;line-height:1.4;margin-bottom:6px}
 .example-options{gap:8px}
 .example-options button{min-height:52px;padding:6px 4px}
 .example-options span{font-size:13px}
 .example-options small{font-size:11px;margin-top:4px}
 .text-fields{grid-template-columns:52px minmax(0,1fr);gap:8px 10px}
 .text-fields label,.output-grid label{font-size:16px}
 .number-with-unit{grid-template-columns:minmax(0,1fr) auto 72px;gap:8px}
 input[type=text],input[type=number],select{height:42px;font-size:18px;padding:7px 10px}
 input.number-input{font-size:26px}
 .check-label{font-size:14px;line-height:1.4}
 input[type=checkbox]{width:18px;height:18px}
 .comma-label{margin-top:10px;margin-left:62px}
 .wizard-actions{margin-top:12px;padding-top:10px}
 .wizard-actions button{height:38px;min-width:88px;font-size:16px}
 #step-count{font-size:13px}
 .timing-fields{grid-template-columns:minmax(0,1fr) 100px;gap:12px}
 .timing-fields label{font-size:18px}
 .seconds span{top:11px;font-size:15px}
 .total-time{font-size:16px;margin-top:12px}
 .total-time strong{font-size:26px}
 .hint,.error{font-size:14px}
 .theme{font-size:14px;padding:8px 4px}
 .theme-swatch{height:48px;font-size:30px;margin-bottom:8px}
 .effect-row{gap:14px;margin-top:14px}
 .output-grid select{font-size:16px}
 .export-button{height:48px;font-size:18px}
 .export-info,#cancel{font-size:13px}
 #status,.download-link{font-size:14px}
 .time{font-size:13px}
 .site-footer{font-size:13px}
 .result-action-button{font-size:14px;min-height:40px}
 .result-action-note{font-size:13px}
 .font-controls label{font-size:16px}
 .font-note{font-size:12px}
}