:root{font-family:"Zen Kaku Gothic New","BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;color:#1c1917;background:#fafaf9;font-size:18px;--blue:#3ba6f1;--pale:#e3f1fc;--line:#e7e5e4;--green:#2f8a55;--amber:#b45309}
*{box-sizing:border-box}body{margin:0;word-break:auto-phrase}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{border:1px solid var(--line);background:white;color:#1c1917;border-radius:12px;padding:12px 20px;cursor:pointer}button:hover{background:var(--pale);border-color:var(--blue)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:disabled{opacity:.45;cursor:default}.primary{background:#1c1917;color:#fff;border-color:#1c1917}.primary:hover{color:#1c1917}.shell{display:grid;grid-template-columns:246px minmax(0,1fr);height:100dvh}aside{border-right:1px solid var(--line);padding:30px 18px;display:flex;flex-direction:column}.brand{font-size:16px;color:#57534e;padding:0 10px}.aside-title{font-weight:700;font-size:24px;padding:0 10px;margin:16px 0}nav{display:flex;flex-direction:column;gap:5px}nav button{padding:10px 12px;text-align:left;border-color:transparent;background:transparent;font-size:16px;display:flex;gap:12px;align-items:center}nav button span{font-size:14px;color:#78716c;min-width:24px}nav button[aria-current=step]{background:var(--pale);border-color:#b7dcf8;font-weight:700}.aside-note{font-size:16px;color:#57534e;line-height:1.8;margin-top:auto;padding:12px 10px 0}.workspace{min-width:0;display:flex;flex-direction:column;padding:24px 42px 14px;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px;font-size:16px;color:#57534e}.scope{background:var(--pale);color:#17659b;border-radius:99px;padding:8px 18px;font-weight:700;white-space:nowrap}main{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;padding-top:20px;overflow:auto}.heading{display:flex;flex-direction:column;gap:12px}h1{font-size:42px;line-height:1.35;margin:0;letter-spacing:.015em}h2{font-size:26px;margin:0 0 18px;line-height:1.4}h3{font-size:20px;margin:0 0 12px}p{line-height:1.7;margin:10px 0}.role{display:inline-block;background:#1c1917;color:white;padding:7px 16px;border-radius:99px;font-size:16px;font-weight:700}.role.client{color:#1c1917;background:white;border:1px solid #1c1917}.role.auto{color:#123b55;background:var(--blue)}.role.other{background:#e7e5e4;color:#44403c}#stage{flex:1;min-height:300px;display:flex;flex-direction:column;justify-content:center;position:relative;gap:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 2px 3px #1c191706;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px;gap:12px}.panel-head h2{margin:0}.micro{font-size:16px;color:#57534e}.columns{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px}.wide-left{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}.note{padding:14px 18px;border-radius:14px;background:#f5f5f4;font-size:16px;line-height:1.7}.note.blue{background:var(--pale)}.note.amber{background:#fdf0dc;color:#87400b}.note.green{background:#e3f2e8;color:#23683e}.pill{display:inline-block;padding:5px 12px;border-radius:99px;background:#f5f5f4;font-size:16px;white-space:nowrap}.pill.green{background:#e3f2e8;color:var(--green)}.pill.amber{background:#fdf0dc;color:var(--amber)}.pill.blue{background:var(--pale);color:#17659b}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;font-size:18px;vertical-align:middle}th{color:#57534e;font-size:16px;font-weight:500}tbody tr:last-child td{border-bottom:0}.selected{background:#e3f2e8}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}.explain{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 0 8px}.explain>div{border-radius:18px;border:1px solid var(--line);padding:18px 22px;background:white}.explain>div:last-child{background:var(--pale);border-color:var(--pale)}.explain span{font-size:16px;color:#57534e}.explain p{font-size:20px;font-weight:700;margin:6px 0 0}.caption{min-height:56px;background:#1c1917;color:white;border-radius:14px;padding:13px 20px;font-size:18px;line-height:1.5;display:flex;align-items:center}.controls{display:flex;gap:12px;align-items:center;padding:14px 0 10px}.controls button{font-size:16px;padding:9px 18px}.controls label{font-size:16px;margin-left:8px}.controls select{font-size:16px;border:1px solid var(--line);padding:8px;border-radius:8px;background:white}.controls #playstatus{margin-left:auto;font-size:16px;color:#57534e}footer{font-size:16px;color:#57534e;line-height:1.5;padding-top:4px}.drop{border:2px dashed var(--blue);background:var(--pale);border-radius:20px;padding:30px;text-align:center;min-height:138px;display:flex;flex-direction:column;justify-content:center;gap:10px}.drop.dragover{background:#c9e6fb;border-style:solid}.drop strong{font-size:26px}.file-stack{display:flex;gap:12px;margin-bottom:20px}.file{border:1px solid var(--line);border-radius:12px;padding:20px 14px;background:#fff;flex:1;cursor:grab;font-size:17px;border-top:4px solid var(--blue)}.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.flow div{padding:18px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;line-height:1.6;font-size:17px}.flow b{display:block;margin-bottom:8px}.flow .active{background:var(--pale);border-color:var(--blue);box-shadow:0 0 0 2px var(--pale)}.flow .warn{background:#fdf0dc;border-color:#edc896}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stat{text-align:center}.stat strong{display:block;font-size:78px;font-weight:700;margin:12px 0}.stat span{font-size:22px}.stat.amber{background:#fdf0dc}.portal-bar{background:#1c1917;color:white;padding:22px 26px;border-radius:20px 20px 0 0;font-size:23px;font-weight:700}.portal-content{padding:24px}.portal{border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden}.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px;font-size:17px}.tabs span{padding:5px}.tabs .active{font-weight:700;border-bottom:2px solid #1c1917}.doc-row{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.doc-row:last-child{border:0}.doc-row button{flex:1;text-align:left;border:0;padding:10px;background:transparent;font-size:20px}.doc-row button:hover{background:var(--pale)}.login{max-width:760px;margin:auto;width:100%}.login input{width:230px;letter-spacing:.2em;padding:14px;border:1px solid #a8a29e;border-radius:10px;font-size:26px}.denied{text-align:center;padding:58px 24px}.denied h2{font-size:32px}.lock{width:78px;height:64px;border:5px solid #78716c;border-radius:14px;margin:38px auto 30px;position:relative}.lock:before{content:"";position:absolute;width:42px;height:40px;border:5px solid #78716c;border-radius:30px 30px 0 0;left:13px;top:-39px}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.timeline strong{font-size:38px;display:block;margin-bottom:16px}.timeline .panel{padding:24px}.hero{font-size:24px;line-height:1.8}.roles{display:flex;gap:18px;flex-wrap:wrap;margin:24px 0}.versions{display:flex;flex-direction:column;gap:12px}.versions button{text-align:left}.versions .current{background:var(--pale);border-color:var(--blue)}.pulse{animation:pulse .85s ease-in-out 2}@keyframes pulse{50%{box-shadow:0 0 0 8px #3ba6f14d}}#pointer{position:fixed;width:22px;height:22px;border:3px solid #17659b;background:#e3f1fcc9;border-radius:50%;z-index:20;pointer-events:none;display:none;box-shadow:0 0 0 7px #3ba6f12a}#pointer.visible{display:block;transition:left .8s ease,top .8s ease}dialog{width:min(1000px,90vw);height:88vh;border:1px solid var(--line);border-radius:24px;padding:24px}dialog::backdrop{background:#1c191777}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.dialog-head h2{font-size:22px;margin:0}iframe{border:0;width:100%;height:calc(100% - 70px);margin-top:18px}body.record .shell{grid-template-columns:1fr}body.record aside,body.record .controls{display:none}body.record .workspace{padding:32px 74px 20px}body.record main{padding-top:28px}body.record .caption{margin:12px 0}body.record h1{font-size:48px}
@media(max-width:1450px){:root{font-size:16px}.shell{grid-template-columns:210px minmax(0,1fr)}aside{padding:18px 10px}nav{gap:1px}nav button{padding:7px 10px}.aside-title{font-size:20px}.workspace{padding:14px 24px 10px}main{gap:12px;padding-top:12px}h1{font-size:32px}.heading{gap:8px}#stage{min-height:260px;gap:12px}.panel{padding:20px}.panel-head{padding-bottom:10px;margin-bottom:10px}h2{font-size:23px;margin-bottom:12px}th,td{font-size:16px;padding:10px 8px}.flow div{font-size:16px;padding:12px}.explain{gap:12px}.explain>div{padding:12px 16px}.explain p{font-size:17px}.caption{font-size:16px;min-height:48px;padding:10px 16px}.controls{padding:9px 0;gap:8px}.controls button{padding:7px 12px}.drop{padding:18px;min-height:100px}.file{padding:12px}.file-stack{margin-bottom:12px}.stats{gap:14px}.stat strong{font-size:58px}.note{padding:10px 14px}.doc-row{padding:10px 0}.doc-row button{font-size:18px}.timeline{gap:12px}.timeline .panel{padding:18px}.timeline strong{font-size:30px}.hero{font-size:20px}.denied{padding:36px 24px}.roles{margin:16px 0}}
@media(max-width:950px){.shell{grid-template-columns:1fr;height:auto;min-height:100dvh}aside{display:none}.workspace{overflow:visible;padding:18px}.columns,.timeline,.stats{grid-template-columns:1fr}.flow{grid-template-columns:1fr 1fr}main{overflow:visible}header{flex-wrap:wrap}h1{font-size:32px}.explain{grid-template-columns:1fr}.controls{flex-wrap:wrap}.file-stack{flex-direction:column}.scope{white-space:normal}body.record .workspace{padding:18px}footer{padding-bottom:12px}}
@media print{.controls,aside,.caption,dialog{display:none}.shell{display:block;height:auto}.workspace{overflow:visible}main{overflow:visible}}

/* 照合の分岐を明示し、内容が増えても見出しと重ならない配置 */
.heading,.explain{flex-shrink:0}#stage{flex:1 0 auto;justify-content:center}.wide-left{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.flow{grid-template-columns:1fr 1fr 1fr 1.9fr;align-items:stretch}.flow .branches{padding:0;border:0;background:transparent;display:flex;flex-direction:column;gap:8px}.branches section{padding:10px 14px;border:1px solid var(--line);border-radius:14px;font-size:16px;line-height:1.5}.branches b{display:inline;margin-right:12px}.branches section:first-child{background:#e3f2e8}.branches section:last-child{background:#fdf0dc}.branches .active{border-color:var(--blue);box-shadow:0 0 0 2px var(--pale)}.branches .warn{border-color:#b45309}.columns table td:nth-child(2){font-variant-numeric:tabular-nums}@media(max-width:1450px){.flow{grid-template-columns:1fr 1fr 1fr 1.8fr}.flow div{padding:9px}.branches section{padding:8px}.columns th,.columns td{padding:9px 6px}.flow b{margin-bottom:4px}}@media(max-width:950px){.flow{grid-template-columns:1fr 1fr}.wide-left{grid-template-columns:1fr}}

/* 再生状態、操作結果、次の操作を常時表示 */
.caption{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:12px 20px;min-height:104px;flex-shrink:0;background:#e3f1fc;color:#123b55;border:2px solid #3ba6f1}
.live-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
#live-mode{font-size:16px;border-radius:6px;background:#17659b;color:white;padding:3px 10px}
#live-result{font-size:22px;font-weight:700;line-height:1.4}
#live-next,#live-clock{font-size:16px;line-height:1.5}
.caption[data-state=done]{background:#e3f2e8;border-color:#2f8a55;color:#23683e}
.caption[data-state=done] #live-mode{background:#23683e}
.caption[data-state=paused]{background:#fdf0dc;border-color:#b45309;color:#87400b}
.caption[data-state=paused] #live-mode{background:#87400b}
#scene-progress{width:100%;height:7px;accent-color:#17659b;border:0;margin-top:3px}
#scene-progress[hidden]{display:none}
#scene-progress::-webkit-progress-bar{background:#b7dcf8;border-radius:5px}
#scene-progress::-webkit-progress-value{background:#17659b;border-radius:5px}
.next-operation{outline:3px solid #3ba6f1;outline-offset:3px}
.controls #play{background:#17659b;color:white;border-color:#17659b;font-weight:700;min-width:130px}
.controls #play:hover{background:#123b55}
.explain{display:none}
body.record .explain{display:grid}
body.record .caption{min-height:104px}
@media(max-width:1450px){#live-result{font-size:19px}.caption{padding:10px 14px;min-height:98px}}
@media(max-width:950px){.live-top{flex-wrap:wrap;gap:5px}.caption{margin-top:14px}}

/* 録画では字幕に説明をまとめ、二重表示を避ける */
body.record .explain{display:none}

/* デザイン改良 第1巡：情報の階層と操作領域を統一 */
:root{--surface:#fff;--muted:#57534e;--soft:#f5f5f4;--shadow:0 2px 8px #1c191705}
body{line-height:1.6}
button{font-weight:500;transition:background .16s,border-color .16s,box-shadow .16s;min-height:44px}
button:disabled{opacity:1;color:#78716c;background:#f5f5f4;border-style:dashed}
.shell{grid-template-columns:264px minmax(0,1fr)}
aside{background:#fff;padding:28px 18px 20px}
.brand{font-weight:700;color:#1c1917;padding:0 12px}
.aside-title{font-size:20px;line-height:1.5;margin:8px 0 24px;padding:0 12px}
nav{gap:3px;overflow:auto;padding:2px 4px 6px}
.nav-section{font-size:16px;color:#57534e;font-weight:500;margin:14px 8px 6px}
nav button{border-radius:10px;padding:8px 10px;font-size:16px;line-height:1.4;min-height:40px;gap:10px}
nav button span{font-size:16px;font-variant-numeric:tabular-nums;color:#57534e}
nav button[aria-current=step]{background:#1c1917;color:#fff;border-color:#1c1917;box-shadow:0 2px 4px #1c191710}
nav button[aria-current=step] span{color:#a8d9fa}
.aside-note{border-top:1px solid var(--line);margin-top:auto;padding:18px 12px 0;line-height:1.6}
.workspace{padding:0 36px 12px;gap:0}
header{height:72px;min-height:72px;border-bottom:1px solid var(--line);gap:12px}
#chapter{font-weight:500}
.scope{border:1px solid #c5e3f8;border-radius:8px;padding:5px 12px;font-size:16px}
main{padding:26px 2px 24px;gap:24px;scrollbar-gutter:stable;scrollbar-width:thin}
.heading{gap:12px}
h1{font-size:36px;letter-spacing:.01em;line-height:1.4}
h2{font-size:24px;letter-spacing:.01em}
h3{font-size:20px}
.role{border-radius:6px;padding:4px 10px;line-height:1.5;font-size:16px}
#stage{justify-content:flex-start;flex:1 0 auto;min-height:0;gap:20px}
.panel{padding:26px;border-radius:24px;box-shadow:var(--shadow)}
.panel-head{padding-bottom:16px;margin-bottom:16px}
.panel-head h2{font-size:24px}
.micro{font-size:16px}
.note{background:#f1f1ef;border-radius:10px;padding:13px 18px;line-height:1.7}
.note.blue,.note.green,.note.amber{border-left:3px solid}
.note.blue{border-color:#3ba6f1}.note.green{border-color:#2f8a55}.note.amber{border-color:#b45309}
.pill{border-radius:7px;padding:4px 10px;font-weight:500;line-height:1.5}
.pill.green{color:#23683e}
table{font-variant-numeric:tabular-nums}
th{background:#fafaf9;color:#57534e;font-weight:500}
th,td{padding:16px 14px;font-size:18px;line-height:1.6}
th:first-child{border-radius:8px 0 0 8px}th:last-child{border-radius:0 8px 8px 0}
tbody tr:hover{background:#fafaf9}
.actions{gap:12px;margin-top:22px}
.primary{box-shadow:0 2px 3px #1c191710}
.columns{gap:24px;align-items:stretch}
.wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.file-stack{gap:14px;margin-bottom:20px}
.file{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:18px;font-size:18px;background:#fafaf9;line-height:1.5}
.file:before{content:"";display:block;flex:0 0 20px;width:20px;height:27px;background:#fff;border:1.5px solid #78716c;border-radius:3px;box-shadow:inset 0 -7px 0 #e3f1fc}
.drop{background:#f5fafe;border:1px dashed #5b9ecb;min-height:164px;padding:30px;gap:8px}
.drop:hover{border-style:solid;background:#e3f1fc}
.drop strong{font-size:24px}
.flow{gap:12px;grid-template-columns:1fr 1fr 1fr 1.8fr}
.flow div{background:#f1f1ef;border:1px solid #e7e5e4;border-radius:12px;padding:16px;line-height:1.6}
.flow b{color:#57534e;font-variant-numeric:tabular-nums;margin-bottom:8px}
.flow .active{background:#e3f1fc;border-color:#85c7f4;box-shadow:inset 3px 0 #3ba6f1}
.flow .branches{gap:10px}
.branches section{padding:10px 14px;border-radius:10px}
.stats{gap:20px}
.stat{text-align:left;position:relative;padding:28px}
.stat strong{font-size:64px;line-height:1.25;margin:16px 0 6px;font-variant-numeric:tabular-nums}
.stat span{font-size:18px}
.stat:before{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;background:#3ba6f1}
.stat.amber:before{background:#b45309}
.portal{border-radius:24px;box-shadow:var(--shadow)}
.portal-bar{padding:20px 26px;font-size:22px;letter-spacing:.01em}
.portal-content{padding:26px}
.tabs{font-size:16px;gap:26px;padding-bottom:12px;margin-bottom:20px;color:#57534e}
.tabs .active{color:#1c1917}
.doc-row{padding:16px 0;gap:16px}
.doc-row>span:first-child{color:#57534e;font-variant-numeric:tabular-nums}
.doc-row button{font-size:18px;border:1px solid transparent;border-radius:10px;padding:12px}
.versions button{padding:14px 16px;line-height:1.6}
.login{margin:30px auto;max-width:800px;padding:36px}
.login input{border-radius:10px;background:#fafaf9;width:240px;font-variant-numeric:tabular-nums}
.denied{padding:44px 24px}
.control-dock{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 -4px 24px #1c191704;flex-shrink:0;overflow:visible}
.caption{border:0;border-left:4px solid #3ba6f1;border-radius:17px 17px 0 0;background:#fff;color:#1c1917;padding:16px 22px;min-height:108px;gap:5px}
.caption[data-state=done]{background:#fff;color:#1c1917;border-color:#2f8a55}
.caption[data-state=paused]{background:#fff;color:#1c1917;border-color:#b45309}
#live-mode{background:#e3f1fc;color:#17659b;border-radius:5px;padding:2px 8px;line-height:1.5}
.caption[data-state=done] #live-mode{background:#e3f2e8;color:#23683e}
.caption[data-state=paused] #live-mode{background:#fdf0dc;color:#87400b}
#live-result{font-size:20px;font-weight:700}
#live-next,#live-clock{font-size:16px;color:#57534e}
#scene-progress{height:4px;margin-top:5px}
.controls{padding:12px 22px;border-top:1px solid #efeeeb;gap:10px}
.controls button{min-height:42px;padding:7px 16px;font-size:16px}
.controls #play{min-width:130px;background:#fff;color:#1c1917;border-color:#d6d3d1;font-weight:500}
.controls #play:hover{background:#f5f5f4}
.controls #next:not(:disabled){background:#1c1917;color:white;border-color:#1c1917}
.controls #playstatus{font-size:16px}
.controls select{min-height:40px}
.next-operation{outline:2px solid #3ba6f1;outline-offset:3px;box-shadow:0 0 0 5px #e3f1fc}
footer{font-size:16px;line-height:1.6;padding:10px 2px 0}
dialog{border-radius:24px;padding:24px;box-shadow:0 24px 90px #1c191733}
.dialog-head{padding-bottom:18px;border-bottom:1px solid var(--line)}
iframe{margin-top:16px}
body[data-current-scene="0"] #stage{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;gap:24px}
body[data-current-scene="0"] #stage>.panel{padding:36px;min-height:360px;display:flex;flex-direction:column;justify-content:center}
.hero{font-size:28px;line-height:1.8;font-weight:500;margin:0}
.roles{gap:10px;margin:24px 0}
body[data-current-scene="0"] .actions{margin-top:8px}
.timeline{grid-template-columns:1fr 1fr;gap:18px}
.timeline .panel{padding:24px;min-height:172px}
.timeline strong{font-size:32px;font-variant-numeric:tabular-nums;line-height:1.2;margin-bottom:14px}
.timeline .panel:nth-child(2){background:#e3f1fc;border-color:#b7dcf8}
.timeline h3{font-size:20px;margin-bottom:6px}
.timeline p{margin:0;line-height:1.6}
body.record .workspace{padding:0 64px 18px}
body.record main{padding-top:28px}
body.record h1{font-size:42px}
body.record header{height:72px}
body.record .control-dock{border:0;border-radius:18px}
body.record .caption{margin:0;border-radius:18px;min-height:110px}
@media(max-width:1450px){
.shell{grid-template-columns:238px minmax(0,1fr)}
aside{padding:20px 12px 14px}.aside-title{margin-bottom:12px}
.nav-section{margin-top:9px;margin-bottom:3px}nav{gap:2px}nav button{min-height:34px;padding:5px 8px}
.workspace{padding:0 24px 10px}header{height:58px;min-height:58px}
main{padding-top:18px;padding-bottom:18px;gap:18px}
h1{font-size:32px}.heading{gap:8px}
.panel{padding:22px}.panel-head h2{font-size:22px}.panel-head{margin-bottom:12px;padding-bottom:12px}
th,td{font-size:16px;padding:12px 10px}
.columns{gap:18px}.columns th,.columns td{padding:10px 8px}
#stage{gap:16px}
.flow div{padding:12px;font-size:16px}.flow b{margin-bottom:4px}
.note{padding:10px 14px}
.file{font-size:16px;padding:14px;gap:10px}.file-stack{gap:10px;margin-bottom:14px}
.drop{min-height:130px;padding:22px}.drop strong{font-size:22px}
.portal-content{padding:20px}.portal-bar{padding:16px 20px;font-size:20px}
.doc-row{padding:12px 0}.doc-row button{font-size:16px}
.caption{padding:10px 18px;min-height:98px}
#live-result{font-size:19px}.controls{padding:8px 18px;gap:8px}
.controls button{padding:6px 12px;min-height:38px}.controls select{min-height:38px}
footer{padding-top:8px}
body[data-current-scene="0"] #stage{gap:18px}
body[data-current-scene="0"] #stage>.panel{padding:28px;min-height:330px}
.hero{font-size:24px}.roles{margin:20px 0}
.timeline{gap:12px}.timeline .panel{padding:20px;min-height:158px}.timeline strong{font-size:28px}.timeline h3{font-size:18px}
}
@media(max-width:1100px){
body[data-current-scene="0"] #stage{display:flex}
body[data-current-scene="0"] #stage>.panel{min-height:0}
.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:950px){
.shell{grid-template-columns:1fr}aside{display:none}
.workspace{padding:0 16px 14px}header{height:auto;min-height:70px;padding:12px 0}
main{overflow:visible;padding:20px 0;scrollbar-gutter:auto}
.columns,.wide-left{grid-template-columns:1fr}
.flow{grid-template-columns:1fr 1fr}.file-stack{flex-direction:column}
.control-dock{margin-top:12px}.caption{margin:0;padding:14px 16px}
.controls{flex-wrap:wrap;padding:12px 16px}.controls #playstatus{width:100%;margin:0}
.panel{padding:18px}.scope{white-space:normal}
body.record .workspace{padding:0 16px 16px}
body.record h1{font-size:32px}
}
@media(prefers-reduced-motion:reduce){button,#pointer.visible{transition:none}.pulse{animation:none}}

/* デザイン改良 第3巡：表の折り返しと低い画面の固定領域 */
aside,.workspace{min-height:0}
aside{overflow:hidden}
nav{min-height:0;flex:1}
.aside-note{flex-shrink:0}
footer{flex-shrink:0}
button,input,select{line-height:1.4}
.panel .actions{margin-top:16px}
th,td{padding:12px 14px}
.columns th,.columns td{font-size:16px;padding:12px 10px}
.document-table th:nth-child(1){width:26%}
.document-table th:nth-child(2){width:28%}
.document-table th:nth-child(3){width:34%}
.document-table th:nth-child(4){width:12%}
.columns .document-table td:nth-child(2){white-space:nowrap;overflow-wrap:normal}
body[data-current-scene="4"] .columns{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
body[data-current-scene="13"] .panel>.actions:first-of-type{margin-top:0;margin-bottom:14px}
body[data-current-scene="13"] #stage{gap:14px}
body[data-current-scene="0"] #next:not(:disabled){background:#fff;color:#1c1917;border-color:var(--line)}
@media(max-width:1450px){
body[data-current-scene="4"] .columns,body[data-current-scene="7"] .columns{grid-template-columns:1fr}
nav button{font-size:16px}
}
@media(max-width:950px){aside{display:none}.columns .document-table td:nth-child(2){white-space:normal;overflow-wrap:anywhere}}

/* デザイン改良 第4巡：本文領域と案内の視覚的な優先順位 */
.caption{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;row-gap:5px;min-height:88px;padding:16px 22px;align-content:center}
.live-top{display:contents}
#live-mode{grid-column:1;grid-row:1;align-self:center;justify-self:start;white-space:nowrap}
#live-result{grid-column:2;grid-row:1;align-self:center}
#live-clock{grid-column:3;grid-row:1;align-self:center;text-align:right}
#live-next{grid-column:2 / 4;grid-row:2}
#scene-progress{grid-column:1 / 4;grid-row:3}
.controls #next:not(:disabled){background:#fff;color:#1c1917;border-color:#d6d3d1}
.controls #next.next-operation:not(:disabled){background:#1c1917;color:#fff;border-color:#1c1917}
.doc-row button{text-decoration:underline;text-decoration-color:#a8a29e;text-decoration-thickness:1px;text-underline-offset:5px}
.doc-row button:hover{text-decoration-color:#17659b;color:#17659b}
body.record .caption{min-height:100px}
@media(max-width:1450px){.caption{min-height:84px;padding:12px 18px}#live-result{font-size:18px}}
@media(max-width:950px){
.caption{display:flex;flex-direction:column;padding:14px 16px;gap:6px}
.live-top{display:flex}
#live-clock{text-align:left}
#live-result{font-size:19px}
}

/* 追加改良：読み進める順序と余白の均衡 */
.workspace{background:#fafaf9}
header{height:64px;min-height:64px}
main{gap:22px;padding-top:24px}
.heading{gap:10px}
h1{letter-spacing:0;font-weight:700}
.panel{box-shadow:0 4px 16px #1c191704}
.panel-head{padding-bottom:14px;margin-bottom:18px}
.panel-head .micro{color:#78716c}
nav button{border-radius:8px}
nav button:not([aria-current]):hover{background:#f5f5f4;border-color:#e7e5e4}
nav button[aria-current=step]{box-shadow:none}
.nav-section{border-top:1px solid #efeeeb;padding-top:12px;margin-top:14px}
.flow{gap:10px}
.flow>div:not(.branches){display:grid;grid-template-columns:28px 1fr;align-content:center;align-items:start;gap:10px;padding:14px}
.flow b{margin:0;font-size:16px}
.flow>div:not(.branches)>b{border-right:1px solid #d6d3d1;padding-right:8px}
.branches section{border-color:transparent;padding:9px 12px}
.portal-bar{background:#fff;color:#1c1917;border-bottom:1px solid var(--line);position:relative;padding-left:30px}
.portal-bar:before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;background:#3ba6f1;border-radius:0 4px 4px 0}
.tabs{gap:24px;margin-bottom:18px;padding-bottom:8px}
.tabs .active{border-color:#17659b;color:#17659b}
.doc-row{padding:10px 0}
.doc-row button{padding:14px 12px}
.versions button{background:#fafaf9}
.versions .current{background:#e3f1fc}
.note:not(.blue):not(.green):not(.amber){background:transparent;border-left:2px solid #d6d3d1;border-radius:0;padding:8px 16px;color:#57534e}
.control-dock{border-radius:16px;box-shadow:0 4px 18px #1c191706}
.caption{border-radius:15px 15px 0 0}
.controls{background:#fafaf9;border-radius:0 0 15px 15px}
.controls #reset{border-color:transparent;background:transparent;color:#57534e}
.controls #reset:hover{border-color:#d6d3d1;background:white}
.next-operation{outline:2px solid #3ba6f1;outline-offset:2px;box-shadow:none}
body[data-current-scene="0"] #stage>.panel{min-height:360px;border-top:3px solid #3ba6f1}
.timeline .panel{box-shadow:none}
.timeline strong{font-size:36px;font-weight:500}
body[data-current-scene="8"] .stat{background:white}
body[data-current-scene="8"] .stat.amber{background:#fffaf2}
@media(min-width:1451px){.workspace{padding-left:44px;padding-right:44px}.columns{gap:20px}.panel{padding:24px}#stage{gap:18px}}
@media(max-width:1450px){header{height:56px;min-height:56px}main{gap:18px;padding-top:18px}.nav-section{padding-top:8px;margin-top:8px}.flow>div:not(.branches){grid-template-columns:24px 1fr;gap:6px;padding:10px}.timeline strong{font-size:28px}.portal-bar{padding-left:24px}}
@media(max-width:950px){header{height:auto;min-height:70px}.flow{grid-template-columns:1fr}.flow>div:not(.branches){padding:14px}body[data-current-scene="0"] #stage>.panel{min-height:0}}

/* 分岐ラベルと工程番号の間隔 */
.branches b{margin-right:8px}

/* 説明資料との対応を常時表示 */
.chapter-reference{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#material-ref{font-size:16px;color:#57534e;padding-left:20px;border-left:1px solid var(--line)}
@media(max-width:1450px){.chapter-reference{gap:10px}#material-ref{padding-left:10px}}
@media(max-width:950px){.chapter-reference{gap:6px}#material-ref{border:0;padding-left:0}}