/* SphereCraft — local assets, system fonts, no third-party requests. */
:root{--paper:#f7f7f2;--ink:#202c28;--muted:#59655e;--green:#245e48;--line:#d8ded6;--gold:#d5b46d;--white:#fff;--red:#923d36}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--green);text-underline-offset:4px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ad7926;outline-offset:4px} [hidden]{display:none!important}.skip-link{position:absolute;top:-90px;left:20px;z-index:9;background:white;padding:12px}.skip-link:focus{top:10px}
.site-header{max-width:1160px;margin:auto;padding:23px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:19px;font-weight:750;letter-spacing:-.5px}.brand img{width:43px;height:42px;object-fit:contain;border-radius:50%;background:var(--ink)}.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:2px;color:var(--muted);line-height:1.2}.site-header nav,.site-footer nav{display:flex;flex-wrap:wrap;gap:23px}.site-header nav a{font-size:14px;color:var(--muted);text-decoration:none}.site-header nav a[aria-current],.site-header nav a:hover{color:var(--green);text-decoration:underline}.header-tag{font:11px ui-monospace,monospace;color:var(--muted);border-left:1px solid var(--line);padding-left:24px}
main{max-width:1104px;margin:auto;padding:46px 28px 65px}.eyebrow{color:var(--green);font:700 11px/1.5 ui-monospace,monospace;letter-spacing:2px;text-transform:uppercase}.hero{max-width:780px;margin-bottom:30px}h1{font-size:clamp(38px,6vw,60px);line-height:1.08;letter-spacing:-2.6px;font-weight:650;margin:16px 0}h1 span{color:var(--green)}.intro{font-size:18px;line-height:1.6;max-width:650px;color:var(--muted);margin:18px 0 0}h2{font-size:25px;letter-spacing:-.6px;line-height:1.3}h3{font-size:18px;letter-spacing:-.3px}.workspace{display:grid;grid-template-columns:1.04fr 1fr;gap:20px;align-items:stretch}.calculator-card{background:white;border:1px solid var(--line);border-radius:18px;padding:26px}.mode-picker{display:flex;gap:4px;background:#f0f2ec;border-radius:9px;padding:4px;margin-bottom:23px}.mode-picker button{flex:1;border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:600;border-radius:6px;padding:11px 8px}.mode-picker button[aria-pressed="true"]{background:white;color:var(--green);box-shadow:0 1px 4px #1a291213}.form-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.form-topline h2{font-size:16px;margin:0}.currency-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}select{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:5px;color:var(--ink);font-size:12px}label{display:block;font-size:14px;font-weight:600;margin:15px 0 6px}.field{width:100%;border:1px solid #b7c3b9;border-radius:8px;padding:12px 14px;background:#fff;color:var(--ink);font-size:20px;font-variant-numeric:tabular-nums}.field::placeholder{color:#89938b}.field[aria-invalid="true"]{border-color:var(--red)}.hint{color:var(--muted);font-size:12px;margin:7px 0 0}details.cost-options{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}summary{cursor:pointer;font-size:14px;font-weight:600}details.cost-options .hint{margin-top:9px}.form-actions{display:flex;gap:10px;margin-top:24px}.primary,.secondary{border-radius:8px;padding:12px 18px;font-weight:650;font-size:14px}.primary{background:var(--green);color:white;border:1px solid var(--green);flex:1}.primary:hover{background:#184735}.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}.text-button{background:none;border:none;padding:0;color:var(--green);text-decoration:underline;text-underline-offset:3px;font-size:12px}.form-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:var(--muted);font-size:11px}.error{font-size:13px;color:var(--red);font-weight:600;margin:12px 0 0}.error:empty{display:none}
.results-card{background:#223e32;color:#f6f8ee;border-radius:18px;padding:30px;display:flex;flex-direction:column;position:relative;overflow:hidden}.result-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.results-card .eyebrow{color:#c8d8a6;font-size:10px;letter-spacing:1.4px;margin:0}.result-icon{font:20px ui-monospace,monospace;color:#c9d8a9;border:1px solid #ffffff30;width:32px;height:32px;text-align:center;border-radius:50%;line-height:30px}.results-card h2{font-size:17px;font-weight:500;margin:28px 0 8px;color:#d1dfd3;letter-spacing:0}.main-result{font:500 clamp(38px,5.2vw,58px)/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-2px;overflow-wrap:anywhere;margin:0 0 28px}.result-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ffffff26}.result-grid>div{padding:18px 0;border-bottom:1px solid #ffffff26}.result-grid dt{font-size:12px;color:#d1dfd3}.result-grid dd{font:23px/1.5 ui-monospace,monospace;margin:4px 0 0;overflow-wrap:anywhere}.result-bar{display:flex;height:8px;margin-top:24px;background:#678573;border-radius:5px;overflow:hidden}.result-bar span{height:100%}#costBar{background:#678573;width:100%}#profitBar{background:#d7c391;width:0}.split-caption{font-size:11px;color:#d1dfd3;margin:8px 0 0}.result-note{font-size:12px;color:#d1dfd3;line-height:1.65;margin:20px 0 0}.loss{background:#583c37}.loss .eyebrow{color:#ffcdad}
.trust-strip{display:flex;flex-wrap:wrap;gap:12px 30px;padding:19px 4px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}.trust-strip span::before{content:"✓";color:var(--green);margin-right:8px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:42px 0 17px}.section-heading h2{margin:0}.section-heading a{font-size:13px}.explainer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.explain-card{border:1px solid var(--line);border-radius:12px;background:#fbfcf8;padding:22px}.explain-card .number{font:11px ui-monospace,monospace;color:var(--muted)}.explain-card h3{margin:13px 0 9px}.explain-card p{font-size:14px;color:var(--muted);margin:0}.formula{font:12px/1.7 ui-monospace,monospace;color:var(--green);background:#eef2e9;padding:12px;border-radius:6px;display:block;margin-top:17px}.example-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;border-top:1px solid var(--line);margin-top:40px;padding-top:30px}.example-section h2{margin-top:5px}.example-section p{font-size:14px;color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px;background:white}th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}th{background:#eaf0e6;font-size:12px;font-weight:650}td:last-child,th:last-child{text-align:right}.guide-banner{margin-top:36px;background:#e9efdf;border-radius:12px;display:flex;gap:22px;align-items:center;justify-content:space-between;padding:23px 26px}.guide-banner h3{margin:0 0 5px}.guide-banner p{margin:0;font-size:14px;color:var(--muted)}.guide-banner a{font-size:14px;white-space:nowrap;font-weight:600}.faq{margin-top:38px}.faq details{border-bottom:1px solid var(--line);padding:17px 0}.faq summary{font-size:15px}.faq details p{font-size:14px;max-width:820px;color:var(--muted)}.site-footer{max-width:1104px;margin:auto;padding:26px 28px 32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.site-footer p{font-size:12px;color:var(--muted);margin:0 0 5px}.site-footer nav{gap:17px}.site-footer a{font-size:12px;color:var(--muted);text-decoration:none}.site-footer a:hover{text-decoration:underline}.article{max-width:800px}.article h1{font-size:clamp(34px,5vw,47px);letter-spacing:-1.6px}.article h2{margin-top:34px;font-size:23px}.article p,.article li{color:var(--muted)}.article li{margin:7px 0}.article .lede{font-size:18px}.article .callout{background:#eaf0e3;border-left:3px solid var(--green);padding:17px 21px;margin:24px 0}.article .callout p{margin:0}.article .formula{font-size:14px}.article table{margin:24px 0}.article .byline{font-size:12px}.back-link{display:inline-block;font-size:13px;margin-bottom:16px}.guide-list{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}.guide-list a{display:block;background:white;border:1px solid var(--line);padding:26px;border-radius:12px;text-decoration:none;color:var(--ink)}.guide-list a:hover{border-color:var(--green)}.guide-list p{font-size:14px;color:var(--muted)}.guide-list span{color:var(--green);font-size:13px}.noscript{padding:16px;border:1px solid var(--red);background:#fff4ef;color:var(--red);margin-bottom:20px}
@media(max-width:760px){.header-tag{display:none}.site-header{padding:18px 20px;gap:16px}.site-header nav{gap:15px}.site-header nav a{font-size:12px}.brand{font-size:16px}.brand img{width:35px;height:35px}.brand small{font-size:8px}main{padding:32px 20px 45px}.hero{margin-bottom:24px}h1{letter-spacing:-1.7px}.intro{font-size:16px}.workspace{grid-template-columns:1fr}.calculator-card,.results-card{padding:23px}.main-result{font-size:45px}.explainer-grid{grid-template-columns:1fr}.explain-card{padding:20px}.example-section{grid-template-columns:1fr;gap:8px}.guide-banner{align-items:flex-start;flex-direction:column;gap:12px}.guide-list{grid-template-columns:1fr}.site-footer{flex-direction:column;padding:25px 20px}.section-heading{align-items:flex-start;flex-direction:column;gap:8px}.trust-strip{gap:10px 18px}th,td{padding:11px}.article h1{letter-spacing:-1px}.article h2{font-size:22px}}
@media(max-width:360px){.site-header{flex-wrap:wrap}.site-header nav{width:100%;justify-content:space-between}.form-topline{flex-wrap:wrap}.form-foot{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{.site-header,.site-footer,.form-actions,.mode-picker,.text-button{display:none}.workspace{display:block}.results-card{background:white;color:black;border:1px solid black}.results-card *{color:black!important}.result-grid>div{border-color:#ccc}main{padding:0}.guide-banner{display:none}}