/* RootNest 互动实验室 · 共享外壳（巢暖·松绿）。各实验只在自己的 lab.css 里写画面专属样式。 */
:root{
  --bg:#FEFCF6;--panel:#FAF6EB;--ink:#1A1A2E;--muted:#4A4A5A;--faint:#888;--hair:#E8E2D4;
  --pine:#2E6B52;--pine-deep:#1F4A38;--pine-soft:#E6EFE9;--honey:#EFC85A;--honey-soft:#FBF0CC;--terra:#C9553D;--terra-soft:#F7E3DC;--night:#151821;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --r:10px;
  font-family:var(--sans);color:var(--ink);background:var(--panel)
}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{margin:0;min-width:320px;font-size:14px;background:radial-gradient(circle at 88% -12%,#F3E7C2 0,transparent 34%),var(--panel)}
::selection{background:var(--honey);color:var(--ink)}
button,select,input{font:inherit;color:inherit}
button{border:1.5px solid rgba(254,252,246,.28);background:rgba(254,252,246,.06);color:#F3EEDF;border-radius:8px;cursor:pointer;font-weight:700;font-size:.84rem;line-height:1.2;padding:.46rem .66rem;white-space:nowrap}
button:disabled{cursor:not-allowed;color:rgba(243,238,223,.38);border-color:rgba(254,252,246,.12)}
button:focus-visible,input:focus-visible{outline:3px solid rgba(239,200,90,.7);outline-offset:2px}
@media(hover:hover) and (pointer:fine){button:not(:disabled):hover{border-color:var(--honey);color:#FEFCF6}}
button.selected{background:var(--honey);border-color:var(--honey);color:var(--ink)}
button.primary{background:var(--terra);border-color:var(--terra);color:#FEFCF6}
button.accent{background:var(--honey);border-color:var(--honey);color:var(--ink)}
button.accent:disabled{background:rgba(239,200,90,.18);color:rgba(243,238,223,.45);border-color:rgba(239,200,90,.25)}
button.toggle.on{border-color:var(--honey);color:var(--honey)}
button.toggle.on:before{content:"● ";font-size:.7em;vertical-align:.1em}

.app-shell{position:relative;width:min(1680px,100%);height:100dvh;margin:auto;padding:10px clamp(14px,2vw,32px) 8px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:9px}
.app-header{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.title-lockup{display:flex;align-items:baseline;gap:12px;min-width:0}
.home{font-family:var(--serif);font-weight:900;color:var(--pine);text-decoration:none;font-size:.95rem;white-space:nowrap}
.home:hover{background:linear-gradient(transparent 62%,var(--honey) 62%)}
.eyebrow{margin:0 0 1px;color:var(--terra);font-weight:700;font-size:.72rem;letter-spacing:.08em}
.app-header h1{font-family:var(--serif);font-weight:900;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.1;margin:0}
.header-note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;white-space:nowrap}
.header-note strong{font-size:.8rem;padding:.26rem .62rem;background:var(--pine-soft);color:var(--pine-deep);border-radius:999px}

#stage{position:relative;min-height:0;overflow:hidden;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--bg);box-shadow:3px 3px 0 var(--honey);display:grid;grid-template-rows:auto minmax(0,1fr);padding:clamp(10px,1.4vw,20px) clamp(12px,1.6vw,24px);gap:8px}
.banner{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--hair);padding-bottom:8px}
.banner p{margin:0;font-family:var(--serif);font-size:clamp(1.05rem,1.55vw,1.45rem);font-weight:900}
.chip{flex:none;font-size:.78rem;font-weight:700;padding:.3rem .72rem;border-radius:999px;background:var(--panel);color:var(--muted)}
.chip.ok{background:var(--honey-soft);color:#8A5A00}.chip.warn{background:var(--terra-soft);color:#9C3B27}
.main{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,25vw,380px);gap:clamp(10px,1.4vw,20px)}
.left{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) clamp(150px,25vh,260px);gap:8px}
.figure-wrap{min-height:0;position:relative}
.figure-wrap>svg{display:block;width:100%;height:100%;touch-action:none;user-select:none}
.figure-wrap>svg.can-drag{cursor:grab}.figure-wrap>svg.dragging{cursor:grabbing}
.strip{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:10px}
.inset{margin:0;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--night);border-radius:var(--r);padding:6px 8px 8px}
.inset figcaption{color:var(--honey);font-size:.74rem;font-weight:700;letter-spacing:.06em;padding:0 2px 4px}
.inset svg{width:100%;height:100%;display:block}
.metrics{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.metric{border-top:1px solid var(--hair);padding:.45rem .2rem;display:flex;flex-direction:column;justify-content:center;min-height:0}
.metric small{color:var(--muted);font-weight:700;font-size:.78rem;display:flex;align-items:center;gap:6px}
.metric small:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot,var(--ink))}
.metric.terra{--dot:var(--terra)}.metric.pine{--dot:var(--pine)}.metric.honey{--dot:var(--honey)}
.metric b{font-family:var(--serif);font-weight:900;font-size:clamp(1.4rem,2.4vw,2.2rem);line-height:1.1;font-variant-numeric:tabular-nums}
.metric b i{font-style:normal;font-family:var(--sans);font-size:.46em;color:var(--muted);margin-left:4px;font-weight:600}
.meter .bar{height:8px;border-radius:999px;background:var(--hair);overflow:hidden;margin:7px 0 5px}.meter .bar span{display:block;height:100%;background:var(--terra);border-radius:999px;transition:width .15s}
.meter em{font-style:normal;font-weight:700;font-size:.9rem;color:var(--terra)}

.side{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--hair);padding-left:clamp(10px,1.4vw,20px)}
.side h3{margin:0;font-family:var(--serif);font-weight:900;font-size:1.05rem;display:flex;justify-content:space-between;align-items:baseline}.side h3 span{font-family:var(--sans);font-size:.76rem;color:var(--muted);font-weight:600}
table.record{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
.record th{color:var(--muted);font-weight:700;font-size:.76rem;padding:.4rem .3rem;border-bottom:1.5px solid var(--ink);text-align:center}
.record td{text-align:center;padding:.38rem .3rem;border-bottom:1px solid var(--hair);height:2.05em}
.record td.q{color:var(--terra);font-weight:800}.record tr.empty td{color:transparent}
.side-tip{margin:0;font-size:.82rem;color:var(--muted);line-height:1.6}
.rule-card{border-radius:var(--r);background:var(--pine-deep);color:#F3EEDF;padding:.85rem 1rem;display:grid;gap:6px}
.rule-zone{font-size:.84rem;color:var(--honey);font-weight:700;letter-spacing:.04em}
.rule-img{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:900;line-height:1.3}.rule-img.q{color:var(--honey)}
.rule-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.8rem;color:#CFD9D2}
.mnemonic{margin:0;font-family:var(--serif);font-weight:900;font-size:.95rem;line-height:1.7}
.mnemonic span{background:linear-gradient(transparent 62%,var(--honey) 62%)}
.app-text{margin:0;font-size:.84rem;line-height:1.6;color:#DCE5DF}

.controls{display:grid;gap:7px;background:var(--pine-deep);border-radius:var(--r);padding:8px 10px}
.control-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.modes,.context{display:flex;flex-wrap:wrap;gap:6px}.modes{padding-right:10px;margin-right:4px;border-right:1px solid rgba(254,252,246,.18)}
.spacer{flex:1}
.settings{color:#DCE5DF;font-size:.82rem;gap:14px}.settings fieldset{border:0;padding:0;margin:0;display:flex;gap:6px;align-items:center}.settings legend{float:left;margin-right:6px;font-weight:700}
.settings .check{display:flex;gap:5px;align-items:center}.settings .hint{color:#A9BDB1}
.method-note{margin:0;color:var(--faint);font-size:.72rem;text-align:center}

@media (max-width:860px){
  html,body{height:auto;overflow:visible}.app-shell{height:auto;min-height:100dvh;grid-template-rows:auto auto auto auto}
  #stage{overflow:visible}.main{grid-template-columns:minmax(0,1fr)}.left{grid-template-rows:auto auto}.figure-wrap{aspect-ratio:var(--fig-ratio,3/1)}
  .strip{grid-template-columns:minmax(0,1fr)}.strip>*{min-width:0}.inset{aspect-ratio:300/245}
  .side{overflow:visible;border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:10px}
  .modes{border-right:0}.header-note{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 演示录制画幅 1920×1080 */
body.presentation{background:var(--bg)}
body.presentation .app-shell{width:1920px;height:1080px;padding:0;display:block}
body.presentation .app-header,body.presentation .controls,body.presentation .method-note{display:none}
body.presentation #stage{width:1920px;height:1080px;border-radius:0;border:0;box-shadow:none;padding:30px 40px;gap:14px}
body.presentation .banner p{font-size:2.3rem}body.presentation .chip{font-size:1.1rem;padding:.4rem 1rem}
body.presentation .main{grid-template-columns:minmax(0,1fr) 470px;gap:30px}
body.presentation .left{grid-template-rows:minmax(0,1fr) 330px}
body.presentation .side h3{font-size:1.4rem}body.presentation .rule-img{font-size:2rem}body.presentation .rule-zone{font-size:1.1rem}
body.presentation .record{font-size:1.1rem}body.presentation .record th{font-size:1rem}
body.presentation .mnemonic{font-size:1.2rem}body.presentation .metric small{font-size:1rem}body.presentation .metric b{font-size:2.6rem}body.presentation .meter em{font-size:1.1rem}
body.presentation .inset figcaption{font-size:1rem}body.presentation .app-text{font-size:1.1rem}

/* 竖版录制画幅 1080×1440（小红书 3:4）：在 body.presentation 上再加 .portrait */
body.presentation.portrait .app-shell{width:1080px;height:1440px}
body.presentation.portrait #stage{width:1080px;height:1440px;padding:40px 36px 36px;gap:18px}
body.presentation.portrait .banner p{font-size:2.5rem;line-height:1.25}
body.presentation.portrait .banner{align-items:flex-start}
body.presentation.portrait .main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:18px}
body.presentation.portrait .left{grid-template-rows:minmax(0,1fr) 300px}
body.presentation.portrait .side{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:16px;max-height:400px}
body.presentation.portrait .side table.record,body.presentation.portrait .side .graph,body.presentation.portrait .side .side-tip{display:none}