html,body,#root{color:#1a1814;background:#f6f1e6;min-height:100%;margin:0;padding:0;font-family:Kalam,-apple-system,system-ui,sans-serif}body{flex-direction:column;min-height:100vh;display:flex;overflow-x:hidden}.demo-app{background:#f6f1e6;flex-direction:column;min-height:100vh;display:flex}.demo-main{box-sizing:border-box;width:100%;min-width:0;max-width:960px;padding:8px;padding-bottom:calc(170px + env(safe-area-inset-bottom,0px));flex:1;margin:0 auto}.demo-stage{width:900px;max-width:100%;margin:0 auto;position:relative}.demo-screen{box-sizing:border-box;width:100%;min-width:0;min-height:480px;padding:10px;position:relative;overflow:hidden}.demo-grid-sidebar,.demo-grid-sidebar-r,.demo-grid-2col,.demo-grid-3col,.demo-grid-4col,.discovery-grid{grid-template-columns:1fr;gap:12px;min-width:0;display:grid}.demo-grid-sidebar>*,.demo-grid-sidebar-r>*,.demo-grid-2col>*,.demo-grid-3col>*,.demo-grid-4col>*,.discovery-grid>*{min-width:0;max-width:100%}.demo-grid-4col{grid-template-columns:1fr 1fr;gap:4px}.discovery-canvas{height:380px}@media (width>=768px){.discovery-canvas{height:460px}}.demo-table-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:thin;overflow-x:auto}.demo-table-scroll>*{min-width:max-content}.demo-hide-mobile{display:initial}.demo-only-mobile{display:none}@media (width>=768px){.demo-main{padding:24px}.demo-screen{min-height:620px;padding:18px}.demo-grid-sidebar{grid-template-columns:260px 1fr;gap:14px}.demo-grid-sidebar-r{grid-template-columns:1fr 260px;gap:14px}.demo-grid-2col{grid-template-columns:1fr 1fr;gap:14px}.discovery-grid{grid-template-columns:1fr 220px;gap:12px}.demo-grid-4col{grid-template-columns:1fr 1fr 1fr 1fr}.demo-grid-3col{grid-template-columns:1fr 1fr 1fr}.demo-table-scroll>*{min-width:0}}@media (width<=767px){.demo-hide-mobile{display:none!important}.demo-only-mobile{display:initial}}.demo-tourbar{z-index:30;color:#f6f1e6;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));box-sizing:border-box;background:#1a1814;grid-template-columns:1fr;gap:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 24px #00000040}.demo-tourbar-meta{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.demo-tourbar-step{color:#c14a1a;letter-spacing:.5px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px}.demo-tourbar-title{font-size:14px;font-weight:700}.demo-tourbar-body{color:#ffffffd1;font-size:12px;line-height:1.4}.demo-tourbar-controls{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;display:flex}.demo-tourbar-dots{flex:100%;order:-1;gap:2px;min-width:0;display:flex}.demo-tourbar-dots span{background:#fff3;border-radius:2px;flex:1;min-width:0;height:3px}.demo-tourbar-dots span.on{background:#c14a1a}.demo-tourbar button{color:#ffffffd9;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #ffffff4d;border-radius:3px;flex:1 1 0;min-height:36px;padding:6px 8px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.demo-tourbar button.primary{color:#fff;background:#c14a1a;border-color:#c14a1a;flex:1.4 1 0;font-weight:700}.demo-tourbar button:disabled{opacity:.4;cursor:default}@media (width>=768px){.demo-tourbar{border-radius:4px;grid-template-columns:minmax(200px,240px) 1fr minmax(240px,280px);align-items:center;gap:16px;margin-bottom:14px;padding:12px 16px;position:sticky;inset:12px auto auto;box-shadow:0 10px 24px #00000059}.demo-tourbar-meta{flex-direction:column;align-items:flex-start;gap:2px}.demo-tourbar-title{font-size:15px}.demo-tourbar-body{font-size:13px;line-height:1.45}.demo-tourbar-controls{flex-wrap:nowrap}.demo-tourbar-dots{flex:1;order:0;min-width:40px}.demo-tourbar button{flex:initial;min-height:0;padding:4px 10px;font-size:11px}.demo-tourbar button.primary{flex:initial}}.demo-footer{color:#1a181480;text-align:center;letter-spacing:.4px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px}.demo-footer kbd{color:#1a1814b3;background:#0000000f;border:1px solid #0000001f;border-radius:3px;margin:0 2px;padding:1px 5px;font-family:inherit;font-size:10px}.sidebar-picker-trigger{text-align:left;cursor:pointer;width:100%;font:inherit;color:inherit;background:0 0;border:0;border-radius:3px;padding:0}.sidebar-picker-trigger:hover{background:#0000000a}.sidebar-picker-trigger:focus{outline:1.5px solid var(--accent);outline-offset:2px}.pp-menu{z-index:100;box-sizing:border-box;min-width:240px;max-height:460px;padding:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;position:absolute;top:calc(100% + 6px);left:0;overflow:auto}@media (width<=767px){.pp-menu{top:auto;left:12px;right:12px;bottom:calc(180px + env(safe-area-inset-bottom,0px));max-height:60vh;position:fixed;box-shadow:0 -8px 24px #00000040;width:auto!important}}.pp-menu-paper{background:var(--paper);border:1.5px solid var(--ink-2);border-radius:3px;width:260px;box-shadow:3px 4px #0000001f}.pp-menu-paper .pp-group+.pp-group{border-top:1px dashed var(--ink-4);margin-top:6px;padding-top:6px}.pp-menu-paper .pp-group-head{padding:4px 6px 2px}.pp-menu-paper .pp-group-team{font-family:var(--mono);color:var(--accent);letter-spacing:.6px;font-size:9px;font-weight:700}.pp-menu-paper .pp-group-cat{color:var(--ink-3);margin-top:1px;font-size:11px}.pp-menu-paper .pp-item{width:100%;color:var(--ink);text-align:left;cursor:pointer;font-family:var(--hand);background:0 0;border:0;border-radius:3px;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:14px;display:flex}.pp-menu-paper .pp-item:hover{background:#0000000d}.pp-menu-paper .pp-item.on{background:var(--accent-wash)}.pp-menu-paper .pp-item-name{align-items:center;gap:6px;display:inline-flex}.pp-menu-paper .pp-item-dot{color:var(--accent);font-size:10px}.pp-menu-paper .pp-tag{font-family:var(--mono);letter-spacing:.5px;color:var(--ink-3);background:#00000014;border-radius:2px;padding:1px 4px;font-size:8px}.pp-menu-paper .pp-tag-new{background:var(--accent-wash);color:var(--accent)}.pp-menu-paper .pp-new{border:1px dashed var(--ink-4);width:100%;color:var(--ink-3);cursor:pointer;font-family:var(--hand);text-align:left;background:0 0;border-radius:3px;margin-top:4px;padding:5px 8px;font-size:12px}.pp-menu-paper .pp-new:hover{background:var(--accent-wash);color:var(--accent);border-color:var(--accent)}.fos{--ink:#1a1814;--ink-2:#3a3530;--ink-3:#6a635a;--ink-4:#a39b8f;--paper:#f6f1e6;--paper-2:#efe8d6;--grid:#1e284621;--grid-minor:#1e28460f;--accent:#c14a1a;--accent-2:#e57b3a;--accent-wash:#c14a1a24;--green:#3d6b34;--red:#b02f1e;--elec:#1e40af;--elec-wash:#1e40af24;--sw:#6d28d9;--sw-wash:#6d28d924;--hand:"Kalam", "Caveat", cursive;--script:"Caveat", cursive;--mono:"JetBrains Mono", ui-monospace, monospace;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;color:var(--ink);font-family:var(--hand);box-sizing:border-box}.fos *,.fos :before,.fos :after{box-sizing:border-box}.fos-paper{background-color:var(--paper);background-image:linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:10px 10px,10px 10px,50px 50px,50px 50px;position:relative;overflow:hidden}.fos-paper:before{content:"";pointer-events:none;background:radial-gradient(at 20% 10%,#785a3214,#0000 50%),radial-gradient(at 90% 95%,#785a320f,#0000 50%);position:absolute;inset:0}.fos-mono{font-family:var(--mono)}.fos-hand{font-family:var(--hand)}.fos-script{font-family:var(--script)}.fos-sketch{border:1.5px solid var(--ink);background:#f6f1e699;border-radius:3px;position:relative}.fos-sketch-thin{border-width:1px}.fos-dashed{border-style:dashed}.fos-dotted{border-style:dotted}.fos-chip{border:1.25px solid var(--ink-2);font-family:var(--mono);background:var(--paper);border-radius:10px;align-items:center;gap:4px;padding:1px 7px;font-size:10px;line-height:1.6;display:inline-flex}.fos-chip.accent{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}.fos-chip.green{border-color:var(--green);color:var(--green);background:#3d6b341a}.fos-chip.muted{color:var(--ink-3);border-color:var(--ink-3)}.fos-chip.filled{background:var(--ink);color:var(--paper);border-color:var(--ink)}.fos-chip.elec{border-color:var(--elec);color:var(--elec);background:var(--elec-wash)}.fos-chip.sw{border-color:var(--sw);color:var(--sw);background:var(--sw-wash)}.art-link{color:inherit;cursor:pointer;text-decoration:none}.art-link:hover{text-decoration:underline}.fos-h{font-family:var(--hand);font-weight:700}.fos-under{background-image:linear-gradient(var(--accent), var(--accent));background-position:0 100%;background-repeat:no-repeat;background-size:100% 2px;padding-bottom:1px}.fos-btn{border:1.5px solid var(--ink);background:var(--paper);font-family:var(--hand);cursor:pointer;border-radius:3px;align-items:center;gap:5px;padding:3px 10px;font-size:13px;display:inline-flex}.fos-btn.primary{background:var(--ink);color:var(--paper)}.fos-btn.accent{background:var(--accent);color:var(--paper);border-color:var(--accent)}.fos-btn.ghost{border-color:var(--ink-3);color:var(--ink-2)}.fos-strike{color:var(--ink-3);text-decoration:line-through}.fos-hatch{background-image:repeating-linear-gradient(45deg,#00000014 0 3px,#0000 3px 8px)}.fos-hatch-orange{background-image:repeating-linear-gradient(45deg,#c14a1a2e 0 3px,#0000 3px 8px)}.fos-phasebar{align-items:center;gap:0;display:flex}.fos-phasebar .seg{border:1.25px solid var(--ink-2);background:var(--paper);border-right-width:0;flex:1;height:8px;position:relative}.fos-phasebar .seg:last-child{border-right-width:1.25px}.fos-phasebar .seg.done{background:var(--ink)}.fos-phasebar .seg.cur{background:var(--accent);border-color:var(--accent)}.fos-arrow{color:var(--accent);font-family:var(--mono)}.fos-sticky{font-family:var(--hand);color:#4a3f20;background:#fef5a0;border:1px solid #00000026;padding:6px 8px;font-size:11px;transform:rotate(-1deg);box-shadow:1px 2px 3px #0000001a}.fos-rule{border:0;border-top:1px dashed var(--ink-4);margin:6px 0}.fos-ai-badge{border:1.5px solid var(--accent);color:var(--accent);font-family:var(--mono);background:var(--paper);border-radius:3px;align-items:center;gap:4px;padding:1px 6px;font-size:9px;display:inline-flex}.fos-callout{font-family:var(--script);color:var(--accent);font-size:16px;line-height:1.1}@media (hover:hover){.fos-nav-item[data-tip]:hover{background:#00000014!important}.fos-nav-item[data-tip]:hover:after{content:attr(data-tip);color:#f6f1e6;white-space:normal;z-index:50;pointer-events:none;background:#1a1814;border-radius:3px;width:240px;padding:8px 10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:12px;line-height:1.45;position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%);box-shadow:3px 4px 10px #0000004d}.fos-nav-item[data-tip]:hover:before{content:"";z-index:51;background:#1a1814;width:10px;height:10px;position:absolute;top:50%;left:calc(100% + 4px);transform:translateY(-50%)rotate(45deg)}}.demo-regress-cta{background:var(--accent,#c14a1a);color:var(--paper,#f6f1e6);letter-spacing:.4px;cursor:pointer;border:none;border-radius:4px;padding:12px 22px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:15px;font-weight:700;transition:transform .12s,box-shadow .12s;animation:1.8s ease-in-out infinite demo-regress-pulse;box-shadow:4px 6px #c14a1a47}.demo-regress-cta:hover{transform:translate(-1px,-1px);box-shadow:5px 7px #c14a1a52}.demo-regress-cta:active{transform:translate(2px,2px);box-shadow:2px 3px #c14a1a47}@keyframes demo-regress-pulse{0%,to{box-shadow:4px 6px #c14a1a47,0 0 #c14a1a66}50%{box-shadow:4px 6px #c14a1a47,0 0 0 12px #c14a1a00}}@media (prefers-reduced-motion:reduce){.demo-regress-cta{animation:none}}