:root{--sd-paper:#fffdfc;--sd-canvas:#f7f1e8;--sd-panel:#faf7f1;--sd-ink:#24313d;--sd-muted:#59635f;--sd-sage:#44755d;--sd-sage-dark:#315f4a;--sd-blue:#415a77;--sd-orange:#b45f46;--sd-line:#c8b9a9;--sd-focus:#8a3f29}
*{box-sizing:border-box}
body.segment-diagram-page{margin:0;min-height:100vh;overflow-x:hidden;color:var(--sd-ink);background:linear-gradient(180deg,#f7f1e8,#f3ecdf);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
.segment-main{width:min(1320px,calc(100% - 32px));margin:0 auto;padding:10px 0 24px}
body.segment-diagram-page.xinyu-tool .tool-heading{padding:3px 0 10px;text-align:center}
.segment-diagram-page .eyebrow{margin:0 0 3px;color:#526c87;font-size:11px;font-weight:900}
body.segment-diagram-page.xinyu-tool .tool-heading h1{margin:0;color:var(--sd-ink);font-size:clamp(27px,3vw,39px);letter-spacing:-.03em;text-wrap:balance}
.segment-diagram-page .lead{max-width:920px;margin:5px auto 0;color:var(--sd-muted);font-size:13px;font-weight:700}
.segment-diagram-page .chips{display:flex;justify-content:center;gap:6px;margin-top:7px}
.segment-diagram-page .chip{padding:4px 10px;border:1px solid #d9cec1;border-radius:999px;color:var(--sd-blue);background:var(--sd-paper);font-size:11px;font-weight:850}

.segment-lab{display:grid;grid-template-columns:minmax(0,1fr) 338px;min-height:590px;overflow:hidden;border:1px solid var(--sd-line);border-radius:21px;background:var(--sd-paper);box-shadow:0 20px 50px rgba(65,55,42,.13)}
.segment-lab .stage{min-width:0;border-right:1px solid #e2d7ca;background:var(--sd-paper)}
.segment-lab .stage-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;color:var(--sd-ink);background:#f2eadf;background-image:none}
.segment-lab .stage-kicker{margin:0 0 2px;color:var(--sd-sage-dark);font-size:11px;font-weight:900;letter-spacing:.04em}
.segment-lab .stage-title{margin:0;color:var(--sd-ink);font-size:20px;line-height:1.22}
.segment-lab .stage-meta{margin:0;color:#485b67;font-size:12px;font-weight:850;text-align:right}

.material-note,.card-tray,.diagram-board{margin:9px 14px 0;border:1px solid #d9cec1;border-radius:14px;background:#fffaf3}
.material-note{padding:9px 11px}
.material-head,.tray-head,.board-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.material-head h3,.tray-head h3,.board-head h3{margin:0;color:#2c4958;font-size:13px}
.material-head span,.tray-head span,.board-head span{color:var(--sd-muted);font-size:11px;font-weight:800}
.material-sentence{margin:6px 0;color:#344751;font-size:14px;font-weight:850;line-height:1.45}
.phrase-row{display:flex;flex-wrap:wrap;gap:6px}
.phrase-row button,.mapping-card,.mapping-slot,.case-button,.primary-action,.secondary-actions button{font:inherit;touch-action:manipulation;cursor:pointer}
.phrase-row button{min-height:44px;padding:0 11px;border:1px solid #7a6b5c;border-radius:9px;color:#334e5c;background:var(--sd-paper);font-size:12px;font-weight:900}
.phrase-row button.is-spotlit{border-color:var(--sd-focus);box-shadow:0 0 0 3px rgba(138,63,41,.18);background:#fff1e8}

.card-tray{padding:9px 11px;background:#f6f1e8}
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:7px}
.mapping-card{position:relative;display:grid;align-content:center;gap:3px;min-width:0;min-height:68px;padding:7px;border:1px solid #6f6256;border-radius:11px;color:#294454;background:var(--sd-paper);box-shadow:0 5px 12px rgba(76,61,47,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.mapping-card span{font-size:10px;font-weight:800}.mapping-card strong{font-size:13px;overflow-wrap:anywhere}
.mapping-card.tone-blue{border-top:4px solid #647f99}.mapping-card.tone-orange{border-top:4px solid #b96e55}
.mapping-card.unknown-card{border-style:dashed}.mapping-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(76,61,47,.13)}
.mapping-card[aria-pressed="true"]{border-color:var(--sd-focus);box-shadow:0 0 0 3px rgba(138,63,41,.18),0 8px 18px rgba(76,61,47,.12);transform:translateY(-2px)}
.mapping-card.is-placed::after{position:absolute;right:5px;bottom:4px;padding:2px 5px;border-radius:999px;color:#315f4a;background:#e4efe8;content:"已摆放";font-size:9px;font-weight:900}
.mapping-card.is-spotlit{background:#fff1e8}
.mapping-card[hidden],.mapping-slot[hidden],.phrase-row button[hidden],.primary-action[hidden]{display:none!important}

.diagram-board{padding:9px 11px 11px;background:linear-gradient(180deg,#fffdf9,#f5eee2);scroll-margin-block:20px}
.diagram-row{position:relative;margin-top:8px;padding:8px;border:1px solid #d7c8b7;border-radius:12px;background:rgba(255,255,255,.7)}
.diagram-row[hidden]{display:none}
.slot-pair{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:8px;position:relative;z-index:2}
.mapping-slot{display:grid;align-content:center;gap:2px;min-width:0;min-height:54px;padding:6px 9px;border:1.5px dashed #75675b;border-radius:10px;color:#425866;background:rgba(255,253,252,.96);text-align:left;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.mapping-slot span{font-size:10px;font-weight:800}.mapping-slot strong{font-size:12px;overflow-wrap:anywhere}
.mapping-slot.is-preview{border-style:solid;border-color:var(--sd-orange);background:#fff0e9;transform:translateY(-2px)}
.mapping-slot.is-filled{border-style:solid;border-color:var(--sd-sage);background:#edf5ef}
.mapping-slot.is-spotlit{border-color:var(--sd-focus);box-shadow:0 0 0 3px rgba(138,63,41,.18);background:#fff1e8}
.paper-strip{position:relative;display:flex;align-items:center;justify-content:center;height:36px;margin:8px 10px 0;color:#314b59;font-size:11px;font-weight:900}
.known-strip{width:72%;border-top:4px solid #536f88}
.known-strip .endpoint{position:absolute;top:-9px;width:4px;height:15px;border-radius:3px;background:#536f88}.known-strip .endpoint.start{left:0}.known-strip .endpoint.end{right:0}
.unknown-strip{width:auto;justify-content:flex-start;padding-left:24%;border-top:0;background:linear-gradient(90deg,transparent 75%,rgba(255,253,252,.94) 100%)}
.unknown-strip::before{position:absolute;inset:0 18px auto 0;height:4px;background:repeating-linear-gradient(90deg,#a96951 0 11px,transparent 11px 18px);content:"";-webkit-mask-image:linear-gradient(90deg,#000 0 68%,transparent 96%);mask-image:linear-gradient(90deg,#000 0 68%,transparent 96%)}
.unknown-strip .endpoint.start{position:absolute;left:0;top:-9px;width:4px;height:15px;border-radius:3px;background:#a96951}
.unknown-strip .open-end{position:absolute;right:0;top:-19px;color:#8a5a48;font-size:24px;letter-spacing:3px}

.recent-step{min-height:38px;margin:9px 14px 11px;padding:8px 11px;border-left:3px solid #b3742d;border-radius:8px;color:#54493f;background:#fff5e4;font-size:11px;font-weight:800;line-height:1.45}
.segment-diagram-page .sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

.segment-lab .control-panel{min-width:0;padding:16px;background:var(--sd-panel)}
.control-title span{color:#52705f;font-size:11px;font-weight:900}.control-title h2{margin:3px 0 11px;color:#263f50;font-size:20px;line-height:1.2}
.case-grid{display:grid;gap:7px}.segment-diagram-page.xinyu-tool .case-button{display:grid;gap:2px;min-height:52px;padding:7px 9px;border:1px solid #6f6256;border-radius:10px;color:#314e61;background:var(--sd-paper);text-align:left}
.case-button strong{font-size:12px}.case-button span{color:#59635f;font-size:10px;font-weight:800}.segment-diagram-page.xinyu-tool .case-button.active{border-color:var(--sd-sage-dark);box-shadow:inset 4px 0 var(--sd-sage);color:#244c3b;background:#eaf4ee}
.instruction-card{margin-top:10px;padding:9px 11px;border:1px solid #d5cabd;border-radius:11px;background:#fffdfc}.instruction-card h3{margin:0;color:#315f4a;font-size:12px}.instruction-card ol{margin:6px 0 0;padding-left:20px;color:#4a5c64;font-size:11px;font-weight:750;line-height:1.55}
.state-note,.grade-boundary{margin:9px 0 0;padding:8px 10px;border-radius:9px;font-size:11px;font-weight:800;line-height:1.45}.state-note{color:#315f4a;background:#edf4ef}.grade-boundary{color:#55636a;background:#eef1ef}
.segment-diagram-page.xinyu-tool .primary-action{width:100%;min-height:48px;margin-top:9px;border:1px solid var(--sd-sage-dark);border-radius:10px;color:#fff;background:var(--sd-sage);font-size:14px;font-weight:950}.segment-diagram-page.xinyu-tool .primary-action:hover{background:var(--sd-sage-dark)}
.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.segment-diagram-page.xinyu-tool .secondary-actions button{min-height:44px;border:1px solid #6f6256;border-radius:9px;color:#334f61;background:var(--sd-paper);font-size:12px;font-weight:900}.segment-diagram-page.xinyu-tool .secondary-actions button:disabled{color:#777f7b;background:#e5e1da;cursor:default}
.operation-hint{margin:9px 0 0;color:#59635f;font-size:11px;font-weight:750;line-height:1.5}

body.workbench-tool-detail.segment-diagram-page .segment-lab :is(button):focus-visible{outline:3px solid var(--sd-focus)!important;outline-offset:3px!important}
body.segment-diagram-page.xinyu-tool:not(.classroom-screen) .segment-lab .stage-head{color:var(--sd-ink)!important;background:#f2eadf!important;background-image:none!important}
body.segment-diagram-page.xinyu-tool:not(.classroom-screen) .segment-lab .stage-head .stage-kicker{color:var(--sd-sage-dark)!important;text-shadow:none!important}
body.segment-diagram-page.xinyu-tool:not(.classroom-screen) .segment-lab .stage-head .stage-title{color:var(--sd-ink)!important;text-shadow:none!important}
body.segment-diagram-page.xinyu-tool:not(.classroom-screen) .segment-lab .stage-head .stage-meta{color:#485b67!important;text-shadow:none!important}
body.segment-diagram-page.xinyu-tool .segment-lab .classroom-screen-toggle{min-height:44px!important;border-color:#6f5f50!important;color:var(--sd-ink)!important;background:var(--sd-paper)!important}
body.segment-diagram-page.xinyu-tool .segment-lab .fullscreen-button{flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;border-color:#6f5f50!important;color:var(--sd-ink)!important;background:var(--sd-paper)!important}
body.classroom-screen.segment-diagram-page{color:var(--sd-ink)!important;background:var(--sd-canvas)!important}
body.classroom-screen.segment-diagram-page .segment-lab,body.classroom-screen.segment-diagram-page .segment-lab .stage,body.classroom-screen.segment-diagram-page .segment-lab .control-panel{border-color:#c8b9a9!important;color:var(--sd-ink)!important;background:var(--sd-paper)!important;box-shadow:none!important}
body.classroom-screen.segment-diagram-page .segment-lab .stage-head{color:var(--sd-ink)!important;background:#f2eadf!important;background-image:none!important}
body.classroom-screen.segment-diagram-page .segment-lab :is(.stage-title,.stage-meta,.control-title h2,.input-label){color:var(--sd-ink)!important;text-shadow:none!important}
body.classroom-screen.segment-diagram-page .segment-lab :is(.mapping-card,.mapping-slot,.case-button,.secondary-actions button){color:var(--sd-ink)!important;background:var(--sd-paper)!important}
body.classroom-screen.segment-diagram-page .segment-lab .case-button.active{color:#244c3b!important;background:#eaf4ee!important}
body.classroom-screen.segment-diagram-page .segment-lab .mapping-card.is-spotlit{border-color:var(--sd-focus)!important;background:#fff1e8!important;box-shadow:0 0 0 3px rgba(138,63,41,.22)!important}
body.classroom-screen.segment-diagram-page .segment-lab :is(.diagram-board,.card-tray){padding:13px 15px!important}
body.classroom-screen.segment-diagram-page .segment-lab .diagram-row{min-height:116px;padding:12px!important}
body.classroom-screen.segment-diagram-page .segment-lab .mapping-card{min-height:76px!important}
body.classroom-screen.segment-diagram-page .segment-lab .paper-strip{height:42px;font-size:13px}
body.segment-diagram-page.xinyu-tool .segment-lab:fullscreen{display:grid!important;grid-template-columns:minmax(0,1fr) 360px!important;gap:0!important;padding:16px!important;align-content:center;background:var(--sd-canvas)!important}
body.segment-diagram-page .segment-lab:fullscreen .stage{overflow:auto}body.segment-diagram-page .segment-lab:fullscreen .control-panel{overflow:auto}
body.segment-diagram-page .segment-lab:fullscreen :is(.diagram-board,.card-tray){padding:14px 16px!important}
body.segment-diagram-page .segment-lab:fullscreen .diagram-row{min-height:120px;padding:13px!important}
body.segment-diagram-page .segment-lab:fullscreen .mapping-card{min-height:78px!important}
body.segment-diagram-page .segment-lab:fullscreen .paper-strip{height:44px;font-size:13px}

@media(min-width:721px) and (max-width:980px){.segment-main{width:calc(100% - 24px)}.segment-lab,body.segment-diagram-page.xinyu-tool .segment-lab:fullscreen{grid-template-columns:minmax(0,1fr) minmax(276px,34vw)!important}.segment-lab .control-panel{padding:12px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mapping-card{min-height:58px}.material-note,.card-tray,.diagram-board{margin-left:9px;margin-right:9px}.segment-lab .stage-head{padding-left:11px;padding-right:11px}.slot-pair{grid-template-columns:1fr}.paper-strip{margin-top:6px}.known-strip{width:78%}}
@media(max-width:720px){.segment-main{width:calc(100% - 18px);padding-top:8px}body.segment-diagram-page.xinyu-tool .tool-heading{padding:0 0 8px}.segment-diagram-page .tool-heading h1{font-size:23px;line-height:1.22}.segment-diagram-page .lead{font-size:12px}.segment-diagram-page .chips{flex-wrap:wrap}.segment-lab,body.segment-diagram-page.xinyu-tool .segment-lab:fullscreen{grid-template-columns:1fr!important;border-radius:16px}.segment-lab .stage{border-right:0;border-bottom:1px solid #e2d7ca}.segment-lab .stage-head{align-items:flex-start;flex-wrap:wrap;padding:9px 10px}.segment-lab .stage-title{font-size:17px}.segment-lab .stage-actions{width:100%;justify-content:flex-start}.segment-lab .stage-meta{margin-right:auto;text-align:left}.material-note,.card-tray,.diagram-board{margin-left:8px;margin-right:8px}.material-head,.tray-head,.board-head{align-items:flex-start;flex-direction:column;gap:2px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mapping-card{min-height:62px}.slot-pair{grid-template-columns:1fr 1fr}.recent-step{margin-left:8px;margin-right:8px}.segment-lab .control-panel{padding:12px}.case-grid{grid-template-columns:1fr}.segment-diagram-page.xinyu-tool .case-button{text-align:center}.instruction-card{display:none}}
@media(max-width:430px){.segment-diagram-page .tool-heading h1{font-size:21px}.material-sentence{font-size:13px}.phrase-row{display:grid;grid-template-columns:1fr 1fr}.card-grid{gap:6px}.mapping-card strong{font-size:12px}.slot-pair{grid-template-columns:1fr}.paper-strip{height:34px}.known-strip{width:72%}.secondary-actions{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.mapping-card:hover,.mapping-card[aria-pressed="true"],.mapping-slot.is-preview{transform:none!important}}