:root{color:#17343e;font-synthesis:none;text-rendering:optimizelegibility;--ink:#17343e;--muted:#647d86;--line:#d1dfe2;--panel:#fff;--teal:#087f79;--teal-dark:#055e5a;--teal-soft:#e2f3f1;--amber:#bd7412;--danger:#a74646;--editable:#1d5dc8;--rail-width:336px;--rail-gap:12px;background:#eaf1f2;font-family:Inter,Segoe UI,Microsoft YaHei,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html{background:#eaf1f2;min-width:320px}html,body,#root{height:100%}body{background:radial-gradient(circle at 90% 2%,#4caba51f,#0000 28rem),linear-gradient(#f4f8f8 0,#e8f0f1 100%);min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed;opacity:.6}button:focus-visible,input:focus-visible,summary:focus-visible{outline-offset:2px;outline:3px solid #1e918940}.app-shell{height:100dvh;position:relative;overflow:hidden}.stage{background:radial-gradient(circle at 46% 40%,#fffffff5,#e0eef0b8 58%,#c7dde1d9);position:absolute;inset:0}.stage-message,.stage-empty{padding:1.2rem calc(var(--rail-width) + 2 * var(--rail-gap) + 1rem) 1.2rem 1.2rem;color:#607983;text-align:center;align-content:center;place-items:center;gap:.4rem;font-size:.72rem;display:grid;position:absolute;inset:0}.stage-empty h2{color:#2c4c56;letter-spacing:-.03em;margin:.35rem 0 0;font-size:1.25rem}.stage-empty p{max-width:480px;color:var(--muted);margin:.55rem 0 0;font-size:.74rem;line-height:1.65}.empty-container{border:2px solid #8ab2b8;border-radius:5px;width:170px;height:112px;margin-bottom:1rem;position:relative;transform:skewY(-7deg);box-shadow:inset 0 0 45px #539b9b1f}.empty-container:before,.empty-container:after,.empty-container span,.empty-container i,.empty-container b{content:"";background:#bed2d6;position:absolute}.empty-container:before{height:1px;inset:35px 0 auto}.empty-container:after{height:1px;inset:72px 0 auto}.empty-container span{width:1px;inset:0 auto 0 55px}.empty-container i{width:1px;inset:0 auto 0 112px}.empty-container b{width:130px;height:2px;bottom:-16px;right:-25px;transform:rotate(14deg)}.wordmark{z-index:15;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#102f39eb;border:1px solid #ffffff24;border-radius:10px;align-items:center;gap:.65rem;padding:.5rem .75rem;text-decoration:none;display:inline-flex;position:absolute;top:.8rem;left:.9rem;box-shadow:0 10px 30px #16343d2e}.wordmark>span:last-child{line-height:1.05;display:grid}.wordmark strong{letter-spacing:-.02em;font-size:.86rem}.wordmark small{color:#adc3ca;letter-spacing:.08em;text-transform:uppercase;margin-top:.22rem;font-size:.53rem;font-weight:700}.logo-mark{filter:brightness(0)invert();flex:none;width:auto;height:16px;display:block}.banner-layer{top:.8rem;left:1rem;right:calc(var(--rail-width) + 2 * var(--rail-gap) + 1rem);z-index:20;pointer-events:none;justify-items:center;gap:.45rem;display:grid;position:absolute}.banner-layer>*{pointer-events:auto;border-radius:10px;width:min(560px,100%);box-shadow:0 14px 40px #1c464f29}.solve-banner{color:#1a6f6a;background:#e6f5f3f5;border:1px solid #b6ddd9;align-items:center;gap:.65rem;padding:.7rem .8rem;font-size:.65rem;display:flex}.solve-banner.depth-3{color:#805b24;background:#fff6e5f5;border-color:#e8cf9e}.solve-banner>div{gap:.16rem;display:grid}.solve-banner small{color:#788b90;font-size:.55rem}.solve-banner button{color:#74501e;background:#fff;border:1px solid #d9b875;border-radius:7px;flex:none;min-height:32px;margin-left:auto;padding:.38rem .62rem;font-size:.58rem;font-weight:750}.error-box{color:#8c3939;background:#fff0f0f7;border:1px solid #e8bdbd;justify-content:space-between;align-items:center;gap:.8rem;padding:.75rem .85rem;display:flex}.error-box>div{gap:.24rem;display:grid}.error-box strong,.warning-box strong{font-size:.65rem}.error-box span,.warning-box li{font-size:.6rem;line-height:1.45}.error-box button{color:#fff;background:#a24747;border:0;border-radius:7px;flex:none;min-height:32px;padding:.38rem .62rem;font-size:.58rem;font-weight:800}.classic-hint{color:#56707a;font-size:.57rem}.classic-hint a{color:var(--teal);font-weight:800}.error-box .classic-hint{color:#7d5555}.error-box .classic-hint a{color:#8c3939}.warning-box{color:#78561f;background:#fff7e8f7;border:1px solid #e8d2a8;padding:.7rem .8rem}.warning-box ul{margin:.35rem 0 0;padding-left:1.05rem}.stale-note{color:#765e35;background:#fff8eaf7;border:1px solid #ead8b2;padding:.5rem .65rem;font-size:.57rem}.spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:16px;height:16px;animation:.75s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.rail{top:50%;right:var(--rail-gap);z-index:10;width:var(--rail-width);max-height:calc(100dvh - 2 * var(--rail-gap));border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:14px;flex-direction:column;display:flex;position:absolute;overflow-y:auto;transform:translateY(-50%);box-shadow:0 18px 50px #1e444e26}.rail-head{border-bottom:1px solid #e0e9eb;padding:.55rem 1rem}.rail-actions{justify-content:flex-end;gap:.4rem;display:flex}.chrome-button,.chrome-select{color:#35565f;background:#f5f8f8;border:1px solid #cddcdf;border-radius:8px;min-height:32px;padding:.36rem .66rem;font-family:inherit;font-size:.62rem;font-weight:750}.chrome-select{cursor:pointer;width:auto;padding-right:1.5rem}.chrome-button:hover,.chrome-select:hover{color:var(--teal);border-color:#8fc8c4}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.unit-selector{color:#35565f;background:#f5f8f8;border:1px solid #cddcdf;border-radius:8px;grid-template-columns:repeat(2,minmax(34px,auto));min-height:32px;margin:0;padding:2px;font-size:.62rem;font-weight:750;display:inline-grid}.unit-segment{cursor:pointer}.unit-segment span{border-radius:6px;place-items:center;min-height:26px;padding:0 .5rem;transition:color .12s,background .12s;display:grid}.unit-segment:hover span{color:var(--teal)}.unit-segment input:checked+span{color:#fff;background:var(--teal)}.unit-segment input:focus-visible+span{outline-offset:2px;outline:2px solid #2ba59f}.summary-panel{border-bottom:1px solid #e0e9eb;padding:.35rem 0;transition:opacity .14s}.summary-panel.stale{opacity:.55}.metric-grid{grid-template-columns:1fr 1fr;gap:0 .6rem;display:grid}.metric-grid>div{align-items:baseline;gap:.4rem;min-width:0;padding:.14rem 1rem;display:flex}.metric-grid span{color:#72878e;letter-spacing:.04em;text-transform:uppercase;margin-right:auto;font-size:.55rem;font-weight:800}.metric-grid strong{font-size:.88rem}.input-form{padding:0 1rem}fieldset{border:0;border-bottom:1px solid #e4ecee;margin:0;padding:.55rem 0}legend{color:#345761;letter-spacing:.035em;width:100%;margin:0 0 .55rem;padding:0;font-size:.66rem;font-weight:850}legend small{color:#8ba0a6;margin-left:.35rem;font-size:.52rem;font-weight:650}.number-field,.direction-field{gap:.3rem;display:grid}.number-field>span,.direction-field>span{color:#6c8188;font-size:.57rem;font-weight:750}.number-field>div{background:#f9fbfb;border:1px solid #cbdadd;border-radius:9px;min-height:38px}.dimension-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;display:grid}.number-field>div{align-items:center;display:flex;overflow:hidden}.number-field input{width:100%;min-width:0;height:36px;color:var(--editable);background:0 0;border:0;padding:.45rem .15rem .45rem .55rem;font-size:.72rem;font-weight:800}.number-field input:focus{outline:none}.number-field small{color:#92a1a6;padding-right:.45rem;font-size:.52rem}.number-field.read-only .static-value{color:#25454f;background:0 0;border:0;align-items:center;gap:.3rem;min-height:38px;padding-left:.15rem;font-size:.72rem;font-weight:800;display:flex}.number-field.read-only .static-value small{padding-right:0}.mode-row,.direction-row{gap:.4rem;display:grid}.check-row{color:#345761;cursor:pointer;align-items:center;gap:.5rem;margin-top:.7rem;font-size:.7rem;font-weight:750;display:flex}.check-row input{width:15px;height:15px;accent-color:var(--teal);margin:0}.check-row small{color:#82949a;font-size:.55rem;font-weight:600}.mode-row button,.direction-row button{color:#536d76;background:#f5f8f8;border:1px solid #d3e0e2;border-radius:9px}.mode-row button:hover,.direction-row button:hover{border-color:#8fc5c1}.mode-row button.active,.direction-row button.active{color:#075f5b;background:var(--teal-soft);border-color:#66b7b1;box-shadow:inset 0 0 0 1px #66b7b1}.mode-row{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-row button{min-height:38px;padding:.45rem;font-size:.65rem;font-weight:800}.fixed-options{background:#f5f9f9;border:1px solid #dce7e9;border-radius:10px;grid-template-columns:105px minmax(0,1fr);align-items:end;gap:.6rem;margin-top:.6rem;padding:.65rem;display:grid}.direction-row{grid-template-columns:repeat(3,minmax(0,1fr))}.direction-row button{justify-content:center;align-items:center;gap:.25rem;min-height:38px;padding:.35rem .25rem;font-size:.58rem;font-weight:800;display:flex}.direction-row i{font-size:.72rem;font-style:normal}.depth-help{color:#795c32;background:#fff7e7;border-left:3px solid #d09a49;border-radius:6px;margin:.55rem 0 0;padding:.55rem .65rem;font-size:.56rem;line-height:1.5}.viewer-shell{position:absolute;inset:0}.viewer-stage{inset:0 calc(var(--rail-width) + 2 * var(--rail-gap)) 0 0;position:absolute}.viewer-stage canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}.viewer-message{color:#607983;text-align:center;background:#ebf5f6e6;align-content:center;place-items:center;gap:.35rem;padding:1rem;font-size:.68rem;display:grid;position:absolute;inset:0}.viewer-message.error{color:#8e4040}.viewer-toolbar{max-width:min(480px, calc(100% - var(--rail-width) - 2 * var(--rail-gap) - 2rem));gap:.35rem;display:grid;position:absolute;bottom:.9rem;left:.9rem}.camera-controls{flex-wrap:wrap;align-items:center;gap:.3rem;display:flex}.camera-controls button{color:#52707a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffdb;border:1px solid #c6d8db;border-radius:7px;min-height:30px;padding:.34rem .5rem;font-size:.55rem;font-weight:780;box-shadow:0 4px 14px #1c464f14}.camera-controls button:hover{color:var(--teal);border-color:#8fc8c4}.camera-controls .region-toggle{opacity:.55;align-items:center;gap:.3rem;display:inline-flex}.camera-controls .region-toggle.active{color:#31565f;opacity:1}.camera-controls .region-toggle i{background:#d8dddf;border:1px solid #7d8a8e;border-radius:2px;width:8px;height:8px}.camera-controls .region-toggle.active i{background:#15948c;border-color:#0e6f69}.viewer-hints{color:#71868d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffb8;border:1px solid #c6d8dbcc;border-radius:7px;gap:.12rem;padding:.4rem .5rem;font-size:.5rem;line-height:1.4;display:grid}@media (width<=640px){.app-shell{height:auto;min-height:100dvh;overflow:visible}.stage{height:46dvh;min-height:340px;position:relative;inset:auto}.viewer-shell,.viewer-stage{position:absolute;inset:0}.stage-message,.stage-empty{padding:1rem}.dimension-grid,.fixed-options{grid-template-columns:1fr}.wordmark strong{font-size:.76rem}.banner-layer{right:1rem}.rail{border-radius:13px;width:auto;max-height:none;margin:.6rem;position:static;overflow:visible;transform:none}.viewer-toolbar{max-width:calc(100% - 1.8rem)}.viewer-hints{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}