@import url('./studio.css');
:root{font-family:Arial,Helvetica,sans-serif;color:#20232d;background:#f6f7fa;font-size:16px;--blue:#2549eb;--ink:#20232d;--muted:#727787;--line:#e4e7ef;--surface:#fff;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,label,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;transition:background .15s,transform .15s}button:hover:not(:disabled){filter:brightness(.96)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.upload:focus-within{outline:3px solid #f17456;outline-offset:4px}input,select{min-width:0;max-width:100%;height:48px;padding:10px 12px;border:1px solid #dce0eb;border-radius:10px;background:#fff;color:var(--ink);font-size:16px;width:100%}input:disabled,select:disabled{background:#f4f5f8;color:#8a8e9a}input:focus,select:focus{border-color:var(--blue)}label{display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.4;color:#565b6b}p{line-height:1.65}h1,h2,p{margin-top:0}h2{font-size:20px;font-weight:650;letter-spacing:-.025em;margin-bottom:0}header{max-width:1440px;margin:auto;height:100px;padding:0 50px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.3;letter-spacing:.07em;font-weight:700}.monogram{font-size:32px;line-height:1;width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:var(--blue);color:#fff;letter-spacing:-.1em;padding-right:4px;font-weight:400}nav{display:flex;gap:5px;margin:auto}nav a{font-size:14px;padding:12px 18px;border-radius:30px;color:#737887}nav .nav-current{background:#e9ecf8;color:#252e4f}.compare{font-size:13px;border:1px solid #d8dce6;padding:11px 16px;border-radius:25px;white-space:nowrap}.skip{position:absolute;top:-100px;left:20px;background:white;z-index:20;padding:15px}.skip:focus{top:10px}main{max-width:1320px;margin:0 auto;padding:38px 38px 0}.title{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:600;margin:0 0 14px}.eyebrow span{color:var(--blue);margin-left:10px}h1{font-size:46px;line-height:1.1;letter-spacing:-.055em;font-weight:500;margin:0 0 14px}.intro{font-size:16px;color:var(--muted);margin-bottom:0}.design-label{text-align:right;color:#7b808e;font-size:13px;line-height:1.7}.design-label b{color:#464d60;font-weight:400}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}.panel{background:var(--surface);border-radius:20px;padding:25px;margin-bottom:16px;border:1px solid #e8ebf2}.sectionhead{display:flex;align-items:center;gap:11px;margin-bottom:22px}.step{background:#f0f2f8;color:#585f73;width:29px;height:29px;border-radius:50%;display:inline-grid;place-items:center;flex-shrink:0;font-size:13px}.sectionhead .muted{margin-left:auto}.muted{font-size:12px;color:#7d8290}.segmented{background:#f2f3f7;border-radius:11px;padding:4px;display:flex;gap:5px}.segmented button{background:transparent;color:#727789;border-radius:8px;padding:12px 10px;flex:1;font-size:14px}.segmented .active{background:#fff;color:#252f53;box-shadow:0 1px 5px #1f2d5120}.targetline{margin-top:22px}#targetlabel{font-size:14px;font-weight:400;color:#707688}.weight-control{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:5px 0 15px;gap:15px}.weight-control button{border:1px solid #e0e4ef;border-radius:50%;width:42px;height:42px;background:white;color:#536078;font-size:23px;flex-shrink:0}.weight-input{display:flex;align-items:baseline;gap:10px;justify-content:center;min-width:0}.weight-input span{color:#8791a7;font-size:20px}#target{font-size:52px;font-weight:500;letter-spacing:-.07em;text-align:center;background:transparent;border:0;width:150px;padding:0;height:65px;color:var(--ink);appearance:textfield}#target::-webkit-inner-spin-button,#target::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.hint{font-size:13px;line-height:1.6;color:var(--muted);margin:12px 0 0}#modehint{margin-top:13px;text-align:center}.tiers-panel .sectionhead{margin-bottom:8px}#tierhint{margin-bottom:23px}.tier{border:1px solid #e3e7f0;border-radius:13px;margin-bottom:12px;background:#fff;overflow:hidden;padding:15px 17px}.tierhead{display:flex;align-items:center;gap:9px;margin-bottom:12px}.tierhead b{font-size:14px;font-weight:500}.tier-number{font-size:12px;background:#edf0ff;color:var(--blue);width:24px;height:24px;display:grid;place-items:center;border-radius:7px}.remove{margin-left:auto;background:transparent;color:#9ba1af;font-size:22px;line-height:1;padding:5px 7px;min-height:30px}.filling-label select{background:#f7f8fc;border:1px solid #f0f2f7}.tier-edit{margin-top:12px}.tier-edit summary{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#717889;font-size:13px;list-style:none;cursor:pointer;min-height:30px}.tier-edit summary small{display:block;font-size:12px;color:#888f9e;margin-top:2px}.edit-label{font-size:12px;color:var(--blue);white-space:nowrap}.tier-edit[open] .edit-label>span{display:inline-block;transform:rotate(180deg)}summary::-webkit-details-marker{display:none}.tier-settings{padding-top:15px;margin-top:14px;border-top:1px solid var(--line)}.shape-row{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:12px}.check{display:flex;flex-direction:row;align-items:center;gap:9px;min-height:48px}.check input{width:19px;height:19px;accent-color:var(--blue)}.dimensions{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin-top:14px}.density-label{margin-top:16px;display:grid;grid-template-columns:1fr 95px;align-items:center;font-size:13px}.density-label input{height:42px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.full{width:100%}.secondary,.primary{padding:13px 18px;border-radius:10px;font-size:14px;line-height:1.3;min-height:46px}.secondary{color:#303749;background:#fff;border:1px solid #dfe4ef}.primary{color:#fff;background:var(--blue);border:1px solid var(--blue)}.add-button{border-style:dashed;border-color:#c2cced;background:#f9faff;color:var(--blue);margin-top:1px}.finish-summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer}.finish-summary b{font-size:16px;font-weight:500}.finish-summary small{display:block;font-size:12px;color:var(--muted);margin-top:7px}.disclosure{margin-left:auto;color:#747d93;font-size:18px}details[open]>.finish-summary>.disclosure,details[open]>.simple-summary>.disclosure{transform:rotate(180deg)}.details-content{margin-top:23px}.advanced{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.advanced summary{font-size:14px;cursor:pointer;margin-bottom:18px;color:#626c84}.board-panel{padding:21px 25px}.simple-summary{display:flex;list-style:none;cursor:pointer;align-items:center;gap:15px;font-size:14px}.results{position:sticky;top:20px}.resultpanel{overflow:hidden;border-radius:22px;border:1px solid #e0e5f0;background:white;box-shadow:0 8px 30px #203a6b06}.result-top{padding:25px 28px 24px;background:var(--blue);color:white}.result-top .sectionhead{justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}.result-top .eyebrow{margin:0;font-size:12px;font-weight:400;letter-spacing:.12em}.badge{color:#e3e9ff;border:1px solid #ffffff38;background:#ffffff0c;border-radius:99px;padding:5px 9px;font-size:12px;white-space:nowrap}.totals{display:grid;grid-template-columns:1fr 1fr;gap:22px}.totals>div+div{border-left:1px solid #ffffff38;padding-left:25px}.totals strong{display:block;font-size:48px;font-weight:400;letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums}.totals span{display:block;font-size:13px;color:#cbd5ff;margin-top:12px}.diagramwrap{position:relative;padding-top:10px;background-color:#f2f5ff;background-image:radial-gradient(#cdd5eb .7px,transparent .7px);background-size:18px 18px;border-bottom:1px solid #e9edf5}.diagram-label{position:absolute;top:18px;left:26px;font-size:12px;color:#7a86a5;letter-spacing:.075em}#diagram{width:100%;display:block;max-height:325px}.result-content{padding:20px 27px 22px}.legend{display:flex;gap:15px;font-size:12px;color:#7b859c;margin:0 0 14px}.legend span{display:flex;align-items:center;gap:6px}.legend span:last-child{margin-left:auto}.legend i{display:inline-block;width:8px;height:8px;background:var(--blue);border-radius:2px}.legend i.dummy{background:transparent;border:1px dashed var(--blue)}.resulttable{overflow:auto}table{width:100%;border-collapse:collapse;font-size:15px}th{font-size:12px;color:#8a90a0;font-weight:400;text-align:left}td,th{border-bottom:1px solid #edf0f7;padding:11px 0}th:last-child,td:last-child{text-align:right}td:first-child{color:#818aa0}td small{font-size:12px;color:#838da1;display:block;margin-top:4px}td:last-child{font-variant-numeric:tabular-nums}.weight-details{margin:15px 0}.weight-details summary,.calculation-notes summary{font-size:13px;color:#7b8293;cursor:pointer}.massbar{display:flex;height:6px;margin:20px 0 12px;overflow:hidden;border-radius:5px}.masslabels{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#7c8599;line-height:1.6}.masslabels b{font-size:14px;font-weight:400;color:#354365}.footstats{padding:18px 0;display:flex;gap:20px;border-top:1px solid #edf0f7}.footstats>div{flex:1}.footstats span{font-size:12px;display:block;color:#8890a2;margin-bottom:6px}.footstats b{font-size:20px;font-weight:500}.footstats small{display:block;font-size:12px;color:#8c94a5;margin-top:5px}.result-actions{display:flex;gap:10px}.result-actions .primary{flex:1}.result-actions .secondary{padding:12px}.calculation-notes{margin-top:15px}.calculation-notes .hint{font-size:12px}#copystatus:empty{display:none}#error{background:#fff3ed;color:#813410;padding:18px;border-radius:10px;font-size:14px;line-height:1.5}.photo-section{margin-top:45px;padding:28px}.photo-section .sectionhead{flex-wrap:wrap}.section-number{color:var(--blue);background:#eef2ff;padding:7px 10px;border-radius:6px;font-size:12px}.badge.light{margin-left:auto;color:#788297;background:#f6f7fb;border:1px solid #e4e9f4}.photo-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}.photo-grid p:first-child{font-size:16px;color:#596177;margin-bottom:22px}.upload{position:relative;border:1px dashed #b2c0e6;border-radius:11px;padding:20px;text-align:center;display:block;cursor:pointer;background:#f6f8ff;font-size:16px;color:var(--blue)}.upload input{display:block;border:0;background:transparent;font-size:13px;margin-top:10px;height:auto;color:#6e7892}.actions{display:flex;gap:10px;flex-wrap:wrap}#photostatus{font-size:14px;color:#687691;margin:17px 0}.photoarea{background:#f1f4fb;min-height:300px;display:flex;align-items:center;justify-content:center;border-radius:14px;overflow:hidden}.photoempty{width:100%;height:100%;min-height:360px;position:relative}.photoempty img{width:100%;height:100%;min-height:360px;max-height:450px;object-fit:cover;display:block;object-position:50% 45%;filter:saturate(.75)}.photoempty span{position:absolute;bottom:15px;left:15px;right:15px;font-size:13px;color:#fff;background:#20283cbb;backdrop-filter:blur(5px);text-align:center;border-radius:8px;padding:12px}#photostage{position:relative;max-width:100%;line-height:0}#reference{display:block;max-width:100%;max-height:520px}#overlay{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:manipulation}.examples-section{margin:46px 0 35px}.examples-section .sectionhead{margin-bottom:10px}.examples-section>.hint{max-width:700px;margin-bottom:24px}.examples{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.example{padding:0;text-align:left;border:1px solid #e4e8f2;background:white;border-radius:14px;overflow:hidden;color:var(--ink)}.example img{display:block;width:100%;height:155px;object-fit:cover}.example div{padding:15px}.example strong{display:block;font-weight:500;font-size:14px;line-height:1.45;margin-bottom:8px}.example small{font-size:12px;color:#8a90a0}#caseDetail{margin-top:20px}#caseDetail p{font-size:14px;color:#637087}footer{border-top:1px solid var(--line);padding:28px 0 36px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.05em}footer small{display:block;margin-top:9px;font-size:12px;color:#8c93a2;letter-spacing:0}footer a{letter-spacing:0;color:#6b7692}.mobile-result{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(min-width:1500px){main{padding:45px 25px 0}header{padding-left:85px;padding-right:85px}}@media(max-width:1000px){header{padding:0 28px;gap:20px}main{padding:30px 24px 0}.workspace{gap:20px}.panel{padding:21px}.result-top{padding:23px}.result-content{padding:19px}.totals strong{font-size:42px}h1{font-size:41px}.badge{font-size:12px}.totals>div+div{padding-left:18px}.sectionhead .muted{display:none}.examples{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){header{height:82px;padding:0 20px;justify-content:space-between}nav{display:none}.compare{font-size:12px;padding:10px 13px}.brand{font-size:12px}.monogram{width:42px;height:42px;font-size:29px}.design-label{display:none}main{padding:27px 18px 0}.title{margin-bottom:24px}h1{font-size:37px;max-width:390px}.intro{font-size:15px}.eyebrow{font-size:12px;margin-bottom:13px}.workspace{grid-template-columns:1fr;gap:8px}.panel{border-radius:17px;padding:22px}.sectionhead h2{font-size:19px}.sectionhead .muted{display:block}.results{position:static}.resultpanel{border-radius:19px}.result-top{padding:24px}.totals strong{font-size:47px}#diagram{max-height:315px}.result-content{padding:23px}.photo-section{margin-top:30px}.photo-grid{grid-template-columns:1fr;gap:25px}.photoempty,.photoempty img{min-height:270px;max-height:330px}.photo-section .sectionhead h2{font-size:19px}.photo-section .sectionhead .badge{margin-left:0}.examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.example img{height:170px}.examples-section{margin-top:34px}.examples-section .sectionhead{align-items:flex-start}.example div{padding:13px}footer{margin-bottom:90px;gap:25px}footer a{max-width:130px;line-height:1.6}.mobile-result{display:flex;align-items:center;justify-content:space-between;gap:16px;position:fixed;z-index:10;bottom:0;left:0;right:0;background:#202533;color:white;padding:15px 23px max(15px,env(safe-area-inset-bottom));box-shadow:0 -5px 25px #10152c15}.mobile-result b{font-size:18px;font-weight:500}.mobile-result small{display:block;font-size:12px;color:#a8b2c9;margin-top:4px}.mobile-result>span+span{font-size:14px;color:#e7ecfb}#calculator,#result,#photo-section,#examples-section{scroll-margin-top:15px}.result-actions .primary{font-size:14px}}@media(max-width:370px){main{padding-left:12px;padding-right:12px}.panel{padding:18px}h1{font-size:33px}.fields{gap:10px}.result-content{padding:18px}.tier{padding:14px}.tierhead b{font-size:13px}.edit-label{font-size:12px}.tier-edit summary{gap:8px}.badge{font-size:12px}.result-top{padding:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}@media print{header,.controls,.photo-section,.examples-section,.mobile-result,.title .eyebrow,.title .intro,.design-label,footer,.result-actions,#copystatus,.legend{display:none!important}body{background:white}main{padding:0}.title{margin-bottom:15px}h1{font-size:26px}.workspace{display:block}.results{position:static}.resultpanel{border:1px solid #bbb;border-radius:0;box-shadow:none}.result-top{background:white;color:black;padding:12px 20px}.totals strong{font-size:32px}.totals span{color:#555}.totals>div+div{border-color:#ccc}.badge{color:#333;border-color:#bbb}.diagramwrap{background:#fff;padding:0}#diagram{max-height:250px}.diagram-label{display:none}.result-content{padding:12px 20px}.weight-details,.calculation-notes{display:none}.footstats{padding:12px 0}}

/* Native file control fills its tap target; no scripted picker or nested label. */
.upload{position:relative;min-height:62px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.upload input{position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.photo-section{overflow-anchor:none}
#photostatus{min-height:24px}
#photoarea[aria-busy=true]{opacity:.65}
@media screen{
.result-content .result-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px;align-items:stretch}
.result-actions #resultSave{grid-column:1/-1}.result-actions button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.result-actions .result-print{background:transparent;color:var(--muted);min-height:44px;padding:10px;border-radius:8px;font-size:14px}
#variantSave.new-project-save:not([open]),#variantSave.new-project-save>summary{display:none}
}
/* Active mobile annotation owns the visible viewport, with fixed control rows.
   Only the image row flexes; returning from Review cannot strand Close above it. */
@media(max-width:760px){
 .photo-section .photo-workspace.annotation-open{position:fixed;z-index:30;left:0;right:0;top:var(--photo-viewport-top,0px);height:var(--photo-viewport-height,100dvh);box-sizing:border-box;background:var(--surface);padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) 40px auto auto;gap:8px;overflow:hidden;overscroll-behavior:contain}
 .annotation-open #photoTools{grid-row:1;min-width:0}.photo-section .annotation-open #photoarea{grid-row:2;min-height:0;align-self:stretch}
 .photo-section .annotation-open #photostage{height:100%;min-height:0;width:100%}
 .annotation-open .photo-view-actions{grid-row:3}.annotation-open #photostatus{grid-row:4;margin:0;font-size:14px}
 .annotation-open #annotationActions,.annotation-open #photoReview{grid-row:5;margin:0;gap:8px;display:flex;flex-wrap:wrap}
 .annotation-open #annotationActions button,.annotation-open #photoReview button{min-height:44px;flex:1;padding:10px 8px;font-size:14px}
 .annotation-open .photo-apply-hint{display:none}.annotation-open #photoInstruction{margin:4px 0 0}.annotation-open #photoExit{min-height:44px;flex-shrink:0}
}
/* Photo-only workspace: normalized annotation overlay, no calculator layout changes. */
.photo-workspace{min-width:0}.photo-section.has-photo .photo-grid{grid-template-columns:1fr;gap:16px}
.has-photo .photo-intro>p{display:none}.has-photo .upload{min-height:44px;padding:10px;font-size:14px;max-width:300px}
.photo-step{display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:1.4}.photo-step strong{font-size:16px}
#photoInstruction{margin:3px 0 12px;line-height:1.45}.photo-text-button{font-size:14px;min-height:40px;padding:8px 4px;background:transparent;color:var(--blue);border-radius:6px}
.photo-section #photoarea{background:#eef0f3;min-height:0;border:1px solid #e3e6eb}
.photo-section #photostage{width:100%;height:clamp(280px,58dvh,560px);max-width:none;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.photo-section #reference{position:absolute;max-width:none;max-height:none;pointer-events:none;object-fit:contain}
.photo-section #overlay{touch-action:none;cursor:crosshair}.photo-handle{cursor:grab;pointer-events:all}
.photo-view-actions{display:flex;justify-content:flex-end;min-height:0}#photostatus:empty{display:none}#photostatus{line-height:1.45;margin:10px 0}
#annotationActions,#photoReview{margin-top:12px}#annotationActions .primary{margin-left:auto}.photo-apply-hint{margin:14px 0 0;font-size:13px}
#photoConfirm{max-width:min(420px,calc(100vw - 32px));border:0;border-radius:16px;padding:24px;color:var(--ink)}#photoConfirm::backdrop{background:#18203066}#photoConfirm .actions{justify-content:flex-end}
.photo-section #photostage[data-interacting="false"],.photo-section #photostage[data-interacting="false"] #overlay{touch-action:auto}
.photo-section #photostage[data-interacting="true"],.photo-section #photostage[data-interacting="true"] #overlay{touch-action:none;overscroll-behavior:contain;-webkit-touch-callout:none}
.photo-section #photostage[data-cursor="grab"] #overlay{cursor:grab}
.photo-section #photostage[data-cursor="grabbing"] #overlay,.photo-section #photostage[data-cursor="grabbing"] .photo-handle{cursor:grabbing}
.photo-gesture-hint{display:none;font-size:12px;line-height:1.4;color:var(--muted);margin:4px 0 0}
@media(pointer:coarse){.annotation-open .photo-gesture-hint{display:block}}
@media(max-width:760px){body.photo-annotating .mobile-result{display:none}.photo-section.has-photo{padding:16px 10px}.has-photo .photo-grid{gap:12px}.photo-section #photostage{height:clamp(260px,calc(100dvh - 330px),520px)}#annotationActions{gap:7px}#annotationActions button{padding:12px 10px;font-size:13px}#photoReview button{flex:1;min-width:130px}.photo-step{gap:6px}}
.filling-advanced>summary{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:#455374;list-style:none;cursor:pointer}.filling-advanced>summary::after{content:'⌄';flex-shrink:0;font-size:18px}.filling-advanced[open]>summary::after{transform:rotate(180deg)}

@media print{#assembly{display:none!important}}

.legend.ganache-legend{flex-wrap:wrap;gap:9px 15px}.legend.ganache-legend span:last-child{margin-left:0}

.calculation-tabs{margin-bottom:22px}.calculation-tabs button{min-width:0;white-space:normal}#variantList{overflow-wrap:anywhere}#myCalculationsLink{color:var(--blue);text-decoration:underline;text-underline-offset:3px}#examplesPanel>.hint{max-width:700px;margin-bottom:24px}@media print{#variantSave{display:none!important}}

/* Weight-mode dimension controls: stable tracks in both automatic/manual states. */
.weight-dimensions{grid-template-columns:minmax(0,1fr);gap:14px}
.dimension-field{display:grid;grid-template-columns:minmax(0,1fr) 64px 44px;gap:6px 8px;align-items:center;min-width:0}
.dimension-field>label{grid-column:1/-1;gap:0}
.dimension-control{position:relative;min-width:0}
.dimension-control input{height:48px;padding-right:36px;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
.dimension-control input::-webkit-inner-spin-button,.dimension-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dimension-control>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);pointer-events:none}
.dimension-state{font-size:12px;color:var(--muted);text-align:center;white-space:nowrap}
.dimension-auto,.dimension-action-space{width:44px;min-height:48px}
.dimension-auto{padding:0;background:transparent;color:var(--blue);font-size:13px;text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.tier-edit:has(.weight-dimensions)>summary{min-height:44px}
.tier-edit:has(.weight-dimensions)>.tier-settings .shape-row{min-width:0}
@media(max-width:760px){.tier-edit:has(.weight-dimensions)>summary{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}.tier-edit:has(.weight-dimensions) .edit-label{display:flex;align-items:center;justify-content:space-between;min-height:44px}.tier-edit:has(.weight-dimensions) .edit-label>span{line-height:1;width:16px;text-align:center}}

/* Keep the scrollable page clear of the fixed mobile result, including safe area. */
.diagramwrap{background:#f7f6f4;background-image:none;padding:18px 0 0}
.diagramwrap .diagram-label{position:static;display:block;margin:0 18px 12px}
.cake-views{margin:0 12px 5px;gap:3px;padding:3px;background:#f0f0ed}
.cake-views button{min-width:0;min-height:48px;padding:8px 4px;font-size:12px;line-height:1.35;white-space:normal;touch-action:manipulation}
.cake-views .active{color:#2549eb;background:#fff;box-shadow:none}
#diagram{max-height:540px;width:100%;height:auto;aspect-ratio:390/500}
#diagramLegend{flex-wrap:wrap;gap:8px 14px;padding-bottom:16px;margin-bottom:12px;border-bottom:1px solid var(--line)}#diagramLegend>span:last-child{margin-left:0}
@media print{.cake-views{display:none}#diagram{max-height:330px}}
#variantList{display:grid;gap:12px;margin-top:16px}
#examples.examples{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.model-card .secondary{padding:10px 12px;font-size:13px}
.variant-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff;min-width:0}
.variant-preview{width:112px;height:112px;display:grid;place-items:center;background:#f2f5ff;border-radius:10px;overflow:hidden}
.variant-preview svg{display:block;width:100%;height:100%}
.variant-preview-empty{font-size:12px;line-height:1.5;color:var(--muted);text-align:center;padding:12px}
.variant-card-info{min-width:0;overflow-wrap:anywhere}.variant-card-info>b{font-size:15px;font-weight:500;line-height:1.4}.variant-card-info .hint{margin:5px 0 10px;font-size:12px}.variant-card-info .secondary{min-height:44px;padding:10px 16px}
@media(max-width:480px){.variant-card{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px}.variant-preview{width:96px;height:104px}}
.numeric-control{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;min-width:0}
.numeric-control .numeric-step{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:#536078;font-size:23px;line-height:1;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.numeric-control .numeric-step:active:not(:disabled){background:#edf0ff;transform:none}
.numeric-control input{font-size:16px;min-width:0;appearance:textfield}
.numeric-control input::-webkit-inner-spin-button,.numeric-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.weight-control.numeric-control{gap:12px}
.weight-control.numeric-control .weight-input{gap:6px}
.weight-control.numeric-control #target{width:100%;max-width:150px;font-size:48px;letter-spacing:-.04em}
.dimension-field>.dimension-numeric{grid-column:1/-1;grid-row:2}
.dimension-field>label{grid-column:1;grid-row:1;min-width:0}
.dimension-field>.dimension-state{grid-column:2;grid-row:1}
.dimension-field>.dimension-auto,.dimension-field>.dimension-action-space{grid-column:3;grid-row:1;min-height:44px}
.dimension-numeric input{text-align:center;padding-left:8px;padding-right:32px}
.dimensions{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%}
.dimension-field{max-width:100%}
.dimension-field>.dimension-numeric{width:100%;max-width:100%;contain:inline-size}
.dimension-numeric input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.controls,.tiers-panel,#tiers,.tier,.tier-edit,.tier-settings,[data-tier-dimensions],.dimension-control{min-width:0;max-width:100%}
.dimension-control{width:100%}
.tier-edit>summary>[data-tier-summary]{min-width:0;overflow-wrap:anywhere}
.dimension-error{grid-column:1/-1;grid-row:3;font-size:12px;line-height:1.4;color:#a83232;overflow-wrap:anywhere}
.dimension-numeric input[aria-invalid="true"]{border-color:#a83232}
.dimension-field:not(.dimension-relative){grid-template-columns:minmax(0,1fr)}
.dimension-field:not(.dimension-relative)>label{min-height:44px;justify-content:center}
.dimension-numeric input{padding:10px 8px;border-radius:10px}
.dimension-numeric .numeric-step{border-radius:10px}
.dimension-numeric .numeric-step:focus-visible,.dimension-numeric input:focus-visible{outline:3px solid #f17456;outline-offset:4px}
@media screen and (max-width:760px){
 /* The measured height includes safe area exactly once. No reserve when hidden. */
 html{--mobile-result-space:0px;scroll-padding-bottom:var(--mobile-result-space)}
 main{padding-bottom:var(--mobile-result-space)}
 footer{margin-bottom:0}
 .mobile-result{padding-bottom:calc(15px + env(safe-area-inset-bottom,0px))}
}

.variant-card-info .card-metadata{margin-top:8px;overflow-wrap:anywhere}
.variant-card-info .card-metadata>strong{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.variant-card-info .card-metadata>.hint{font-size:14px;line-height:1.45;margin:5px 0 10px}

/* Saved project actions reuse the existing palette and button styles. */
.project-context{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.project-context #projectStatus{display:block;margin-top:4px}
.project-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:8px}
.project-link{min-height:44px;padding:8px 0;background:transparent;color:var(--blue);font-size:13px;text-align:left;text-decoration:underline;text-underline-offset:3px}
.project-state{color:var(--blue)}
#projectStorageMessage:empty{display:none}
#leaveProject{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:22px;border:1px solid var(--line);border-radius:17px;color:var(--ink);overflow:auto;overflow-wrap:anywhere}
#leaveProject::backdrop{background:#20253366}
#leavePrompt{font-size:18px;line-height:1.4}
.project-dialog-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:18px}
.proportion-source{display:flex;align-items:center;flex-wrap:wrap;gap:0 12px;margin:0 0 14px;min-width:0;max-width:100%;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.proportion-source button{max-width:100%;white-space:normal}
#newProject{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;font:inherit}
@media print{#newProject{display:none!important}}
#resetProportionsDialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:22px;border:1px solid var(--line);border-radius:17px;color:var(--ink);overflow:auto;overflow-wrap:anywhere}
#resetProportionsDialog::backdrop{background:#20253366}
#resetProportionsTitle{font-size:18px;line-height:1.4}
#resetProportionsDialog button{min-height:44px;white-space:normal}
#resetProportionsError:empty{display:none}
@media print{.proportion-source,#resetProportionsDialog{display:none!important}}
#leaveNameFields{margin-top:16px}#leaveNameFields button{margin-top:12px;width:100%}
#leaveProject button{white-space:normal}#leaveError:empty{display:none}
@media print{.project-context,#projectStorageMessage,#leaveProject{display:none!important}}

.saved-card-heading{display:flex;align-items:flex-start;gap:4px;min-width:0}.saved-card-heading>b{flex:1;min-width:0;font-size:15px;font-weight:500;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.project-menu{position:relative;flex:none}.project-menu-toggle{width:40px;min-height:40px;padding:0;background:transparent;color:var(--muted);touch-action:manipulation}.project-menu-items{position:absolute;right:0;top:40px;z-index:5;width:166px;max-width:calc(100vw - 40px);padding:4px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 16px #20253316}.project-menu-items button{display:block;width:100%;min-height:44px;text-align:left;background:transparent;color:var(--ink);padding:10px;font-size:14px}.project-menu-items button:hover,.project-menu-items button:focus-visible{background:var(--bg)}
#manageProject{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:22px;border:1px solid var(--line);border-radius:17px;color:var(--ink);overflow:auto;overflow-wrap:anywhere}#manageProject::backdrop{background:#20253366}#manageProjectTitle{font-size:18px;line-height:1.4;margin-bottom:16px}#manageProjectName{font-size:16px;min-width:0;width:100%}#manageProjectError:empty{display:none}#manageProject button{white-space:normal}@media print{.project-menu,#manageProject{display:none!important}}

.project-menu-items{overflow-y:auto}
/* Previous valid calculation stays readable during blocking input errors. */
#resultStale{margin:0 0 14px;color:inherit;max-width:100%;overflow-wrap:anywhere}
.result-stale #totals,.result-stale .diagramwrap,.result-stale .resulttable,.result-stale #assembly,.result-stale .footstats,.result-stale .weight-details,.result-stale #diagramLegend{opacity:.55}
.project-menu-toggle{width:44px;min-height:44px}
.project-menu-items [data-project-action="delete"]{color:#a32d36}
#manageProjectConfirm.destructive{background:#a32d36;color:#fff}
#manageProject button{min-height:44px}
.project-context,.project-actions{min-width:0;max-width:100%}
.project-actions button{max-width:100%;white-space:normal;overflow-wrap:anywhere}

.library-shortcuts{display:flex;flex-wrap:wrap;gap:0 20px}.library-shortcuts a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);text-decoration:underline;text-underline-offset:3px}#calculator,#examples-section{scroll-margin-top:15px}

/* Result supporting information is optional; actions follow the diagram. */
.result-details{margin-top:18px;border-top:1px solid var(--line);min-width:0}
.result-details>summary{min-height:48px;padding:12px 0}
.result-details-content{padding-top:6px;min-width:0}
.result-details .result-detail-heading{font-size:14px;font-weight:400;color:var(--muted);margin:0 0 12px}
.result-details .weight-details,.result-details .calculation-notes{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
/* Targeted interaction polish; compact artwork and card geometry stay intact. */
@media screen{
 .segmented:not(.cake-views)>button{min-height:44px}
 .density-label input{height:44px}
 .tier .remove,.tier-edit>summary{position:relative}
 .tier .remove::after,.tier-edit>summary::after{
  content:"";position:absolute;left:50%;top:50%;
  width:max(100%,44px);height:max(100%,44px);
  transform:translate(-50%,-50%);border-radius:inherit;
 }
 .tier .remove:focus-visible,.tier-edit>summary:focus-visible{outline:none}
 .tier .remove:focus-visible::after,.tier-edit>summary:focus-visible::after{
  outline:3px solid #f17456;outline-offset:4px;
 }
}

/* Stable frame for all cake views; retain the original SVG viewport and scale. */
.diagram-canvas{position:relative;display:flow-root;overflow:hidden}
.diagram-caption{position:absolute;bottom:12px;left:0;right:0;text-align:center;font:12px Arial,Helvetica,sans-serif;color:#7b8087}

/* Screen text hierarchy. Print and SVG artwork retain their original fonts. */
@media screen{
 :root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
 .brand,.mobile-result,svg{font-family:Arial,Helvetica,sans-serif}
 h1{font-size:44px;font-weight:500;line-height:1.1;letter-spacing:-.035em}
 h2{font-weight:600;line-height:1.2;letter-spacing:-.02em}
 .tierhead b,.finish-summary b{font-weight:600;line-height:1.25;letter-spacing:-.01em}
 .intro{font-size:16px;font-weight:400;line-height:1.6;letter-spacing:0}
 label,#targetlabel{font-weight:400;line-height:1.4;letter-spacing:0}
 input,select{font-weight:400;letter-spacing:0}
 .primary,.secondary,.result-print,.segmented button{font-weight:500;letter-spacing:0}
 .primary,.secondary,.result-print{line-height:1.3}
 .segmented:not(.cake-views) button{line-height:1.2}
 .hint{font-weight:400;line-height:1.55;letter-spacing:0}
 .dimension-error{font-weight:400;line-height:1.4;letter-spacing:0}
 .eyebrow,.result-top .eyebrow{font-weight:500;letter-spacing:.09em}
 .totals strong{font-weight:500;line-height:1.05;letter-spacing:-.035em}
 .totals span{line-height:1.3;letter-spacing:0}
 .weight-control.numeric-control #target{font-weight:500;letter-spacing:-.035em}
 .numeric-control input,.totals strong,.tier-edit [data-tier-summary],.resulttable,.footstats b,.card-metadata{font-variant-numeric:tabular-nums}
 .tier-edit [data-tier-summary]{letter-spacing:0}
 .saved-card-heading>b,.variant-card-info>b,#projectName{font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
 .variant-card-info .card-metadata>strong{font-weight:600;line-height:1.3;letter-spacing:-.01em}
 .simple-summary,.result-details .result-detail-heading{font-weight:500;letter-spacing:0}
 .result-details .result-detail-heading{line-height:1.4}
 .resulttable th{font-weight:500;letter-spacing:0}
 .resulttable td{font-weight:400;letter-spacing:0}
 .calculation-notes .hint{font-size:12px;line-height:1.55}
}
@media screen and (max-width:1000px){h1{font-size:40px}}
@media screen and (max-width:760px){h1{font-size:34px}}

/* Keep long-press gestures on existing stepper buttons only. */
.numeric-control .numeric-step{touch-action:none;-webkit-touch-callout:none}

/* Symmetric stepper strokes, independent of font baseline; hit areas unchanged. */
.numeric-control .numeric-step{position:relative;font-size:0}
.numeric-control .numeric-step::before,.numeric-control .numeric-step::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor;pointer-events:none}
.numeric-control .numeric-step::after{content:none}
.numeric-control .numeric-step::before{width:14px;height:2px}
.numeric-control #moreWeight::after,.numeric-control [data-size-step="0.5"]::after{content:"";width:2px;height:14px}