@font-face{font-family:Dosukoi;src:url('dosukoi.woff2') format('woff2');font-display:swap;font-weight:700 900}
:root{--ink:#1f1b2e;--paper:#f4eee1;--gold:#d9a83c;--red:#c8452e;--blue:#2b4c9b;--soft:#cabfb0;--line:rgba(244,238,225,.25)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ink);color:var(--paper);font-family:Dosukoi,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;font-weight:700;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;background:none;border:1px solid var(--line);border-radius:3px;min-height:44px;padding:9px 15px;cursor:pointer;touch-action:manipulation;transition:background .15s,transform .15s}button:hover{background:rgba(244,238,225,.12)}button:active{transform:translateY(2px)}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--red);border-color:var(--red);color:var(--paper);font-size:21px;padding:15px 30px;box-shadow:0 5px 0 #802e25}.primary:hover{background:#dc573e}button[hidden],[hidden]{display:none!important}#lg-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0;touch-action:none}#wash{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,17,32,.87),rgba(20,17,32,.55) 30%,transparent 68%),linear-gradient(0deg,rgba(20,17,32,.45),transparent 40%);opacity:1;transition:opacity .4s}body[data-screen=play] #wash{opacity:0}body[data-screen=result] #wash{background:linear-gradient(0deg,rgba(20,17,32,.85),transparent 65%)}header{position:fixed;left:max(26px,env(safe-area-inset-left));right:max(26px,env(safe-area-inset-right));top:max(22px,env(safe-area-inset-top));height:44px;display:flex;align-items:center;gap:10px;pointer-events:none;z-index:3}header>*{pointer-events:auto}.seal{border:1px solid var(--gold);color:var(--gold);font-size:13px;padding:7px 4px;line-height:1;writing-mode:vertical-rl}.top-actions{margin-left:auto;display:flex;gap:8px}.top-actions button{background:rgba(25,21,39,.8);font-size:12px;padding:7px 11px}#mast{font-size:17px;letter-spacing:.12em}.title-screen{position:absolute;left:7vw;top:19vh;width:470px;max-width:48vw}.eyebrow{font-size:13px;letter-spacing:.22em;color:var(--gold);line-height:1.7}h1{font-size:clamp(60px,7.6vw,112px);letter-spacing:-.07em;line-height:1.18;margin:18px 0 24px;white-space:nowrap}h1 span{display:block;font-size:clamp(17px,2vw,25px);letter-spacing:.13em;margin-top:22px}.intro{font-size:15px;line-height:2.1;color:var(--soft);margin:0}.title-bottom{margin-top:32px;width:320px;max-width:100%}.record{font-size:13px;letter-spacing:.06em;margin:0 0 15px}.record strong{font-size:28px;color:var(--gold);padding:0 6px}#start{width:100%;min-height:62px;letter-spacing:.18em}.control-note{font-size:11px;color:var(--soft);text-align:center;margin-top:17px;line-height:1.7}#play{pointer-events:none}.bout-label{position:absolute;top:93px;left:0;right:0;display:flex;justify-content:center;gap:25px;font-size:10px;color:var(--soft);text-align:center;text-shadow:0 2px 8px #141120}.bout-label b{display:block;font-size:20px;color:var(--paper);padding-top:3px}.bout-label span:first-child b{border-bottom:3px solid var(--blue)}.bout-label span:last-child b{border-bottom:3px solid var(--red)}.bout-label i{font-size:13px;color:var(--gold);font-style:normal;padding-top:17px}.call{position:absolute;left:0;right:0;top:25%;text-align:center;font-size:clamp(27px,4vw,52px);text-shadow:0 3px 3px var(--ink),0 0 20px var(--ink);letter-spacing:.1em}.hint{position:absolute;left:15px;right:15px;bottom:108px;text-align:center;line-height:1.8;font-size:15px;text-shadow:0 2px 6px var(--ink)}.hint:empty{display:none}.guide{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:0;right:0;display:flex;flex-direction:column;gap:8px;align-items:center;font-size:13px;text-shadow:0 2px 5px var(--ink);color:var(--paper)}.guide span:first-child{color:var(--gold);font-size:15px}.result-panel{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:30px max(7vw,25px) max(35px,env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--ink) 25%,rgba(31,27,46,.93) 75%,rgba(31,27,46,.75));border-top:1px solid var(--line)}h2{margin:0;line-height:1.3;letter-spacing:.06em}.result-copy h2{font-size:46px;margin:5px 0 8px}.result-copy p{font-size:14px;margin:6px 0;color:var(--soft);line-height:1.7}.result-meta{font-size:12px;color:var(--gold);line-height:1.8}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:320px;flex-shrink:0}.result-actions .primary{grid-column:1/-1}.result-actions button:not(.primary){font-size:12px}.modal{position:fixed;inset:0;background:rgba(15,12,24,.74);z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;touch-action:auto}.sheet{background:var(--paper);color:var(--ink);border-top:6px solid var(--red);padding:30px;width:min(430px,100%);max-height:90dvh;overflow:auto;box-shadow:0 18px 70px #0007;outline:0;touch-action:pan-y}.sheet h2{font-size:25px;margin:0 0 18px}.sheet p{font-size:14px;line-height:1.9}.sheet button{border-color:rgba(31,27,46,.25)}#modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}#modal-actions button{flex:1;min-width:110px}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0}.setting input{width:58%;accent-color:var(--red)}.setting label{font-size:14px}.setting output{width:2.5em;text-align:right;font-variant-numeric:tabular-nums}.share-preview{width:100%;display:block;margin:10px 0}.sheet .record{font-size:16px;line-height:2}.sheet .record strong{font-size:35px}.subtle{color:#776b64;font-size:11px!important}.share-links{display:flex;gap:10px;flex-wrap:wrap}.share-links a{color:var(--blue);font-size:13px;padding:10px 0;text-decoration:underline}.share-links a[download]{display:inline-block}.sheet img{max-width:100%}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;background:var(--paper);color:var(--ink);padding:13px 20px;border-radius:3px;font-size:13px;text-align:center;max-width:90vw;pointer-events:none;opacity:0;transition:opacity .2s}#toast.show{opacity:1}#lg-load{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ink);gap:12px;transition:opacity .4s}#lg-load.done{opacity:0;pointer-events:none}.load-title{font-size:56px;letter-spacing:-.07em}#lg-load p{font-size:12px;color:var(--soft);margin:4px 25px;text-align:center;line-height:1.8}.load-bar{width:180px;height:3px;background:#ffffff23;margin-top:18px}#lg-fill{height:100%;width:0;background:var(--gold);transition:width .15s}#lg-err{color:#ffb4a8!important;max-width:80vw}
@media(min-width:1100px){body[data-screen=title] #lg-canvas{left:10%;width:90%}}
@media(max-width:700px){header{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(15px,env(safe-area-inset-top));gap:7px}.seal{font-size:10px;padding:5px 3px}#mast{font-size:14px}.top-actions{gap:6px}.top-actions button{font-size:10px;padding:6px 9px}#wash{background:linear-gradient(180deg,rgba(20,17,32,.72),transparent 43%),linear-gradient(0deg,rgba(20,17,32,.92),transparent 42%)}.title-screen{left:0;right:0;top:100px;width:auto;max-width:none;text-align:center;padding:0 18px;bottom:max(24px,env(safe-area-inset-bottom))}.eyebrow{font-size:10px}h1{font-size:67px;margin:9px 0 0}h1 span{font-size:16px;margin-top:9px;letter-spacing:.1em}.intro{display:none}.title-bottom{position:absolute;bottom:0;left:24px;right:24px;width:auto;max-width:360px;margin:0 auto}.record{margin-bottom:8px}.record strong{font-size:23px}#start{min-height:55px;padding:12px 24px}.control-note{font-size:10px;margin-top:13px}.bout-label{top:87px;gap:21px}.bout-label b{font-size:17px}.call{top:25%;font-size:32px}.hint{font-size:13px;bottom:112px;padding:0 13px}.guide{font-size:11px;bottom:max(27px,env(safe-area-inset-bottom))}.guide span:first-child{font-size:13px}.result-panel{display:block;padding:18px 22px max(24px,env(safe-area-inset-bottom));text-align:center}.result-copy h2{font-size:36px;margin:1px 0 4px}.result-copy p{font-size:12px;margin:3px 0}.result-meta{font-size:11px}.result-actions{width:100%;max-width:360px;margin:13px auto 0;grid-template-columns:1fr 1fr;gap:8px}.result-actions .primary{font-size:19px;padding:11px 22px;min-height:48px}.result-actions button:not(.primary){min-height:40px;font-size:11px;padding:8px}.sheet{padding:23px}.sheet h2{font-size:22px}.setting{gap:12px}.setting label{font-size:12px}.setting input{width:53%}}
@media(max-height:590px) and (min-width:701px){.title-screen{top:22%;}.title-screen h1{font-size:65px;margin:8px 0 15px}.title-screen h1 span{margin-top:10px;font-size:18px}.intro{font-size:11px;line-height:1.8}.title-bottom{margin-top:12px;width:250px}.record{margin-bottom:6px}.record strong{font-size:20px}#start{min-height:49px;padding:9px}.control-note{margin-top:11px}.result-panel{padding:15px 5vw 22px}.result-copy h2{font-size:32px}.result-copy p{font-size:12px}.result-actions .primary{padding:12px}}
@media(max-width:700px) and (max-height:650px){.title-screen{top:80px}h1{font-size:55px}.title-bottom{bottom:0}.result-panel{padding:12px 18px 15px}.result-copy h2{font-size:30px}.result-actions{margin-top:9px}.result-copy p{font-size:11px}.bout-label{top:75px}.hint{bottom:85px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* ダイアログ本文だけをスクロールし、閉じる/つづけるを常に残す。 */
.sheet{display:flex;flex-direction:column;overflow:hidden}.sheet h2{flex:0 0 auto}#modal-body{overflow:auto;min-height:0;touch-action:pan-y}#modal-actions{flex:0 0 auto}
/* 横持ちの低い画面は説明を畳み、開始と操作注記を画面内に残す。 */
@media(max-height:450px) and (min-width:701px){.title-screen{top:88px}.title-screen .eyebrow{font-size:10px}.title-screen h1{font-size:48px;margin:4px 0 12px}.title-screen h1 span{font-size:15px;margin-top:8px}.title-screen .intro{display:none}.title-bottom{margin-top:10px}.title-screen .control-note{font-size:9px;margin-top:10px}}

@media(max-height:450px) and (min-width:701px){.bout-label{top:72px}.bout-label b{font-size:15px}.call{top:132px;font-size:25px;line-height:1.2}.result-panel{padding:10px 5vw 12px}.result-copy .eyebrow{font-size:10px}.result-copy h2{font-size:28px;margin:2px 0 4px}.result-copy p{font-size:11px;line-height:1.55;margin:0 0 4px}.result-meta{font-size:10px;line-height:1.6}.result-actions{width:260px;gap:7px}.result-actions .primary{font-size:18px;min-height:44px;padding:9px 18px}.result-actions button:not(.primary){font-size:11px;min-height:36px;padding:6px 10px}}