*{box-sizing:border-box} [hidden]{display:none!important} :root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#233d38;background:#f7f6f2;font-size:14px}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;background:white;color:#344e48;border:1px solid #dce3dc;border-radius:9px;padding:9px 13px;transition:background .15s}button:hover{background:#eaf2e7}button:disabled{opacity:.45;cursor:wait}button.active,.primary{background:#315b49;color:white;border-color:#315b49}.subtle{background:#f4f6f1}input,select{border:1px solid #dce3dc;border-radius:8px;padding:9px;background:#fff;color:#263c35;min-width:0}input[type=number]{width:100%}input[type=checkbox]{accent-color:#315b49}input[type=range]{padding:0;accent-color:#93b17b;width:100%}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid #e3e5df;background:#fff}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:21px}.brand small{display:block;font-size:9px;letter-spacing:2.5px;margin-top:4px}.mark{background:#dbe9ca;border-radius:12px;padding:8px 12px;font-size:28px}nav{display:flex;gap:8px}nav button{border:0}.local{font-size:12px;color:#6e8074}main{max-width:1740px;margin:auto;padding:32px 3%}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2px;color:#799067;font-weight:700}h1{font-size:32px;letter-spacing:-1px;margin:8px 0 10px}.intro p:not(.eyebrow){color:#7c8980}.actions{display:flex;gap:7px;flex-wrap:wrap}.workspace{display:grid;grid-template-columns:250px minmax(300px,1fr) 235px;gap:20px;align-items:start}.panel{border:1px solid #e2e6dd;background:white;border-radius:16px;padding:22px;box-shadow:0 4px 20px #263a2604}h2{font-size:14px;margin:0 0 18px}h2:not(:first-child){margin-top:26px}h2 span{float:right;color:#7c9174;font-size:12px;font-weight:400}label:not(.check):not(.upload){display:flex;flex-direction:column;gap:7px;margin:14px 0;font-size:12px;color:#6d7d70}label select{width:100%}.check{display:flex;align-items:center;gap:6px;font-size:12px;margin:12px 0}.hint{font-size:11px;line-height:1.8;color:#8a958b}.wide{width:100%;margin:5px 0}.upload{display:block;padding:25px 12px;text-align:center;background:#f3f7ee;border:1px dashed #bccdac;border-radius:10px;cursor:pointer;color:#52714c}.upload input{display:none}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}.toolbar small{display:block;margin-top:6px;color:#8a958b;font-size:11px}.wrap{flex-wrap:wrap}.preview{padding:20px;min-width:0}.canvasWrap{position:relative;border-radius:12px;overflow:hidden;background:#fafaf7;border:1px solid #edf0e8;aspect-ratio:1}.canvasWrap canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:pan-y}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#a0ad94;text-align:center;padding:25px}#empty span{font-size:65px;color:#b6c6a1}#empty h2{font-size:18px;margin:20px 0 0}#empty p{font-size:12px}.previewBottom{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}.previewBottom label:not(.check){margin:0;flex-direction:row;align-items:center}.previewBottom button{font-size:11px}.materials{max-height:950px;overflow:auto}.usageRow{display:flex;align-items:center;gap:8px;padding:12px 5px;border-bottom:1px solid #eff1eb;cursor:pointer;border-radius:7px}.usageRow.selected{background:#eef5e5}.chip{width:27px;height:27px;border:1px solid #0001;border-radius:7px;flex-shrink:0}.usageRow strong{font-size:12px;flex:1}.usageRow small{display:block;font-size:10px;font-weight:400;color:#8b958a;margin-top:4px}.usageRow .qty{font-size:13px}.shortage{color:#b16138!important}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}.swatch{padding:12px;border:1px solid #e2e6dd;border-radius:12px}.swatchHead{display:flex;align-items:center;gap:8px}.swatch .chip{width:35px;height:35px}.swatch label:not(.check){margin:8px 0 0}.swatch small{font-size:10px;color:#8b958a}.inline{display:flex;gap:8px}.inline input{width:100%}progress{width:100%;accent-color:#315b49}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:99;background:#233e36;color:white;padding:13px 22px;border-radius:10px;box-shadow:0 6px 30px #0003;max-width:90vw;display:none}#toast.visible{display:block}#guide{position:fixed;inset:0;z-index:30;background:#000;color:#dbe8dc;display:flex;flex-direction:column}.guideBar,.guideFooter{display:flex;align-items:center;gap:10px;background:#111b17;padding:10px 14px;flex-wrap:wrap}.guideBar strong{margin-right:auto}.guideBar span{font-size:12px}.guideFooter{justify-content:center}.guideFooter select{max-width:230px}.guideBar button,.guideFooter button{background:#26392e;color:white;border-color:#405348}#guideStage{flex:1;min-height:0;overflow:hidden;position:relative}#guideCanvas{display:block;width:100%;height:100%;touch-action:none}.guideSettings{position:absolute;z-index:32;right:10px;top:65px;bottom:80px;width:320px;max-width:calc(100vw - 20px);padding:20px;background:#f7f8f4;color:#294133;border:1px solid #bac9b7;border-radius:12px;overflow:auto;box-shadow:0 10px 60px #0008}#ruler{border-bottom:2px solid #315b49;border-left:2px solid #315b49;border-right:2px solid #315b49;height:25px;font-size:10px;text-align:center;white-space:nowrap}.guideSettings h2{font-size:17px}.guideSettings label{margin:9px 0!important}a{color:#426949}:focus-visible{outline:3px solid #a9c48b;outline-offset:2px}@media(max-width:1150px){.workspace{grid-template-columns:220px minmax(280px,1fr)}.materials{grid-column:1/-1;max-height:380px}#usage{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0 15px}.local{display:none}}@media(max-width:700px){header{height:auto;min-height:72px;padding:14px;gap:12px;flex-wrap:wrap}.brand{font-size:18px}nav{margin-left:auto}nav button{padding:8px;font-size:12px}main{padding:24px 14px}.intro{align-items:flex-start;flex-direction:column}h1{font-size:27px}.workspace{display:flex;flex-direction:column}.workspace>*{width:100%}.settings{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.settings h2,.settings .hint,.settings .upload,.settings .wide,.settings progress{grid-column:1/-1}.panel{padding:17px}.toolbar{align-items:flex-start;flex-wrap:wrap}.guideBar,.guideFooter{gap:5px;padding:8px}.guideBar button,.guideFooter button{font-size:11px;padding:8px}.guideFooter select{max-width:150px}.guideSettings{top:70px;bottom:105px}}

