@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JBMono";src:url(/assets/fonts/jbmono.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
  /* Nimbus palette: warm paper + playful accents */
  --paper:#fbf6ee;--paper2:#f4ecdf;--ink:#2b2118;
  --coral:#ff5a4e;--sun:#ffc93c;--mint:#2ed3a0;--violet:#7c5cff;--sky:#5bb8ff;
  /* legacy tokens re-mapped so demo fragments reskin automatically */
  --v100:#fff;--v200:#5a3fe0;--v300:#7c5cff;--v400:#ff5a4e;--v500:#ff5a4e;--v700:#ffc93c;--v800:#e9dfcf;--v900:#2b2118;
  --bg:var(--paper);--card:#fff;--card2:#f8f1e5;--line:#efe5d6;--line2:#e2d5c1;
  --text:#2b2118;--body:#4e4236;--grey:#7f7262;--dim:#b3a691;
  --win:#16b88a;--lose:#ff5a4e;--warn:#e0a400;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JBMono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wm:"Bricolage","Inter",sans-serif;--w:1200px;--r:24px;
  --sh:0 1px 0 rgba(43,33,24,.04),0 10px 30px -12px rgba(43,33,24,.18);
  --sh2:0 2px 0 rgba(43,33,24,.06),0 22px 44px -16px rgba(43,33,24,.28);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f);color:var(--body);background:var(--paper);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(rgba(43,33,24,.07) 1px,transparent 1.2px);background-size:22px 22px}
