:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#18201f;background:#f7f8f5;--ink: #18201f;--muted: #64706c;--line: rgba(24, 32, 31, .13);--panel: rgba(255, 255, 255, .84);--teal: #168a7a;--coral: #e26b5d;--gold: #d8aa35;--graphite: #25302e;--shadow: 0 22px 58px rgba(25, 35, 33, .16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;margin:0}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.topbar{position:fixed;top:0;right:0;left:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:14px clamp(18px,5vw,56px);border-bottom:1px solid rgba(255,255,255,.36);color:#fff;background:#0c181761;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand,.nav,.hero-actions,.tool-actions,.tabs{display:flex;align-items:center}.brand{gap:10px;min-width:0;font-weight:800}.brand-mark{display:grid;width:38px;height:38px;place-items:center;border-radius:8px;color:#15211f;background:#fff}.nav{gap:clamp(12px,3vw,26px);color:#ffffffdb;font-size:.95rem}.nav a:hover{color:#fff}.hero{position:relative;display:grid;min-height:92vh;overflow:hidden;color:#fff;isolation:isolate}.hero-image,.hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0}.hero-image{z-index:-2;width:100%;height:100%;object-fit:cover}.hero-overlay{z-index:-1;background:linear-gradient(90deg,#080f0ed6,#080f0e75 48%,#080f0e33),linear-gradient(180deg,#080f0e24,#080f0e6b)}.hero-content{width:min(760px,calc(100% - 36px));margin:auto auto 14vh clamp(18px,7vw,84px);padding-top:94px}.eyebrow{margin:0 0 12px;color:var(--coral);font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{max-width:11ch;margin-bottom:20px;font-size:clamp(3rem,9vw,6.4rem);line-height:.95;letter-spacing:0}h2{margin-bottom:0;color:var(--ink);font-size:clamp(2rem,5vw,4rem);line-height:1;letter-spacing:0}h3{margin-bottom:10px;color:var(--ink)}.hero-copy{max-width:620px;color:#ffffffe0;font-size:clamp(1rem,2vw,1.24rem);line-height:1.8}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:34px}.button,.icon-button,.tab,.copy-line,.swatch{border:0;cursor:pointer}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:8px;font-weight:800}.button.primary{color:#fff;background:var(--teal)}.button.secondary{color:var(--ink);background:#ffffffeb}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.metrics div{min-height:132px;padding:28px clamp(18px,5vw,56px);background:#fff}.metrics strong{display:block;color:var(--teal);font-size:clamp(2.5rem,6vw,4.7rem);line-height:.9}.metrics span{display:block;margin-top:12px;color:var(--muted);font-weight:700}.section{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:clamp(58px,9vw,108px) 0}.intro,.section-heading{display:grid;grid-template-columns:minmax(240px,.95fr) minmax(260px,1fr);gap:clamp(26px,5vw,72px);align-items:end}.intro p:not(.eyebrow){color:var(--muted);font-size:1.12rem;line-height:1.9}.notice{min-height:28px;color:var(--teal);font-weight:800;text-align:right}.tool-shell{margin-top:34px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--shadow)}.tabs{gap:8px;overflow-x:auto;padding:10px;border-bottom:1px solid var(--line);background:#ffffffc7}.tab{display:inline-flex;align-items:center;flex:0 0 auto;gap:9px;min-height:40px;padding:0 14px;border-radius:8px;color:var(--muted);background:transparent;font-weight:800}.tab span{display:grid;width:25px;height:25px;place-items:center;border-radius:7px;color:#fff;background:var(--graphite);font-size:.72rem}.tab[aria-selected=true]{color:var(--ink);background:#fff;box-shadow:0 10px 24px #161e1d1a}.tool-panel{padding:clamp(16px,3vw,28px)}.workspace{display:grid;gap:16px}.two-column{grid-template-columns:repeat(2,minmax(0,1fr))}.field{display:grid;gap:9px;min-width:0;color:var(--muted);font-size:.86rem;font-weight:800}textarea,input,.preview{width:100%;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff;outline:none}textarea{min-height:320px;resize:vertical;padding:16px;font-family:Cascadia Code,Consolas,monospace;font-size:.92rem;line-height:1.7}input{min-height:50px;padding:0 14px}input:focus,textarea:focus{border-color:#168a7a9e;box-shadow:0 0 0 4px #168a7a1f}.preview{min-height:320px;padding:18px;overflow:auto;color:var(--ink);font-weight:500;line-height:1.75}.preview h1,.preview h2,.preview h3{margin:0 0 12px;font-size:1.45rem;line-height:1.2}.preview p,.preview ul{margin:0 0 12px}.preview code{padding:2px 6px;border-radius:6px;background:#eef1ec}.tool-actions{flex-wrap:wrap;gap:10px;margin-top:16px}.icon-button{display:grid;width:46px;height:46px;place-items:center;border-radius:8px;color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:1.1rem}.time-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.color-workspace{grid-template-columns:220px minmax(220px,.8fr) minmax(240px,1fr);align-items:end}.color-field input{min-height:98px;padding:6px}.color-output{display:grid;gap:10px}.copy-line{min-height:44px;padding:0 14px;border-radius:8px;color:var(--ink);background:#fff;text-align:left;font-family:Cascadia Code,Consolas,monospace;box-shadow:inset 0 0 0 1px var(--line)}.swatches{display:grid;grid-template-columns:repeat(5,minmax(40px,1fr));gap:10px}.swatch{min-height:98px;border-radius:8px;box-shadow:inset 0 0 0 1px #0000001f}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}.project-card{min-height:220px;padding:28px;border:1px solid var(--line);border-radius:8px;background:#fff}.project-card span{color:var(--gold);font-weight:900}.project-card p{color:var(--muted);line-height:1.8}.deploy{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(260px,1fr);gap:clamp(24px,5vw,72px);align-items:start}.deploy-box{display:grid;gap:12px}.deploy-box code{display:block;overflow-x:auto;padding:16px;border-radius:8px;color:#f8fbf7;background:var(--graphite);font-family:Cascadia Code,Consolas,monospace}.site-footer{border-top:1px solid var(--line);background:#fff}.footer-link{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;width:min(1180px,calc(100% - 36px));margin:0 auto;color:var(--muted);font-size:.92rem}.footer-pad{padding:22px 0}.footer-link p{margin:0}.footer-link span,.footer-link a{display:inline-flex;align-items:center}.footer-link img{width:16px;height:16px;object-fit:contain}.footer-link a:hover{color:var(--teal)}@media(max-width:860px){.topbar{min-height:auto}.nav{display:none}.hero{min-height:88vh}.hero-content{margin:auto auto 9vh 18px}.metrics,.intro,.section-heading,.two-column,.time-grid,.color-workspace,.project-grid,.deploy{grid-template-columns:1fr}.metrics div{min-height:102px}.notice{text-align:left}textarea,.preview{min-height:260px}.footer-link{flex-direction:column;align-items:center;gap:8px;text-align:center}}@media(max-width:520px){.brand span:last-child{display:none}h1{font-size:3rem}.button{width:100%}.tabs{align-items:stretch}.tab{min-width:112px;justify-content:center}}