:root {
  color-scheme: light;
  --paper: #f4f6f3;
  --surface: #fff;
  --ink: #182a31;
  --muted: #78868a;
  --line: #e5ebe7;
  --green: #176e62;
  --green-dark: #105b52;
  --mint: #e9f4ef;
  --orange: #dc875a;
  --shadow: 0 12px 40px rgba(27, 55, 49, .055), 0 1px 2px rgba(27, 55, 49, .04);
  font-family: 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.topbar { height: 76px; padding: 0 clamp(20px, 4.8vw, 76px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(33, 71, 62, .08); background: rgba(250, 251, 249, .82); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.brand-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.brand-mark { width: 31px; height: 31px; border-radius: 9px; position: relative; display: block; background: var(--green); transform: rotate(-5deg); }
.brand-mark i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #dbf0df; }
.brand-mark i:nth-child(1) { top: 7px; left: 8px; }.brand-mark i:nth-child(2) { top: 19px; left: 8px; }.brand-mark i:nth-child(3) { top: 13px; right: 7px; }
.top-actions { display: flex; gap: 9px; align-items: center; }
#question-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 9px; padding: 10px 14px; font-size: 12px; font-weight: 700; text-decoration: none; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); }.button:active { transform: translateY(0); }
.button:disabled { opacity: .48; cursor: default; transform: none; }
.button-quiet { background: #fff; border-color: #e1e8e3; color: #53636a; }.button-quiet:hover { border-color: #b7ccc1; color: var(--green); }
.import-button { cursor: pointer; }
.workspace { width: min(1280px, calc(100% - 48px)); margin: 30px auto 22px; }
.card { border: 1px solid rgba(34, 74, 64, .075); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.problem-card { padding: 21px 25px 22px; margin-bottom: 17px; }
.problem-kicker, .eyebrow { color: #83928d; text-transform: uppercase; letter-spacing: .13em; font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; }
.problem-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #76b69a; box-shadow: 0 0 0 3px #edf7f0; }
.problem-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.045em; margin-bottom: 7px; }
.problem-text { color: #647378; font-size: 13px; line-height: 1.8; margin: 0; max-width: 740px; }
.problem-tools { display: flex; gap: 5px; padding-top: 4px; flex-shrink: 0; }
.text-button { background: transparent; border: 0; border-radius: 7px; padding: 7px 9px; font-size: 11px; font-weight: 600; color: #667a78; }
.text-button:hover { background: #f3f7f4; color: var(--green); }.text-button span { color: #9aaba5; padding-left: 4px; }
.reveal-panel { margin-top: 15px; padding: 12px 15px; border-radius: 9px; border-left: 3px solid #92bea8; background: #f5f9f6; color: #5a6c68; font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.answer-panel { border-left-color: #d8a070; background: #fbf7f1; color: #76614f; }
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) 294px; align-items: start; gap: 17px; }
.canvas-card { padding: 20px 21px 14px; min-width: 0; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card-heading h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.035em; }
.canvas-legend { display: flex; gap: 13px; color: #78878a; font-size: 10px; align-items: center; }
.canvas-legend span { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.canvas-legend i { display: inline-block; width: 17px; height: 2px; border-radius: 2px; }.legend-given { background: #91a7a0; }.legend-user { background: var(--green); }
.canvas-controls { display: flex; align-items: center; gap: 5px; color: #78878a; font: 10px 'DM Mono', monospace; }
.zoom-range { width: 82px; accent-color: var(--green); }
.icon-button { width: 27px; height: 27px; border: 1px solid #e1e8e3; border-radius: 7px; background: #fff; color: #52756b; font-size: 16px; line-height: 1; }
.icon-button:hover { border-color: #b7ccc1; color: var(--green); }
.mode-bar { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.mode-button { border: 1px solid #e1e8e3; border-radius: 7px; padding: 6px 10px; background: #fff; color: #6b7c77; font-size: 10px; font-weight: 700; }
.mode-button.active { border-color: #9bc4b3; background: #eaf5ef; color: var(--green); }
.mode-bar .canvas-legend { margin-left: auto; }
.answer-point-name { width: 54px; border: 1px solid #e1e8e3; border-radius: 7px; padding: 6px 7px; color: #45675d; font-size: 10px; outline: none; }
.answer-point-name:focus { border-color: #8bb9a7; box-shadow: 0 0 0 3px rgba(139,185,167,.15); }
.answer-point-name[hidden] { display: none; }
.canvas-wrap { position: relative; margin: 16px auto 8px; width: min(100%, 1000px, calc(75vh * 1.25)); overflow: hidden; border: 1px solid #e3ebe6; border-radius: 10px; background: #fcfdfb; touch-action: none; }
#geometry-canvas { display: block; width: 100%; touch-action: none; user-select: none; cursor: grab; }
#geometry-canvas:active { cursor: grabbing; }
.canvas-wrap.panning, .canvas-wrap.panning #geometry-canvas { cursor: grabbing; }
.grid-line { stroke: #d8e3dc; stroke-width: 1.5px; }
.grid-boundary { stroke: #9bb5aa; stroke-width: 3px; }
.given-segment { stroke: #809790; stroke-width: 3px; stroke-linecap: round; }
.given-arc { fill: none; stroke: #829991; stroke-width: 3px; stroke-linecap: round; }
.user-segment { stroke: var(--green); stroke-width: 3.5px; stroke-linecap: round; }
.user-segment { pointer-events: stroke; cursor: pointer; }
.user-segment.line-selected { stroke: var(--orange); stroke-width: 4.5px; }
.extend-preview { stroke: #dc875a; stroke-width: 3.5px; stroke-dasharray: 10px 6px; stroke-linecap: round; pointer-events: none; }
.connect-preview { stroke: #176e62; stroke-width: 3.5px; stroke-dasharray: 8px 6px; stroke-linecap: round; pointer-events: none; opacity: .82; }
.node-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.node-marker { fill: var(--green); stroke: #fff; pointer-events: none; }
.node-group:hover .node-marker { fill: #124e47; }
.node-group, .node-group:focus { outline: none; }
.node-group.selected .node-marker { fill: #dc875a; stroke: #fff; }
.node-group.marked .node-marker { fill: #dc875a; stroke: #fff; }
.node-target-ring { fill: none; stroke: #111820; pointer-events: none; }
.node-label { fill: #47665d; font-family: 'DM Mono', monospace; font-weight: 500; pointer-events: none; }
.canvas-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #85938d; font-size: 13px; background: rgba(252,253,251,.88); }
.canvas-empty[hidden] { display: none; }
.canvas-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.canvas-instruction { font-size: 10px; color: #87948e; }.grid-caption { font: 10px 'DM Mono', monospace; color: #9ba7a1; }
.tools-column { display: grid; gap: 14px; }
.construction-card { padding: 18px 17px 14px; }
.compact-heading h2 { font-size: 15px; }.step-count { font: 10px 'DM Mono', monospace; color: #8b9a94; }
.selection-note { display: flex; align-items: center; gap: 9px; margin: 16px 0 9px; padding: 10px; border-radius: 8px; color: #74847e; background: #f5f8f5; font-size: 10px; }
.selection-icon { font-size: 17px; color: #8bb09b; }
.construction-list { list-style: none; padding: 0; margin: 0; max-height: 228px; overflow-y: auto; }
.construction-list:empty { display: none; }
.construction-list li { display: flex; align-items: center; gap: 9px; padding: 9px 3px; border-bottom: 1px solid #f0f2ef; color: #52635f; font-size: 11px; }
.step-number { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; border-radius: 6px; color: #628176; background: #edf4ef; font: 9px 'DM Mono', monospace; }
.step-equation { font: 11px 'DM Mono', monospace; color: #3a5c52; }.remove-step { margin-left: auto; border: 0; background: transparent; color: #a8b2ac; font-size: 15px; padding: 2px 4px; }.remove-step:hover { color: #b76f59; }
.construction-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 13px; }
.button-small { font-size: 10px; padding: 7px 9px; border-radius: 7px; }.button-small:disabled { opacity: .45; cursor: default; transform: none; }
.check-card { padding: 17px; background: #f0f6f1; border-color: #e2eee5; box-shadow: none; }
.check-topline { display: flex; justify-content: space-between; align-items: center; }.check-spark { font-size: 18px; color: #84ae93; }
.check-card p { color: #71817a; font-size: 10px; line-height: 1.75; margin: 9px 0 13px; }
.expression-label { display: block; margin-bottom: 5px; color: #71817a; font-size: 10px; }
.relation-labels { display: grid; gap: 5px; margin: 0 0 13px; padding: 0; list-style: none; }
.relation-labels li { position: relative; padding-left: 14px; color: #526b60; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.relation-labels li::before { position: absolute; left: 1px; top: .57em; width: 5px; height: 5px; border-radius: 50%; background: #8bb39a; content: ''; }
.button-primary { color: #fff; background: var(--green); box-shadow: 0 5px 12px rgba(23, 110, 98, .14); }.button-primary:hover { background: var(--green-dark); }
.check-button { width: 100%; padding: 12px 14px; justify-content: space-between; font-size: 12px; }
.check-results { margin-top: 12px; padding-top: 10px; border-top: 1px solid #dce9df; }
.result-summary { margin: 0 0 7px; color: #276b50; font-size: 11px; font-weight: 700; }.result-summary.fail { color: #a56843; }
.result-row { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0; color: #6d7c74; font-size: 10px; line-height: 1.5; }.result-icon { color: #69a280; font-weight: 800; }.result-row.fail .result-icon { color: #c7845b; }
.format-hint { margin: 1px 4px; color: #97a29c; font-size: 10px; line-height: 1.7; }
.page-footer { display: flex; justify-content: space-between; padding: 18px 3px 0; color: #9aa6a0; font-size: 9px; letter-spacing: .04em; }.page-footer span:last-child { font-family: 'DM Mono', monospace; }
.toast { position: fixed; z-index: 5; left: 50%; bottom: 24px; transform: translate(-50%, 14px); opacity: 0; pointer-events: none; padding: 10px 15px; border-radius: 8px; background: #223a35; color: white; font-size: 12px; box-shadow: 0 8px 24px rgba(14, 41, 34, .18); transition: opacity .2s, transform .2s; }.toast.show { transform: translate(-50%, 0); opacity: 1; }
.examples-dialog { width: min(760px, calc(100% - 32px)); max-height: min(80vh, 780px); padding: 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); box-shadow: 0 20px 70px rgba(20, 42, 37, .2); }
.examples-dialog::backdrop { background: rgba(18, 35, 31, .5); }
.examples-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.examples-heading h2 { margin: 6px 0 0; font-size: 19px; }
.examples-close { width: 32px; height: 32px; font-size: 22px; }
.examples-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.example-item { min-width: 0; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.example-item:hover, .example-item:focus-visible { border-color: #6fa996; outline-color: var(--green); }
.example-thumbnail { display: grid; place-items: center; height: 140px; background: #f5f9f6; border-bottom: 1px solid var(--line); }
.example-thumbnail svg { width: 100%; height: 100%; }
.example-grid { stroke: #ccdcd2; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.example-geometry { fill: none; stroke: #52786d; stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.example-point { fill: #176e62; }
.example-title { display: block; padding: 12px; font-size: 12px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 680px) { .topbar { height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }.top-actions { flex-wrap: wrap; }.examples-dialog { padding: 18px; }.examples-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.example-thumbnail { height: 115px; } }
@keyframes draw-in { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 860px) { .workspace { width: min(760px, calc(100% - 32px)); margin-top: 20px; }.workbench { grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }.canvas-card { padding: 17px 15px 12px; }.problem-card { padding: 18px; } }
@media (max-width: 680px) { .topbar { height: 64px; padding: 0 16px; }.top-actions { gap: 6px; }.top-actions .button { padding: 8px 10px; font-size: 10px; }.workspace { width: calc(100% - 24px); margin: 13px auto 18px; }.problem-heading-row { display: block; }.problem-tools { padding-top: 12px; }.problem-card { margin-bottom: 11px; }.workbench { grid-template-columns: 1fr; }.tools-column { grid-template-columns: 1fr; }.canvas-legend { gap: 8px; font-size: 9px; }.canvas-legend i { width: 12px; }.canvas-card { padding: 15px 12px 11px; }.canvas-wrap { margin-top: 12px; }.construction-list { max-height: 160px; }.page-footer { padding-top: 13px; } }
@media (max-width: 390px) { .brand { gap: 8px; font-size: 13px; }.brand-mark { width: 27px; height: 27px; }.brand-sub { font-size: 9px; }.top-actions .button { padding: 7px 8px; }.canvas-legend { display: none; } }