.previewBottom label:not(.check){white-space:nowrap}.previewBottom select{min-width:120px}body:has(#guide:not([hidden])){overflow:hidden}#guideStage{overscroll-behavior:none}

.conversionOptions{grid-column:1/-1;background:#f6f8f2;border:1px solid #e3e9da;border-radius:10px;padding:12px;margin:10px 0}.conversionOptions summary{cursor:pointer;font-size:12px}dialog{border:1px solid #d8e2d2;border-radius:16px;padding:22px;max-width:95vw;width:860px;background:#f7f8f3;color:#233d38}dialog::backdrop{background:#0c1b13bb}#cropCanvas{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain;touch-action:none;margin:12px 0;cursor:crosshair}dialog .actions{justify-content:flex-end}

.screenInfo{white-space:pre-line;background:#e8efdf;padding:10px;border-radius:8px;font-size:11px;line-height:1.8}.quickLight{display:flex!important;flex-direction:row!important;align-items:center;gap:5px;margin:0!important;color:#c8dbc7!important}.quickLight select{width:130px!important}.guideFooter #pitchReadout,.guideFooter #wakeStatus{font-size:10px;color:#a3bba8}#touchShield{position:absolute;inset:0;z-index:70;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:transparent}#guide.locked .guideBar,#guide.locked .guideFooter{visibility:hidden;pointer-events:none}#guide.locked{user-select:none;-webkit-user-select:none}.lockNotice{position:absolute;top:12px;left:12px;color:#738779;font-size:11px;pointer-events:none}#unlockGuide{position:absolute;bottom:10px;right:14px;background:#112017;color:#b3c4b7;border:1px solid #415648;touch-action:none;overflow:hidden;min-width:180px}#unlockGuide span{position:relative;z-index:1}#unlockGuide:before{content:'';position:absolute;inset:0;background:#526d3e;transform:scaleX(0);transform-origin:left}#unlockGuide.holding:before{transform:scaleX(1);transition:transform 1.5s linear}.guideBar #lockGuide{background:#cfe3aa;color:#203927;border-color:#cfe3aa}#guide:fullscreen{width:100vw;height:100vh}

.projectActions{align-items:flex-end}.projectNameLabel{margin:0!important;gap:4px!important;font-size:11px!important}.projectNameLabel input{width:200px;max-width:65vw}

/* Guide controls overlay a stable full-screen canvas. Folding does not resize it. */
#guide{display:block;height:100vh;height:100dvh;overflow:hidden}
#guideStage{position:absolute;inset:0;min-height:0;width:100%;height:100%;overflow:hidden}
#guideCanvas{width:100%;height:100%}
.guideBar,.guideFooter{position:absolute;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));z-index:35;display:flex;flex-direction:column;align-items:stretch;gap:8px;border:1px solid #34473b;border-radius:12px;background:#111b17f2;max-width:calc(100% - 20px);padding:9px;overflow:hidden}
.guideBar{top:max(8px,env(safe-area-inset-top))}.guideFooter{bottom:max(8px,env(safe-area-inset-bottom))}
.guideBarBody{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-height:35vh;max-height:35dvh;overflow:auto;overscroll-behavior:contain;min-width:0}
.guideBarBody strong{margin-right:auto}.guideBarBody #guideStatus{min-width:0;overflow-wrap:anywhere}
.guideFooterBody{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:center;gap:8px;max-height:38vh;max-height:38dvh;overflow:auto;overscroll-behavior:contain;min-width:0}
.guideFooterBody>*{min-width:0;max-width:100%}.guideFooterBody button{white-space:normal;min-height:40px}.guideFooterBody select{width:100%;max-width:100%}.guideFooterBody #tileInfo{grid-column:1/-1;font-size:11px;overflow-wrap:anywhere}.guideFooterBody #wakeStatus{grid-column:1/-1}.guideFooter .quickLight{flex-wrap:wrap}.guideFooter .quickLight select{width:100%!important}
.barToggle{align-self:flex-start;padding:7px 11px!important;font-size:12px;min-height:34px}.barHandle{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}#compactGuideStatus{font-size:11px;color:#b9cdbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#guide.top-collapsed .guideBar{right:auto;max-width:calc(100% - 20px);padding:5px}#guide.bottom-collapsed .guideFooter{padding:5px 8px}.guideSettings{z-index:50;right:max(12px,env(safe-area-inset-right));top:76px;bottom:max(76px,env(safe-area-inset-bottom));width:360px;max-width:calc(100% - 24px);padding:0 18px 18px;overflow:auto;overscroll-behavior:contain;scroll-padding-top:70px}.settingsHandle{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 0;background:#f7f8f4;border-bottom:1px solid #dbe4d4;margin-bottom:12px}.settingsHandle h2{margin:0!important;font-size:16px}.settingsHandle button{white-space:nowrap;font-size:12px}
@media(max-width:600px){.guideBarBody button{flex:1 1 125px}.guideBarBody strong,.guideBarBody #guideStatus{flex-basis:100%}.guideFooterBody{grid-template-columns:repeat(2,minmax(0,1fr))}.guideSettings{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:auto;bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-width:none;max-height:78vh;max-height:78dvh;border-radius:16px;padding:0 15px 16px}.guideFooterBody #guideColor,.guideFooterBody #complete{grid-column:1/-1}.guideBar,.guideFooter{left:8px;right:8px;max-width:calc(100% - 16px)}#compactGuideStatus{max-width:55vw}}
@media(max-height:500px){.guideBarBody{max-height:32vh}.guideFooterBody{max-height:38vh}.guideSettings{top:8px;bottom:8px;max-height:calc(100vh - 16px)}}