@font-face{font-family:DINPRO;src:url(/fonts/dinpro_bold.otf)format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:DINPRO;src:url(/fonts/dinpro_black.otf)format("opentype");font-weight:900;font-style:normal;font-display:swap}.stb{--stb-line:var(--color-fd-border,#80808059);--stb-text:var(--color-fd-foreground,#111);--stb-muted:var(--color-fd-muted-foreground,#6d6d6d);--stb-card:var(--color-fd-card,transparent);--stb-blue:#31a4fc;color:var(--stb-text);border:1px solid var(--stb-line);background:var(--stb-card);border-radius:14px;margin:1.25rem 0 1.75rem;padding:18px}.stb *{box-sizing:border-box}.stb h2{letter-spacing:-.01em;margin:0;font-size:1.15rem;font-weight:650}.stb-head p,.stb-detail{color:var(--stb-muted);margin:.35rem 0 0;font-size:.92rem;line-height:1.4}.stb-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px;display:grid}.stb button,.stb input{font:inherit}.stb input,.stb-tile,.stb-seg button,.stb-step button{color:inherit}.stb-tile{border:1px solid var(--stb-line);cursor:pointer;text-align:left;background:0 0;border-radius:10px;flex-direction:column;gap:6px;padding:8px;transition:transform .14s cubic-bezier(.23,1,.32,1),border-color .16s linear;display:flex}.stb-tile.is-selected{border-color:var(--stb-blue);box-shadow:inset 0 0 0 1px var(--stb-blue)}.stb-tile:focus-visible,.stb-seg button:focus-visible,.stb-ghost:focus-visible,.stb-play:focus-visible,.stb-copy:focus-visible,.stb-swatch:focus-visible,.stb-input:focus-visible,.stb-hex:focus-visible,.stb-add:focus-visible,.stb-remove:focus-visible,.stb-step input:focus-visible{outline:2px solid var(--stb-blue);outline-offset:2px}.stb-tile-stage{background:radial-gradient(at 50% 120%,#ffffff0d,#0000 58%),#12110f;border-radius:8px;justify-content:center;align-items:center;height:92px;display:flex;overflow:hidden}.stb-tile-name{letter-spacing:.12em;text-transform:uppercase;color:var(--stb-muted);font-size:.72rem;font-weight:700}.stb-tile.is-selected .stb-tile-name{color:var(--stb-text)}.stb-stage{background-color:#141311;background-image:radial-gradient(at 50% 115%,#ffffff0f,#0000 58%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24.249' height='41.569' viewBox='0 0 24.249 41.569'><path d='M12.124 0 L0 6.928 V20.785 L12.124 27.713 V41.569 M12.124 27.713 L24.249 20.785 M24.249 6.928 L12.124 0' fill='none' stroke='white' stroke-opacity='0.11' stroke-width='0.7'/></svg>");background-size:auto,28px 48px;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:250px;margin-top:12px;padding:28px 16px 16px;display:flex;position:relative;overflow:hidden}.stb-transport{gap:6px;display:flex;position:absolute;top:10px;right:10px}.stb-ghost,.stb-play,.stb-copy,.stb-seg button,.stb-step button{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:6px;transition:transform .14s cubic-bezier(.23,1,.32,1);display:inline-flex}.stb-ghost{color:#fff;background:#ffffff14;border:1px solid #ffffff29;width:32px;height:32px}.stb-play{color:#000;background:#fff;border:1px solid #fff;width:32px;height:32px}.stb-detail{color:#ffffff9e;text-align:center;max-width:36rem}.stb-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:16px;display:grid}.stb-field{flex-direction:column;gap:6px;min-width:0;display:flex}.stb-grow{grid-column:1/-1}.stb-k{letter-spacing:.14em;text-transform:uppercase;color:var(--stb-muted);font-size:.68rem;font-weight:700}.stb-input,.stb-hex,.stb-step{border:1px solid var(--stb-line);background:color-mix(in srgb, var(--stb-text) 4%, transparent);border-radius:8px;height:38px}.stb-input,.stb-hex{width:100%;padding:0 12px}.stb-seg{border:1px solid var(--stb-line);border-radius:8px;gap:3px;height:38px;padding:3px;display:flex}.stb-seg button{background:0 0;border:0;border-radius:6px;flex:1;font-size:.92rem}.stb-seg button[aria-pressed=true]{color:#000;background:#fff}.stb-step{grid-template-columns:40px minmax(0,1fr) 40px;align-items:stretch;padding:0;display:grid;overflow:hidden}.stb-step button{width:auto;height:auto;color:var(--stb-text);background:0 0;border:0;border-radius:0;font-size:1.05rem;line-height:1}.stb-step button:first-child{border-right:1px solid var(--stb-line)}.stb-step button:last-child{border-left:1px solid var(--stb-line)}.stb-step-value{justify-content:center;align-items:center;gap:6px;min-width:0;display:flex}.stb-step input{text-align:right;font-variant-numeric:tabular-nums;background:0 0;border:0;width:2.5rem;padding:0}.stb-step span{color:var(--stb-muted);font-size:.85rem}.stb-range{width:100%;accent-color:var(--stb-blue)}.stb-swatches{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.stb-swatch{cursor:pointer;border:1px solid #ffffff59;border-radius:99px;width:22px;height:22px;padding:0}.stb-swatch.is-selected{outline:2px solid var(--stb-text);outline-offset:2px}.stb-hex{font-variant-numeric:tabular-nums;width:108px}.stb-hint{color:var(--stb-muted);margin:0;font-size:.92rem;line-height:1.35}.stb-stops{flex-direction:column;gap:8px;display:flex}.stb-stop{grid-template-columns:148px minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.stb-stop-actions{align-items:center;gap:8px;display:flex}.stb-stop-actions .stb-seg{flex:none;width:180px}.stb-add,.stb-remove{border:1px solid var(--stb-line);height:38px;color:inherit;cursor:pointer;background:0 0;border-radius:8px;padding:0 12px;transition:transform .14s cubic-bezier(.23,1,.32,1)}.stb-add{flex:1}.stb-codewrap{background:#0e0e0c;border-radius:12px;margin-top:16px;overflow:hidden}.stb-codehead{color:#ffffff8c;letter-spacing:.04em;justify-content:space-between;align-items:center;padding:8px 8px 8px 14px;font-size:.78rem;display:flex}.stb-copy{color:#000;background:#fff;border:0;height:32px;padding:0 12px;font-size:.82rem;font-weight:650}.stb-code{color:#ececec;background:0 0;margin:0;padding:4px 14px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;overflow:auto}.stb-cmt{color:#8d8d8d}.stb-str{color:#31a4fc}.stb-num{color:#fff}.stb-keyw{color:#c8c8c8}.stb-scale{flex:none;position:relative}@media (hover:hover) and (pointer:fine){.stb-tile:hover{border-color:color-mix(in srgb, var(--stb-text) 35%, var(--stb-line))}.stb-step button:hover,.stb-add:hover,.stb-remove:hover{background:color-mix(in srgb, var(--stb-text) 8%, transparent)}.stb-ghost:hover{background:#ffffff29}.stb-copy:hover,.stb-play:hover{filter:brightness(.95)}}.stb-tile:active,.stb-seg button:active,.stb-ghost:active,.stb-play:active,.stb-copy:active,.stb-step button:active,.stb-add:active,.stb-remove:active{transform:scale(.97)}@media (max-width:720px){.stb{padding:12px}.stb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.stb-controls{grid-template-columns:1fr}.stb-stop{grid-template-columns:1fr auto}.stb-stop .stb-swatches{grid-column:1/-1}.stb-stop-actions{flex-direction:column;align-items:stretch}.stb-stop-actions .stb-seg{width:auto}.stb-stage{min-height:210px}}.tf{--tm:#31a4fc;color:#fff;-webkit-font-smoothing:antialiased;font-family:DINPRO,Segoe UI,sans-serif;position:relative}.tf-plate{background:#000000b8;border:3px solid #ffffff29;border-radius:22px;width:100%;height:100%;position:relative}.tf.is-plain .tf-plate{background:0 0;border-color:#0000}.tf-label,.tf-value{color:#fff;white-space:nowrap;text-overflow:ellipsis;line-height:1;overflow:hidden}.tf.is-plain .tf-label,.tf.is-plain .tf-value{text-shadow:0 2px 10px #000000f2,0 0 2px #000000e6}.tf-label{letter-spacing:.14em;text-transform:uppercase;min-width:0;font-size:28px;font-weight:700}.tf-value{font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:32px;font-weight:900}.tf-segments{gap:7px;height:14px;display:flex}.tf-segments span{background:#ffffff29;border-radius:3px;flex:1}.tf-segments span.is-on{background:var(--tm)}.tf-track{background:#ffffff29;border-radius:99px;height:8px;overflow:hidden}.tf-fill{background:var(--tm);height:100%}.tf-seg{fill:#ffffff29}.tf-seg.is-on{fill:var(--tm)}.tf-tick{stroke:#ffffff47;stroke-width:1.5px;stroke-linecap:round}.tf-tick.is-major{stroke:#ffffff80;stroke-width:2.4px}.tf-tick.is-on{stroke:var(--tm)}.tf-pie-bg{fill:#ffffff14}.tf-wedge{fill:var(--tm)}.tf-donut-track,.tf-donut-fill{fill:none;stroke-width:16px;stroke-linecap:butt}.tf-donut-track{stroke:#ffffff29}.tf-donut-fill{stroke:var(--tm)}.tf-arc,.tf-arc-fill{fill:none;stroke-width:10px;stroke-linecap:round}.tf-arc{stroke:#ffffff29}.tf-arc-fill{stroke:var(--tm)}.tf-dot,.tf-bar{fill:#ffffff29}.tf-dot.is-on,.tf-bar.is-on{fill:var(--tm)}.tf.is-pill .tf-plate,.tf.is-bar .tf-plate{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;padding:28px 30px 24px;display:grid}.tf.is-pill .tf-plate{grid-template-rows:auto 14px;row-gap:18px}.tf.is-pill .tf-label,.tf.is-bar .tf-label{grid-area:1/1}.tf.is-pill .tf-value,.tf.is-bar .tf-value{grid-area:1/2}.tf.is-pill .tf-value{letter-spacing:0;font-size:30px}.tf.is-pill .tf-segments{grid-area:2/1/auto/-1}.tf.is-bar .tf-plate{grid-template-rows:auto 8px;row-gap:16px}.tf.is-bar .tf-value{letter-spacing:.08em;text-transform:uppercase;font-size:26px}.tf.is-bar .tf-track{grid-area:2/1/auto/-1}.tf.is-chip .tf-plate{border-radius:999px;justify-content:space-between;align-items:center;gap:20px;padding:0 32px;display:flex}.tf.is-chip .tf-value{font-size:40px}.tf.is-stack .tf-plate{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;display:flex}.tf.is-stack .tf-label{letter-spacing:.18em;font-size:22px}.tf.is-stack .tf-value{letter-spacing:-.04em;font-size:76px}.tf.is-dial .tf-plate,.tf.is-pie .tf-plate,.tf.is-donut .tf-plate,.tf.is-gauge .tf-plate,.tf.is-clock .tf-plate{flex-direction:column;align-items:center;display:flex}.tf.is-dial .tf-plate{padding:18px 18px 16px}.tf.is-dial .tf-chart{order:1;width:250px;height:250px;display:block}.tf.is-dial .tf-label{order:3}.tf.is-dial .tf-value{text-align:center;font-size:52px;position:absolute;top:118px;left:0;right:0}.tf.is-dial .tf-label{letter-spacing:.16em;text-align:center;max-width:90%;margin-top:6px;font-size:20px}.tf.is-pie .tf-plate{padding:18px 18px 16px}.tf.is-pie .tf-chart{order:1;width:220px;height:220px;display:block}.tf.is-pie .tf-value{order:2}.tf.is-pie .tf-label{order:3}.tf.is-pie .tf-value{text-align:center;margin-top:10px;font-size:42px}.tf.is-pie .tf-label{letter-spacing:.16em;text-align:center;max-width:90%;margin-top:6px;font-size:20px}.tf.is-donut .tf-plate{padding:18px 18px 16px}.tf.is-donut .tf-chart{order:1;width:220px;height:220px;display:block}.tf.is-donut .tf-label{order:3}.tf.is-donut .tf-value{text-align:center;font-size:44px;position:absolute;top:106px;left:0;right:0}.tf.is-donut .tf-label{letter-spacing:.16em;text-align:center;max-width:90%;margin-top:8px;font-size:20px}.tf.is-gauge .tf-plate{padding:8px 16px 18px}.tf.is-gauge .tf-chart{order:1;width:320px;height:208px;display:block}.tf.is-gauge .tf-value{order:2}.tf.is-gauge .tf-label{order:3}.tf.is-gauge .tf-value{text-align:center;margin-top:-28px;font-size:52px}.tf.is-gauge .tf-label{letter-spacing:.16em;text-align:center;max-width:90%;margin-top:4px;font-size:20px}.tf.is-clock .tf-plate{padding:16px 16px 18px}.tf.is-clock .tf-chart{order:1;width:260px;height:260px;display:block}.tf.is-clock .tf-label{order:3}.tf.is-clock .tf-value{text-align:center;font-size:48px;position:absolute;top:122px;left:0;right:0}.tf.is-clock .tf-label{letter-spacing:.16em;text-align:center;max-width:90%;margin-top:8px;font-size:20px}.tf.is-dots .tf-plate,.tf.is-signal .tf-plate{grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:center;column-gap:18px;padding:28px 30px 24px;display:grid}.tf.is-dots .tf-plate{grid-template-rows:auto 44px;row-gap:20px}.tf.is-signal .tf-plate{grid-template-rows:auto 96px;row-gap:16px;padding:24px 30px 20px}.tf.is-dots .tf-label,.tf.is-signal .tf-label{grid-area:1/1}.tf.is-dots .tf-value,.tf.is-signal .tf-value{letter-spacing:0;grid-area:1/2;font-size:30px}.tf.is-dots .tf-chart,.tf.is-signal .tf-chart{grid-area:2/1/auto/-1;justify-self:center;display:block}.tf.is-dots .tf-chart{width:300px;height:44px}.tf.is-signal .tf-chart{width:234px;height:96px}.tf.is-nolabel .tf-label,.tf.is-novalue .tf-value{display:none}.tf.is-nolabel.is-chip .tf-plate,.tf.is-novalue.is-chip .tf-plate{justify-content:center}.tf.is-nolabel.is-novalue.is-pill .tf-plate,.tf.is-nolabel.is-novalue.is-bar .tf-plate,.tf.is-nolabel.is-novalue.is-dots .tf-plate,.tf.is-nolabel.is-novalue.is-signal .tf-plate{grid-template-rows:1fr;align-content:center}.tf.is-nolabel.is-novalue.is-pill .tf-segments,.tf.is-nolabel.is-novalue.is-bar .tf-track,.tf.is-nolabel.is-novalue.is-dots .tf-chart,.tf.is-nolabel.is-novalue.is-signal .tf-chart{grid-row:1;align-self:center}.tf.is-nolabel.is-novalue.is-dial .tf-plate,.tf.is-nolabel.is-novalue.is-pie .tf-plate,.tf.is-nolabel.is-novalue.is-donut .tf-plate,.tf.is-nolabel.is-novalue.is-gauge .tf-plate,.tf.is-nolabel.is-novalue.is-clock .tf-plate{justify-content:center}@media (prefers-reduced-motion:reduce){.stb-tile,.stb-ghost,.stb-play,.stb-copy,.stb-seg button,.stb-step button{transition:none}}
.indicator-gallery{--ig-ink:#000;--ig-text:#fff;--ig-muted:#a8a8a8;--ig-line:#ffffff29;--ig-blue:#31a4fc;color:var(--ig-text);margin:1.25rem 0 1.75rem;font-family:DINPRO,Segoe UI,sans-serif}.indicator-gallery *{box-sizing:border-box}.indicator-gallery-bar{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.indicator-gallery-bar p{color:var(--ig-muted);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.8rem;font-weight:700}.indicator-gallery-bar label{color:var(--ig-muted);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.55rem;font-size:.8rem;font-weight:700;display:flex}.indicator-gallery-bar input[type=color]{border:.1rem solid var(--ig-line);cursor:pointer;background:0 0;border-radius:.4rem;width:2rem;height:2rem;padding:0}.indicator-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem;display:grid}.indicator-gallery article{background:var(--ig-ink);border:.1rem solid var(--ig-line);border-radius:.6rem;flex-direction:column;margin:0;display:flex;overflow:hidden}.indicator-gallery-stage{background:#111;place-items:center;height:148px;display:grid;overflow:hidden}.indicator-gallery-frame{width:148px;height:148px;overflow:hidden}.indicator-gallery iframe{transform-origin:0 0;pointer-events:none;border:0;width:256px;height:256px;transform:scale(.578125)}.indicator-gallery button{border:0;border-top:.1rem solid var(--ig-line);color:var(--ig-text);font:inherit;letter-spacing:.08em;text-align:left;text-transform:uppercase;cursor:pointer;background:0 0;margin:0;padding:.55rem .7rem .7rem;font-size:.72rem;font-weight:700}.indicator-gallery button:hover{color:#000;background:#fff}.indicator-gallery button:focus-visible{outline:2px solid var(--ig-blue);outline-offset:-2px}.indicator-gallery button.is-copied{background:var(--ig-blue);color:#000}