a{color:var(--violet);text-decoration:none;font-weight:500}a:hover{color:var(--coral)}
h1,h2,h3{color:var(--ink);font-family:var(--wm);font-weight:800;line-height:1.05;margin:0 0 .5em;letter-spacing:-.025em}
h1{font-size:clamp(40px,7vw,84px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:20px;letter-spacing:-.01em}
button{font:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}
/* top ribbon */
.devbar{background:var(--ink);color:#f4ecdf;font:12.5px/1.4 var(--f);text-align:center;padding:8px 12px}
.devbar b{color:var(--sun);font-weight:600}
.devbar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(251,246,238,.88);backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--wm);font-weight:800;font-size:24px;letter-spacing:-.03em;white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand svg{width:38px;height:38px;flex:none;transition:transform .3s}
.brand:hover svg{transform:rotate(-8deg) scale(1.06)}
header.top nav{min-width:0;margin-left:auto;display:flex;gap:10px;font-size:14px;align-items:center}
header.top nav a.navl{color:var(--ink);padding:8px 12px;border-radius:99px}
header.top nav a.navl:hover{background:var(--paper2)}
.pill{display:inline-flex;align-items:center;gap:7px;font:12px var(--mono);color:var(--ink);background:#fff;border:2px solid var(--line2);padding:5px 11px;border-radius:99px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}.dot.on{background:var(--mint);box-shadow:0 0 0 3px rgba(46,211,160,.25)}
/* built-on-storm badge */
.bos{display:inline-flex;align-items:center;gap:7px;background:#fff;border:2px solid var(--ink);color:var(--ink)!important;border-radius:99px;padding:4px 11px 4px 5px;font:600 12.5px var(--f);white-space:nowrap;box-shadow:2px 2px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.bos:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.bos img{width:20px;height:20px;border-radius:50%;background:#1a0033}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:16px;padding:11px 20px;font-weight:700;cursor:pointer;transition:transform .08s,box-shadow .12s,background .15s;min-height:46px;box-shadow:3px 3px 0 var(--ink)}
.btn:hover{background:#ff6d62;color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:#fff;color:var(--ink)}.btn.ghost:hover{background:var(--sun);color:var(--ink)}
.btn.sm{padding:6px 12px;min-height:36px;font-size:14px;border-radius:12px;box-shadow:2px 2px 0 var(--ink)}
.card{background:#fff;border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
/* hero */
.hero{padding:56px 0 30px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:34px}}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--sun) 62%,var(--sun) 92%,transparent 92%);padding:0 .06em}
.hero h1 .sq{display:inline-block;color:var(--coral)}
.hero p.lead{font-size:19px;max-width:560px;color:var(--body)}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--f);color:var(--ink);background:#fff;border:2px solid var(--line2);padding:6px 12px;border-radius:99px;margin-bottom:18px}
.kicker i{width:9px;height:9px;border-radius:50%;background:var(--mint)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;font-size:13px}
.facts span{background:var(--paper2);border-radius:99px;padding:5px 12px;color:var(--ink)}
/* animated tile mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transform:rotate(-4deg);padding:10px}
.tile{aspect-ratio:1;border-radius:22px;border:2px solid var(--ink);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);animation:bob 5s ease-in-out infinite;color:var(--ink)}
.tile svg{width:48%;height:48%}
.tile:nth-child(4n+1){background:var(--coral)}.tile:nth-child(4n+2){background:var(--sun)}.tile:nth-child(4n+3){background:var(--mint)}.tile:nth-child(4n){background:var(--violet)}
.tile:nth-child(3n){animation-delay:-1.6s}.tile:nth-child(3n+1){animation-delay:-3.1s}.tile:nth-child(5n){animation-duration:6.5s}
.tile:nth-child(4n) svg,.tile:nth-child(4n+1) svg{color:#fff}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.tile{animation:none}}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(6,1fr);gap:8px;transform:rotate(-2deg)}.tile{border-radius:14px;box-shadow:3px 3px 0 var(--ink)}.tile:nth-child(n+13){display:none}}
/* section + filters */
.sect-h{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:36px 0 6px}
.sect-h h2{margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px}
.filters button{background:#fff;border:2px solid var(--line2);color:var(--ink);border-radius:99px;padding:8px 16px;cursor:pointer;font-size:14px;font-weight:600;min-height:40px;transition:all .12s}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding-bottom:40px}
.ex{display:flex;flex-direction:column;padding:22px;transition:transform .18s,box-shadow .18s,border-color .18s;color:var(--body);min-height:230px;position:relative;overflow:hidden}
.ex:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--sh2);border-color:var(--ink);color:var(--body)}
.ex .ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;border:2px solid var(--ink);color:var(--ink)}
.ex .ico svg{width:30px;height:30px}
.ex:nth-child(4n+1) .ico{background:var(--coral);color:#fff}.ex:nth-child(4n+2) .ico{background:var(--sun)}.ex:nth-child(4n+3) .ico{background:var(--mint)}.ex:nth-child(4n) .ico{background:var(--violet);color:#fff}
.ex h3{margin-bottom:6px}
.ex p{font-size:14.5px;margin:0 0 16px;flex:1}
.ex .meta{display:flex;gap:6px;flex-wrap:wrap}
.ex .go{position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:50%;background:var(--paper2);display:grid;place-items:center;color:var(--ink);transition:background .15s,transform .15s}
.ex:hover .go{background:var(--sun);transform:rotate(-45deg)}
.tag{font:600 11.5px var(--f);color:var(--ink);background:var(--paper2);border:0;padding:3px 10px;border-radius:99px}
.tag.live{color:#0b6e51;background:rgba(46,211,160,.2)}
.tag.sample{color:#8a5d00;background:rgba(255,201,60,.3)}
.tag.storm{background:var(--ink);color:#fff}
/* how strip */
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 50px}
@media(max-width:800px){.how3{grid-template-columns:1fr}}
.how3 .card{padding:22px}
.how3 b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);font:800 16px var(--wm);color:var(--ink);margin-bottom:10px}
/* footer */
footer.foot{margin-top:30px;background:var(--ink);color:#d9cdbb;padding:40px 0 46px;font-size:14px;border-radius:32px 32px 0 0}
footer.foot a{color:var(--sun)}
footer.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
footer.foot .brand{color:#fff;font-size:22px}
footer.foot .bos{border-color:#fff;box-shadow:2px 2px 0 var(--sun)}
footer.foot .small{flex-basis:100%;font-size:12.5px;color:#a89a86}
/* demo pages */
.page-head{padding:34px 0 22px;margin-bottom:26px}
.page-head .phw{display:flex;gap:20px;align-items:center}
.page-head .bigico{flex:none;width:78px;height:78px;border-radius:24px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;background:var(--sun);color:var(--ink)}
.page-head .bigico svg{width:40px;height:40px}
.page-head h1{margin:0 0 6px}
@media(max-width:560px){.page-head .phw{align-items:flex-start}.page-head .bigico{width:56px;height:56px;border-radius:16px}.page-head .bigico svg{width:28px;height:28px}}
.page-head p{margin:0;max-width:760px}
.crumbs{font:600 13px var(--f);color:var(--grey);margin-bottom:14px}
.crumbs a{color:var(--ink)}
.notice{font-size:14px;color:var(--body);background:#fff7d6;border:2px dashed #e8c96a;border-radius:18px;padding:12px 16px;margin:18px 0 8px}
.notice b{color:var(--ink);font-weight:700}
.app{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;padding-bottom:40px}
.app>*{min-width:0}
@media(max-width:900px){.app{grid-template-columns:1fr}}
.panel{padding:20px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font:700 12px var(--f);color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
input[type=text],input[type=number],select,textarea{background:var(--card2);border:2px solid var(--line2);color:var(--ink);border-radius:14px;padding:10px 12px;font:15px var(--mono);width:100%;min-height:44px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
input[type=range]{width:100%;accent-color:var(--coral)}
.stat{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px dashed var(--line2)}
.stat span:last-child{font-family:var(--mono);color:var(--ink);font-weight:600}
.big{font:800 46px var(--wm);color:var(--ink);letter-spacing:-.03em}
.win{color:var(--win)!important}.lose{color:var(--lose)!important}
.hist{display:flex;gap:6px;flex-wrap:wrap;font:12px var(--mono)}
.hist span{padding:3px 9px;border-radius:99px;background:var(--card2);border:1px solid var(--line2);color:var(--ink)}
.fair{font:12px/1.5 var(--mono);color:var(--grey);word-break:break-all}
.fair b{color:var(--ink);font-weight:600}
details.how{margin-top:12px;font-size:14px}details.how summary{cursor:pointer;color:var(--violet);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
th{font:700 11px var(--f);color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.balance{font:600 14px var(--mono);color:var(--ink)}
@media(max-width:520px){.hide-sm{display:none}.brand{font-size:21px}.brand svg{width:32px;height:32px}.pill{max-width:132px;overflow:hidden}header.top .bos span{display:none}header.top .bos{padding:4px}}