:root{--blue:#2277cc;--nav:#07162f;--sun:#ffcc3d;--ink:#231f20;--paper:#f4f4ef;--line:#d8d9d2}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.45 Inter,system-ui,sans-serif}header{height:76px;padding:0 max(24px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}header img{width:160px;display:block}header div{text-align:right}header b,header span{display:block}header b{font-size:.7rem;letter-spacing:.11em}header span{font-size:.72rem;color:#687079}main{width:min(1200px,calc(100% - 40px));margin:35px auto}.intro p:first-child,.eyebrow{font-size:.68rem;color:var(--blue);font-weight:950;letter-spacing:.13em}.intro h1{margin:8px 0;font:750 clamp(3.2rem,7vw,6rem)/.82 "Barlow Condensed",Impact,sans-serif;text-transform:uppercase}.intro>p:last-child{max-width:720px;color:#626a70}.workspace{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:28px}.paper,.workspace aside{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}.paper{font-family:ui-monospace,SFMono-Regular,monospace;background:#fffef5;border-style:dashed;box-shadow:0 12px 35px rgba(35,31,32,.08)}.paper-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:15px}.line{display:grid;grid-template-columns:25px 1fr auto;gap:11px;align-items:center;padding:14px 0;border-bottom:1px dashed #c9c3ab;cursor:pointer}.line b,.line small{display:block}.line small{color:#77715f}.line input{accent-color:var(--blue)}.paper footer{padding-top:18px;color:#6b6658;font-size:.72rem}.workspace aside h2{font-size:2rem;margin:3px 0 18px}.workspace dl div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #ecece6}.workspace .total{margin-top:9px;border-top:2px solid var(--ink);font-size:1.2rem;font-weight:900}.workspace input{width:70px;padding:7px;border:1px solid var(--line);border-radius:7px}.workspace button{width:100%;margin:18px 0 10px;padding:13px;background:var(--sun);border:0;border-radius:9px;font-weight:900;cursor:pointer}#result{padding:12px;background:#eef0eb;border-radius:9px;font-weight:800}.workspace aside>small{display:block;margin-top:12px;color:#687079}@media(max-width:760px){.workspace{grid-template-columns:1fr}header div{display:none}.paper-head{display:grid;gap:4px}}
