:root{--dark:#102326;--ink:#21342f;--muted:#80928b;--mint:#8fe8d2;--teal:#276e60;--paper:#f2f6f3;--line:#d5e4dc;--mono:"DM Mono",monospace;--sans:"Manrope",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:#f5f7f4;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.announce{min-height:31px;background:#0b1b1e;color:#a4bcb5;font:10px var(--mono);letter-spacing:.09em;padding:8px max(4vw,22px);display:flex;gap:12px;align-items:center}
.announce>span:last-child{margin-left:auto;color:#67c9b6}
.dot,.live-dot{color:#91f2d9}.dot{height:6px;width:6px;border-radius:50%;background:#8ceacc;display:inline-block}
.head{height:84px;background:#112326;color:#eaf6f1;display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,22px);gap:26px;border-bottom:1px solid #264345;position:sticky;top:0;z-index:100}
.logo{width:134px;display:flex;align-items:center;flex:none}
.logo img{width:100%;filter:none;height:auto}
.head{background:#000}
.head nav{display:flex;align-items:center;gap:30px;font-size:12px;font-weight:700}
.head nav a{color:#a1b4af;white-space:nowrap;transition:color .2s}.head nav a:hover,.head nav a.selected{color:#9bf5da}
.head nav a.selected{border-bottom:1px solid #9bf5da;padding-bottom:6px}
.head-back{border:1px solid #658a83;color:#cbf4e7;padding:11px 16px;font-size:11px;font-weight:800;white-space:nowrap}
.head-back:hover{background:#244841}
main{max-width:1600px;margin:auto}
.intro{background:#102427;min-height:320px;color:#eafff5;display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:40px;padding:55px max(5vw,28px) 56px;position:relative;overflow:hidden}
.intro:before{content:"";position:absolute;pointer-events:none;inset:0;background:linear-gradient(90deg,transparent 96%,#21434433 97%),linear-gradient(0deg,transparent 96%,#21434433 97%);background-size:56px 56px;mask-image:linear-gradient(to right,transparent 35%,black 100%)}
.intro>div{position:relative;z-index:1}
.overline,.step{font:11px var(--mono);letter-spacing:.07em;color:#329d87}
.overline{color:#85d6c3}.tiny-line{display:inline-block;width:24px;height:1px;background:#8de8d6;vertical-align:middle;margin-right:8px}
.intro h1{font-size:clamp(43px,6vw,93px);line-height:1.02;letter-spacing:-.075em;margin:21px 0 24px;font-weight:800}
.intro h1 em{font-style:normal;color:#9aead8}
.intro p{max-width:600px;color:#adcbc1;line-height:1.85;font-size:14px;margin:0}
.intro-right{border-left:1px solid #315153;padding:15px 0 0 36px;display:flex;flex-direction:column;align-items:flex-start}
.intro-right>span{font:11px var(--mono);color:#82a8a1}
.intro-right strong{font-size:clamp(70px,8vw,116px);letter-spacing:-.11em;line-height:1.35;font-weight:800;color:#ccfbea}
.intro-right strong em{color:#518878;font-size:.5em;font-style:normal;vertical-align:15%}
.intro-right small{font:11px var(--mono);color:#83aa9f}
.intro-grid{margin-top:auto;align-self:flex-end;color:#41736b;font-size:35px;letter-spacing:.12em;word-spacing:.1em}
.workbench{background:#fff;padding:40px max(5vw,28px) 72px}
.workbench-head,.block-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}
h2,h3,p{margin-top:0}
.workbench-head h2,.block-heading h2{font-size:clamp(27px,3vw,44px);letter-spacing:-.06em;line-height:1.17;margin:8px 0 0}
.text-button{background:none;border:0;border-bottom:1px solid #91b8ab;color:#548a7c;padding:6px;font:11px var(--mono)}
.text-button:hover{color:#0c705e}
.shape-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:26px 0 37px}
.shape-card{border:1px solid #dce9e1;background:#f9fbf9;padding:17px 8px 15px;min-height:111px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:background .2s,border .2s;color:#536e64}
.shape-card:hover{border-color:#51b99f;background:#f1fcf7}
.shape-card.current{border-color:#269d83;background:#e7f8ef;box-shadow:inset 0 -3px #36bb9c;color:#195d50}
.shape-icon{font-size:34px;line-height:1.1;display:flex;justify-content:center;align-items:center;height:35px;font-weight:400}
.shape-card strong{font-size:11px;line-height:1.35;text-align:center;font-weight:800}
.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);border:1px solid var(--line);box-shadow:0 16px 65px #163e2c0b;align-items:stretch}
.inputs-col{padding:32px 34px 5px}
.field-section{padding:1px 0 32px;border-bottom:1px solid #e5eee7;margin-bottom:28px}
.field-section:last-child{border-bottom:0;margin-bottom:0}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 19px}
.section-heading h3{font-size:20px;letter-spacing:-.05em;margin:0}
.material-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px}
.material-pills button{background:#f8fbf8;color:#536f64;padding:9px 12px;border:1px solid #d8e5dc;font-size:11px;font-weight:700}
.material-pills button.current{background:#174e45;border-color:#174e45;color:#ecfff9}
.material-pills button:hover:not(.current){border-color:#54bba5}
.fields-two,.dimensions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fields-two label,.dimensions label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:700;color:#72867d;min-width:0}
input,select{width:100%;min-width:0;min-height:44px;padding:9px 12px;border:1px solid #ccdcd2;background:#f9fcf9;color:#20392f;border-radius:0;font-size:14px;font-weight:750}
input:focus,select:focus{outline:2px solid #7ed2b8;outline-offset:0;border-color:#308a73}
.hint{display:block;font-size:10px;line-height:1.65;color:#9aaa9f;margin-top:12px}
.shape-description{font-size:11px;color:#8b9c93;line-height:1.6;margin:0 0 15px}
.presets-block{margin-top:18px}.presets-block>span{font:10px var(--mono);color:#8da198;display:block;margin-bottom:10px}
#presets{display:flex;flex-wrap:wrap;gap:7px}
#presets button{border:1px solid #d4e8da;color:#327e66;background:#f2faf5;padding:9px 10px;font:11px var(--mono)}
#presets button:hover{border-color:#1c9f84}
.warning{font-size:12px;color:#bd413c;line-height:1.5;min-height:1em;margin:12px 0 0}
.mode-pills{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #bed7c8;margin-bottom:18px}
.mode-pills button{border:0;background:#f5faf6;color:#6c847b;padding:13px 10px;font-size:12px;font-weight:800}
.mode-pills button.chosen{background:#174e45;color:white}
.result-col{background:#102e31;color:#e6fbf4;padding:32px 36px 30px;display:flex;flex-direction:column;min-width:0}
.result-header{display:flex;justify-content:space-between;gap:10px;color:#77b5a8;font:10px var(--mono);letter-spacing:.05em}
.live-dot{color:#99f6d7}
.diagram{height:185px;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:15px 0 0;background:radial-gradient(ellipse at center,#1d515122,transparent 70%);position:relative}
.diagram:before{content:"";position:absolute;inset:8px;background-image:linear-gradient(#2d585755 1px,transparent 1px),linear-gradient(90deg,#2d585755 1px,transparent 1px);background-size:25px 25px;opacity:.28}
.diagram svg{height:160px;max-width:100%;position:relative;filter:drop-shadow(0 0 9px #57bba51a)}
.diagram small{font:9px var(--mono);color:#648d87;position:absolute;right:0;bottom:0}
.result-shape{text-transform:uppercase;letter-spacing:.09em;color:#7cb9aa;font:11px var(--mono);padding:15px 0 19px;border-bottom:1px solid #2a5253}
.result-main{padding:34px 0 28px;border-bottom:1px solid #2b5555}
.result-main>span{font:11px var(--mono);color:#85b3aa;letter-spacing:.04em;display:block;margin-bottom:8px}
.result-main strong{font-weight:800;display:inline;line-height:1.1;color:#a5f3dc;font-size:clamp(38px,4.5vw,76px);letter-spacing:-.065em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.result-main small{font-size:17px;color:#92c4b6;padding-left:9px;font-weight:800}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:21px 0}
.result-stats>div{border-bottom:1px solid #2e5050;padding:15px 0;min-width:0}
.result-stats span{display:block;color:#82aaa0;font-size:10px;margin-bottom:6px}
.result-stats strong{display:block;font-size:15px;color:#e5fff8;word-break:break-word;font-variant-numeric:tabular-nums}
.result-note{font-size:11px;color:#8bb3a8;line-height:1.7}
.result-actions{margin-top:30px}
.result-actions button{border:1px solid #618f81;background:#173f40;color:#b8ecdb;font-size:12px;font-weight:800;padding:12px;min-height:46px}
.result-actions button:hover{background:#28544b}
.result-actions button.primary{width:100%;background:#a2f2db;border-color:#a2f2db;color:#133e33}
.result-actions button.primary:hover{background:#c4ffe8}
.action-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
#action-status{margin:11px 0 0;color:#8bd8c0;font:10px/1.6 var(--mono);min-height:18px}
.history-section,.reference-section{padding:64px max(5vw,28px);background:#f1f7f2;border-top:1px solid #d7e7dc}
.history-section .block-heading p,.reference-section .block-heading p{font-size:12px;color:#83998e;margin:12px 0 0;max-width:560px;line-height:1.7}
.history-tools{display:flex;gap:8px}.history-tools button{border:1px solid #aacfc1;color:#327f69;background:#fff;padding:12px;font-size:11px;font-weight:800}.history-tools button:hover{background:#e9faf0}
.history-list{display:grid;gap:9px;margin-top:27px}
.history-empty{padding:28px;border:1px dashed #b7d0be;color:#7b9588;background:#f9fcfa;font-size:12px;text-align:center}
.history-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d9e6db;min-height:72px}
.history-open{flex:1;text-align:left;background:transparent;border:0;padding:15px 18px;display:flex;flex-direction:column;align-items:start;gap:5px;min-width:0}
.history-open:hover{background:#f0fbf4}
.history-open strong{color:#28433a;font-size:13px}.history-open small{font-size:10px;color:#889e91}
.history-remove{align-self:stretch;min-width:48px;background:#fff;border:0;border-left:1px solid #e2ece4;color:#af6b63;font-size:23px}
.history-remove:hover{background:#fff0ed}
.reference-section{background:#fff}
.reference-select label{display:flex;flex-direction:column;gap:7px;color:#7b9187;font-size:11px;font-weight:800}
.reference-select select{min-width:190px}
.table-scroll{max-height:550px;overflow:auto;border:1px solid #d7e4da;margin-top:25px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;text-align:left}
thead th{position:sticky;top:0;background:#153e3e;color:#b3e7d5;font:11px var(--mono);padding:15px 20px;white-space:nowrap}
tbody td{font-size:13px;color:#415b51;padding:11px 20px;border-bottom:1px solid #e8eee8;white-space:nowrap}
tbody tr:hover td{background:#f3faf5}
tbody td button{border:0;background:transparent;color:#227b69;font-size:11px;font-weight:800;white-space:nowrap}
.small-note{font-size:10px;color:#99a9a0;margin:15px 0 0}
.disclaimer{background:#e9f2eb;padding:36px max(5vw,28px);display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #d1e4d7}
.disclaimer strong{font-size:14px}.disclaimer p{max-width:800px;font-size:11px;line-height:1.75;color:#73867d;margin:7px 0 0}
.disclaimer a{border:1px solid #559982;padding:14px 15px;white-space:nowrap;color:#1d7765;font-weight:800;font-size:12px}.disclaimer a:hover{background:#ddf8e6}
footer{background:#0d1d20;color:#c6ece0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px max(5vw,28px);font:11px var(--mono)}
footer>span{color:#749e91}
@media(max-width:1120px){.head nav{gap:15px}.shape-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.workspace{grid-template-columns:1fr 390px}.inputs-col{padding:26px 25px}.result-col{padding:26px 25px}.intro{grid-template-columns:1fr 270px}}
@media(max-width:900px){.head{height:73px;flex-wrap:wrap;gap:0}.head nav{order:3;flex:0 0 calc(100% + 44px);height:42px;margin:0 -22px;padding:0 18px;justify-content:space-between;gap:5px;background:#142b2c;overflow-x:auto;border-top:1px solid #31514a}.head nav a{font-size:10px;padding:8px 2px}.head-back{margin-left:auto}.intro{padding-top:88px;grid-template-columns:1fr 220px}.intro-right{padding-left:18px}.intro-grid{font-size:21px}.workspace{grid-template-columns:1fr}.result-col{padding:30px}.diagram{height:180px}.result-main strong{font-size:65px}.shape-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:650px){.announce{font-size:8px}.head{padding:0 17px}.logo{width:115px}.head-back{font-size:10px;padding:9px 10px}.head nav{flex-basis:calc(100% + 34px);margin:0 -17px;padding:0 9px}.head nav a{font-size:9px;white-space:nowrap}.intro{padding:75px 20px 33px;grid-template-columns:1fr;gap:23px}.intro h1{font-size:52px}.intro p{font-size:12px}.intro-right{border-left:0;border-top:1px solid #315153;padding:13px 0 0;display:grid;grid-template-columns:auto 1fr;gap:0 15px;align-items:center}.intro-right>span{grid-column:1/-1;font-size:9px}.intro-right strong{font-size:55px}.intro-right small{font-size:9px}.intro-grid{display:none}.workbench{padding:35px 16px 45px}.workbench-head{align-items:start}.workbench-head h2{font-size:27px}.text-button{font-size:9px;max-width:105px;text-align:right}.shape-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:18px 0 26px}.shape-card{min-height:83px;padding:12px 4px;gap:5px}.shape-icon{font-size:27px;height:27px}.shape-card strong{font-size:9px}.inputs-col{padding:24px 17px 0}.section-heading h3{font-size:18px}.step{font-size:9px}.field-section{padding-bottom:24px;margin-bottom:24px}.fields-two,.dimensions{gap:9px}.fields-two label,.dimensions label{font-size:10px}input,select{font-size:14px;min-height:43px;padding:9px}.material-pills{gap:5px}.material-pills button{font-size:10px;padding:8px 9px}#presets button{font-size:10px}.result-col{padding:23px 20px}.result-main strong{font-size:clamp(43px,11vw,65px)}.result-stats strong{font-size:13px}.history-section,.reference-section{padding:45px 17px}.block-heading{align-items:start;flex-direction:column}.block-heading h2{font-size:30px}.history-tools{width:100%}.history-tools button{flex:1;font-size:10px;padding:9px}.reference-select{width:100%}.reference-select select{width:100%}thead th,tbody td{padding:12px 11px;font-size:10px}.disclaimer{padding:29px 18px;flex-direction:column;align-items:stretch;gap:18px}.disclaimer a{text-align:center;white-space:normal}footer{flex-wrap:wrap;padding:23px 17px;font-size:9px}footer>span{order:3;width:100%}}