:root{
 --paper:#f7f5ee;--card:#fff;--ink:#233d34;--muted:#52665b;--green:#245e4e;--green-2:#2f7a63;--mint:#e4eee4;--sage:#e7eee0;--line:#c8d5c9;
 --sun:#f2b84b;--sun-soft:#fff3dc;--focus:#d27c41;--warn-bg:#fff0e4;--warn:#8c431b;
 --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
 --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
 font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.7;font-synthesis:none;-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);min-height:100vh}
[hidden]{display:none!important}
.ph{display:inline-block}

/* ---- サイトの枠 ---- */
#help{white-space:nowrap;flex-shrink:0}
.topline #leave{min-height:40px;padding:6px 14px;font-size:14px;margin-left:auto}
header.site{max-width:1120px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:20px;line-height:1.35;color:var(--green);text-decoration:none}
.brand span{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
main{max-width:960px;margin:28px auto;padding:0 24px;min-height:65vh}
footer.site{text-align:center;color:#66756b;font-size:12px;padding:24px}
h1{font-size:clamp(28px,4.6vw,46px);line-height:1.4;margin:10px 0 18px;letter-spacing:.01em}
h2{font-size:clamp(21px,3vw,26px);line-height:1.55;margin:10px 0 16px}
h3{font-size:18px;margin:22px 0 8px}
p{margin:12px 0}
a{color:var(--green)}

/* ---- ボタン ---- */
button,input,a.link{font:inherit}
button,.link{min-height:48px;border-radius:14px;padding:10px 20px;border:1.5px solid var(--green);background:var(--green);color:#fff;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s,transform .1s}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default;transform:none}
.quiet{color:var(--green);background:transparent;border-color:var(--line)}
.selected,.quiet.selected{background:var(--mint);border:2px solid var(--green);color:var(--green)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---- 共通パーツ ---- */
.card{background:var(--card);padding:28px;border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 24px #203a290a;margin:18px 0}
.center{text-align:center}
.small{font-size:13px;color:var(--muted)}
.eyebrow{font-size:13px;letter-spacing:.1em;color:#577668;font-weight:600}
.lead{font-size:18px}
.badge{display:inline-block;border-radius:99px;background:var(--mint);padding:3px 13px;font-size:13px;font-weight:700;color:var(--green)}
.notice{background:var(--mint);padding:14px 18px;border-radius:14px;margin:16px 0}
.notice.error{background:var(--warn-bg);color:var(--warn)}
.hint{background:var(--sun-soft);padding:14px 18px;border-radius:14px}
.topline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:10px 0}
.code-small{font-weight:700;letter-spacing:.08em}
.status{font-size:13px;color:var(--muted);margin:4px 0 10px}
.status.offline,.ctl-status.offline{color:var(--warn)}
.progress{height:6px;background:#dce5d9;border-radius:99px;overflow:hidden}
.progress span{display:block;background:var(--green);height:100%;transition:width .4s ease}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 8px}
.actions.secondary button{min-height:44px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0}
.chips span{background:var(--sage);border-radius:99px;padding:6px 16px;font-weight:700}
.guide{padding:22px;background:var(--sage);border-radius:32px;text-align:center;display:grid;align-content:center;justify-items:center}
.guide img{width:min(160px,40vw);aspect-ratio:1;object-fit:contain}
.guide p{font-size:15px;margin:8px 0 0}
.wait .guide,.end .guide,.result-card .guide{background:none;padding:0}
.wait .guide img,.end .guide img,.result-card .guide img{width:120px}

/* ---- 入口 ---- */
.hero{display:grid;grid-template-columns:1.7fr 1fr;gap:32px;align-items:center;padding:18px 0}
.badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 0}
.badges li{background:var(--mint);border-radius:99px;padding:4px 14px;font-size:14px;font-weight:700;color:var(--green)}
.cards{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin:18px 0}
.cards .card{margin:0;min-width:0}
.hero>*{min-width:0}
.join-card{border:2px solid var(--green)}
.join label{display:block;font-weight:700;margin:4px 0 8px}
.join-row{display:flex;gap:10px}
.join input{flex:1;min-width:0;width:100%;padding:12px 14px;border:1.5px solid #839b8d;border-radius:14px;font-size:26px;letter-spacing:.25em;color:var(--green);font-weight:700;text-align:center}
.join input::placeholder{color:#c5cfc7}
.host-entry{margin:22px 0;border:1px dashed var(--line);border-radius:18px;padding:4px 20px}
.host-entry summary{cursor:pointer;font-weight:700;color:var(--green);padding:12px 0;min-height:44px}
.host-entry[open]{padding-bottom:20px;background:#fbfaf5}
.info{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}

/* ---- 参加者の画面 ---- */
.wait h1,.end h1{font-size:clamp(26px,4vw,36px)}
.agenda{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px}
.agenda li{display:flex;gap:12px;align-items:center;font-size:18px;font-weight:700;background:#fafbf7;border:1px solid var(--line);border-radius:14px;padding:10px 16px}
.agenda span{color:var(--green);font-size:20px}
.grid-char{font-family:var(--mincho);font-size:min(46vw,190px);line-height:1;width:min(68vw,260px);aspect-ratio:1;margin:12px auto;display:grid;place-items:center;border:2px solid #b7c7b9;border-radius:22px;background:linear-gradient(90deg,transparent calc(50% - .5px),#dfe7de calc(50% - .5px),#dfe7de calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#dfe7de calc(50% - .5px),#dfe7de calc(50% + .5px),transparent calc(50% + .5px)),#fffdf8}
.reading{font-size:30px;font-weight:800;color:var(--green);margin:8px 0 0}
.examples{font-size:18px;font-weight:700;margin:4px 0}
.reactions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 8px}
.react{background:#fafbf7;color:var(--ink);border-color:var(--line);font-size:17px;min-height:56px;padding:8px}
.react.selected{background:var(--sun-soft);border:2px solid var(--focus);color:var(--ink)}
.points{display:grid;gap:10px;margin:16px 0}
.points div{display:grid;grid-template-columns:7em 1fr;gap:12px;background:#fafbf7;border-radius:14px;padding:12px 16px;border:1px solid var(--line)}
.points dt{font-weight:800;color:var(--green)}
.points dd{margin:0;font-weight:600}
.question h2{font-size:clamp(22px,3.4vw,28px)}
.choices{display:grid;gap:10px}
.choice{justify-content:flex-start;text-align:left;background:#fafbf7;color:var(--ink);border-color:var(--line);font-size:20px;padding:14px 18px;min-height:60px}
.choice span{color:var(--green);font-weight:800;margin-right:6px}
.choice.selected{background:var(--mint);border:2px solid var(--green)}
.drawing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:620px;margin:16px auto}
.drawbox label{display:block;text-align:center;font-size:14px;font-weight:700;margin-bottom:6px}
.drawbox canvas{display:block;width:100%;aspect-ratio:1;background:linear-gradient(90deg,transparent 49.7%,#dde5dc 49.7%,#dde5dc 50.3%,transparent 50.3%),linear-gradient(transparent 49.7%,#dde5dc 49.7%,#dde5dc 50.3%,transparent 50.3%),#fffdf8;border:2px solid #839b8d;border-radius:17px;touch-action:none;cursor:crosshair}
.drawtools{display:flex;gap:8px;margin-top:8px}
.drawtools button{flex:1;padding:6px 3px;font-size:14px;min-height:44px}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
.comparison canvas{width:100%;aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:#fffdf8}
.model{font-family:var(--mincho);font-size:clamp(52px,9vw,110px);text-align:center;line-height:1.4;background:var(--mint);border-radius:12px}
.answer-word{font-size:38px;font-weight:800;color:var(--green);margin:8px 0}
.selfcheck{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.selfcheck .selected{background:var(--green);color:#fff}
.choice.result{cursor:default;display:flex;align-items:center;min-height:52px;border:1.5px solid var(--line);border-radius:14px;opacity:.55}
.choice.result.is-answer{opacity:1;background:var(--mint);border:2px solid var(--green)}
.choice.result.is-mine{opacity:1}
.choice.result.is-mine:not(.is-answer){border:2px solid var(--focus);background:var(--sun-soft)}
.choice.result em{margin-left:auto;font-style:normal;font-size:13px;color:var(--muted);font-weight:700;padding-left:8px;white-space:nowrap}
.verdict{font-size:20px;font-weight:800;margin:16px 0 4px}
.verdict.ok{color:var(--green);font-size:24px}
.overlay{position:relative;aspect-ratio:1;border:2px solid #b7c7b9;border-radius:16px;overflow:hidden;background:linear-gradient(90deg,transparent 49.7%,#e6ece5 49.7%,#e6ece5 50.3%,transparent 50.3%),linear-gradient(transparent 49.7%,#e6ece5 49.7%,#e6ece5 50.3%,transparent 50.3%),#fffdf8}
.overlay .ghost{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mincho);font-size:min(30vw,190px);line-height:1;color:#2f7a6340;user-select:none}
.overlay canvas{position:absolute;inset:0;width:100%;height:100%}
.checkpoints{background:var(--sun-soft);border-radius:14px;padding:12px 18px;margin:14px 0}
.checkpoints ul{margin:6px 0 0;padding-left:1.2em}
.grade button{flex:1;min-height:56px;font-size:18px}
.result-card .score{margin:8px 0 12px}
.score-num{font-size:20px;font-weight:700;margin:4px 0}
.score-num b{font-size:64px;color:var(--green);line-height:1.1}
.score-line{font-size:20px;font-weight:800}
.my-rank{background:var(--sun-soft);border-radius:16px;padding:12px 16px;margin:12px 0}
.my-rank p{margin:0}
.my-rank-num{font-size:18px;font-weight:700}
.my-rank-num b{font-size:44px;color:var(--green);line-height:1.2}
.my-rank-num span{display:block;font-size:14px;color:var(--muted)}
.my-rank button{margin-top:8px}
.feedback{display:grid;gap:10px;margin:18px 0 8px}
.feedback .react{min-height:56px;font-size:18px}
.genres{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));text-align:left}
.genres div{grid-template-columns:1fr auto}
.demo-nav{position:fixed;left:0;right:0;bottom:0;z-index:4;background:#f7f5eef5;border-top:1px solid var(--line);box-shadow:0 -6px 18px #203a290d;padding:10px max(16px,calc((100vw - 912px)/2)) calc(10px + env(safe-area-inset-bottom))}
.demo-nav-inner{display:flex;gap:12px;justify-content:space-between}
.demo-nav button{flex:1;max-width:260px}
.demo-nav button:last-child{margin-left:auto}
body.has-nav footer.site{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
dialog{max-width:580px;border:1px solid var(--line);border-radius:24px;padding:28px;line-height:1.8;color:var(--ink)}
dialog::backdrop{background:#1c342970}

/* ---- 進行役：画面共有モード ---- */
body.presenting header.site,body.presenting footer.site{display:none}
body.presenting main{max-width:none;margin:0;padding:0;min-height:0}
body.presenting{background:#1e2a25}
.stage-wrap{height:100vh;height:100dvh;display:grid;place-items:center;overflow:hidden}
.stage{container-type:inline-size;position:relative;aspect-ratio:16/9;width:min(100vw,177.78vh);width:min(100vw,177.78dvh);background:var(--paper);overflow:hidden}
.controls{position:fixed;left:0;right:0;bottom:16px;margin:0 auto;width:max-content;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:center;max-width:calc(100vw - 24px);background:#fffffff2;border:1px solid var(--line);border-radius:18px;padding:8px 10px;box-shadow:0 10px 30px #0003;transition:opacity .25s,transform .25s;z-index:5}
.controls button{min-height:42px;padding:6px 14px}
.ctl-label{font-size:13px;color:var(--muted);max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl-label b{color:var(--ink);margin-right:4px}
.ctl-status{font-size:12px;color:var(--muted);white-space:nowrap}
.ctl-tools button{white-space:nowrap}
.controls>*,.controls button{flex-shrink:0;white-space:nowrap}
.controls .ctl-label{flex-shrink:1;min-width:0}
.ctl-tools{display:flex;gap:6px;flex-wrap:wrap}
.ctl-tools button{font-size:13px}
.flash{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--green);color:#fff;border-radius:99px;padding:6px 16px;margin:0;font-size:13px;white-space:nowrap}
body.idle .controls:not(.static){opacity:0;transform:translateY(20px);pointer-events:none}
body.idle{cursor:none}
.controls .notice.error{position:absolute;bottom:calc(100% + 8px);left:0;right:0;margin:0}

/* ---- 進行役：発表者画面 ---- */
.presenter{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);grid-template-rows:auto 1fr auto;gap:16px;padding:16px;color:#e9efe9}
.p-head{grid-column:1/-1;display:flex;gap:16px;align-items:baseline}
.p-clock{font-size:22px;font-weight:800;margin-left:auto;font-variant-numeric:tabular-nums}
.p-label{font-size:12px;letter-spacing:.08em;color:#a9bbb0;margin:0 0 6px}
.p-now .stage,.p-next .stage{width:100%;border-radius:10px}
.p-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.p-side .small{color:#c3d0c7}
.p-note{background:#2a3a33;border-radius:14px;padding:4px 18px 10px;font-size:17px;line-height:1.75}
.p-note h3{font-size:13px;color:#a9bbb0;margin:12px 0 0;letter-spacing:.08em}
.p-counts{font-size:15px;font-weight:700;margin:0}
.presenter .controls{position:static;transform:none;grid-column:1/-1;width:auto;max-width:none;margin:0;justify-content:flex-start}

/* ---- スライド本体（1cqw = スライド幅の1%） ---- */
.slide{position:absolute;inset:0;padding:3cqw 5cqw 2.6cqw;display:grid;grid-template-rows:auto 1fr auto;color:var(--ink);font-size:1.6cqw;line-height:1.55;background:radial-gradient(circle at 92% 108%,#e4ecdf 0 22cqw,transparent 22.1cqw),var(--paper)}
.slide h1{font-size:5.4cqw;line-height:1.3;margin:0}
.slide h2{font-size:3.6cqw;line-height:1.35;margin:0 0 2cqw}
.s-head{display:flex;align-items:center;gap:1.4cqw;font-size:1.25cqw;color:var(--muted);font-weight:700;min-height:2.6cqw}
.s-brand{color:var(--green)}
.s-section{border-left:.12cqw solid var(--line);padding-left:1.4cqw}
.s-join{margin-left:auto;display:flex;align-items:center;gap:.8cqw;background:#fff;border:.1cqw solid var(--line);border-radius:99cqw;padding:.4cqw .5cqw .4cqw 1.3cqw}
.s-join b{font-size:1.6cqw;letter-spacing:.12em;color:var(--ink)}
.s-people{background:var(--mint);color:var(--green);border-radius:99cqw;padding:.1cqw 1cqw}
.s-body{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4cqw;min-height:0}
.s-foot{justify-self:end;font-size:1.3cqw;color:var(--muted);font-weight:700;letter-spacing:.06em}
.s-eyebrow{font-size:1.5cqw;letter-spacing:.12em;color:#577668;font-weight:700;margin:0 0 1.2cqw}
.s-lead{font-size:2.3cqw;font-weight:600;margin:0 0 2cqw}
.s-aside{font-size:1.7cqw;color:var(--muted);margin:2cqw 0 0}
.s-hint{font-size:1.7cqw;color:var(--muted);margin:1cqw 0 2cqw}
.s-bear{margin:0;display:grid;justify-items:center;gap:1cqw;align-self:end}
.s-bear img{width:17cqw;aspect-ratio:1;object-fit:contain}
.s-bear figcaption{background:#fff;border:.1cqw solid var(--line);border-radius:2cqw;padding:1cqw 1.4cqw;font-size:1.5cqw;font-weight:700;text-align:center;line-height:1.5;max-width:24cqw}

.s-title{grid-template-columns:1fr auto;grid-template-rows:1fr auto;align-items:center;gap:2cqw 4cqw;padding:5cqw 6cqw 4cqw}
.s-title h1{font-size:5.3cqw;color:var(--green);white-space:nowrap}
.s-sub{font-size:2.8cqw;font-weight:800;margin:1.6cqw 0 0}
.s-bear-title img{width:18cqw}
.s-joinbox{grid-column:1/-1;display:flex;align-items:center;gap:3cqw;background:#fff;border:.15cqw solid var(--green);border-radius:2cqw;padding:1.4cqw 1.6cqw 1.4cqw 2.6cqw}
.s-join-ways{flex:1;display:grid;grid-template-columns:auto 1fr;gap:.5cqw 2cqw;align-items:baseline}
.s-join-ways p{display:contents;margin:0}
.s-join-ways span{font-size:1.5cqw;color:var(--muted);font-weight:700}
.s-join-ways b{font-size:2.1cqw}
.s-join-ways .s-bigcode{font-size:3.8cqw;letter-spacing:.14em;color:var(--green);line-height:1.2}
.s-join-ways .s-note{grid-column:1/-1;display:block;font-size:1.4cqw;color:var(--muted);margin-top:.3cqw}
.s-joinbox .qr{width:15cqw;height:15cqw;flex-shrink:0}
.s-qr-overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#1e2a25b3;animation:fade .25s ease both}
.s-qr-card{display:flex;align-items:center;gap:4cqw;background:var(--paper);border-radius:3cqw;padding:3cqw 4.5cqw;box-shadow:0 2cqw 6cqw #0005}
.s-qr-card .qr{width:30cqw;height:30cqw;border-radius:1cqw}
.s-qr-card h2{font-size:2.8cqw;line-height:1.4;margin:.6cqw 0 2cqw;color:var(--green)}
.s-qr-line{font-size:1.9cqw;margin:.6cqw 0;color:var(--muted);font-weight:700}
.s-qr-line b{color:var(--ink)}
.s-qr-line .s-bigcode{font-size:4cqw;letter-spacing:.14em;color:var(--green)}

.s-list{list-style:none;padding:0;margin:0;display:grid;gap:.9cqw}
.s-list li{display:flex;align-items:center;gap:1.4cqw;font-size:2.3cqw;font-weight:800;background:#fff;border:.1cqw solid var(--line);border-radius:1.4cqw;padding:.6cqw 2cqw;width:50cqw}
.s-list span{color:var(--green);font-size:2.5cqw}
.s-chips{display:flex;flex-wrap:wrap;gap:1cqw}
.s-chips span{background:#fff;border:.12cqw solid var(--green);color:var(--green);border-radius:99cqw;padding:.6cqw 2cqw;font-size:2cqw;font-weight:800}
.s-door h2{font-size:4.6cqw;color:var(--green)}

.s-kanji .s-body{grid-template-columns:auto 1fr;gap:5cqw}
.s-grid-char{font-family:var(--mincho);font-size:24cqw;line-height:1;width:32cqw;aspect-ratio:1;display:grid;place-items:center;border:.25cqw solid #b7c7b9;border-radius:2.4cqw;background:linear-gradient(90deg,transparent calc(50% - .06cqw),#dfe7de calc(50% - .06cqw),#dfe7de calc(50% + .06cqw),transparent calc(50% + .06cqw)),linear-gradient(transparent calc(50% - .06cqw),#dfe7de calc(50% - .06cqw),#dfe7de calc(50% + .06cqw),transparent calc(50% + .06cqw)),#fffdf8;color:var(--ink)}
.s-grid-char.small{font-size:14cqw;width:19cqw;border-radius:1.8cqw}
.s-ask{font-size:4cqw;font-weight:800;line-height:1.35;margin:0}
.s-reading{font-size:6cqw;font-weight:800;color:var(--green);margin:0;line-height:1.2;animation:rise .45s ease both}
.s-examples{font-size:2.8cqw;font-weight:800;margin:1cqw 0 0;animation:rise .45s .08s ease both}
.s-line{font-size:2cqw;color:var(--muted);margin:.6cqw 0 2.4cqw;animation:rise .45s .16s ease both}
.s-tally{display:grid;gap:.8cqw;margin-top:1.6cqw}
.s-tally-row{display:grid;grid-template-columns:13cqw 1fr 3cqw;align-items:center;gap:1cqw;background:#fff;border:.1cqw solid var(--line);border-radius:1.2cqw;padding:.7cqw 1.4cqw}
.s-tally-label{font-size:1.7cqw;font-weight:800}
.s-dots{display:flex;flex-wrap:wrap;gap:.45cqw}
.s-dots i{width:1.3cqw;aspect-ratio:1;border-radius:50%;background:var(--sun);animation:pop .3s ease both}
.s-tally-row b{font-size:2.2cqw;text-align:right;color:var(--green);font-variant-numeric:tabular-nums}

.s-quiz .s-body{grid-template-columns:1fr;align-content:center;gap:2cqw}
.s-prompt{font-size:4.2cqw;font-weight:800;line-height:1.4;margin:0}
.s-qhead{display:flex;justify-content:space-between;align-items:center;font-size:1.6cqw;color:var(--muted);font-weight:700}
.s-pill{background:var(--mint);color:var(--green);border-radius:99cqw;padding:.3cqw 1.4cqw}
.s-qbody{display:grid;grid-template-columns:1.25fr 1fr;gap:4cqw;align-items:center}
.s-options{display:grid;gap:1cqw}
.s-option{display:flex;align-items:center;gap:1.4cqw;font-size:2.8cqw;font-weight:800;background:#fff;border:.15cqw solid var(--line);border-radius:1.6cqw;padding:1cqw 2cqw;transition:opacity .3s}
.s-option span{color:var(--green)}
.s-option.is-answer{border-color:var(--green);background:var(--mint);box-shadow:0 0 0 .3cqw #245e4e33}
.s-option.is-dim{opacity:.38}
.s-boxes{display:flex;gap:2cqw}
.s-check{font-size:1.8cqw;background:var(--sun-soft);border-radius:1.6cqw;padding:1.2cqw 2cqw;margin-top:1.2cqw;animation:rise .45s .1s ease both}
.s-check ul{margin:.4cqw 0 0;padding-left:1.4em}
.s-explain{font-size:2.1cqw;background:#fff;border-radius:1.6cqw;border:.1cqw solid var(--line);padding:1.6cqw 2cqw;margin:0;animation:rise .45s ease both}

.s-embed .s-body{grid-template-columns:1fr;align-items:stretch;gap:0}
.s-embed-wrap{display:grid;grid-template-rows:auto 1fr;gap:1cqw;min-height:0}
.s-embed-title{display:flex;align-items:baseline;gap:1.6cqw;margin:0;font-size:1.8cqw;color:var(--muted);font-weight:700}
.s-embed-title b{font-size:2.6cqw;color:var(--green)}
.s-embed-frame{position:relative;min-height:0;border:.15cqw solid var(--line);border-radius:1.6cqw;overflow:hidden;background:#fff}
.s-embed iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0}
.s-embed-hold{align-self:center}
.s-info .s-body{grid-template-columns:1fr auto;gap:3cqw}
.s-info .s-bear img{width:13cqw}
.s-points{display:grid;gap:1.2cqw;margin:0}
.s-points div{display:grid;grid-template-columns:14cqw 1fr;align-items:center;background:#fff;border:.1cqw solid var(--line);border-radius:1.6cqw;padding:1.4cqw 2.4cqw}
.s-points dt{font-size:2.2cqw;font-weight:800;color:var(--green)}
.s-points dd{margin:0;font-size:2.6cqw;font-weight:800}

.s-result .s-body{grid-template-columns:1fr 1.1fr;gap:4cqw;align-items:start;align-content:center}
.s-result h2{font-size:3.2cqw;white-space:nowrap}
.s-result .s-points div{grid-template-columns:11cqw 1fr;padding:1.2cqw 1.8cqw}
.s-result .s-points dt{font-size:1.8cqw}
.s-result .s-points dd{font-size:2cqw}
.s-ranking{background:#fff;border:.12cqw solid var(--line);border-radius:2cqw;padding:1.6cqw 2.2cqw}
.s-ranking h3{display:flex;align-items:baseline;gap:1.4cqw;font-size:2.4cqw;margin:0 0 1cqw;color:var(--green)}
.s-ranking h3 small{font-size:1.4cqw;color:var(--muted);font-weight:700}
.s-ranking ol{list-style:none;margin:0;padding:0;display:grid;gap:.5cqw;max-height:30cqw;overflow:hidden}
.s-ranking li{display:grid;grid-template-columns:6cqw 6.5cqw 1fr 5cqw;align-items:center;gap:1cqw;font-size:1.9cqw;font-weight:800;padding:.4cqw 1cqw;border-radius:1cqw;animation:rise .35s ease both}
.s-ranking li.is-pass{background:var(--mint)}
.s-ranking li b{text-align:right;color:var(--green);font-variant-numeric:tabular-nums}
.s-rank-no{color:var(--green)}
.s-ranking li.s-passline{display:flex;align-items:center;gap:1cqw;padding:0;font-size:1.3cqw;color:var(--focus)}
.s-ranking li.s-passline::before,.s-ranking li.s-passline::after{content:"";flex:1;border-top:.15cqw dashed var(--focus)}
.s-feedback .s-body{grid-template-columns:1fr auto;gap:3cqw}
.s-feedback .s-bear img{width:13cqw}
.s-feedback h2{margin-bottom:1cqw}
.s-feedback .s-lead{font-size:1.9cqw;margin-bottom:1cqw}
.s-feedback .s-tally{gap:.9cqw}
.s-feedback .s-tally-row{grid-template-columns:29cqw 1fr 4cqw;padding:.9cqw 1.6cqw}
.s-feedback .s-tally-label{white-space:nowrap}
.s-feedback .s-tally-label{font-size:2.1cqw}
.s-feedback .s-dots i{width:1.6cqw}
.s-end h1{color:var(--green)}
.s-end .s-lead{margin-top:2.4cqw}

/* 人数だけが変わった描き直しでは、登場アニメーションをくり返さない */
.stage.static *{animation:none!important}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(.8cqw)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ---- マウスのある端末だけ。タップ後に色が残らないように ---- */
@media(hover:hover){
 button:hover{background:var(--green-2);border-color:var(--green-2)}
 .quiet:hover{background:var(--mint);border-color:var(--line)}
 .react:hover{background:var(--mint)}
 .choice:hover{background:var(--mint)}
  .react.selected:hover,}

/* ---- スマホ ---- */
@media(max-width:1100px){.controls{flex-wrap:wrap}}
@media(max-width:860px){.presenter{grid-template-columns:1fr}}
@media(max-width:640px){
 header.site{padding:10px 16px}
 .brand{font-size:clamp(13.5px,3.9vw,16px)}
 #help{min-height:40px;padding:6px 12px;font-size:14px}
 main{padding:0 16px;margin:16px auto}
 .hero{grid-template-columns:1fr;gap:14px;padding:4px 0}
 .hero .guide{display:flex;gap:16px;text-align:left;border-radius:20px;padding:14px}
 .hero .guide img{width:84px}
 .cards{grid-template-columns:1fr;gap:14px}
 .card{padding:20px;border-radius:20px}
 .lead{font-size:16px}
 .drawing{gap:12px}
 .drawtools{gap:4px}
 .drawtools button{font-size:12px;padding:6px 2px}
 .actions button{flex:1}
 .actions.secondary{gap:6px}
 .actions.secondary button{font-size:14px;padding:6px 6px;white-space:nowrap;letter-spacing:-.02em}
 .choice{font-size:18px}
 .comparison{gap:5px}
 .model{font-size:50px}
 .react{font-size:14px;padding:4px;white-space:nowrap;letter-spacing:-.02em;min-height:52px}
 .reactions{gap:6px}
 .grid-char{width:min(56vw,220px);font-size:min(40vw,160px)}
 .points div{grid-template-columns:1fr;gap:2px}
 .genres{grid-template-columns:1fr 1fr;gap:6px}
 .genres div{grid-template-columns:1fr auto;padding:8px 10px;font-size:14px}
 .overlay .ghost{font-size:34vw}
 }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}