:root{color-scheme:dark;--bg:#000;--fg:#f5f5f7;--muted:#a6a6ac;--key:#333336;--surface:#1c1c1e;--line:#303034;--orange:#ff9f0a;--green:#30d158;--key-size:clamp(62px,9dvh,82px);font:14px/1.35 -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;background:#101012;color:var(--fg)}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{border:0;color:inherit;background:none;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.36;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}input,select,textarea{color:var(--fg);accent-color:var(--orange)}[hidden]{display:none!important}svg{width:20px;height:20px;stroke-width:1.6;flex-shrink:0}a{color:var(--orange)}
.studio{width:100%;max-width:480px;height:100dvh;height:var(--app-height,100dvh);min-height:0;margin:auto;background:var(--bg);display:grid;grid-template-rows:58px minmax(100px,1fr) 38px 34px calc(4 * var(--key-size) + 50px) 25px;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;gap:10px}.round-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);flex-shrink:0}.round-icon.small{width:34px;height:34px}.brand{min-width:0;flex:1;text-align:center}.brand span{display:block;color:var(--muted);font-size:10px;letter-spacing:.14em}.brand strong{font-size:14px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{position:relative;overflow:hidden;touch-action:none;min-width:0}.stage-label,.stage-angle{position:absolute;top:10px;font:10px/1.4 ui-monospace,monospace;color:var(--muted);pointer-events:none;z-index:1}.stage-label{left:16px;letter-spacing:.06em}.stage-angle{right:16px}.dimension-label{position:absolute;bottom:9px;left:0;right:0;text-align:center;pointer-events:none;font:12px/1.4 ui-monospace,monospace;color:var(--muted)}#drawing,#drawing canvas{width:100%;height:100%;display:block}
.view-controls{display:flex;align-items:center;gap:10px;padding:0 16px}.view-controls>svg{color:var(--muted);width:16px}.view-controls input{flex:1;min-width:35px;height:32px;margin:0}.pill{border-radius:22px;background:var(--key);padding:9px 14px;min-height:36px;font-size:12px}.target-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;font-size:11px}.target-bar button{text-align:left;min-height:32px;padding:0;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.target-bar span{color:var(--muted);font-size:10px;text-align:right}
.dock{overflow:hidden;min-width:0}.key-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,var(--key-size));gap:10px;padding:10px 16px}.key{width:var(--key-size);height:var(--key-size);max-width:100%;border-radius:50%;background:var(--key);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;place-self:center;font-size:11px;padding:4px;position:relative}.key svg{width:25px;height:25px}.key.utility{background:#a5a5a5;color:#111}.key.orange{background:var(--orange);color:#fff}.key.green{background:var(--green);color:#05270c}.key:active,.pill:active{filter:brightness(1.3)}.key .step-index{position:absolute;top:6px;left:11px;font-size:9px;opacity:.7}.status{padding:4px 16px 0;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status.error{color:#ff8984}
.tool-body{padding:0 16px 14px}.tool-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;background:var(--bg);z-index:2;padding:7px 0 8px}.tool-title{font-size:16px;font-weight:500;display:flex;align-items:center;gap:8px}.tool-scope{font-size:11px;color:var(--orange);margin-bottom:12px}.note{color:var(--muted);font-size:12px;margin:10px 0 14px;overflow-wrap:anywhere}.error-message{color:#ff8984;font-size:12px;margin:8px 0;min-height:0}.field{display:block;margin-bottom:12px;font-size:12px;color:var(--muted)}.field input,.field select,.field textarea{display:block;width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 12px;font-size:16px;margin-top:5px}.field textarea{resize:vertical;min-height:72px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 14px}.choices button{border-radius:22px;background:var(--key);padding:12px 10px;font-size:12px;min-height:44px}.choices button[aria-pressed=true]{background:var(--orange);color:#fff}.actions{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 0 2px;background:var(--bg);z-index:2}.actions button{flex:1;border-radius:25px;background:var(--key);min-height:46px;padding:10px;font-size:13px}.actions .primary{flex:2;background:var(--orange);color:#fff}.actions .green{background:var(--green);color:#05270c}.full-button{display:block;width:100%;min-height:44px;border-radius:22px;background:var(--key);padding:11px 14px;margin:8px 0;text-align:center;font-size:13px}.full-button.primary{background:var(--orange);color:#fff}.full-button.green{background:var(--green);color:#05270c}.button-link{display:block;min-height:44px;padding:12px;text-align:center;font-size:12px}
.dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:8px}.dim-key{background:var(--surface);border-radius:15px;padding:9px 10px;min-height:62px;text-align:left}.dim-key small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.dim-key strong{font-size:27px;font-weight:300;letter-spacing:-1px}.dim-key[aria-pressed=true]{background:#34250e;color:var(--orange)}.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px}.number-key{aspect-ratio:1;max-height:68px;border-radius:50%;background:var(--key);font-size:27px;display:grid;place-items:center}.number-key.operation{background:var(--orange);color:#fff;font-size:15px}.number-key.zero{grid-column:span 2;aspect-ratio:auto;border-radius:50px;justify-content:start;padding-left:27px}.number-key.equal{font-size:30px}.stepper{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.stepper button{width:58px;height:58px;border-radius:50%;background:var(--key);font-size:30px}.stepper output{font-size:56px;font-weight:300;line-height:1;letter-spacing:-2px}.count-label{font-size:12px;color:var(--muted)}.part-picker{margin-bottom:10px}.recipe{display:block;text-align:left;width:100%;border-radius:16px;background:var(--surface);padding:14px;margin:8px 0}.recipe strong{display:block;font-weight:500;font-size:14px}.recipe small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.recipe[aria-pressed=true]{outline:1px solid var(--orange);background:#34250e}.joint-diagram{width:100%;height:90px;margin:6px 0;background:#121214}.machining-preview{display:block;width:100%;height:120px;background:#e9e9e6;margin:10px 0;border-radius:8px}.check-label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px}.check-label input{width:20px;height:20px}
dialog{color:var(--fg);background:var(--surface);border:1px solid #38383a;border-radius:24px;width:min(94vw,430px);max-height:85dvh;padding:18px;overflow:auto}dialog::backdrop{background:#000b}.popup-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-18px;background:var(--surface);padding:0 0 12px;z-index:2}.popup-head h2{font-size:19px;font-weight:500;margin:0}.popup-head .round-icon{background:var(--key);width:36px;height:36px}.popup-list-item{display:block;width:100%;text-align:left;padding:14px 2px;border-bottom:1px solid #38383a}.popup-list-item strong{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}.popup-list-item small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.popup-list-item .green-text{color:var(--green)}.empty{text-align:center;padding:20px 0}.empty>svg{width:36px;height:36px;margin:12px}.empty strong{display:block;font-size:15px;font-weight:500}.account-avatar{display:grid;place-items:center;margin:10px auto 14px;width:64px;height:64px;border-radius:50%;background:var(--key)}.account-avatar svg{width:32px;height:32px}
.spec-screen{max-width:480px;min-height:100dvh;margin:auto;background:var(--bg);padding:12px 18px 30px;overflow-wrap:anywhere}.spec-head{display:flex;align-items:center;gap:12px;position:sticky;top:0;background:var(--bg);z-index:3;padding:5px 0 12px}.spec-head h1{font-size:21px;font-weight:500;letter-spacing:-.5px;margin:0}.spec-head small{color:var(--green);font-size:10px}.spec-drawing{display:block;width:100%;height:190px;object-fit:contain}.spec-screen h2{font-size:15px;font-weight:500;margin:24px 0 12px}.spec-screen dl{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:12px;margin:0}.spec-screen dt{color:var(--muted)}.spec-screen dd{margin:0;text-align:right}.spec-screen table{width:100%;border-collapse:collapse;font-size:11px}.spec-screen th{text-align:left;font-weight:400;color:var(--muted);padding:9px 4px;border-bottom:1px solid var(--line)}.spec-screen td{padding:10px 4px;border-bottom:1px solid var(--line);vertical-align:top}.spec-screen th:last-child,.spec-screen td:last-child{text-align:right;font-variant-numeric:tabular-nums}.spec-screen th:nth-child(2),.spec-screen td:nth-child(2){text-align:center}.spec-screen .actions{position:static;background:var(--bg);margin-top:12px}.spec-screen .actions button{display:flex;align-items:center;justify-content:center;gap:7px}.spec-screen .panel-detail{border-bottom:1px solid var(--line);padding:9px 0}.spec-screen summary{font-size:12px;min-height:32px;cursor:pointer}.spec-screen .panel-detail svg{width:100%;height:150px;background:#ededeb}.spec-screen .panel-detail .note{font-size:11px}.example-banner{position:absolute;top:38px;left:16px;font-size:10px;color:var(--orange);z-index:3;pointer-events:none}
@media(min-width:700px){.studio,.spec-screen{border-left:1px solid #29292c;border-right:1px solid #29292c}.studio{max-width:460px}.key-grid{padding-left:24px;padding-right:24px}}
@media(max-height:720px){:root{--key-size:62px}.studio{grid-template-rows:54px minmax(140px,1fr) 32px 30px calc(4 * var(--key-size) + 45px) 22px}.key-grid{gap:8px;padding-top:8px}.key{font-size:10px;gap:3px}.key svg{width:22px;height:22px}}
@media print{.spec-head button,.spec-screen .actions,.spec-screen .field,.spec-screen .button-link{display:none}body,.spec-screen{background:white;color:black}.spec-screen{max-width:none}.spec-screen th,.spec-screen dt,.spec-screen .note{color:#555}}

/* Fixed app shell: tools and long documents are paged, never scrolled. */
.key.blue,.home-button,.popup-head .home-button{background:#0a84ff;color:#fff}
.popup-head .home-button{width:44px;height:44px}
.spec-head>div{min-width:0;flex:1}.spec-head h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#drawing{width:calc(100% - 44px)}
.dimension-label{right:44px}
.vertical-rotation{position:absolute;right:0;top:38px;bottom:34px;width:44px;display:flex;align-items:center;justify-content:center}
.vertical-rotation input{writing-mode:vertical-lr;direction:rtl;width:32px;height:100%;margin:0;touch-action:none}
.tool-content .choices{margin:6px 0}
@media(orientation:portrait) and (max-height:650px){.spec-screen .spec-content .panel-svg{height:110px}}
@media(orientation:landscape) and (max-height:360px){.spec-screen .spec-content .panel-svg{height:75px}}
.spec-content .panel-svg>svg{width:100%;height:100%}
.tool-error{min-height:26px;max-height:26px;overflow:hidden;line-height:13px}.size-tool .tool-error:empty{display:none}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}.tool-body{height:100%;display:flex;flex-direction:column;overflow:hidden;padding-bottom:8px}.tool-head{position:static;flex-shrink:0}.tool-scope{margin-bottom:7px;flex-shrink:0}.tool-content{flex:1;min-height:0;overflow:hidden}.tool-content .note{font-size:11px;margin:7px 0}.tool-content .field{margin-bottom:9px}.tool-content .field input,.tool-content .field select{min-height:42px;padding:8px 10px}.actions{position:static;flex-shrink:0;padding-top:7px}.actions .page-count{display:grid;place-items:center;min-width:36px;color:var(--muted);font-size:11px}.tool-error{font-size:11px;color:#ff8984;margin:3px 0;flex-shrink:0}.keypad{flex:1;min-height:0;grid-template-rows:repeat(4,minmax(0,1fr));gap:6px 10px}.number-key{height:100%;width:auto;max-width:100%;max-height:none;justify-self:center}.number-key.zero{width:100%}.size-tool .tool-content{display:flex;flex-direction:column}.size-tool .dims{flex-shrink:0}.size-tool .tool-scope{display:none}.size-tool .tool-error:empty{display:none}.size-tool .tool-head{padding-top:3px;padding-bottom:6px}.size-tool .number-key{font-size:23px}.size-tool .number-key.operation{font-size:13px}.target-breadcrumb{color:var(--orange)}dialog{overflow:hidden;max-height:calc(var(--app-height,100dvh) - 28px)}.popup-head{position:static}.popup-pages{min-height:0}.popup-pages .note{font-size:11px}.popup-pager{display:flex;align-items:center;gap:8px;margin-top:12px}.popup-pager button{flex:1}.popup-pager span{font-size:11px;color:var(--muted)}.popup-list-item{padding:11px 2px}.spec-screen{height:var(--app-height,100dvh);min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:max(12px,env(safe-area-inset-bottom))}.spec-head{position:static;flex-shrink:0}.spec-main{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.spec-drawing{height:135px;flex-shrink:0}.spec-content{flex:1;min-height:0;overflow:hidden}.spec-content h2{margin:8px 0 10px}.spec-screen .field{margin:5px 0}.spec-screen .field select{min-height:38px;padding:7px 10px;margin-top:2px}.spec-footer{flex-shrink:0}.spec-footer .actions{margin-top:0}.spec-content table td{padding:8px 3px}.spec-content .panel-svg{width:100%;height:160px;background:#ededeb}.spec-content .note{font-size:11px}.example-links{display:flex;gap:8px;flex-wrap:wrap}.stepper.compact{margin:4px 0 10px}.stepper.compact button{width:43px;height:43px;font-size:25px}.stepper.compact output{font-size:39px}.recipe{padding:10px 12px}.recipe small{font-size:10px}.joint-diagram{height:65px}.file-import{display:none}
@media(orientation:landscape) and (min-width:600px){
 :root{--key-size:clamp(50px,calc((100dvh - 135px)/4),76px)}
 .studio{max-width:1120px;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);grid-template-rows:54px minmax(100px,1fr) 34px 30px 22px;grid-template-areas:'header header' 'drawing controls' 'rotation controls' 'target controls' 'status status';min-height:0}
 .app-header{grid-area:header}.stage{grid-area:drawing}.view-controls{grid-area:rotation}.target-bar{grid-area:target}.status{grid-area:status}.dock{grid-area:controls;border-left:1px solid #202024}.key-grid{height:100%;grid-template-rows:repeat(4,minmax(0,1fr));padding:6px 16px;gap:7px 10px}.key{width:auto;height:100%;aspect-ratio:1;max-height:76px;max-width:76px;font-size:10px;gap:3px}.key svg{width:22px;height:22px}.tool-body{padding-left:16px;padding-right:16px}.tool-head{padding:3px 0 5px}.tool-head .pill{min-height:32px;padding:7px 12px}.tool-scope{font-size:10px;margin-bottom:5px}.tool-content .field{margin-bottom:6px;font-size:11px}.tool-content .field input,.tool-content .field select{min-height:36px;margin-top:3px;padding:6px 10px}.tool-content .note{font-size:10px;line-height:1.3}.actions button{min-height:36px;padding:7px}.choices{gap:6px;margin:6px 0}.choices button{min-height:36px;padding:8px;font-size:11px}.stepper{margin:4px 0}.stepper button{width:44px;height:44px}.stepper output{font-size:42px}.joint-diagram{height:45px}.recipe{padding:8px 10px;margin:6px 0}.recipe small{margin-top:3px}.spec-screen{max-width:1000px;padding-top:6px}.spec-main{flex-direction:row;gap:16px}.spec-drawing{height:100%;width:38%}.spec-content{flex:1}.spec-content .panel-svg{height:110px}.spec-footer{display:grid;grid-template-columns:1fr 1fr;gap:10px}.spec-footer .field{grid-column:1;grid-row:1}.spec-footer .actions.share-actions{grid-column:2;grid-row:1;align-items:end}.spec-footer .popup-pager{grid-column:1/-1;margin-top:0}.spec-footer .actions button{min-height:38px}.spec-head{padding-bottom:4px}.spec-head h1{font-size:18px}dialog{max-width:430px;max-height:calc(100dvh - 20px);padding:14px}.popup-head{padding-bottom:5px}.popup-head h2{font-size:17px}.popup-pages .field{margin-bottom:7px}.popup-pages .field input{min-height:36px;padding:6px 10px}.popup-pages .full-button{min-height:36px;padding:8px}.empty{padding:5px 0}.empty>svg{width:25px;height:25px;margin:5px}.empty .note{margin:7px}.account-avatar{width:42px;height:42px;margin:4px auto 8px}
}