/* Focus, current selection and hover each carry their own readable signal. */
:root{--feedback:140ms;--selection:220ms}
.small-bear-guide[data-opening=false][data-state=idle] .character-art,.small-bear-guide[data-opening=false][data-state=idle] .bear-eyes{animation:none}
.small-bear-guide[data-state=greeting] .bear-hand{animation:bear-wave 520ms ease-in-out 1}
.small-bear-guide[data-state=thinking] .float-keyboard{animation:none}
.bear-source-paper{opacity:0;transition:opacity 140ms}.small-bear-guide[data-source-paper=true] .bear-source-paper{opacity:1}
a,button,summary{transition-duration:var(--feedback)}
button:not(:disabled):active{translate:0 1px}
.orbit-card{outline:1px solid #243c321a;outline-offset:-1px;transition:box-shadow 220ms,outline-color 220ms}
.orbit-card.is-current{outline:3px solid var(--accent);outline-offset:-3px;box-shadow:0 28px 48px -25px #293e3566,0 0 0 1px #fff8e8}
.orbit-card.is-current .card-caption{background:#f7eee1;box-shadow:inset 0 -4px var(--accent)}
.orbit-card.is-current h2{color:var(--ink);font-weight:740}
.orbit-card .current-label{position:absolute;top:10px;left:10px;padding:2px 8px;background:var(--accent);color:#fff9ef;font-size:12px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity 220ms;z-index:4}
.orbit-card.is-current .current-label{opacity:1}
.orbit-card:focus-visible{outline:3px dashed var(--ink);outline-offset:6px}
.catalog-introduction{font-size:15px;max-width:760px;margin:14px 0 28px;min-height:3.5em}
.return-cue{animation:return-cue 500ms ease-out}
@keyframes return-cue{from{box-shadow:0 0 0 4px #9d482933}to{box-shadow:0 0 0 0 transparent}}
.observation-controls{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.observation-controls button{border:1px solid var(--line);background:#fffaf3;color:var(--ink);padding:7px 14px;min-height:44px;border-radius:5px;font-size:14px}
.observation-controls button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 -2px var(--accent)}
.observation-copy{font-size:15px;line-height:1.8;max-width:800px;min-height:3.6em;margin:12px 0 16px}
.observation-caption{font-size:13px;color:var(--muted);margin-top:14px}
.observation-pair{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;align-items:start}
.observation-pair figure{min-width:0}
.observation-canvas{position:relative;display:block;background:#e9e4d7;overflow:hidden}
.observation-canvas>img{display:block;width:100%;height:auto}
.observation-pair figcaption{margin-top:8px;font-size:14px;display:flex;justify-content:space-between;gap:12px}
.observation-overlay,.observation-dimmer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.observation-mark{position:absolute;pointer-events:none;opacity:0;border:2px solid var(--accent);border-radius:4px;transition:opacity 220ms}
.observation-mark.is-on{opacity:1}
.observation-mark[data-shape=polygon]{border:0;background:#f2b65838;box-shadow:none;outline:none}
.observation-bear{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin:10px 0}
.observation-bear img{width:52px;height:62px;object-fit:contain;image-rendering:pixelated}
.bear-prop{position:relative;display:inline-block;flex-shrink:0}
.observation-bear[data-prop=frame] .bear-prop::after{content:'';position:absolute;left:25px;top:26px;width:34px;height:23px;border:3px solid var(--accent);border-radius:2px;background:#fbf4e633}
.observation-bear[data-prop=card] .bear-prop::after{content:'';position:absolute;left:29px;top:27px;width:22px;height:17px;border:2px solid var(--accent);background:linear-gradient(135deg,#e8dfca 45%,#786151 46%,#e8dfca 65%)}
.observation-bear-pin{position:absolute;width:28px;height:30px;pointer-events:none;filter:drop-shadow(0 1px 2px #fff);z-index:2}
.observation-bear-pin img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.observation-bear-pin::before{content:'';position:absolute;left:-7px;top:15px;border-right:8px solid var(--accent);border-block:4px solid transparent}
.identity-controls{margin-top:16px}
.identity-stage{position:relative;overflow:hidden}
.identity-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.identity-size-study{border-top:1px solid var(--line);margin-top:25px;padding-top:20px;display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:center}
.identity-size-study>div{display:flex;align-items:end;gap:25px}
.identity-size-study img{image-rendering:pixelated;object-fit:contain;animation:none}
.identity-size-study p{font-size:14px}.identity-size-study small{font-size:12px;color:var(--muted);display:block}
.identity-pixel-full{height:108px;width:104px}.identity-pixel-small{height:52px;width:52px}
.carrier-point-select{display:flex;align-items:center;gap:9px;border:1px solid transparent;background:transparent;text-align:left;padding:5px 7px;min-height:44px;font-weight:600}
.carrier-point-select[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);border-radius:4px}
.carrier-mark.is-selected{color:#fff;background:var(--accent);box-shadow:0 0 0 8px #fff4d785,0 0 0 10px var(--accent);scale:1.12}
.carrier-mark{transition:background 220ms,box-shadow 220ms,scale 220ms}
.growth-row summary{grid-template-columns:145px minmax(0,1fr) 144px 18px;align-items:center}
.growth-stage{display:block;position:relative;width:144px;height:112px;align-self:center}
.growth-row .growth-stage>img{width:144px;height:112px;object-fit:contain}
.growth-detail .growth-role-list{display:grid;gap:12px;margin:16px 0;font-size:14px}
.growth-role-list a{color:var(--accent);font-weight:600}.growth-role-list span{display:block;color:var(--copy)}
.tea-trial{padding:24px;background:#e8ebdf;border-radius:5px}
.tea-trial-layout{display:grid;grid-template-columns:minmax(260px,1fr) 270px;gap:30px;align-items:center}
.tea-character-stage{height:306px;position:relative;display:grid;place-items:end center;border-bottom:1px solid #6b775f}
.tea-character-stage>img{height:260px;width:auto;max-width:95%;object-fit:contain;object-position:bottom}
.tea-character-stage::before{content:'';position:absolute;bottom:0;height:260px;left:50%;translate:-50% 0;width:200px;border:1px dashed #7d8a7190;pointer-events:none}
.tea-character-stage::after{content:'共同脚底基线';position:absolute;bottom:-27px;left:0;font-size:12px;color:var(--muted)}
.tea-phone-trial{width:260px;position:relative;justify-self:center}
.tea-phone-trial>img{display:block;width:100%;height:auto}
.tea-phone-slot{position:absolute;left:19%;top:44%;width:27%;height:12%;background:#fff;display:grid;place-items:end center;overflow:hidden}
.tea-phone-slot>img{display:block;position:absolute;bottom:0;left:50%;translate:-50% 0;margin:0;height:64px;width:auto;max-width:none;object-fit:contain;object-position:bottom}
.tea-phone-slot::after{content:'';position:absolute;inset:0;border:1px dashed #7d8a71}
.tea-trial[data-direction=text] .tea-phone-slot{outline:3px solid #9d482970;outline-offset:6px}
.tea-trial[data-direction=theme] .tea-character-stage{background:#f4f1e999}
.tea-trial .observation-controls{margin-top:22px}
.pattern-canvas{position:relative;max-width:640px;margin-inline:auto;background:#040602;overflow:hidden}
.pattern-canvas>img{display:block;width:100%}
.pattern-canvas svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pattern-outline{transform-origin:512px 512px;transition:transform 220ms ease;stroke:#f6e7bf;stroke-width:5;fill:#fff3c740;vector-effect:non-scaling-stroke}
.pattern-target{stroke:#f6e7bf99;stroke-width:2;fill:none;stroke-dasharray:8 8}
.pattern-canvas[data-aligned=true] .pattern-outline{stroke:#ffc66f;fill:#ffd38255}
.pattern-canvas[data-structure=true]>img{filter:grayscale(1);opacity:.6}
.pattern-angle{display:flex;align-items:center;gap:16px;margin:16px 0;font-size:14px}.pattern-angle input{flex:1;accent-color:var(--accent);min-width:0}
.series-art{max-width:var(--source-width,413px)}
.series-resolution{font-size:12px;color:var(--muted);margin-top:8px}
.series-complete{margin-top:24px;border-top:1px solid var(--line);padding-top:14px}
.series-complete summary{cursor:pointer;font-size:15px;color:var(--accent);padding:10px 0}
.series-complete-options{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.series-complete-options button{padding:6px 12px;min-height:44px;border:1px solid var(--line);border-radius:5px;background:transparent}
.series-complete-options button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.series-complete-image{width:min(100%,var(--source-width));display:block;margin:0 auto}
.preview-reading{display:flex;flex:1;min-height:0;overflow:hidden}
.preview-reading .preview-body{flex:1;min-width:0}
.preview-body.is-long-image>img{width:min(100%,var(--natural-width));max-width:100%;margin:0 auto;height:auto}
.preview-body.is-zoomed>img{width:max(100%,calc(var(--natural-width) * 2));max-width:none}
.preview-body.is-zoomed.is-long-image>img{width:calc(var(--natural-width) * 2)}
.reading-map{width:190px;flex-shrink:0;border-right:1px solid var(--line);padding:14px 12px;overflow:auto;background:#ece8dc}
.reading-map h3{font-size:15px;margin-bottom:10px}
.reading-map-thumb{position:relative;width:76px;margin:0 auto 15px}
.reading-map-thumb img{display:block;width:100%;height:auto}
.reading-map-viewport{position:absolute;left:0;width:100%;top:0;border:2px solid var(--accent);background:#fff2cf40;min-height:3px;pointer-events:none}
.reading-map nav{display:grid;gap:6px}.reading-map button{border:1px solid transparent;text-align:left;padding:8px 5px;min-height:44px;font-size:12px;background:transparent}
.reading-map button[aria-current=true]{border-color:var(--accent);background:var(--accent-soft)}
.preview-position-note{font-size:12px;line-height:1.7;white-space:pre-line;color:var(--muted);margin:8px 0}
.reading-location{position:sticky;bottom:6px;width:fit-content;margin:0 auto;padding:3px 10px;border-radius:4px;background:#fff8e5ed;color:var(--accent);font-size:13px;pointer-events:none}
.preview-map-bear{width:25px;height:30px;object-fit:contain;margin-right:3px}.preview-toolbar [data-map-toggle]{display:flex;gap:5px;align-items:center}
.preview-toolbar [data-map-toggle]::after{content:'';width:14px;height:18px;border:1px solid var(--accent);background:repeating-linear-gradient(0deg,#fbf4e6 0 4px,#b8aa8f 4px 5px);rotate:8deg;margin-left:-14px;margin-right:5px;order:-1}
.guide-source-slip{margin:14px 0 5px;padding:10px 12px;background:#fbf4e6;border:1px solid #cabca8;border-left:3px solid var(--accent);border-radius:4px}
.guide-source-slip summary{cursor:pointer;color:var(--accent);font-size:13px;padding:3px 0}
.guide-source-slip article{margin-top:13px}.guide-source-slip small{display:block;color:var(--muted);font-size:12px}
.guide-source-slip blockquote,.guide-source-slip .source-excerpt{font-size:13px;line-height:1.8;margin:6px 0;white-space:pre-line}
.guide-source-slip .guide-reference{margin-top:4px}
.shot-controls{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.shot-controls button{border:1px solid var(--line);background:transparent;min-height:44px;padding:6px 12px;border-radius:4px}
.shot-controls button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.shot-keyframes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shot-keyframes button{background:#ede7db;border:2px solid transparent;padding:0;text-align:left;border-radius:4px;overflow:hidden}
.shot-keyframes img{display:block;width:100%}.shot-keyframes strong{display:block;font-size:13px;padding:10px 8px;font-weight:550}
.shot-keyframes button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.shot-study>video{display:block;width:100%;max-height:420px;aspect-ratio:1258/720;background:#192924;object-fit:contain}
@media(max-width:1150px){.growth-row summary{grid-template-columns:120px minmax(0,1fr) 128px 18px}.growth-stage,.growth-row .growth-stage>img{width:128px}}
@media(max-width:760px){
 .observation-pair{grid-template-columns:1fr;gap:22px}
 .curation-identity>.curation-block>.curation-items{grid-template-columns:1fr!important;padding:18px}
 .curation-identity>.curation-block>.curation-items .media-frame{height:270px}
 .identity-feature-pair{grid-template-columns:1fr}
 .identity-feature-pair figcaption{font-size:14px;line-height:1.7}
 .identity-features{gap:30px}.identity-size-study{grid-template-columns:1fr}
 .growth-row summary{grid-template-columns:minmax(0,1fr) 116px 16px;gap:9px}
 .growth-stage{grid-column:2;grid-row:1/3}.growth-row .growth-stage>img,.growth-stage{width:116px;height:110px}
 .growth-main{grid-column:1;grid-row:2}.growth-period{grid-row:1}.growth-chevron{grid-column:3;grid-row:2}
 .tea-trial{padding:16px}.tea-trial-layout{grid-template-columns:1fr;gap:40px}.tea-phone-trial{width:min(260px,100%)}
 .observation-controls button{padding:7px 11px}.observation-copy{min-height:5.4em}
 .shot-keyframes{gap:6px}.shot-keyframes strong{font-size:11px;padding:8px 4px}
 .reading-map{position:absolute;inset:0 auto 0 0;width:min(240px,80%);z-index:5;box-shadow:8px 0 25px #243c3240}
 .preview-reading{position:relative}.preview-toolbar [data-map-toggle]{min-height:40px;font-size:12px}.reading-map button{font-size:14px}
}
body[data-reduce-motion=true] .pattern-outline{transition:none}
@media(prefers-reduced-motion:reduce){.return-cue{animation:none}}