:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#101515;color:#ecf5ed}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}*{box-sizing:border-box}body{margin:0;min-width:320px}button{border:0;border-radius:5px;background:#d7f461;color:#142015;cursor:pointer;font:inherit;font-weight:700;padding:.65rem .8rem}button:hover{background:#ebff9f}.playground-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);height:100vh;height:100dvh;overflow:hidden}.preview-panel{min-height:0;padding:1.5rem}.preview{min-height:calc(100vh - 3rem);display:grid;isolation:isolate;place-items:center;overflow:hidden;padding:clamp(2rem,7vw,7rem);position:relative;background:#1c2724}.preview-surface{left:50%;pointer-events:none;position:absolute;top:50%;transform-origin:center;z-index:0}.preview-content{color:#f8fff8;max-width:610px;position:relative;text-shadow:0 1px 3px rgba(8,14,12,.55),0 8px 28px rgba(8,14,12,.35);z-index:1}.eyebrow{margin:0 0 .75rem;color:#d7f461;font-size:.7rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin-top:0}h1{font-size:clamp(2.5rem,5vw,5rem);line-height:.98;letter-spacing:0;margin-bottom:1.25rem;text-wrap:balance}h2{font-size:1.5rem;letter-spacing:0;margin-bottom:0}.preview-copy{font-size:1.05rem;line-height:1.55;max-width:40ch}.preview-actions{display:flex;flex-wrap:wrap;gap:.65rem;text-shadow:none}.action{background:#d7f461;border-radius:5px;color:#142015;display:inline-block;font-weight:700;padding:.65rem .8rem;text-decoration:none}.action:hover{background:#ebff9f}.quiet-action{background:#0e1b16b3;color:#f5fff5;border:1px solid rgba(245,255,245,.55)}.quiet-action:hover{background:#479074b3}.controls{border-left:1px solid #34423d;display:flex;flex-direction:column;gap:1.25rem;min-height:0;overflow:hidden;padding:1.5rem}.controls-header{align-items:center;display:flex;justify-content:space-between;gap:1rem}.controls-header a{color:#d7f461;font-size:.875rem;font-weight:700;text-decoration:none}.controls-header a:hover{color:#ebff9f}.tweakpane{--tp-base-background-color: #18211e;--tp-base-border-radius: 6px;--tp-base-font-family: Inter, ui-sans-serif, system-ui, sans-serif;--tp-base-shadow-color: transparent;--tp-blade-border-radius: 4px;--tp-blade-value-width: 154px;--tp-button-background-color: #d7f461;--tp-button-background-color-active: #c4e950;--tp-button-background-color-focus: #ebff9f;--tp-button-background-color-hover: #ebff9f;--tp-button-foreground-color: #142015;--tp-container-background-color: rgba(215, 244, 97, .09);--tp-container-background-color-active: rgba(215, 244, 97, .22);--tp-container-background-color-focus: rgba(215, 244, 97, .18);--tp-container-background-color-hover: rgba(215, 244, 97, .14);--tp-container-foreground-color: #ecf5ed;--tp-input-background-color: #26342f;--tp-input-background-color-active: #34463f;--tp-input-background-color-focus: #3d534a;--tp-input-background-color-hover: #30413a;--tp-input-foreground-color: #f5fff5;--tp-label-foreground-color: #b8c6bd;--tp-monitor-background-color: #101515;--tp-monitor-foreground-color: #b8c6bd;--tp-groove-foreground-color: rgba(215, 244, 97, .16);flex:1 1 auto;font-size:12px;min-height:0;overflow-y:auto;padding-right:.25rem;width:100%}.tweakpane .tp-rotv{box-shadow:none;width:100%}.gallery{padding:1rem 1.5rem 2rem}.gallery-header{margin-bottom:.75rem}.gallery-header .eyebrow{margin-bottom:.35rem}.gallery-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}.example-tile{background:#18211e;border:1px solid #34423d;border-radius:8px;display:flex;flex-direction:column;overflow:hidden}.example-preview{aspect-ratio:16 / 9;isolation:isolate;overflow:hidden;position:relative}.example-canvas{height:540px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transform-origin:center;width:960px}.example-name{font-size:.875rem;font-weight:700;margin:0;padding:.6rem .75rem 0}.example-code{border-top:1px solid #34423d;margin-top:.6rem;position:relative}.example-code summary{color:#b8c6bd;cursor:pointer;font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:.5rem .75rem;text-transform:uppercase;-webkit-user-select:none;user-select:none}.example-code summary:hover{color:#ecf5ed}.example-code pre{background:#101515;font-size:.72rem;line-height:1.55;margin:0;overflow-x:auto;padding:.75rem}.example-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.example-copy{font-size:.72rem;padding:.3rem .6rem;position:absolute;right:.5rem;top:.35rem}.usage-demo{color:#f5fff5;display:flex;flex-direction:column;justify-content:center;padding:1.5rem}.usage-demo .demo-scrim{top:0;right:0;bottom:0;left:0;position:absolute}.usage-demo .demo-content{max-width:36ch;position:relative}.usage-demo .demo-eyebrow{font-size:.6rem;margin-bottom:.4rem}.usage-demo h3{font-size:1.35rem;letter-spacing:0;line-height:1.1;margin:0 0 .5rem}.usage-demo .demo-body{font-size:.8rem;line-height:1.5;margin:0 0 .9rem}.usage-demo .demo-actions{display:flex;gap:.5rem;margin:0}.usage-demo .demo-button{background:#d7f461;border-radius:5px;color:#142015;display:inline-block;font-size:.72rem;font-weight:700;padding:.4rem .7rem}.usage-demo .demo-button-ghost{background:#0a0f0c8c;border:1px solid rgba(245,255,245,.5);color:#f5fff5}.usage-demo .demo-link{color:#ffd166;font-size:.8rem;font-weight:700}.demo-hero .demo-scrim{background:linear-gradient(100deg,#0c0a12e0 15%,#0c0a1226)}.demo-hero .demo-eyebrow{color:#ffd166}.demo-article{background:#f6f7f2;color:#1f2a24}.demo-article .example-canvas{opacity:.2}.demo-card{justify-content:flex-end}.demo-card .demo-scrim{background:linear-gradient(180deg,#0d080600 25%,#0d0806eb 80%)}.demo-card .demo-body{margin-bottom:.5rem}.demo-cta{align-items:center;text-align:center}.demo-cta .demo-scrim{background:radial-gradient(ellipse at center,#0d0221d9,#0d022140 75%)}.demo-cta .demo-actions{justify-content:center}.demo-cta .demo-button{background:#c77dff;color:#10002b}.demo-quote{background:#0b1416;color:#e6f4f1}.demo-quote .example-canvas{opacity:.25}.demo-quote .demo-blockquote{font-size:1.15rem;line-height:1.4;margin:0 0 .6rem}.demo-quote .demo-attrib{color:#9fb8b2;font-size:.75rem;margin:0}.demo-multiply{background:linear-gradient(120deg,#ffb703,#ff0062);color:#fff7f0}.demo-multiply .example-canvas{mix-blend-mode:multiply}.demo-multiply .demo-eyebrow{color:#ffe8c2}.demo-screen{background:#050a14;color:#e8f8ff}.demo-screen .example-canvas{mix-blend-mode:screen}.demo-screen .demo-eyebrow{color:#4cc9f0}.demo-overlay{background:#0f766e;color:#f0fdfa}.demo-overlay .example-canvas{mix-blend-mode:overlay;opacity:.5}.demo-overlay .demo-eyebrow{color:#99f6e4}.demo-luminosity{background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#f5f3ff}.demo-luminosity .example-canvas{mix-blend-mode:luminosity}.demo-luminosity .demo-eyebrow{color:#e0f2fe}.demo-blur{background:#020c1b;color:#e6fffa}.demo-blur [data-triangles-background]{filter:blur(18px);transform:scale(1.2)}.demo-blur .demo-eyebrow{color:#34d399}.demo-blur .demo-button{background:#34d399;color:#022c22}.demo-frost{align-items:center}.demo-frost .demo-glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid rgba(255,255,255,.25);border-radius:10px;max-width:36ch;padding:1.1rem 1.25rem;position:relative}.demo-frost .demo-eyebrow{color:#ffd166}.demo-frost .demo-body{margin-bottom:0}.demo-stats .demo-scrim{background:#060e1299}.demo-stats .demo-metrics{display:flex;gap:2.5rem;justify-content:center;max-width:none;text-align:center}.demo-stats strong{display:block;font-size:1.75rem}.demo-stats span{color:#bcd7de;font-size:.72rem}@media(max-width:820px){.playground-shell{grid-template-columns:1fr;height:auto;overflow:visible}.controls{border-left:0;border-top:1px solid #34423d;overflow:visible}.preview-panel{min-height:70vh}.preview{min-height:calc(70vh - 3rem)}.tweakpane{flex:0 0 auto;overflow:visible}}@media(max-width:640px){.gallery-grid{grid-template-columns:1fr}}@media(max-width:440px){.preview-panel{padding:.75rem}.preview{min-height:calc(70vh - 1.5rem);padding:1.5rem}.controls{padding:1rem}.tweakpane{--tp-blade-value-width: 144px}.gallery{padding:.75rem .75rem 1.5rem}}