:root{--paper:#f5f2eb;--ink:#34473d;--muted:#788174;--line:#dcded2;--sage:#53694e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Microsoft YaHei','PingFang SC',sans-serif;font-size:13px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#fcfaf5;border-radius:6px;padding:10px 13px;min-height:40px;transition:background .15s,transform .15s}button:hover{background:#e9eddc}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #bf835a;outline-offset:3px}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line)}.brand{color:var(--ink);font-family:serif;font-size:25px;letter-spacing:3px;text-decoration:none;white-space:nowrap}.brand span{font:9px sans-serif;letter-spacing:2px;margin-left:18px}.header-note{font-size:11px;color:#7e8678}.header-actions{display:flex;gap:9px}.header-actions button{background:transparent;font-size:11px}.header-actions b{font-weight:normal;margin-left:8px}main{display:grid;grid-template-columns:310px minmax(0,1fr);height:calc(100dvh - 76px);min-height:680px}.sidebar{padding:26px 22px 18px;display:flex;flex-direction:column;border-right:1px solid var(--line);overflow:auto}.chapter{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#7f8677;margin-bottom:20px}h1{font-family:serif;font-size:29px;font-weight:500;margin:0 0 10px;letter-spacing:1px}.lead{color:var(--muted);font-size:11px;line-height:1.8;margin:0 0 22px}.section-label{font-size:10px;color:#78806e;margin:20px 0 10px;display:flex;justify-content:space-between}.project-options{display:flex;gap:8px}.project-options button{flex:1;text-align:left;padding:12px 10px;min-height:65px}.project-options strong{display:block;font-size:12px;font-weight:500}.project-options small{display:block;font-size:9px;color:#8a8d7a;margin-top:7px}.selected{border-color:#6d805e!important;background:#e9eddf!important}.piece-list{display:flex;flex-direction:column;gap:6px}.piece-row{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);border-radius:6px;background:#fffdf7;cursor:pointer;text-align:left;width:100%;min-height:44px}.piece-row .id{font:10px monospace;color:#8c907d;width:20px}.piece-row .name{flex:1;font-size:11px}.piece-row small{display:block;font-size:9px;margin-top:4px;color:#8a8e80}.piece-row .check{font-size:13px;color:#687d4f}.mini-swatch,.swatch{background-image:url('assets/atlas.png');background-size:200% 200%;border-radius:4px}.mini-swatch{width:26px;height:26px;flex:none}.f0{background-position:0 0}.f1{background-position:100% 0}.f2{background-position:0 100%}.f3{background-position:100% 0;filter:saturate(.25) brightness(.8)}.fabric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.fabric-choice{border:1px solid var(--line);padding:5px;background:transparent;border-radius:6px;min-width:0}.swatch{display:block;width:100%;height:37px}.fabric-choice small{font-size:9px;display:block;margin-top:6px;white-space:nowrap}.side-bottom{margin-top:auto;padding-top:20px}#note{font-size:10px;color:#7b826f;line-height:1.8;margin-bottom:13px}.primary{background:#506747;color:white;border:0;display:flex;justify-content:space-between;width:100%;padding:15px 13px;min-height:47px;font-size:12px}.primary:hover{background:#3e5536}.workspace{min-width:0;display:flex;flex-direction:column;overflow:hidden}.stagebar{height:57px;display:flex;justify-content:space-between;align-items:center;padding:0 25px;background:#f8f6ef;border-bottom:1px solid var(--line);flex:none}.stages{display:flex;align-items:center;gap:13px;font-size:10px;color:#a1a391}.stages i{font-style:normal;color:#c6c9bb}.stages .active{color:#3c583b;font-weight:bold}.stages .done{color:#80926d}.stagebar>button{font-size:10px;background:transparent;border:0;padding:6px}#viewport{flex:1;position:relative;min-height:550px;background:#e7e6dc;overflow:hidden}#viewport canvas{width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:grab}#viewport canvas:active{cursor:grabbing}.view-label{position:absolute;top:24px;left:25px;z-index:2;font:9px sans-serif;letter-spacing:1.3px;color:#657563;display:flex;align-items:center;gap:8px;pointer-events:none}.dot{height:5px;width:5px;background:#72815e;border-radius:50%}.floating-card{position:absolute;right:23px;top:24px;width:220px;padding:18px;background:#fffcf0e8;border:1px solid #d5d8cbb0;box-shadow:0 8px 25px #3842320a;border-radius:3px;pointer-events:none}.eyebrow{display:block;font:8px sans-serif;letter-spacing:1.5px;color:#939581;margin-bottom:9px}.floating-card strong{font-family:serif;font-size:17px;font-weight:500}.floating-card p{font-size:10px;line-height:1.8;color:#858875;margin:8px 0 0}.statusbar{height:43px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;background:#f7f5ed;border-top:1px solid var(--line);font-size:10px;color:#727e6c;flex:none}#statusRight{font:8px sans-serif;letter-spacing:1.5px;white-space:nowrap}.camera-controls{position:absolute;left:23px;bottom:23px;display:flex;gap:6px}.camera-controls button{font-size:10px;background:#f9f6e9e6;border-color:#d1d5c6;min-height:35px}.controls-bar{position:absolute;bottom:23px;right:23px;display:flex;gap:8px;align-items:center}.controls-bar button{background:#fff9eced;font-size:11px;min-height:42px}#pedal{background:#526b48;color:white;min-width:165px;border-color:#526b48;touch-action:none;user-select:none}#pedal.pressed{background:#bc7759;transform:translateY(2px)}.live-feedback{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);font-size:12px;padding:10px 18px;border-radius:30px;background:#fdfbf1dd;color:#6b785b;pointer-events:none;white-space:nowrap}.live-feedback:empty{display:none}.live-feedback.error{color:#a54c39;background:#fff1e8e8}.machine-tag{position:absolute;left:25px;top:58px;color:#697560;font:12px serif;letter-spacing:2px;pointer-events:none}.machine-tag span{font:7px sans-serif;letter-spacing:1px;line-height:3}.needle-hint{position:absolute;z-index:2;border:1px solid #849171;border-radius:20px;background:#fff9e4d9;padding:4px 8px;font-size:9px;pointer-events:none;transform:translate(10px,-30px)}.metric{display:flex;justify-content:space-between;font-size:11px;margin:20px 0 9px}.progress{height:5px;border-radius:9px;overflow:hidden;background:#e0e4d4}.progress i{display:block;height:100%;background:#7f945f;width:0}.instruction{font-size:11px;line-height:1.9;color:#7a826f}.key{padding:2px 5px;border:1px solid #d1d6c6;border-radius:3px;font-family:monospace;color:#52604b;background:#fffdf5}.operation{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #e1e3d6;font-size:11px;line-height:1.6}.operation b{font-size:10px;font-weight:normal;color:#9a9c8b}.operation.active{color:#36512e}.operation.complete{color:#98a18c}.opdesc{font-size:10px;color:#8c927f;margin-top:3px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.stat-grid>div{border:1px solid var(--line);padding:12px;border-radius:6px}.stat-grid b{display:block;font:24px serif;margin-bottom:7px}.stat-grid span{font-size:9px;color:#818a75}.secondary{width:100%;margin-top:9px;font-size:11px}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#eeece2;z-index:8;color:#7b866d}.loading.hidden{display:none}.legend{display:flex;gap:16px;font-size:9px;color:#8c927e;margin-top:12px}.legend span:before{content:'';display:inline-block;width:17px;border-top:1px solid #8c927e;vertical-align:middle;margin-right:5px}.legend span:last-child:before{border-top-style:dashed}dialog{border:1px solid #d7dbcd;border-radius:12px;width:min(700px,92vw);max-height:85dvh;padding:35px;background:#f7f4eb;color:var(--ink)}dialog::backdrop{background:#24352a80;backdrop-filter:blur(5px)}dialog h2{font:26px serif;margin:0 0 22px}dialog p,dialog li{font-size:13px;line-height:2}.close{float:right;font-size:10px;margin-bottom:15px}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;clear:both}.saved{background:#fffdf4;border:1px solid var(--line);padding:10px;border-radius:7px}.saved img{width:100%;aspect-ratio:1.2;object-fit:cover}.saved strong{display:block;font-size:12px;margin:10px 0}.saved small{font-size:10px;color:#7b856d}.empty{clear:both;color:#8b927e}.rating{font:35px serif;margin:20px 0;color:#6d8457}.notice{background:#ebeede;border-radius:6px;padding:12px;font-size:11px;line-height:1.8;margin-top:15px}.rotation-note{font-size:9px;color:#8c927e;line-height:1.8}.thread-picker{display:flex;gap:10px}.thread-picker button{width:33px;height:33px;min-height:33px;border:4px solid #fffdf3;padding:0;border-radius:50%;outline:1px solid #c4cbb9}.thread-picker button.selected{outline:2px solid #53694e}@media(max-width:1100px){.header-note{display:none}.stagebar{padding:0 15px}.stages{gap:8px}.floating-card{width:180px;right:15px}.controls-bar{right:15px;gap:5px}.controls-bar button{font-size:10px;padding:9px}.camera-controls{left:15px;bottom:78px}main{grid-template-columns:280px 1fr}.sidebar{padding:22px 18px}#statusRight{display:none}}@media(max-width:760px){header{height:65px;padding:0 15px}.brand{font-size:21px}.brand span{display:none}.header-actions button{padding:8px;font-size:10px}main{height:auto;min-height:0;display:flex;flex-direction:column}.workspace{order:0;height:69dvh;min-height:500px}.sidebar{order:1;border:0;overflow:visible;padding:25px 20px}.stagebar{height:46px}.stages{gap:6px;font-size:9px}.stagebar>button{font-size:9px;padding:3px}#viewport{min-height:400px}.view-label{top:14px;left:14px;font-size:8px}.floating-card{top:40px;right:12px;width:160px;padding:12px}.floating-card strong{font-size:14px}.floating-card p{font-size:9px}.eyebrow{font-size:7px}.statusbar{height:35px;font-size:9px;padding:0 13px}.camera-controls{left:12px;bottom:70px}.camera-controls button{padding:7px;font-size:9px}.controls-bar{right:12px;left:12px;bottom:15px;justify-content:flex-end}.controls-bar button{padding:9px;min-height:43px}#pedal{min-width:145px}.live-feedback{bottom:118px;font-size:10px;max-width:92%;white-space:normal;text-align:center}.machine-tag{left:14px;font-size:10px;top:40px}.piece-list{display:grid;grid-template-columns:1fr 1fr}.chapter{margin-bottom:13px}.fabric-choice .swatch{height:50px}.camera-controls button{min-height:35px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Larger unobstructed work area; persistent skip and zoom controls. */
.skip-button{width:100%;margin-top:9px;border:1px solid #a6b295;background:#e8eddf;min-height:44px;font-size:12px}.skip-all{width:100%;margin-top:7px;border:0;background:transparent;font-size:11px;text-decoration:underline}.quick-skip{position:absolute;right:20px;top:20px;background:#f7f5e9f2;border-color:#94a380;z-index:4;min-height:44px}.zoom-controls{position:absolute;left:20px;top:62px;display:flex;gap:5px;z-index:4}.zoom-controls button{font-size:12px;background:#fffbeeeb;min-height:39px}.zoom-controls button:first-child,.zoom-controls button:last-child{font-size:20px;min-width:40px;padding:3px}.floating-card{top:78px;right:20px;width:190px;padding:12px}.floating-card p{font-size:11px}.live-feedback{left:20px;bottom:80px;transform:none;max-width:calc(100% - 40px);font-size:12px;background:#fffbeeef;border-radius:6px;white-space:normal}.machine-tag{display:none}.mode-toggle{margin:0 0 13px;background:#e8eddf;border-color:#9cad89;line-height:1.6}.side-bottom{position:sticky;bottom:-18px;background:var(--paper);padding-bottom:8px}.needle-hint{font-size:11px;transform:translate(14px,-36px)}.chapter,.section-label{font-size:11px}.piece-row .name{font-size:12px}.instruction{font-size:12px}.view-label{font-size:10px}
@media(max-width:760px){.quick-skip{top:42px;right:10px;font-size:10px;padding:7px 10px;min-height:40px}.floating-card{display:none}.zoom-controls{top:88px;left:12px}.zoom-controls button{min-height:36px;font-size:10px}.zoom-controls button:first-child,.zoom-controls button:last-child{min-width:35px;font-size:18px}.live-feedback{bottom:120px;left:12px;max-width:calc(100% - 24px);font-size:11px;padding:7px 10px}.side-bottom{position:static}.workspace{height:76dvh;min-height:540px}}

#scissors{position:absolute;z-index:5;pointer-events:none;width:0;height:0;transform-origin:0 0;filter:drop-shadow(3px 5px 3px #30291c45)}
#scissors span{display:block;width:210px;height:210px;background:url('assets/scissors.png') left center/200% 100% no-repeat;transform:translate(-56%,-4%)}
#scissors.closed span{background-position:right center;transform:translate(-50%,-4%)}
body[data-phase="1"] #viewport canvas{cursor:none}
body[data-phase="4"] .floating-card{display:none}
@media(max-width:760px){#scissors span{width:155px;height:155px}}

body[data-phase="1"] #viewport canvas{cursor:grab}body[data-phase="1"] #viewport canvas:active{cursor:grabbing}body[data-phase="1"] .floating-card{display:none}