/* 通用控件：Lucide 24 px 网格，操作图标通常显示为 18 px。 */
:root{
  --control-radius:10px;
  --control-line:#d4d8dc;
  --control-hover:#f1f3f5;
  --control-selected:#edf2ff;
  --control-focus:#1e54d8;
  --control-shadow:0 1px 2px rgb(23 23 22 / 5%);
}
.icon{stroke-width:1.8}
.button,.answer-actions .button,.feedback-actions .button{
  min-height:44px;padding:10px 17px;gap:9px;border-radius:var(--control-radius);
  font-size:14px;font-weight:500;line-height:1.5;
  transition:background-color .14s,border-color .14s,box-shadow .14s,color .14s;
}
.button .icon,.button.primary .icon{width:18px;height:18px}
.button:hover,.button:active{transform:none}
.button.primary{background:var(--ink);border-color:var(--ink);box-shadow:0 1px 2px rgb(23 23 22 / 14%)}
.button.primary:hover{background:#303334;border-color:#303334}
.button.primary:active{background:#101213;box-shadow:inset 0 1px 2px rgb(0 0 0 / 20%)}
.button.secondary{background:var(--surface);border-color:var(--control-line);box-shadow:var(--control-shadow)}
.button.secondary:hover{background:#f6f7f8;border-color:#aab3bf}
.button.secondary:active{background:#edf0f4}
.button.quiet{background:transparent;border-color:transparent;box-shadow:none;color:#515a66}
.button.quiet:hover{background:var(--control-hover);color:var(--ink)}
.button:disabled{opacity:.52;box-shadow:none;transform:none}
.button:focus-visible,.icon-button:focus-visible,.chip:focus-visible,.account-button:focus-visible,
.nav-item:focus-visible,.save-state:focus-visible,summary:focus-visible{
  outline:2px solid var(--control-focus);outline-offset:3px;
}
.icon-button{border-radius:var(--control-radius);transition:background-color .14s,border-color .14s,color .14s}
.icon-button:hover{background:var(--control-hover);border-color:var(--control-line)}
.icon-button .icon{width:20px;height:20px}
.icon-button.is-bookmarked{color:var(--control-focus);background:var(--control-selected);border-color:#c8d6fb}
.is-bookmarked .icon{fill:none}
.rail-brand{width:44px;height:44px;margin-top:23px;border-radius:12px}
.rail-brand img{width:44px;height:44px;display:block}
.nav-item{gap:6px;color:#606a76;border:1px solid transparent}
.nav-item .icon{width:23px;height:23px}
.nav-item:hover{background:#f4f5f6;color:var(--ink)}
.nav-item.active{background:var(--control-selected);color:var(--control-focus);border-color:#e0e7fb}
.nav-item.active:before{background:var(--control-focus)}
.rail-help{border-radius:var(--control-radius)}
.rail-help:hover{background:var(--control-hover);color:var(--ink)}
.header-mark{display:none}
.account-button{min-height:40px;padding:8px 12px;gap:8px;border-radius:var(--control-radius);background:white;border-color:var(--control-line);box-shadow:var(--control-shadow)}
.account-button:hover{border-color:#aab3bf;background:#fafbfc}
.account-button .icon{width:18px;height:18px}
.save-state{border-radius:8px;padding:5px 8px;gap:8px;white-space:nowrap}
.save-state:hover{background:var(--control-hover)}
.save-state .icon{width:18px;height:18px}
.save-state[data-state="saving"] .icon{animation:control-spin 1s linear infinite}
.save-state[data-state="saved"] .icon{color:#426452}
.save-state[data-state="error"]{color:var(--error);background:#fff4f2}
.knowledge-return{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.knowledge-return .icon{width:15px;height:15px}
.text-link{gap:8px}
.text-link:hover{color:var(--control-focus)}
.chip{border-radius:8px;min-height:42px;border-color:var(--control-line);font-size:13px;transition:background-color .14s,border-color .14s,color .14s}
.chip:hover{background:var(--control-hover)}
.chip.selected{background:var(--control-selected);border-color:#bdcff8;color:#1949be}
.chip.selected span{opacity:.85}
.searchbox{background:#fbfcfc;border:1px solid var(--control-line);border-radius:var(--control-radius);padding:0 12px;gap:10px;min-width:0}
.searchbox:focus-within{border-color:var(--control-focus);box-shadow:0 0 0 3px rgb(30 84 216 / 9%)}
.searchbox input:focus-visible{outline:0}
.select-wrap select{border-color:var(--control-line);border-radius:var(--control-radius);font-size:13px;min-height:44px}
.unit-input{border-color:#adb5bf;border-radius:var(--control-radius);transition:border-color .14s,box-shadow .14s}
.unit-input:focus-within{border-color:var(--control-focus);box-shadow:0 0 0 3px rgb(30 84 216 / 9%)}
.unit-input:focus-within input:focus-visible,.unit-input:focus-within select:focus-visible{outline:0}
.unit-input select{background:#f6f7f8}
.unit-input.has-error{border-color:var(--error)}
.topic-icon{width:40px;height:40px;border:1px solid #dfe5ed;border-radius:11px;background:#f8fafc}
.topic-symbol{display:block;width:24px;height:24px;flex:none;color:#344152}
.topic-symbol .topic-glass{fill:#edf2ff}
.topic-symbol .topic-axis{stroke:#aab5c3;stroke-width:1}
.topic-symbol .topic-accent,.topic-drawing .topic-ray,.topic-drawing .topic-image{stroke:#1e54d8}
.topic-accent-fill{fill:#1e54d8}
.topic-drawing{color:#344152}
.topic-drawing .topic-axis{stroke:#c4cdd8;stroke-width:1;stroke-dasharray:3 4}
.topic-drawing[data-topic-drawing="R"] .topic-axis{stroke-dasharray:none}
.topic-drawing .topic-glass{fill:#f0f4fc;stroke:#52647b;stroke-width:1.4}
.topic-drawing .topic-chief-ray{stroke-opacity:.65}
.topic-drawing .topic-object,.topic-drawing .topic-image{stroke-width:2}
.topic-label{fill:#344152;stroke:none;font-family:KaTeX_Main,"Times New Roman",serif;font-size:14px;font-style:italic}
.topic-prime{font-size:.75em;font-style:normal}
.topic-card .topic-drawing{height:126px;margin:13px 0 9px}
.topic-card:focus-visible{outline:2px solid var(--control-focus);outline-offset:3px}
.topic-card:hover{transform:none;border-color:#b3bfd1;box-shadow:0 3px 12px rgb(31 48 75 / 4%)}
.topic-card-bottom>.icon{border:1px solid var(--control-line);border-radius:50%;width:28px;height:28px;padding:5px;background:#fff}
.topic-card:hover .topic-card-bottom>.icon{border-color:#bdcff8;color:var(--control-focus);background:var(--control-selected)}
.topic-card:hover .topic-icon{border-color:#bdcff8;background:#f2f5fd}
.hint-button{min-height:44px;border-radius:8px;padding:8px 10px}
.hint-button:hover{background:#fff8e9}
.zoom-cue{border:1px solid #e1e5e9;border-radius:7px;box-shadow:var(--control-shadow);background:rgb(255 255 255 / 95%)}
.zoom-cue .icon{width:15px;height:15px}
.explanation>summary,.experiment>summary,.source-details>summary,.numeric-details>summary,.profile-evidence>summary{
  display:flex;align-items:center;gap:9px;list-style:none;min-height:44px;
}
.explanation>summary::-webkit-details-marker,.experiment>summary::-webkit-details-marker,
.source-details>summary::-webkit-details-marker,.numeric-details>summary::-webkit-details-marker,.profile-evidence>summary::-webkit-details-marker{display:none}
.explanation>summary:after,.experiment>summary:after,.profile-evidence>summary:after,
.explanation[open]>summary:after,.experiment[open]>summary:after{content:none}
.disclosure-toggle{width:17px;height:17px;margin-left:auto;color:#657183;transition:transform .16s}
details[open]>summary>.disclosure-toggle{transform:rotate(180deg)}
.modal-header .icon-button{background:#f5f6f7;border-color:#e3e6ea}
.modal-header .icon-button:hover{background:#e9edf3;border-color:#c9d0da}
.icon-credit{font-size:12px;color:var(--muted);margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.icon-credit a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
@keyframes control-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){
  .wordmark{display:inline-flex;align-items:center;gap:7px}
  .header-mark{display:block;width:26px;height:26px;flex:none}
  .topbar-right{gap:9px}
  .save-state{padding:4px 6px}
  .save-state .icon{width:17px;height:17px}
  .knowledge-return .icon{display:none}
  .nav-item{min-height:56px;gap:3px}
  .nav-item .icon{width:22px;height:22px}
  .rail nav{gap:8px;padding:4px 12px}
  .answer-actions{gap:8px;flex-wrap:wrap}
  .answer-actions .button,.feedback-actions .button{min-height:46px;padding:11px 13px;font-size:14px}
  .hint-button{padding:8px;font-size:12px}
  .filterbar{gap:10px}
  .topic-tabs .chip{font-size:12px;padding:8px 11px}
  .record-tabs .chip{font-size:12px;min-height:40px}
  .topic-card{grid-template-columns:1fr}
  .topic-card .topic-card-top{grid-column:1;grid-row:1}
  .topic-card .topic-drawing{grid-column:1;grid-row:2;height:112px;margin:6px 0 8px}
  .topic-card h3{grid-row:3}
  .topic-card p{grid-row:4}
  .topic-card-bottom{grid-column:1;grid-row:5}
}
@media(prefers-reduced-motion:reduce){.save-state[data-state="saving"] .icon{animation:none}}
/* v0.7: public trial and three-question topic entries. */
.home-hero h1{font-size:clamp(28px,3vw,42px);line-height:1.32;letter-spacing:-.025em}
.home-review{margin-left:20px}
.starter-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin:24px 0 30px}
.starter-card{background:#fff;border:1px solid #d4d8dc;border-radius:12px;padding:22px;min-width:0}
.starter-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.starter-title h2{font-size:18px;margin:0}.starter-title>span{color:#62686f;font-size:13px}
.starter-card>p{font-size:14px;color:#555d66;line-height:1.8;min-height:50px}
.starter-card ol{list-style:none;padding:0;margin:18px 0}
.starter-card li{display:grid;grid-template-columns:32px 1fr;gap:4px 10px;padding:10px 0;border-top:1px solid #eceeed;font-size:14px}
.starter-card li small{grid-column:2;color:#62686f}.starter-card .button{width:100%}
.feedback-basis{line-height:1.8;font-size:15px}.learning-resources>p{font-size:14px;line-height:1.7;color:#555d66}
.feedback{animation:feedback-in 160ms ease-out}.explanation[open] .explanation-body{animation:feedback-in 140ms ease-out}
.profile-dimensions>.results-grid{margin:20px 0}.evidence-top{gap:10px;flex-wrap:wrap}.evidence-top>a{font-weight:600}
.save-state[data-state="trial"]{color:#555d66;white-space:nowrap}
@keyframes feedback-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.starter-card{padding:18px}.starter-cards{gap:12px}.home-hero h1{font-size:30px}.topbar-right{gap:8px}.save-state[data-state="trial"]{font-size:11px}.feedback-actions{gap:10px}.profile-conclusion{font-size:16px}}
@media(prefers-reduced-motion:reduce){.feedback,.explanation[open] .explanation-body{animation:none}}

.answer-lock .option input:disabled{opacity:0}
.profile-copy .micro{margin-top:14px;line-height:1.7}
.evidence-top>a,.result-topic .evidence p{font-size:14px;line-height:1.75}

/* 图示先展示全图，细节模式保留独立滚动区域。 */
dialog.wide[open]{display:flex;flex-direction:column;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.modal-header{flex-shrink:0}
.modal-header h2{min-width:0}
.modal-header .icon-button{flex-shrink:0}
dialog.wide .modal-body{min-height:0;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.diagram-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.diagram-toolbar .button{min-width:0;min-height:44px;padding:8px 12px}
.diagram-toolbar [aria-pressed=true]{color:var(--control-focus);background:var(--control-selected);border-color:#bdcff8}
.diagram-toolbar span{font-size:13px;color:var(--muted)}
.option{-webkit-tap-highlight-color:transparent}
.question-figure .zoom-cue,.ray-zoom .zoom-cue{
  position:static;justify-content:flex-end;min-height:36px;padding:7px 10px;
  border:0;border-top:1px solid #e1e5e9;border-radius:0;box-shadow:none;background:#fafbfc;font-size:12px;
}
.zoom-image{min-height:0;overflow:auto;overscroll-behavior:contain;border-radius:6px}
.zoom-image:focus-visible{outline:2px solid var(--control-focus);outline-offset:2px}
.zoom-image img,.zoom-image .ray-diagram{display:block;width:100%;min-width:0;height:auto;max-height:none}
.zoom-image:not(.is-detail) img,.zoom-image:not(.is-detail) .ray-diagram{max-height:calc(100dvh - 224px - env(safe-area-inset-top) - env(safe-area-inset-bottom));object-fit:contain}
.zoom-image.is-detail img,.zoom-image.is-detail .ray-diagram{width:max(100%,760px);min-width:760px}
@media(max-width:700px){
  dialog.wide{width:calc(100vw - 16px);max-width:calc(100vw - 16px)}
  dialog.wide .modal-header{padding:10px 12px}
  dialog.wide .modal-body{padding:12px}
  .zoom-image:not(.is-detail) img,.zoom-image:not(.is-detail) .ray-diagram{max-height:calc(100dvh - 184px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}