1:root{--bg:#eef2f7;--card:#fff;--text:#0f172a;--muted:#64748b;--line:#dbe3ef;--accent:#6366f1;--good:#16a34a;--bad:#dc2626;--warn:#f59e0b;--shadow:0 16px 35px #0f172a14}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:linear-gradient(135deg,var(--bg),#f8fafc);color:var(--text)}body.dark{--bg:#020617;--card:#0f172a;--text:#e2e8f0;--muted:#94a3b8;--line:#243247;--shadow:0 16px 35px #0006;background:#020617}.topbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:28px max(22px,6vw)}h1,h2,p{margin:0}h1{font-size:clamp(2rem,5vw,4rem)}h2{font-size:1.05rem;margin-bottom:1rem}.eyebrow,.hint,span{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;padding:0 max(22px,6vw) 36px}.card{grid-column:span 4;background:color-mix(in srgb,var(--card),transparent 2%);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}.wide{grid-column:span 8}.hero{grid-column:span 12;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hero div{padding:18px;border-radius:18px;background:color-mix(in srgb,var(--accent),transparent 90%)}strong{display:block;font-size:clamp(1.5rem,3vw,2.4rem);margin-top:6px}.actions,.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button,.button{border:0;border-radius:12px;background:var(--accent);color:white;padding:10px 14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button:hover,.button:hover{filter:brightness(1.06)}.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}label{display:grid;gap:6px;color:var(--muted);font-size:.9rem;margin-bottom:12px}input,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--card);color:var(--text);outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent),transparent 78%)}canvas{width:100%;height:260px;border-radius:16px;border:1px solid var(--line);background:var(--card)}.budget-bars{display:grid;gap:12px}.budget-row{display:grid;grid-template-columns:130px 1fr 120px;gap:12px;align-items:center}.bar{height:14px;background:var(--line);border-radius:99px;overflow:hidden}.fill{height:100%;border-radius:99px;background:var(--good)}.fill.warn{background:var(--warn)}.fill.over{background:var(--bad)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:.84rem;text-transform:uppercase;letter-spacing:.04em}.num{text-align:right}.amount-pos{color:var(--good);font-weight:800}.amount-neg{color:var(--bad);font-weight:800}.small-btn{padding:7px 9px;font-size:.82rem}.danger{background:var(--bad)}kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 5px;background:var(--card)}.tests{max-width:850px;margin:auto;padding:40px}.pass{color:var(--good)}.fail{color:var(--bad)}@media(max-width:900px){.card,.wide{grid-column:span 12}.hero{grid-template-columns:1fr}.budget-row{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}}
2
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.