:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#202a35;background:#fff;font-size:16px;font-synthesis:none;color-scheme:light;--accent:#176d78;--border:#e2e7eb;--muted:#687482}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #258b9d;outline-offset:4px}button{transition:background .15s,color .15s;border:1px solid var(--border);background:#fff}button:hover{background:#edf3f5}button:disabled{opacity:.4;cursor:default}button[aria-pressed=true]{color:#fff;background:var(--accent);border-color:var(--accent)}
.header{height:84px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 34px}.identity{display:flex;gap:14px;align-items:center}.identity svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.3;stroke-linejoin:round}h1{font-size:23px;letter-spacing:.04em;font-weight:650;margin:0}h1 span{font-size:15px;color:var(--muted);font-weight:400;margin-left:18px;letter-spacing:.03em}.version{font-size:13px;color:var(--muted);white-space:nowrap}.version span{padding:0 7px}
main{display:grid;grid-template-columns:minmax(0,1fr) 294px;min-height:calc(100svh - 84px)}.stage{position:relative;min-width:0;height:calc(100svh - 84px);min-height:550px;overflow:hidden;background:radial-gradient(ellipse at 48% 43%,#fff 24%,#f1f4f6 100%)}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.stage-top,.stage-bottom{position:absolute;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none}.stage-top{top:28px}.model-tag{font-weight:650;font-size:16px;letter-spacing:.02em}.model-tag span{font-size:14px;color:var(--muted);font-weight:400;margin-left:12px}.geometry-tag{font-size:13px;color:var(--muted)}.stage-bottom{bottom:24px;font-size:13px;color:var(--muted)}.stage-bottom i{font-style:normal;color:#aab4bf;padding:0 8px}.reset{padding:9px 13px;border-radius:7px;pointer-events:auto;font-size:14px;white-space:nowrap}.reset span{margin-left:5px}.loading{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);padding:18px 22px;background:#fff;box-shadow:0 4px 30px #1a344219;border:1px solid var(--border);border-radius:8px;font-size:15px;max-width:80%}.loading[hidden]{display:none}
.panel{padding:27px 24px 22px;border-left:1px solid var(--border);background:#fff;display:flex;flex-direction:column;gap:22px}.control-block{padding-bottom:21px;border-bottom:1px solid var(--border)}h2{font-size:14px;font-weight:600;margin:0 0 13px}.segmented{display:flex;border-radius:7px;overflow:hidden;border:1px solid var(--border);padding:3px;background:#f1f4f6;gap:3px}.segmented button{flex:1;height:36px;border:0;border-radius:4px;background:transparent;font-size:14px;font-weight:600;letter-spacing:.08em}.segmented button[aria-pressed=true]{background:#fff;color:#176d78;box-shadow:0 1px 4px #20394c13}.detail{font-size:13px;line-height:1.6;color:var(--muted);margin:9px 0 0}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.row h2{margin:0}.text-button{border:0;background:transparent;font-size:13px;color:var(--accent);padding:6px 8px;border-radius:4px}.views{display:flex;gap:7px;margin-top:13px}.views button{flex:1;padding:8px 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;border-radius:5px}.zoom-row{font-size:13px;margin-top:20px}.zoom-row output{color:var(--muted);font-variant-numeric:tabular-nums}.zoom-control{display:flex;align-items:center;gap:9px;margin-top:10px}.zoom-control button{height:28px;width:28px;padding:0;flex:none;border-radius:5px;font-size:18px}.zoom-control input{min-width:0;width:100%;margin:0;accent-color:var(--accent);cursor:pointer}.face-label{font-size:14px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--accent)}.face-preview{aspect-ratio:1;margin-top:12px;display:grid;place-items:center;background:#f8fafb;border:1px solid #edf0f3;border-radius:5px;padding:10px}.face-preview img{width:100%;height:100%;object-fit:contain;min-height:0;min-width:0}.legend{display:flex;flex-wrap:wrap;gap:10px 16px}.legend-item{display:flex;align-items:center;gap:5px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.legend-item svg{width:20px;height:6px;overflow:visible;flex:none}.legend-block h2{margin-bottom:12px}.source-note{margin-top:auto;color:var(--muted);font-size:12px;line-height:1.8}.source-note a{display:block;color:var(--accent);text-decoration:none;margin:6px 0 12px;font-size:13px}.source-note a:hover{text-decoration:underline}.source-note small{font-size:11px;line-height:1.6;color:#7a8692;display:block}
@media(min-height:1000px){.panel{gap:28px;padding-top:32px}.face-preview{margin-top:16px}}
@media(max-width:900px){main{grid-template-columns:minmax(0,1fr) 260px}.panel{padding:24px 18px;gap:20px}.header{padding:0 24px}.stage-top,.stage-bottom{left:20px;right:20px}.stage-bottom{align-items:flex-start;flex-direction:column;gap:12px}.stage-bottom i{padding:0 3px}.geometry-tag{display:none}}
@media(max-width:650px){.header{height:70px;padding:0 18px}h1{font-size:20px}h1 span{font-size:13px;margin-left:12px}.identity{gap:9px}.identity svg{width:27px}.version{font-size:12px}.version span{padding:0 2px}main{display:block}.stage{height:64svh;min-height:410px;max-height:690px}.stage-top{top:21px}.stage-bottom{bottom:17px;flex-direction:row;align-items:center;font-size:12px}.stage-bottom>span{max-width:195px;line-height:1.8}.reset{font-size:12px;padding:8px}.panel{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;border-left:0;border-top:1px solid var(--border);padding:24px 20px}.control-block{padding-bottom:17px}.face-block{grid-row:span 2;border-bottom:0}.legend-block{grid-column:2}.source-note{grid-column:1/-1;border-top:1px solid var(--border);padding-top:15px}.source-note small{font-size:12px}.source-note a{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Teaching product: the interactive model remains the primary content. */
.teaching-app{--muted:#5e6c78;--border:#dde5e8;line-height:1.5}
.teaching-app .credit-source{font-size:11px;font-weight:400;white-space:nowrap;color:var(--muted)}.teaching-app .credit-source a{display:inline;margin:0;font-size:inherit}
@media(min-width:761px) and (max-width:1050px){.teaching-app .credit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.teaching-app .credit-grid article p+p{margin-top:12px}
.teaching-app .guide-section{padding-top:28px;padding-bottom:28px}.teaching-app .guide-section .reading-note{margin-top:0}
.teaching-app [hidden]{display:none!important}
.teaching-app a{color:var(--accent);text-underline-offset:3px}
.render-note{margin:0;font-size:11px;line-height:1.8;color:var(--muted)}.render-note a{display:inline-block;margin-top:4px}.teaching-app .render-note{grid-column:1/-1}
.teaching-app .header{height:78px;padding:0 32px;gap:20px}
.header nav{display:flex;gap:26px;font-size:13px;white-space:nowrap}.header nav a{text-decoration:none}.header nav a:hover{text-decoration:underline}
.skip-link{position:fixed;left:16px;top:-100px;z-index:20;background:#fff;padding:12px 20px;border:2px solid var(--accent);border-radius:8px}.skip-link:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.teaching-app main{grid-template-columns:minmax(0,1fr) 350px;min-height:calc(100svh - 78px);border-bottom:1px solid var(--border)}
.teaching-app .stage{height:calc(100svh - 78px);min-height:610px;position:sticky;top:0;background:radial-gradient(ellipse at 48% 43%,#fff 28%,#eef4f4 100%)}
.teaching-app .stage-top{align-items:flex-start;top:26px}.stage-eyebrow{margin:0 0 8px;color:var(--muted);font-size:13px;letter-spacing:.05em}.edition-tag{font-size:12px;line-height:1.5;padding:6px 10px;border-radius:5px;background:#fff9;border:1px solid #d6e4e4;color:var(--accent);white-space:nowrap}
.teaching-app .panel{padding:24px;gap:20px}.teaching-app h2{font-size:14px;font-weight:650}.teaching-app .control-block{padding-bottom:19px}.quiet-label{font-size:11px;color:var(--muted)}
.edition-options{display:grid;gap:8px;margin-top:12px}.edition-options button{text-align:left;padding:12px 13px;border:1px solid var(--border);border-radius:8px;background:#fff;line-height:1.5}.edition-options button[aria-pressed=true]{background:#edf5f4;border-color:var(--accent);color:#184e56;box-shadow:inset 3px 0 var(--accent)}.edition-options button:hover{background:#f3f8f7}.edition-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650}.edition-title small{font-size:10px;font-weight:550;color:var(--accent);background:#dcece7;padding:2px 5px;border-radius:3px}.edition-subtitle{display:block;color:var(--muted);font-size:12px;margin-top:3px}.teaching-app .detail{font-size:12px;line-height:1.75}
.teaching-app .segmented button{height:43px;letter-spacing:.025em}.segmented button span{font-size:11px;font-weight:400;display:block;letter-spacing:0}.teaching-app .views button{min-height:40px}.teaching-app .zoom-row{margin-top:14px}.teaching-app .zoom-control button{width:34px;height:34px}.teaching-app .text-button{min-height:36px}
.teaching-app .face-preview{aspect-ratio:auto;height:220px;margin-top:12px;background:#fbfcfc}.teaching-app .face-preview img{max-height:100%;max-width:100%}#face-picker{width:100%;border:1px solid var(--border);background:#fff;color:#2f4650;font:inherit;font-size:13px;border-radius:5px;padding:8px;margin-top:10px;min-height:38px}.inline-link{display:inline-block;margin-top:5px;font-size:12px;text-decoration:none}.inline-link:hover{text-decoration:underline}
.teaching-app .legend-block{border-bottom:1px solid var(--border);padding-bottom:16px}.teaching-app summary{cursor:pointer;font-size:13px;font-weight:600;min-height:28px}.teaching-app summary:focus-visible,.teaching-app select:focus-visible{outline:3px solid #258b9d;outline-offset:4px}.legend-block summary span{float:right;font-size:11px;font-weight:400;color:var(--muted)}.teaching-app .legend{margin-top:14px;gap:10px 15px}.download-block h2{margin-bottom:4px}#source-links a{display:block;font-size:12px;margin:8px 0;text-decoration:none}#source-links a:hover{text-decoration:underline}#source-links .download-link{display:block;text-align:center;background:var(--accent);color:#fff;padding:11px;border-radius:6px;font-size:13px;font-weight:600}.share-block{display:grid;gap:6px}.share-block button{border-radius:6px;min-height:40px;font-size:13px}.share-block [role=status]{font-size:11px;color:var(--accent)}#share-fallback{width:100%;font-size:12px;padding:8px;border:1px solid var(--border);border-radius:4px}.panel-credit{font-size:11px;line-height:1.8;color:var(--muted);margin:0}.panel-credit a{text-decoration:none}.loading{line-height:1.8;text-align:center}.loading button{display:block;margin:12px auto 0;padding:7px 15px;border-radius:5px;font-size:13px}
.guide-section,.credits-section{padding:64px max(32px,calc((100% - 1200px)/2));scroll-margin-top:24px}.guide-section{background:#fff}.section-intro{max-width:650px}.section-intro .eyebrow{font-size:12px;color:var(--accent);letter-spacing:.13em;margin:0 0 10px}.section-intro h2{font-size:26px;margin:0 0 12px;letter-spacing:.02em}.section-intro>p:last-child{font-size:14px;color:var(--muted);margin:0;line-height:1.8}.guide-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.guide-steps li{padding-top:18px;border-top:1px solid var(--border)}.step-number{font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent)}.guide-steps h3,.credit-grid h3{font-size:17px;line-height:1.5;margin:10px 0}.guide-steps p,.credit-grid p{font-size:13px;line-height:1.9;color:var(--muted);margin:0}.reading-note{margin-top:30px;border:1px solid var(--border);padding:17px 20px;border-radius:8px;background:#f8faf9}.reading-note summary{min-height:20px;font-size:14px}.reading-note div{max-width:920px;font-size:13px;line-height:1.9;color:var(--muted)}.reading-note p{margin:14px 0 0}.reading-note strong{color:#374b52}
.credits-section{background:#f1f6f4;border-top:1px solid #dfe8e3}.credit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin-top:34px}.credit-grid .credit-role{color:var(--accent);font-size:11px;letter-spacing:.05em}.credit-grid a{font-size:12px;display:inline-block;margin-top:13px;text-decoration:none}.credit-grid a:hover{text-decoration:underline}.license-note{margin-top:34px;padding-top:22px;border-top:1px solid #d6e2db;font-size:11px;line-height:1.9;color:var(--muted)}.license-note p{max-width:950px;margin:0 0 13px}.license-note>a{margin-right:22px;font-size:12px}
@media(min-width:1600px){.teaching-app main{grid-template-columns:minmax(0,1fr) 380px}.teaching-app .panel{padding:28px 30px}}
@media(max-width:1000px) and (min-width:761px){.teaching-app main{grid-template-columns:minmax(0,1fr) 310px}.teaching-app .panel{padding:22px 18px}.edition-title{font-size:13px}.teaching-app .stage-top{flex-direction:column;gap:10px}.teaching-app .stage-bottom{flex-direction:column;align-items:flex-start}}
@media(max-width:760px){.teaching-app .header{height:72px;padding:0 18px}.teaching-app h1{font-size:20px}.teaching-app h1 span{font-size:11px;display:block;margin-left:0;margin-top:2px}.header nav{gap:16px;font-size:12px}.teaching-app main{display:block}.teaching-app .stage{position:relative;height:61svh;min-height:400px;max-height:650px}.teaching-app .stage-top{left:20px;right:20px;top:20px}.stage-eyebrow{font-size:11px;letter-spacing:0}.edition-tag{font-size:10px;padding:4px 6px}.teaching-app .stage-bottom{left:20px;right:20px;bottom:18px;flex-direction:row;align-items:center}.teaching-app .stage-bottom>span{max-width:190px;line-height:1.8;font-size:11px}.teaching-app .panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;border-left:0;border-top:1px solid var(--border);padding:24px 20px}.edition-block{grid-column:1/-1}.edition-options{grid-template-columns:1fr 1fr}.edition-options button{padding:12px}.edition-title{font-size:13px;display:block}.edition-title small{margin-left:4px;display:inline-block}.edition-subtitle{font-size:11px}.crystal-block,.view-block{grid-column:1}.teaching-app .face-block{grid-column:2;grid-row:2/span 2;border-bottom:1px solid var(--border)}.teaching-app .face-preview{height:auto;aspect-ratio:1}.teaching-app .legend-block{grid-column:1/-1}.download-block{grid-column:1/-1}.share-block,.panel-credit{grid-column:1/-1}.guide-section,.credits-section{padding:42px 22px}.section-intro h2{font-size:22px}.guide-steps,.credit-grid{gap:22px;grid-template-columns:1fr}.guide-steps{margin-top:23px}.credit-grid{margin-top:28px}.credit-grid article{padding-top:20px;border-top:1px solid #d6e2db}.reading-note{padding:15px}.teaching-app .reset{font-size:12px}.teaching-app .control-block{padding-bottom:18px}}
@media(max-width:390px){.edition-options{grid-template-columns:1fr}.teaching-app .stage-top{flex-direction:column;gap:8px}.teaching-app .panel{gap:16px;padding:20px 16px}.edition-title{display:flex}.teaching-app .views{gap:4px}.teaching-app .zoom-control{gap:4px}.header nav{gap:10px}.teaching-app .stage-bottom>span{max-width:160px}}

/* Compact disclosure beside the drawing choices. */
.edition-block .reading-note{margin:12px 0 0;padding:10px 12px;font-size:12px;line-height:1.7}
#download-block[hidden]{display:none!important}

.face-preview canvas{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;cursor:default;touch-action:pan-y}

/* Keep viewer and credits gutters aligned while retaining the viewer gradient. */
.teaching-app{--page-gutter:30px;--page-surface:#f1f6f4}
.teaching-app main,.teaching-app .credits-section{background:var(--page-surface)}
.teaching-app .stage-top,.teaching-app .stage-bottom{left:var(--page-gutter);right:var(--page-gutter)}
.teaching-app .credits-section{padding-left:var(--page-gutter);padding-right:var(--page-gutter);border-top:0}
@media(max-width:900px){.teaching-app{--page-gutter:20px}}

.usage-stats{margin:16px 0 0;font-size:11px;line-height:1.9;color:var(--muted);font-variant-numeric:tabular-nums}
.usage-stats>span{display:inline-block}