:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#03070b;--bg-soft:#071017;--surface:#0f1822d1;--surface-strong:#141e2af0;--surface-muted:#ffffff0b;--border:#a0bfd42e;--border-strong:#46e1ee80;--text:#f4f8fb;--muted:#9aa9b8;--faint:#657484;--cyan:#46e1ee;--cyan-strong:#18c8dd;--amber:#f4b347;--success:#7ee7b1;--danger:#ff7979;--shadow:0 24px 70px #0000007a;--radius:8px;--mono:"SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--text)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 20% 0,#46e1ee21,#0000 28rem),radial-gradient(circle at 85% 12%,#f4b34717,#0000 25rem),linear-gradient(#02060a 0%,#071017 48%,#03070b 100%);min-width:320px;margin:0}body:before{z-index:-2;content:"";background-image:linear-gradient(#46e1ee0e 1px,#0000 1px),linear-gradient(90deg,#46e1ee0e 1px,#0000 1px);background-size:72px 72px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 68%);mask-image:linear-gradient(#000,#0000 68%)}body:after{z-index:-1;pointer-events:none;content:"";background:linear-gradient(110deg,#ffffff06,#0000 22%),radial-gradient(circle at 70% 28%,#46e1ee17,#0000 18rem);position:fixed;inset:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{cursor:pointer}img,svg{display:block}::selection{color:#021015;background:var(--cyan)}#root{min-height:100vh}.site-header{z-index:20;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#02060ac7;grid-template-columns:auto 1fr;align-items:center;gap:28px;min-height:72px;padding:0 36px;display:grid;position:sticky;top:0}.brand{color:var(--cyan);white-space:nowrap;align-items:center;gap:10px;font-size:clamp(18px,2vw,25px);font-weight:800;line-height:1;text-decoration:none;display:inline-flex}.brand svg{width:28px;height:28px}.brand strong{color:var(--text)}.site-header nav{justify-content:center;gap:4px;display:flex}.site-header nav a{color:var(--muted);padding:27px 18px 23px;font-size:14px;line-height:1;text-decoration:none;transition:color .18s,background .18s;position:relative}.site-header nav a:after{content:"";background:var(--cyan);opacity:0;height:2px;transition:opacity .18s,transform .18s;position:absolute;bottom:0;left:18px;right:18px;transform:scaleX(.4)}.site-header nav a:hover,.site-header nav a:focus-visible{color:var(--text);background:#ffffff09}.site-header nav a:hover:after,.site-header nav a:focus-visible:after{opacity:1;transform:scaleX(1)}main{overflow:hidden}.calculator-section,.content-section,.site-footer{width:min(1360px,100% - 48px);margin:0 auto}.calculator-section{padding:42px 0 46px;position:relative}.calculator-section:before{pointer-events:none;content:"";opacity:.75;background:radial-gradient(circle,#46e1ee26,#0000 45%),linear-gradient(#46e1ee0b 1px,#0000 1px) 0 0/32px 32px,linear-gradient(90deg,#46e1ee0b 1px,#0000 1px) 0 0/32px 32px;border-radius:50%;width:440px;height:440px;position:absolute;inset:88px auto auto -70px;-webkit-mask-image:radial-gradient(circle,#000 28%,#0000 72%);mask-image:radial-gradient(circle,#000 28%,#0000 72%)}.calculator-copy{z-index:2;text-align:center;width:min(760px,100%);margin:0 auto 26px;position:relative}h1,h2,h3,p{margin:0}h1{color:var(--text);font-size:clamp(42px,6vw,68px);font-weight:820;line-height:.98}h1 span,h2 span{color:var(--cyan);text-shadow:0 0 28px #46e1ee5c}.calculator-copy p{color:var(--muted);margin-top:16px;font-size:18px;line-height:1.65}.hero-layout{z-index:2;grid-template-columns:minmax(0,1fr) minmax(360px,.58fr);align-items:stretch;gap:12px;display:grid;position:relative}.glass-panel{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg, #ffffff0e, #ffffff05), var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.shape-visual{z-index:1;pointer-events:none;opacity:.62;width:min(34vw,430px);height:390px;position:absolute;top:126px;left:-6px;transform:translate(-18%)}.visual-grid{background-color:#0000;background-image:linear-gradient(#46e1ee0d 1px,#0000 1px),linear-gradient(90deg,#46e1ee0d 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:30px 30px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000 24%,#0000 70%);mask-image:radial-gradient(circle,#000 24%,#0000 70%)}.wire-cube{width:186px;height:186px;transform-style:preserve-3d;animation:6s ease-in-out infinite floatCube;position:absolute;top:84px;left:50%;transform:translate(-50%)rotateX(58deg)rotate(45deg)}.cube-face{background-color:#0000;background-image:linear-gradient(#46e1ee1f 1px,#0000 1px),linear-gradient(90deg,#46e1ee1f 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border:2px solid #46e1eee6;position:absolute;inset:0;box-shadow:inset 0 0 28px #46e1ee1f,0 0 26px #46e1ee38}.cube-top{transform:translateZ(93px)}.cube-right{transform:rotateY(90deg)translateZ(93px)}.cube-front{transform:rotateX(90deg)translateZ(93px)}.pallet-base{border:2px solid #f4b347d1;height:28px;position:absolute;bottom:-24px;left:-12px;right:-12px;transform:rotateX(90deg)translateZ(-88px);box-shadow:0 0 28px #f4b34740}.wire-cylinder{width:150px;height:230px;animation:6s ease-in-out infinite floatShape;position:absolute;top:64px;left:50%;transform:translate(-50%)}.cylinder-top,.cylinder-bottom{border:2px solid #46e1eeeb;border-radius:50%;width:150px;height:54px;position:absolute;left:0;box-shadow:0 0 26px #46e1ee38}.cylinder-top{background:#46e1ee14;top:0}.cylinder-bottom{bottom:0}.cylinder-body{background:linear-gradient(90deg,#0000 48%,#46e1ee38 49%,#0000 50%),linear-gradient(#46e1ee1f 1px,#0000 1px) 0 0/18px 18px;border-left:2px solid #46e1eebd;border-right:2px solid #46e1eebd;width:150px;position:absolute;top:27px;bottom:27px;left:0}.wire-sphere{background:radial-gradient(circle at 32% 28%,#46e1ee33,#0000 34%),radial-gradient(circle,#0000 56%,#46e1ee1f);border:2px solid #46e1eef0;border-radius:50%;width:210px;height:210px;animation:6s ease-in-out infinite floatShape;position:absolute;top:72px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 28px #46e1ee24,0 0 34px #46e1ee33}.wire-sphere span{border:1px solid #46e1ee6b;border-radius:50%;position:absolute;inset:12px}.wire-sphere span:first-child{transform:rotateY(72deg)}.wire-sphere span:nth-child(2){transform:rotateX(72deg)}.wire-sphere span:nth-child(3){transform:rotate(45deg)scale(.78)}.measure-line{color:var(--amber);font-family:var(--mono);text-shadow:0 0 18px #f4b34773;position:absolute}.measure-h{top:138px;left:44px}.measure-w{bottom:82px;left:82px}.measure-l{bottom:106px;right:74px}.calculator-panel{padding:18px}.panel-row-top{border-bottom:1px solid var(--border);grid-template-columns:1fr 210px;gap:24px;padding-bottom:16px;display:grid}.step-label{color:var(--text);margin-bottom:12px;font-size:14px;font-weight:700}.shape-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.shape-card{min-height:118px;color:var(--muted);border:1px solid var(--border);text-align:center;background:#ffffff08;border-radius:6px;place-items:center;padding:14px 10px;transition:color .18s,border-color .18s,background .18s,transform .18s,box-shadow .18s;display:grid}.shape-card svg{width:34px;height:34px;color:var(--muted);stroke-width:1.4px;margin-bottom:9px}.shape-card strong{color:var(--text);font-size:12px;line-height:1.2}.shape-card small{color:var(--faint);margin-top:5px;font-size:10px;line-height:1.25}.shape-card:hover,.shape-card.active{color:var(--cyan);border-color:var(--border-strong);background:#46e1ee17;transform:translateY(-1px);box-shadow:inset 0 0 24px #46e1ee14}.shape-card.active svg{color:var(--cyan)}.unit-select{display:block;position:relative}.select-trigger{width:100%;height:52px;color:var(--text);border:1px solid var(--border);text-align:left;background:linear-gradient(#ffffff0b,#ffffff04),#0d151f;border-radius:6px;grid-template-columns:1fr 18px;align-items:center;gap:10px;padding:0 14px;transition:border-color .18s,background .18s,box-shadow .18s;display:grid}.select-trigger svg{width:18px;height:18px;color:var(--cyan);transition:transform .18s}.select-trigger.open,.select-trigger:hover,.select-trigger:focus-visible{border-color:var(--border-strong);box-shadow:0 0 0 3px #46e1ee14}.select-trigger.open svg{transform:rotate(180deg)}.select-menu{z-index:12;border:1px solid var(--border-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#091119fa;border-radius:6px;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow:hidden;box-shadow:0 22px 50px #0000006b}.select-option{width:100%;min-height:44px;color:var(--text);text-align:left;background:0 0;border:0;border-bottom:1px solid #a0bfd41f;grid-template-columns:1fr auto 18px;align-items:center;gap:10px;padding:0 12px;display:grid}.select-option:last-child{border-bottom:0}.select-option small{color:var(--amber);font-family:var(--mono)}.select-option svg{width:16px;height:16px;color:var(--cyan)}.select-option:hover,.select-option:focus-visible,.select-option.selected{background:#46e1ee17}.input-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:18px;display:grid}.dimension-field label{color:var(--text);margin-bottom:10px;font-size:14px;font-weight:700;display:block}.input-shell{border:1px solid var(--border);background:#040a10b8;border-radius:6px;grid-template-columns:1fr auto;align-items:center;height:58px;transition:border-color .18s;display:grid;overflow:hidden}.input-shell:focus-within{border-color:var(--cyan)}.input-shell.error{border-color:var(--danger)}.input-shell input,.qty-control input{width:100%;min-width:0;color:var(--text);background:0 0;border:0;outline:0}.input-shell input{padding:0 14px;font-size:24px;font-weight:760}.input-shell span{color:var(--muted);padding-right:14px;font-size:14px}.field-error{color:var(--danger);margin-top:7px;font-size:12px}.preset-row{scrollbar-width:none;gap:6px;margin-top:10px;display:flex;overflow-x:auto}.preset-row::-webkit-scrollbar{display:none}.preset-row button,.result-header button{min-height:36px;color:var(--muted);border:1px solid var(--border);white-space:nowrap;background:#ffffff09;border-radius:6px;padding:0 11px;transition:color .18s,border-color .18s,background .18s}.preset-row button:hover,.preset-row button:focus-visible,.result-header button:hover,.result-header button:focus-visible{color:var(--cyan);border-color:var(--border-strong);background:#46e1ee14}.qty-control{border:1px solid var(--border);background:#040a10b8;border-radius:6px;grid-template-columns:48px 1fr 48px;height:58px;display:grid;overflow:hidden}.qty-control button{color:var(--text);background:0 0;border:0;place-items:center;display:grid}.qty-control button:hover{color:var(--cyan);background:#46e1ee14}.qty-control svg{width:18px;height:18px}.qty-control input{text-align:center;border-right:1px solid var(--border);border-left:1px solid var(--border);font-size:22px;font-weight:760}.formula-strip{border:1px solid var(--border);background:#ffffff06;border-radius:6px;grid-template-columns:120px 1fr;align-items:center;gap:18px;min-height:58px;margin-top:18px;padding:12px 16px;display:grid}.formula-strip span{color:var(--muted);font-size:13px}.formula-strip strong{color:var(--text);font-family:var(--mono);overflow-wrap:anywhere;word-break:break-word;font-size:13px;font-weight:500;line-height:1.5}.result-panel{min-width:0;padding:18px}.result-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.result-header h2{color:var(--text);font-size:22px;line-height:1.1}.result-header button{align-items:center;gap:8px;display:inline-flex}.result-header svg{width:15px;height:15px}.result-main{border:1px solid var(--border);background:linear-gradient(135deg,#46e1ee14,#0000 62%),#ffffff06;border-radius:6px 6px 0 0;min-height:140px;margin-top:18px;padding:24px 18px;container-type:inline-size}.result-main span{color:var(--muted);font-size:14px}.result-main strong{color:var(--cyan);text-shadow:0 0 32px #46e1ee57;overflow-wrap:anywhere;word-break:break-word;font-size:clamp(28px,11cqw,68px);font-weight:840;line-height:1.02;display:block}.result-list{border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-left:1px solid var(--border);border-radius:0 0 6px 6px;margin:0}.result-list div{border-top:1px solid var(--border);grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:12px;padding:14px 18px;display:grid}.result-list dt{color:var(--muted)}.result-list dd{color:var(--amber);text-align:right;grid-template-columns:minmax(0,auto) 28px;align-items:center;gap:8px;min-width:0;margin:0;font-weight:800;display:grid}.result-list dd span{overflow-wrap:anywhere;word-break:break-word;min-width:0}.result-list div:last-child dd{color:var(--cyan)}.copy-value{grid-template-columns:minmax(0,1fr) 34px;align-items:start;gap:10px;min-width:0;margin-top:12px;display:grid}.copy-button{width:28px;height:28px;color:var(--muted);border:1px solid var(--border);background:#ffffff0a;border-radius:6px;place-items:center;transition:color .18s,border-color .18s,background .18s,transform .18s;display:grid}.large-value .copy-button{width:34px;height:34px;margin-top:4px}.copy-button svg{width:15px;height:15px}.copy-button:hover,.copy-button:focus-visible{color:var(--cyan);border-color:var(--border-strong);background:#46e1ee17;transform:translateY(-1px)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.benefit-rail{border:1px solid var(--border);border-radius:var(--radius);background:var(--border);grid-template-columns:repeat(5,1fr);gap:1px;margin-top:14px;display:grid;overflow:hidden}.benefit-rail article{background:#0c151ee0;grid-template-columns:36px 1fr;gap:12px;min-height:90px;padding:18px;display:grid}.benefit-rail svg{width:32px;height:32px;color:var(--amber);stroke-width:1.5px}.benefit-rail strong{color:var(--text);font-size:14px}.benefit-rail p{color:var(--muted);margin-top:5px;font-size:13px;line-height:1.4}.ambient-note{color:#46e1ee52;font-family:var(--mono);align-items:center;gap:8px;font-size:12px;display:flex;position:absolute;top:152px;right:-28px;transform:rotate(90deg)}.ambient-note svg{width:14px;height:14px}.content-section{border-top:1px solid var(--border);padding:58px 0}.split-section,.logistics-section{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:44px;display:grid}.section-number{color:var(--amber);font-family:var(--mono);margin-bottom:12px;font-size:13px}.content-section h2{max-width:720px;color:var(--text);font-size:clamp(30px,4vw,44px);line-height:1.06}.content-section p{color:var(--muted);font-size:16px;line-height:1.7}.content-section h2+p,.content-section p+p{margin-top:18px}.formula-stack,.example-grid,.faq-grid{gap:12px;display:grid}.formula-card,.example-grid article,.faq-grid article,.unit-table,.check-list{border:1px solid var(--border);border-radius:var(--radius);background:#0e1720c2;box-shadow:0 18px 60px #0003}.formula-card{grid-template-columns:44px 1fr;gap:16px;padding:20px;display:grid}.formula-card svg,.example-grid svg,.faq-grid svg{width:34px;height:34px;color:var(--cyan);stroke-width:1.4px}.formula-card strong,.example-grid strong{color:var(--text);font-size:17px;display:block}.formula-card code,.unit-table code{color:var(--amber);font-family:var(--mono);margin:8px 0;font-size:14px;display:inline-flex}.table-section .section-heading,.examples-section .section-heading,.faq-section .section-heading{grid-template-columns:.8fr 1fr;align-items:end;gap:40px;margin-bottom:24px;display:grid}.unit-table{overflow:hidden}.unit-table>div{grid-template-columns:1.2fr 1fr 1fr;display:grid}.unit-table>div+div{border-top:1px solid var(--border)}.unit-table span,.unit-table strong,.unit-table code{border-right:1px solid var(--border);margin:0;padding:16px 20px}.unit-table span:last-child,.unit-table strong:last-child{border-right:0}.unit-table strong{color:var(--text);background:#ffffff09}.example-grid{grid-template-columns:repeat(3,1fr)}.example-grid article{padding:22px}.example-grid strong{margin:18px 0 10px}.logistics-section{align-items:start}.check-list{gap:0;margin:0;padding:0;list-style:none;display:grid}.check-list li{color:var(--text);grid-template-columns:26px 1fr;align-items:start;gap:12px;padding:18px 20px;display:grid}.check-list li+li{border-top:1px solid var(--border)}.check-list svg{width:22px;height:22px;color:var(--success)}.faq-grid{grid-template-columns:repeat(2,1fr)}.faq-grid article{grid-template-columns:34px 1fr;gap:14px;padding:22px;display:grid}.faq-grid h3{color:var(--text);font-size:18px;line-height:1.3}.faq-grid p{margin-top:10px}.site-footer{color:var(--muted);border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding:30px 0 42px;display:flex}.site-footer strong{color:var(--text)}.site-footer a{color:var(--cyan);text-decoration:none}.reveal{animation:.65s both revealUp}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}@keyframes revealUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes floatCube{0%,to{transform:translate(-50%)rotateX(58deg)rotate(45deg)translateY(0)}50%{transform:translate(-50%)rotateX(58deg)rotate(45deg)translateY(-10px)}}@keyframes floatShape{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(-10px)}}@media (width<=1120px){.site-header{grid-template-columns:1fr auto}.site-header nav{display:none}.hero-layout{grid-template-columns:1fr}.shape-visual{opacity:.46;width:min(78vw,380px);top:122px;left:50%;transform:translate(-50%)}.input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.benefit-rail{grid-template-columns:repeat(2,1fr)}}@media (width<=760px){.site-header{min-height:64px;padding:0 18px}.brand{font-size:18px}.calculator-section,.content-section,.site-footer{width:min(100% - 28px,1240px)}.calculator-section{padding-top:28px}.shape-visual{opacity:.38;width:min(100%,280px);height:260px;top:138px}.wire-cube{width:128px;height:128px;top:58px}.cube-top{transform:translateZ(64px)}.cube-right{transform:rotateY(90deg)translateZ(64px)}.cube-front{transform:rotateX(90deg)translateZ(64px)}.wire-cylinder{width:112px;height:174px;top:38px}.cylinder-top,.cylinder-bottom,.cylinder-body{width:112px}.wire-sphere{width:152px;height:152px;top:42px}h1{font-size:40px}.calculator-copy p{font-size:16px}.panel-row-top,.input-grid,.split-section,.logistics-section,.table-section .section-heading,.examples-section .section-heading,.faq-section .section-heading,.example-grid,.faq-grid{grid-template-columns:1fr}.shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.formula-strip{grid-template-columns:1fr;gap:6px}.result-list div{grid-template-columns:1fr}.result-list dd{text-align:left}.benefit-rail{grid-template-columns:1fr}.unit-table{overflow-x:auto}.unit-table>div{min-width:560px}.ambient-note{display:none}.site-footer{gap:18px;display:grid}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
