*{box-sizing:border-box} :root{color-scheme:light;--ink:#263c51;--blue:#214d70;--paper:#f2e7d4}body{margin:0;background:#101c2b;color:var(--ink);font:15px "Microsoft YaHei","PingFang SC",sans-serif}button,input{font:inherit;touch-action:manipulation}button{cursor:pointer;color:inherit;min-height:44px;border:1px solid #ac9876;border-radius:8px;background:#f6eddd;padding:10px 16px;transition:filter .15s,box-shadow .15s,transform .15s}button:hover{filter:brightness(1.07)}button:active{transform:scale(.97)}button:focus-visible,input:focus-visible{outline:3px solid #80bdda;outline-offset:4px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.page{min-height:100svh;width:100%;padding:20px;display:flex;align-items:center;justify-content:center;flex-direction:column}.art-frame{position:relative;width:100%;max-width:1400px;line-height:0;box-shadow:0 10px 50px #0006}.art-frame img{width:100%;height:auto;display:block}.hotspot{position:absolute;min-height:0;padding:0;border:0;background:transparent;box-shadow:inset 0 0 0 1px #e4f3ff35;transition:background .2s,box-shadow .2s}.start-hotspot{left:41.5%;top:78.3%;width:17%;height:10%;border-radius:45%;animation:breathe 2.8s ease-in-out infinite}.catalog-hotspot{left:var(--x);top:38.5%;width:18%;height:27.5%;border-radius:50%}.hotspot:hover,.hotspot:focus-visible{background:#d8f3ff12;box-shadow:inset 0 0 18px #e2f6ff90,0 0 10px #b2dbed80}.hotspot:active,.hotspot.feedback{background:#e7f8ff35;box-shadow:inset 0 0 24px #d6f4ff;transform:none}.hotspot.pending{box-shadow:inset 0 0 0 1px #e4f3ff35}.hotspot[aria-current=step]{box-shadow:0 0 0 3px #6a9fb2aa,inset 0 0 18px #dcf3ff60}.orientation{color:#d4dce2;font-size:12px;text-align:center;margin:12px 0 0;line-height:1.8}.art-frame>.corner{position:absolute;left:6.8%;top:10%;font-size:12px;min-height:32px;padding:5px 9px;background:#f4e6d2c9}.catalog-status{position:absolute;left:12%;right:12%;bottom:10%;text-align:center;color:#584933;font-size:clamp(9px,1.2vw,16px);line-height:1.5;margin:0;pointer-events:none}.work-frame{width:min(1120px,100%);padding:28px;background:#18354b url('assets/cover.png') center / 100% 100%;box-shadow:0 10px 40px #0005}.paper{background:radial-gradient(ellipse at 50% 30%,#fff9ed,#ebdcc4);border:3px double #a28a66;min-height:700px;padding:18px 28px 10px;position:relative}.work-top{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px}.corner,.plain{background:transparent;border-color:#9d8c6d66;font-size:12px;padding:8px 12px}.work-heading{text-align:center}.work-heading>span{display:none}h1{font:500 29px serif;letter-spacing:3px;margin:16px 0 8px}.work-heading p{font-size:12px;color:#67716c;line-height:1.7;margin:5px 0 12px}nav{display:flex;justify-content:center;gap:25px;font-size:11px;color:#8d8c7c;margin:18px 0}nav span.active{color:var(--blue);border-bottom:1px solid var(--blue)}nav b{margin-right:5px;font-family:Georgia}.work-surface{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px}.cloth-wrap{width:270px;max-width:90%;aspect-ratio:1;position:relative;filter:drop-shadow(4px 8px 9px #554b3845)}canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:crosshair}#knots{position:absolute;inset:0;pointer-events:none}.knot{position:absolute;transform:translate(-50%,-50%);border:3px double #b3a17e;border-radius:48%;background:repeating-linear-gradient(20deg,#e8ddbd80 0 2px,#a4906b80 3px 4px);box-shadow:2px 3px 5px #0002;pointer-events:auto;min-height:0;padding:0}.knot:active{transform:translate(-50%,-50%) scale(.95)}.knot.selected{outline:2px solid #345f7b;outline-offset:4px}#table-caption{font-size:11px;margin:16px 0 0;color:#7c7564;letter-spacing:1px}.in-scene-tools{max-width:700px;margin:0 auto;text-align:center;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px 0}.choice{font-size:13px;background:#f7efdf}.choice small{display:block;font-size:10px;color:#7c7e72;margin-top:5px}.choice.active{border-color:#305e7b;box-shadow:inset 0 0 0 1px #305e7b;background:#e4e9df}.swatch{display:inline-block;background:#f8f2e6;width:15px;height:15px;border:1px solid #bfb49e;vertical-align:middle;margin-right:8px}.hint{font-size:11px;line-height:1.8;color:#7c7d6e;flex-basis:100%}.row{display:flex;gap:8px}.row button{font-size:12px}label{font-size:12px}input[type=range]{accent-color:var(--blue);width:210px;max-width:100%;height:32px}.shade{display:none}.labels{font-size:11px;display:flex;gap:35px;color:#747e77}.work-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;max-width:700px;margin:15px auto 0}#canvas-note{font-size:11px;color:#7e7e70}.primary{background:var(--blue);color:#fff7e9;border-color:#2e5268;min-width:180px}.primary:hover{background:#2d5e80}#status{min-height:20px;text-align:center;color:#53715e;font-size:12px;line-height:1.6;margin:10px 0 0}dialog{max-width:480px;background:#f4ead9;color:var(--ink);border:3px double #988266;border-radius:10px;padding:26px}dialog p{font-size:14px;line-height:1.9}dialog::backdrop{background:#071627b3}.reveal{animation:unfold 1.5s ease both}@keyframes unfold{from{transform:scale(.5) rotate(-6deg);filter:brightness(.8)}to{transform:scale(1);filter:brightness(1)}}@keyframes breathe{50%{box-shadow:inset 0 0 15px #d0f2ff80,0 0 13px #84c0e570}}@media(max-width:600px){.page{padding:8px}.art-page{padding:0}.orientation{padding:0 12px;font-size:11px}.work-frame{padding:12px}.paper{padding:12px;min-height:0}.work-top{font-size:10px;gap:6px}.work-top .corner{font-size:11px;padding:7px;min-height:40px}#stage-label{max-width:95px;line-height:1.7}nav{gap:11px;font-size:10px;margin:15px 0}nav b{margin-right:3px}h1{font-size:24px;letter-spacing:1px}.work-heading p{font-size:12px}.work-surface{min-height:295px;padding:12px 0}.cloth-wrap{width:245px}.in-scene-tools{gap:8px}.hint{font-size:11px}.work-bottom{flex-direction:column;gap:10px}.primary{min-height:48px;width:100%}.in-scene-tools .plain{flex-basis:100%}.catalog-status{bottom:8.5%;font-size:9px}.art-frame>.corner{min-height:25px;padding:3px 6px;font-size:10px}.art-page .art-frame{box-shadow:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 原图完整容纳于可视区域，热区始终跟随同一图片容器。 */
.art-frame{width:min(100%,calc((100svh - 55px) * 1.605263));}
button.feedback{filter:brightness(1.12);box-shadow:0 0 0 2px #8bb8c5aa;}
.work-frame{background-size:cover;}
/* 制作输入固定在中央方形布料视口，所有工具留在原画框内部。 */
.cloth-wrap{width:410px;max-width:100%;aspect-ratio:1;filter:none;outline:1px solid #a48e6f33;background:#c4b08d18;border-radius:6px}
canvas{touch-action:none;user-select:none;-webkit-user-select:none;border-radius:6px}
#knots{display:none}.work-surface{min-height:0;padding:8px 0}.mode-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;width:100%}.mode-row button{font-size:12px}.mode-tag{align-self:center;font-size:12px;color:#375a6c;padding:8px}.in-scene-tools{max-width:820px}.in-scene-tools label{white-space:nowrap}.in-scene-tools input{width:150px}.work-heading h1{font-size:26px;margin-top:10px}.work-top{gap:8px}.work-bottom{margin-top:8px}button:disabled{pointer-events:none}.in-scene-tools .hint{margin:0;line-height:1.7}#table-caption{margin-top:8px}@media(max-width:600px){.cloth-wrap{width:340px}.work-heading h1{font-size:21px}.paper{padding:10px}.in-scene-tools{gap:7px}.mode-row{gap:6px}.mode-row button{padding:8px;font-size:11px}.in-scene-tools input{width:145px}.work-top{font-size:10px}#stage-label{max-width:none}.work-frame{padding:10px}.page{padding:5px}.in-scene-tools label{font-size:11px}}
/* 保留原图的边缘装饰，避免高工作台把封面中央文字拉入背景。 */
.work-frame{background:#18354b;border:18px solid #18354b;border-image:url('assets/cover.png') 100 round;padding:0}@media(max-width:600px){.work-frame{border-width:10px;padding:0}}
.tool-field{display:flex;align-items:center;gap:8px}.tool-field label{font-size:12px}.tool-field input{max-width:150px}@media(max-width:600px){.tool-field{width:100%;justify-content:center}.tool-field input{max-width:200px;width:200px}}
/* 工序原图保持完整比例；正文和操作提示不覆盖图片内既有文字。 */
.intro-frame{max-width:1100px}.intro-frame .paper{padding:18px 24px 14px;min-height:0}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#intro-index{font-size:13px;letter-spacing:1px}.intro-image-wrap{position:relative;line-height:0}#intro-figure{margin:18px 0 12px;overflow:auto}#intro-image{width:100%;height:auto;display:block}.intro-image-wrap #intro-marker{position:absolute;left:73.8%;top:38.5%;width:18%;height:27.5%;border:3px solid #7498a4;box-shadow:0 0 0 4px #f9ebc970;border-radius:50%;pointer-events:none}.intro-copy{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:10px}.intro-copy section{border-top:1px solid #a18b6655;padding-top:12px}.intro-copy h2{font-size:14px;font-weight:500;margin:0 0 8px;letter-spacing:1px}.intro-copy p,#intro-transcript{font-size:14px;line-height:1.9;color:#55615e;margin:0}#intro-reading{background:#e8dbc33b;border:1px solid #a18b6633;border-radius:5px;padding:10px 12px}#intro-reading summary{font-size:12px;cursor:pointer;min-height:30px;line-height:30px}#intro-transcript{padding-top:10px}.intro-note{font-size:12px;color:#7e705c;line-height:1.8;margin:12px 0}#intro-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:4px 0}.intro-source{font-size:11px;line-height:1.8;text-align:center;color:#808575;margin:14px 0 0}.intro-source a{color:#537386;text-underline-offset:3px}.zoomed .intro-image-wrap{min-width:1100px}#intro-figure.zoomed{max-height:65svh;overscroll-behavior:contain}.work-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}#reveal-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0;font-size:13px}#reveal-controls button{min-height:40px;font-size:12px}.work-links button{min-height:36px;padding:7px 9px;font-size:11px}@media(max-width:600px){.intro-frame .paper{padding:12px}.intro-frame .work-top{flex-wrap:wrap}#intro-index{order:-1;flex-basis:100%;text-align:center;font-size:14px;padding:6px}.intro-copy{grid-template-columns:1fr;gap:14px}.intro-copy p,#intro-transcript{font-size:15px;line-height:1.9}#intro-reading summary{font-size:13px}#intro-actions .primary,#intro-actions>button{width:100%}.work-links{max-width:145px;gap:4px}.work-links button{font-size:10px;padding:6px}.work-top{align-items:center}.intro-note{font-size:12px}.intro-source{font-size:11px}#intro-figure{margin-top:14px}}