@charset "UTF-8";
:root{--paper:#f7f3ed;--ink:#2a2e37;--ink-muted:#777a82;--line:#ded9d4;--rose:#a84d61;--rose-deep:#8b3952;--panel:#fffdf9}
*{box-sizing:border-box}
html{color-scheme:light;scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #7c639f;outline-offset:3px}
button:disabled{opacity:.45;cursor:wait}
.masthead{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,70px);gap:12px}
.logo{font-weight:850;font-size:16px;letter-spacing:.025em;white-space:nowrap}
.logo span{color:#9a606b;font-size:11px;font-weight:680;letter-spacing:.12em}
.meta{color:#7f7b7b;font-size:12px;white-space:nowrap}
.dot{display:inline-block;height:7px;width:7px;margin:0 4px 1px 6px;border-radius:100%;background:#bb8b67}
.workspace{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.26fr) minmax(340px,.74fr);gap:clamp(20px,3vw,48px);padding:clamp(18px,2.5vw,36px) clamp(20px,4vw,70px) 45px;align-items:start}
.viewer{overflow:hidden;border:1px solid #d2c5c0;background:#d7aca5;min-width:0}
.stage-bar{height:52px;background:#f8e5e2;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 22px;border-bottom:1px solid #d4b7b5}
.stage-name{font-weight:780;font-size:14px;color:#603d49}
.view-switch{border-radius:5px;background:#edcfce;border:1px solid #dfb7b8;padding:3px;display:flex;gap:2px}
.view-switch .switch{border:0;border-radius:3px;min-width:75px;min-height:32px;padding:6px 12px;background:transparent;color:#7d5662;font-weight:700;font-size:12px}
.view-switch .switch[aria-pressed=true]{background:#fffaf7;color:#813c54;box-shadow:0 1px 4px #815c5c21}
.stage{min-height:0;display:flex;position:relative;align-items:center;justify-content:center;overflow:hidden;background:#cfa7a1;
background-image:linear-gradient(180deg,#d5aba4 0%,#c9a3a0 100%)}
#portrait{display:block;width:auto;height:min(69svh,680px);max-width:100%;object-fit:contain;image-rendering:pixelated}
.stage-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#593d45;background:#fbeceaee;font-size:13px;padding:12px 18px;border-radius:6px;white-space:nowrap}
.stage-loading[hidden]{display:none}
.speech{min-height:70px;background:#373342;color:#fff3ee;padding:18px 24px;display:flex;align-items:flex-start;gap:13px}
.speech-marker{font-size:10px;color:#dc989e;margin-top:6px}
.speech p{margin:0;line-height:1.75;font-size:15px;font-weight:560;min-height:1.5em}
.stage-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 19px;background:#f6e9e5;font-size:11px;color:#956d77}
.editor{padding:8px 0 0;min-width:0}
.editor-heading{margin-bottom:26px}
.eyebrow{font-size:11px;letter-spacing:.14em;color:#af657a;font-weight:820}
.editor-heading h1{font-size:clamp(26px,2.8vw,35px);letter-spacing:-.04em;margin:9px 0 12px;line-height:1.3}
.editor-heading p{color:#73747c;font-size:13px;line-height:1.8;margin:0;max-width:400px}
.control-group{border-top:1px solid var(--line);padding:18px 0 22px}
.group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px}
.group-heading h2{font-size:15px;font-weight:800;margin:0}
.group-heading span{font-size:11px;color:#96939a}
.emotion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.emotion-grid button,.variant-grid button{min-height:46px;border-radius:7px;border:1px solid #e0d8d5;background:#fffdfa;font-weight:750;font-size:12px;color:#6b6970;padding:8px 3px}
.emotion-grid button[aria-pressed=true],.variant-grid button[aria-pressed=true]{color:#943b53;border-color:#c88798;background:#fff0f1;box-shadow:inset 0 0 0 1px #d1a1ae}
.emotion-grid button:active,.variant-grid button:active{transform:translateY(1px)}
.toggle-row{margin-top:14px;display:flex;align-items:center;gap:11px;font-size:12px;min-height:38px;color:#6d6970;cursor:pointer}
.toggle-row input{position:absolute;opacity:0;width:1px;height:1px}
.toggle-track{width:38px;height:21px;flex-shrink:0;border-radius:30px;background:#c9c5c5;position:relative;transition:background .2s}
.toggle-track::after{content:"";position:absolute;width:15px;height:15px;background:white;border-radius:50%;left:3px;top:3px;transition:transform .2s;box-shadow:0 1px 2px #0003}
.toggle-row input:checked+.toggle-track{background:#b46c82}
.toggle-row input:checked+.toggle-track::after{transform:translateX(17px)}
.toggle-row input:focus-visible+.toggle-track{outline:3px solid #7c639f;outline-offset:4px}
.hint{font-size:12px;color:#7f7a80;line-height:1.7;margin:0 0 15px}
.transport{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:9px}
.play-button,.stop-button{min-height:49px;border-radius:7px;font-size:14px;font-weight:800}
.play-button{background:var(--rose-deep);color:#fff;border:1px solid var(--rose-deep);display:flex;gap:12px;align-items:center;justify-content:center}
.play-button:disabled{cursor:wait}
.play-button #play-icon{font-size:14px}
.stop-button{border:1px solid #d2c4c7;color:#70515b;background:transparent}
.stop-button:disabled{cursor:default}
.timeline{margin-top:15px}
.track{height:5px;background:#ddd5d2;border-radius:3px;overflow:hidden}
.track-fill{height:100%;width:0%;background:#ad6077;transition:width .09s linear;border-radius:3px}
.time{margin-top:6px;display:flex;justify-content:space-between;color:#969298;font-size:11px;font-variant-numeric:tabular-nums}
.variant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.variant-grid button{display:flex;justify-content:center;align-items:center;gap:8px}
.variant-grid i{width:19px;height:19px;border-radius:50%;background:linear-gradient(90deg,var(--hair) 0 55%,var(--dress) 55%);border:1px solid #0002;flex-shrink:0}
.review{border-top:1px solid var(--line)}
.review summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;min-height:58px;font-size:13px;font-weight:740;color:#56515b;padding:0 2px}
.review summary::-webkit-details-marker{display:none}
.review summary span{font-weight:450;font-size:19px;color:#99677b}
.review[open] summary span{transform:rotate(45deg)}
.review p{color:#77727a;font-size:12px;margin:0 0 13px}
.review img,.review video{display:block;width:100%;height:auto;border:1px solid #ded2cd;margin-bottom:20px;background:#d6ada5}
.work-note{font-size:12px;color:#868089;line-height:1.75;margin:23px 0 0}
.foot{max-width:1440px;margin:0 auto;border-top:1px solid var(--line);padding:18px clamp(20px,4vw,70px) 25px;color:#99939a;font-size:10px;letter-spacing:.08em;display:flex;justify-content:space-between}
.foot span{letter-spacing:normal}
@media(max-width:900px){.workspace{grid-template-columns:1fr;max-width:660px;padding:0 0 30px;gap:0}.viewer{border-top:0;border-left:0;border-right:0}.editor{padding:25px 20px 0}.editor-heading{margin-bottom:24px}.stage{max-height:none}#portrait{height:min(55svh,530px)}.masthead{height:54px;padding:0 19px}.stage-bar{height:46px}.stage-foot{font-size:10px}.foot{padding:18px 20px 26px}}
@media(max-width:440px){.masthead .logo{font-size:13px}.masthead .logo span{font-size:9px}.meta{font-size:10px}.stage-name{font-size:12px}.stage-bar{padding-left:15px}.view-switch .switch{min-width:66px;min-height:33px;padding:7px 8px}#portrait{height:min(51svh,460px)}.speech{padding:13px 17px;min-height:60px}.speech p{font-size:13px}.emotion-grid{gap:7px}.emotion-grid button{min-height:44px;font-size:11px}.editor-heading h1{font-size:26px}.editor{padding:21px 17px 0}.transport{grid-template-columns:minmax(0,1fr) 95px}.variant-grid button{font-size:11px}.foot span{display:none}}
@media(prefers-reduced-motion:reduce){.track-fill,.toggle-track,.toggle-track:after{transition:none}}