@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;600&display=swap";:root{color-scheme:dark;--bg:#071020;--surface:#0c172a;--surface-raised:#111e33;--line:#25344c;--line-soft:#1b2a40;--text:#e6eaf2;--muted:#96a5bc;--gold:#dbbd7f;--gold-light:#f1dcac;--blue:#8cceef;--serif:"Cormorant Garamond","Noto Serif JP",serif;--sans:"Noto Sans JP",sans-serif;font-family:var(--sans);font-synthesis:none;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{background:radial-gradient(ellipse at 12% 10%,#13325150,transparent 46%),radial-gradient(ellipse at 95% 85%,#162c4840,transparent 40%),var(--bg);color:var(--text);min-width:320px;margin:0}body:before{content:"";pointer-events:none;z-index:-1;background-image:linear-gradient(115deg,#0000 49.92%,#75addd0b 50%,#0000 50.08%);background-size:700px 900px;position:fixed;inset:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}a{color:inherit;text-decoration:none}button{color:inherit}svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:4px}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[hidden]{display:none!important}.skip-link{z-index:100;background:var(--gold);color:var(--bg);padding:12px;position:absolute;top:-80px;left:16px}.skip-link:focus{top:16px}.site-header{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;max-width:1440px;height:90px;margin:auto;padding:0 56px;display:flex}.wordmark{font-family:var(--serif);letter-spacing:2px;align-items:center;gap:15px;font-size:25px;font-weight:500;line-height:1.1;display:flex}.wordmark b{color:var(--gold);font-weight:500}.wordmark small{font:10px var(--sans);letter-spacing:3px;color:var(--muted);margin-top:8px;display:block}.brand-emblem{color:var(--gold);font:44px var(--serif);clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);border:1px solid #bfa16c65;place-items:center;width:37px;height:43px;line-height:1;display:grid;position:relative}.site-header nav{color:var(--muted);align-items:center;gap:32px;font-size:13px;display:flex}.site-header nav>a{align-items:center;gap:10px;display:flex}.site-header nav>a span{width:17px;height:17px;font:11px var(--sans);border:1px solid #607085;border-radius:50%;place-items:center;display:grid}.private-note{color:#8397ad;align-items:center;gap:8px;font-size:12px;display:flex}.private-note svg{width:15px;height:15px}.site-header a:hover{color:var(--gold)}main{max-width:1328px;margin:auto;padding:0 32px}.editor-heading{justify-content:space-between;align-items:center;padding:39px 0 30px;display:flex}.eyebrow{font:11px var(--sans);letter-spacing:2.3px;color:var(--gold);align-items:center;gap:12px;margin:0 0 12px;display:flex}.eyebrow span{font-size:16px}h1{letter-spacing:3px;margin:0;font:500 31px/1.5 Noto Serif JP,serif}h1 em{color:var(--gold-light);font-style:normal}.intro{letter-spacing:.7px;color:var(--muted);margin:10px 0 0;font-size:13px}.heading-seal{color:#bfa87866;width:105px;height:105px;font:9px var(--sans);letter-spacing:3px;border:1px solid #b89e6330;border-radius:50%;place-items:center;margin-right:5px;padding:14px;display:grid;position:relative;transform:rotate(-12deg)}.heading-seal:before{content:"";border:1px solid #b89e6325;border-radius:50%;position:absolute;inset:6px}.heading-seal i{font-size:35px;font-style:normal;line-height:1}.workspace{border:1px solid var(--line);background:var(--surface);grid-template-columns:minmax(0,1fr) 374px;align-items:start;display:grid;position:relative;box-shadow:0 20px 80px #0003}.workspace:before{content:"";background:var(--gold);width:75px;height:1px;position:absolute;top:-1px;left:-1px}.preview-panel{border-right:1px solid var(--line);min-width:0;padding:0}.panel-heading{border-bottom:1px solid var(--line-soft);background:#101c2f;justify-content:space-between;align-items:center;height:57px;padding:0 26px;display:flex}.panel-heading h2{font:12px var(--sans);letter-spacing:1.8px;align-items:center;gap:10px;margin:0;display:flex}.panel-heading h2>span:last-child{letter-spacing:0;color:var(--muted);margin-left:3px;font-size:11px}.tiny-diamond{background:var(--gold);width:5px;height:5px;transform:rotate(45deg)}.preview-tag{font:10px var(--sans);letter-spacing:1.5px;color:#a0c7dd;border:1px solid #416478;padding:4px 9px}.stage{aspect-ratio:1.13;isolation:isolate;background:radial-gradient(#102847,#071428 70%);place-items:center;display:grid;position:relative;overflow:hidden}.stage canvas{object-fit:contain;width:100%;height:100%;max-height:650px;display:block}.stage-coordinate{color:#7b9bbe70;font:9px var(--sans);letter-spacing:2.3px;pointer-events:none;z-index:1;position:absolute;top:23px;left:25px}.stage-corner{z-index:2;pointer-events:none;border-style:solid;border-color:#769eba55;width:16px;height:16px;position:absolute}.corner-tl{border-width:1px 0 0 1px;top:15px;left:16px}.corner-tr{border-width:1px 1px 0 0;top:15px;right:16px}.corner-bl{border-width:0 0 1px 1px;bottom:15px;left:16px}.corner-br{border-width:0 1px 1px 0;bottom:15px;right:16px}.stage-caption{pointer-events:none;color:#7294b5;letter-spacing:1.8px;justify-content:space-between;align-items:center;gap:10px;font-size:10px;display:flex;position:absolute;bottom:25px;left:26px;right:26px}.stage-caption span:last-child{letter-spacing:2px;color:#a9bcce;font:11px Noto Serif JP,serif}.loading-state{color:var(--muted);z-index:3;background:#081529;flex-direction:column;justify-content:center;align-items:center;gap:15px;font-size:13px;display:flex;position:absolute;inset:0}.loading-star{color:var(--gold);font-size:55px;animation:2s ease-in-out infinite breathe}.drop-overlay{border:1px dashed var(--gold);z-index:5;color:var(--gold);background:#10223ae8;place-items:center;display:grid;position:absolute;inset:12px}.playback{border-top:1px solid var(--line-soft);background:#0b1628;padding:19px 25px 13px}.playback-top{align-items:center;gap:15px;margin-bottom:14px;display:flex}.play-button{background:#142238;border:1px solid #647996;align-items:center;gap:9px;min-width:93px;height:35px;padding:7px 14px;font-size:12px;display:flex}.play-button:hover{border-color:var(--gold);color:var(--gold)}.play-button svg{fill:currentColor;stroke-width:0;width:15px;height:15px}.icon-button{color:var(--muted);background:0 0;border:0;place-items:center;padding:3px;display:grid}.icon-button:hover{color:var(--gold)}.icon-button svg{width:17px;height:17px}.playback-time{color:#c5d0e0;font-variant-numeric:tabular-nums;gap:8px;font-size:11px;display:flex}.playback-time>span{color:#6d7f98}.loop-control{color:var(--muted);cursor:pointer;align-items:center;gap:7px;margin-left:auto;font-size:11px;display:flex}.loop-control svg{width:15px;height:15px}.loop-control input{width:13px;height:13px;accent-color:var(--gold);margin:0}input[type=range]{-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--gold) 0 var(--range,50%),#293850 var(--range,50%) 100%);cursor:pointer;border:0;border-radius:2px;width:100%;height:4px;margin:10px 0 22px;display:block}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--gold-light);border:0;border-radius:1px;width:10px;height:10px;transform:rotate(45deg);box-shadow:0 0 9px #e9c78222}input[type=range]::-moz-range-thumb{background:var(--gold-light);border:0;border-radius:1px;width:10px;height:10px;transform:rotate(45deg)}input.timeline{--range:0%;height:3px;margin:8px 0 11px}.timeline-labels{color:#798ba5;justify-content:space-between;font-size:10px;display:flex}.timeline-labels span:nth-child(2){padding-left:25px}.preview-footnote{color:#8e9db5;background:#0a1425;align-items:center;gap:9px;min-height:56px;padding:17px 25px;font-size:11px;display:flex}.preview-footnote>span{color:var(--gold);font-size:17px}.preview-footnote button{color:#bcc9d9;text-underline-offset:4px;white-space:nowrap;background:0 0;border:0;margin-left:auto;font-size:11px;text-decoration:underline}.controls{padding:6px 24px 0}.control-section{border:0;border-bottom:1px solid var(--line-soft);min-width:0;margin:0;padding:18px 0 20px}.control-section legend{float:left;align-items:center;gap:10px;width:100%;margin-bottom:16px;font-size:14px;font-weight:500;display:flex}.section-no{font:15px var(--serif);font-variant-numeric:tabular-nums;color:var(--gold);letter-spacing:1px}.section-english{font:9px var(--sans);color:#72839e;letter-spacing:2px;margin-left:auto;font-weight:400}.upload-zone{clear:both;cursor:pointer;background:#17243a60;border:1px dashed #516078;justify-content:center;align-items:center;gap:13px;min-height:82px;padding:15px 8px;transition:background .2s,border-color .2s;display:flex}.upload-zone:hover,.upload-zone.dragging{border-color:var(--gold);background:#24344c80}.upload-zone strong{white-space:nowrap;text-overflow:ellipsis;max-width:237px;font-size:12px;font-weight:500;display:block;overflow:hidden}.upload-zone small{color:#8c9db7;letter-spacing:.2px;margin-top:7px;font-size:10px;display:block}.upload-icon{color:#b9c8da;flex-shrink:0;position:relative}.upload-icon>svg{width:25px;height:25px}.upload-icon>span{background:#142137;font-size:13px;line-height:1;position:absolute;bottom:-1px;right:-5px}.field-hint{color:#8c9db6;margin:9px 0 0;font-size:10px;line-height:1.7}.control-label{clear:both;color:#c8d3e3;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:12px;display:flex}.control-label>span:last-child{color:var(--gold);font-size:10px}.color-presets{align-items:center;gap:7px;margin-bottom:19px;display:flex}.color-preset{white-space:nowrap;background:#0b1629;border:1px solid #32405a;flex:1;justify-content:center;align-items:center;gap:7px;height:34px;padding:7px 10px;font-size:11px;display:flex}.color-preset:hover{border-color:#918267}.color-preset.active{color:var(--gold-light);background:#b99b4f13;border-color:#c4a96e}.swatch{border-radius:50%;width:11px;height:11px;box-shadow:0 0 10px}.gold{color:#ebc474;background:#ebc474}.blue{color:#83d4ff;background:#83d4ff}.violet{color:#d8a1ef;background:#d8a1ef}.custom-color{cursor:pointer;color:#d3dce9;border:1px solid #32405a;flex-shrink:0;place-items:center;width:29px;height:32px;display:grid;position:relative}.custom-color input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.custom-color span{pointer-events:none;font-size:15px}.slider-label{clear:both;justify-content:space-between;align-items:center;font-size:12px;display:flex}.slider-label output{font:14px var(--sans);color:var(--gold-light);letter-spacing:.5px}.slider-label small{color:var(--muted);margin-left:3px;font-size:10px}.control-row{justify-content:space-between;align-items:center;gap:15px;margin:0 0 20px;font-size:12px;display:flex}.control-row select{width:60%;max-width:181px;padding:7px 9px}select{color:#c3d0e1;cursor:pointer;background:#0b1527;border:1px solid #34425b;border-radius:0;min-height:32px;font-size:11px}select:hover{border-color:#a29272}.background-options{align-items:start;gap:9px;display:flex}.background-option{color:var(--muted);background:0 0;border:0;flex-direction:column;flex:1;align-items:center;gap:6px;min-width:0;padding:0;font-size:10px;display:flex}.background-option>span{border:1px solid #41506a;width:100%;height:33px;display:block;overflow:hidden}.background-option.active{color:var(--gold-light)}.background-option.active>span{border-color:var(--gold);box-shadow:0 0 0 2px #daba7610}.background-option:hover>span{border-color:#aa966f}.bg-summon{background:radial-gradient(at 50% 100%,#5985a5,#102845 65%);position:relative}.bg-summon i{color:#a5d8f677;font-size:40px;font-style:normal;line-height:1;position:absolute;top:0;left:calc(50% - 21px);transform:scaleY(.4)}.bg-night{background:radial-gradient(circle at 22% 25%,#9ac8ef 1px,#0000 1.4px),radial-gradient(circle at 65% 70%,#6c8aae 1px,#0000 1.4px),#09172b}.bg-white{background:#eef2f8}.bg-custom{background:var(--custom-bg,#14324a)}.background-color-control{border:1px solid #41506a;flex-shrink:0;width:24px;height:33px;display:block}.background-color-control input{cursor:pointer;background:0 0;border:0;width:100%;height:100%;padding:0}.export-section{border:0;padding-bottom:12px}.format-options{clear:both;background:#081326;border:1px solid #293951;gap:3px;margin-bottom:14px;padding:3px;display:flex}.format-option{color:#92a1b8;white-space:nowrap;background:0 0;border:1px solid #0000;flex:1;padding:8px 1px;font-size:12px}.format-option small{color:#8393ae;margin-top:3px;font-size:9px;font-weight:400;display:block}.format-option.active{color:var(--gold-light);background:#1d2b41;border-color:#3b4d67}.format-option.active small{color:#bac6d6}.format-option:hover{color:var(--gold-light)}.export-options{grid-template-columns:1fr 1fr;gap:13px;display:grid}.export-options label{color:#9aabc2;flex-direction:column;gap:7px;font-size:10px;display:flex}.export-options select{width:100%;padding:6px 8px}.export-hint{color:#94a4bc;min-height:16px;margin:10px 0 12px;font-size:10px;line-height:1.6}.transparent-control{align-items:center;gap:8px;margin-top:12px;font-size:12px;display:flex}.transparent-control input{accent-color:var(--gold);width:14px;height:14px}.primary-button{color:#1a2333;letter-spacing:1px;background:linear-gradient(115deg,#ecd5a4,#d9b777 70%,#cda769);border:1px solid #e9cf98;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:12px 17px;font-size:14px;font-weight:600;transition:filter .2s;display:flex;box-shadow:inset 0 0 0 3px #8d6f3926}.primary-button:hover{filter:brightness(1.09)}.export-button{width:100%}.export-button>span:last-child{color:#72603a;margin-left:auto;font-size:23px;font-weight:400;line-height:1}.export-button>svg{width:17px;height:17px;margin-right:auto}.export-progress{margin-top:12px}.export-progress progress{width:100%;height:5px;accent-color:var(--gold)}.export-progress>div{color:var(--muted);justify-content:space-between;margin-top:4px;font-size:11px;display:flex}.export-progress button{color:var(--gold);background:0 0;border:0;padding:0;font-size:11px}.status-message{overflow-wrap:anywhere;color:#aedbc8;margin:8px 0 0;font-size:11px;line-height:1.7}.status-message:empty{display:none}.status-message.error{color:#ffb0a7}.download-again{color:var(--gold);text-align:center;text-underline-offset:4px;margin-top:12px;font-size:12px;text-decoration:underline;display:block}.how-to{border-bottom:1px solid var(--line-soft);padding:35px 0 30px}.how-to>h2{letter-spacing:1px;color:#bdc8d9;align-items:center;gap:9px;margin:0 0 20px;font-size:12px;font-weight:400;display:flex}.how-to>h2 span{color:var(--gold);font-size:18px}.how-to ol{grid-template-columns:1fr 1fr 1fr;gap:35px;margin:0;padding:0;list-style:none;display:grid}.how-to li{gap:16px;display:flex}.how-to li>span{color:#96825c;font:23px var(--serif);padding-top:1px}.how-to h3{letter-spacing:.4px;color:#cbd4e3;margin:0 0 7px;font-size:12px;font-weight:500}.how-to p{color:#8b9bb2;max-width:310px;margin:0;font-size:11px;line-height:1.9}.site-footer{justify-content:space-between;align-items:center;gap:24px;max-width:1328px;margin:auto;padding:25px 32px 34px;display:flex}.site-footer>span{font:11px var(--serif);letter-spacing:1px;color:#8c9bb1;white-space:nowrap}.site-footer i{color:#b79d6b;margin:0 10px;font-style:normal}.site-footer p{color:#657993;text-align:right;margin:0;font-size:10px;line-height:1.8}.mobile-break{display:none}.noscript-notice{color:#152034;text-align:center;z-index:10;background:#e7cea0;width:100%;padding:20px;position:fixed;bottom:0}.not-found{align-content:center;place-items:center;gap:20px;min-height:100vh;display:grid}.not-found h1{text-align:center;font-size:24px}.not-found .primary-button{margin-top:20px}@keyframes breathe{50%{opacity:.35;transform:scale(.92)}}@media (width>=1441px){.stage{aspect-ratio:1.16}.stage canvas{max-height:690px}}@media (width<=1100px){.site-header{padding:0 32px}.workspace{grid-template-columns:minmax(0,1fr) 342px}.controls{padding-left:19px;padding-right:19px}.stage{aspect-ratio:auto;height:575px}.stage canvas{object-fit:contain}.stage-caption{flex-direction:column;align-items:center;gap:5px}.preview-footnote{flex-wrap:wrap;padding-left:17px;padding-right:17px;font-size:10px}.preview-footnote button{margin-left:0}.color-preset{padding-left:7px;padding-right:7px}.how-to ol{gap:20px}}@media (width<=820px){.site-header{height:77px;padding:0 22px}.site-header nav{gap:17px}.private-note{font-size:10px}.wordmark{gap:10px;font-size:21px}.wordmark small{font-size:9px}.brand-emblem{width:32px;height:38px;font-size:36px}main{padding:0 22px}.editor-heading{padding:27px 0 24px}h1{letter-spacing:2px;font-size:25px}.intro{font-size:12px}.heading-seal{width:80px;height:80px;margin-left:15px;padding:9px;font-size:7px}.heading-seal i{font-size:25px}.workspace{grid-template-columns:1fr}.preview-panel{border-right:0;border-bottom:1px solid var(--line)}.stage{aspect-ratio:1.1;height:auto}.stage canvas{max-height:none}.stage-caption{flex-direction:row}.controls{grid-template-columns:1fr 1fr;column-gap:28px;padding:8px 25px 10px;display:grid}.control-section{padding-top:17px}.control-section:first-child{grid-column:1/-1}.control-section:nth-child(2){border-bottom:0}.control-section:nth-child(3){border-left:1px solid var(--line-soft);padding-left:25px}.section-english{font-size:8px}.color-preset{gap:6px;padding-left:6px;padding-right:6px}.upload-zone{justify-content:center;min-height:74px}.upload-zone strong{max-width:400px}.how-to ol{gap:19px}.how-to li{gap:9px}.site-footer{padding:24px 22px}.site-footer p{font-size:9px}.mobile-break{display:block}}@media (width<=580px){.site-header{height:70px;padding:0 18px}.site-header nav>a{font-size:11px}.site-header .private-note{display:none}.wordmark{letter-spacing:1.8px;font-size:20px}.brand-emblem{width:28px;height:33px;font-size:33px}.wordmark small{letter-spacing:2px;margin-top:6px;font-size:8px}main{padding:0 14px}.editor-heading{padding:25px 6px 24px}.eyebrow{letter-spacing:1.7px;gap:7px;margin-bottom:10px;font-size:8px}.eyebrow span{font-size:12px}h1{letter-spacing:1.3px;font-size:23px}.intro{letter-spacing:0;margin-top:9px;font-size:11px;line-height:1.8}.heading-seal{display:none}.panel-heading{height:45px;padding:0 16px}.panel-heading h2{gap:7px;font-size:10px}.panel-heading h2>span:last-child{font-size:9px}.preview-tag{padding:3px 7px;font-size:8px}.stage{aspect-ratio:1}.stage-coordinate{letter-spacing:1px;font-size:7px;top:20px;left:20px}.stage-caption{letter-spacing:1px;font-size:7px;bottom:22px;left:21px;right:21px}.stage-caption span:last-child{letter-spacing:1px;font-size:8px}.stage-corner{width:12px;height:12px}.playback{padding:15px 17px 12px}.playback-top{gap:12px;margin-bottom:14px}.play-button{min-width:80px;height:31px;padding:6px 10px;font-size:11px}.playback-time{gap:6px;font-size:10px}.loop-control{gap:5px;font-size:10px}.loop-control input{width:11px;height:11px}.loop-control svg{width:13px;height:13px}.timeline-labels{font-size:9px}.preview-footnote{gap:7px;min-height:52px;padding:13px 17px;font-size:10px}.preview-footnote button{margin-left:auto;font-size:9px}.controls{padding:4px 21px 5px;display:block}.control-section{padding-top:23px;padding-bottom:23px}.control-section:nth-child(2){border-bottom:1px solid var(--line-soft)}.control-section:nth-child(3){border-left:0;padding-left:0}.control-section legend{margin-bottom:17px;font-size:14px}.section-english{font-size:10px}.upload-zone{padding:18px 11px}.upload-zone strong{max-width:225px;font-size:12px}.upload-zone small,.field-hint{font-size:10px}.control-label,.slider-label,.control-row{font-size:13px}.color-preset{height:38px;font-size:12px}.custom-color{width:34px;height:37px}.control-row select{padding:9px;font-size:12px}.background-option{font-size:11px}.background-option>span,.background-color-control{height:37px}.format-option{padding:10px 0;font-size:13px}.format-option small{font-size:10px}.export-options label{font-size:11px}.export-options select{min-height:38px;font-size:12px}.export-hint{margin-top:12px;margin-bottom:14px;font-size:11px}.primary-button{min-height:48px}.how-to{padding:29px 9px}.how-to ol{grid-template-columns:1fr;gap:21px}.how-to li{gap:15px}.how-to h3{font-size:12px}.how-to p{max-width:none;font-size:11px}.site-footer{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 23px 28px}.site-footer p{text-align:left;font-size:9px;line-height:1.8}.site-footer>span{font-size:11px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}.stage.transparent-preview{background-color:#182338;background-image:linear-gradient(45deg,#233149 25%,#0000 25%),linear-gradient(-45deg,#233149 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#233149 75%),linear-gradient(-45deg,#0000 75%,#233149 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}@media (width>=821px){.stage{aspect-ratio:auto;background:linear-gradient(#071120,#0b1a2c 63%,#06111e);height:620px}.stage canvas{width:100%;height:100%;max-height:620px}.panel-heading h2,.control-label,.slider-label,.control-row{font-size:13px}.color-preset{font-size:12px}.upload-zone strong{font-size:13px}.field-hint,.export-options label,.export-hint{font-size:11px}.format-option{font-size:13px}.format-option small{font-size:10px}.background-option{font-size:11px}.control-row select,select{font-size:12px}.section-english{font-size:10px}.how-to h3{font-size:13px}.how-to p{font-size:12px}.site-footer p{font-size:11px}}