:root{font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;line-height:1.45;font-weight:420;color:#182633;font-synthesis:none;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:inherit;background-image:linear-gradient(150deg,#f4f2eb9e,#eaf3f88f),radial-gradient(circle at 11% 8%,rgba(255,198,135,.42) 0%,transparent 42%),radial-gradient(circle at 88% 16%,rgba(139,231,255,.38) 0%,transparent 44%),radial-gradient(circle at 50% 100%,rgba(255,246,214,.34) 0%,transparent 46%),url(/fluent-reveal-svelte/assets/scarlet-tree-DfzpsLdd.png);background-position:center,center,center,center,center;background-size:auto,auto,auto,auto,cover;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;background-attachment:scroll,scroll,scroll,scroll,fixed}#app{min-height:100vh;padding:clamp(1rem,3vw,2.5rem)}.page{--control-radius: 12px;--combo-radius: 16px;margin:0 auto;width:min(1140px,100%);display:grid;gap:1.25rem}.hero{border-radius:var(--control-radius);padding:clamp(1rem,2.5vw,1.75rem);background:linear-gradient(135deg,#ffffff9e,#ffffff57);border:1px solid rgba(15,30,42,.12);box-shadow:0 16px 40px #1e2d3a1a;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}.hero .eyebrow{margin:0;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0f5d77}.hero h1{margin:.32rem 0 0;font-size:clamp(1.8rem,4.4vw,2.9rem);line-height:1.05}.hero .subtitle{margin:.7rem 0 0;max-width:74ch;color:#2f4a5a}.knobs{border-radius:var(--control-radius);padding:.9rem 1rem;background:#ffffff6b;border:1px solid rgba(15,30,42,.1);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem;-webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%)}.knob-group{margin:0;min-inline-size:0;border-radius:var(--control-radius);border:1px solid rgba(15,30,42,.12);background:#ffffff47;padding:.65rem .72rem .75rem;display:grid;gap:.52rem}.knob-group legend{padding:0 .35rem;font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#0f5d77}.knob-group label{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.86rem;color:#2d4757}.knob-group input[type=range]{flex:1 1 180px;min-inline-size:120px}.knob-group input[type=checkbox]{margin-inline-start:auto}.knob-group label>span,.knob-group label>strong,.knob-group label>code{margin-inline-start:auto}.knobs input[type=color]{inline-size:2.1rem;block-size:2.1rem;border:1px solid rgba(12,34,49,.2);border-radius:8px;padding:.12rem;background:#ffffff6b}.knob-color code{font-size:.76rem;color:#426271}.surface{position:relative;overflow:hidden;border-radius:var(--control-radius);padding:clamp(1rem,2.2vw,1.6rem);border:1px solid rgba(15,30,42,.12);background:linear-gradient(145deg,#ffffff4d,#f0f8fe38);box-shadow:0 22px 52px #10213021;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}.surface:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.68;background:radial-gradient(circle at 14% 8%,rgba(255,255,255,.44) 0%,transparent 34%),radial-gradient(circle at 86% 84%,rgba(162,240,255,.24) 0%,transparent 42%),repeating-linear-gradient(32deg,#ffffff17 0 2px,#fff0 2px 7px)}.surface>*{position:relative;z-index:1}.matrix-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem;align-items:start}.matrix-cell{border-radius:var(--combo-radius);border:1px solid rgba(11,36,52,.11);padding:.75rem;background:linear-gradient(140deg,#ffffff75,#fff3);display:grid;gap:.62rem;align-content:start;animation:rise-in .36s ease both;-webkit-backdrop-filter:blur(14px) saturate(138%);backdrop-filter:blur(14px) saturate(138%)}.matrix-cell>.control-border,.matrix-cell>.demo-control{align-self:start}.matrix-cell header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.matrix-cell h2{margin:0;font-size:.98rem;font-weight:650}.matrix-cell p{margin:0;font-size:.78rem;color:#4f6675}.signature{border-radius:999px;padding:.2rem .5rem;font-size:.72rem;letter-spacing:.03em;color:#0f5d77;background:#acecff70}.toolbar{margin-top:1rem;border-radius:var(--combo-radius);border:1px solid rgba(11,36,52,.11);background:linear-gradient(148deg,#ffffff70,#ffffff2e);padding:.85rem;-webkit-backdrop-filter:blur(14px) saturate(138%);backdrop-filter:blur(14px) saturate(138%)}.toolbar header{display:grid;gap:.25rem;margin-bottom:.75rem}.toolbar h3{margin:0;font-size:.96rem;font-weight:650}.toolbar p{margin:0;font-size:.8rem;color:#4f6675}.toolbar-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start}.control-border{display:block;inline-size:100%;border-radius:var(--control-radius)}.dense-border{min-inline-size:140px}.demo-control{border:0;border-radius:var(--control-radius);min-height:50px;inline-size:100%;padding:.55rem .7rem;display:flex;align-items:center;justify-content:space-between;gap:.65rem;text-align:left;color:#122433;background:linear-gradient(156deg,#ffffff8f,#ffffff42);box-shadow:inset 0 0 0 1px #1224331a;-webkit-backdrop-filter:blur(10px) saturate(132%);backdrop-filter:blur(10px) saturate(132%)}.demo-control .control-label{font-weight:600}.demo-control small{font-size:.66rem;color:#4f6675;letter-spacing:.05em}.demo-control:focus-visible,.demo-control input:focus-visible,.demo-control select:focus-visible{outline:none}.button-control,.icon-control{cursor:pointer}.icon-control{justify-content:center}.icon-glyph{font-size:1.1rem;line-height:1}.field-control,.select-control,.toggle-control{cursor:text}.field-control input,.select-control select{inline-size:100%;border:1px solid rgba(18,36,51,.18);border-radius:var(--control-radius);padding:.35rem .45rem;background:#ffffff5c;color:inherit;-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%)}.toggle-control{cursor:pointer}.toggle-control input[type=checkbox]{inline-size:1.05rem;block-size:1.05rem}.demo-control.dense{min-height:42px;padding:.46rem .6rem;font-size:.88rem}.library{--library-panel-bg: linear-gradient(148deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .16));--library-gap-scale: 1;position:relative;overflow:hidden;isolation:isolate;border-radius:var(--control-radius);border:1px solid rgba(14,36,50,.14);background:linear-gradient(144deg,#ffffff70,#fff3);padding:clamp(.9rem,2vw,1.2rem);display:grid;gap:.8rem;-webkit-backdrop-filter:blur(16px) saturate(138%);backdrop-filter:blur(16px) saturate(138%)}.library:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;background:radial-gradient(circle at 9% 7%,rgba(255,255,255,.36) 0%,transparent 34%),radial-gradient(circle at 88% 90%,rgba(150,235,255,.2) 0%,transparent 40%),repeating-linear-gradient(28deg,#ffffff14 0 2px,#fff0 2px 7px)}.library>*{position:relative;z-index:1}.library-header{display:grid;gap:.28rem}.library-header h3{margin:0;font-size:1rem;font-weight:670}.library-header p{margin:0;font-size:.84rem;color:#43606f}.library-search{display:grid;gap:.35rem;font-size:.86rem;color:#2f4f60}.library-search input{inline-size:min(100%,520px);border-radius:var(--control-radius);border:1px solid rgba(17,45,60,.16);padding:.55rem .7rem;color:inherit;background:#ffffff57;-webkit-backdrop-filter:blur(10px) saturate(128%);backdrop-filter:blur(10px) saturate(128%)}.library-search input:focus-visible{outline:2px solid #0d7a97;outline-offset:2px}.library-meta{margin:0;font-size:.8rem;color:#4e6574}.library-list{display:grid;gap:calc(.5rem * var(--library-gap-scale));padding:.4rem;border-radius:var(--control-radius);border:1px solid rgba(17,45,60,.09);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;min-block-size:260px;max-block-size:420px;overflow:auto;scrollbar-gutter:stable}.library-item-host{display:block;inline-size:100%;border-radius:var(--control-radius);background:transparent}.library-button{border:1px solid rgba(17,45,60,.14);border-radius:var(--control-radius);min-height:44px;inline-size:100%;padding:.52rem .75rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;text-align:left;color:#102838;background:transparent;box-shadow:inset 0 0 0 1px #ffffff14,0 2px 8px #10273608;-webkit-backdrop-filter:blur(6px) saturate(124%);backdrop-filter:blur(6px) saturate(124%);cursor:pointer;transition:transform .12s ease,border-color .12s ease,background-color .12s ease}.library-gap{display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:#2f4f60;font-size:.86rem}.library-gap input[type=range]{inline-size:min(320px,56vw)}.library-gap strong{min-inline-size:3.4rem;font-size:.8rem;color:#406170}.library-button .library-label{font-weight:580}.library-button small{font-size:.72rem;color:#496272;letter-spacing:.03em}.library-button:hover{border-color:#0e78965c;background:transparent}.library-button:focus-visible{outline:none}.library-empty{margin:0;font-size:.86rem;color:#4f6675;background:transparent;min-height:96px;display:grid;place-items:center;text-align:center}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:780px){body{background-attachment:scroll,scroll,scroll,scroll,scroll}#app{padding:.7rem}.knobs{gap:.65rem;grid-template-columns:1fr}.knob-group label{width:100%}.knob-group input[type=range]{min-inline-size:100%}.toolbar-row>*{min-inline-size:100%}.library-search input{inline-size:100%}}.reveal-container{--reveal-radius: 90px;--reveal-border-color: rgba(255, 178, 109, .94);--reveal-border-width: 1px;--reveal-border-fade-stop: 72%;--reveal-border-transition: .18s;--reveal-hover-color: rgba(127, 225, 255, .2);--reveal-focus-color: rgba(146, 220, 255, .76);--reveal-focus-width: 2px;--reveal-focus-offset: 3px;--reveal-focus-glow: 14px;--reveal-focus-glow-soft: 8px;--reveal-focus-z-index: 12;--reveal-click-color: rgba(255, 249, 223, .54);--reveal-press-scale: .98;--reveal-press-transition: 96ms;--reveal-ripple-duration: .98s;--reveal-ripple-size: 24px;--reveal-ripple-start-scale: .2;--reveal-ripple-end-scale: 3.2;--reveal-ripple-start-opacity: .52;--reveal-ripple-mid-opacity: .2;--reveal-ripple-end-opacity: .18;--reveal-ripple-core-strength: 74%;--reveal-ripple-mid-strength: 42%;--fx-x: -9999px;--fx-y: -9999px;position:relative}.reveal-border-host{position:relative;border-radius:inherit;isolation:isolate}.reveal-border-host:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--reveal-border-width);pointer-events:none;opacity:0;z-index:2;transition:opacity var(--reveal-border-transition) ease;background:radial-gradient(circle var(--reveal-radius) at calc(var(--fx-x) - var(--reveal-host-left, 0px)) calc(var(--fx-y) - var(--reveal-host-top, 0px)),var(--reveal-border-color),transparent var(--reveal-border-fade-stop));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.reveal-border-host>*{position:relative;z-index:1}.reveal-border-host.reveal-visible:before{opacity:1}.reveal-item{position:relative;isolation:isolate;overflow:clip}.reveal-item>.reveal-press-content{display:inherit;align-items:inherit;justify-content:inherit;gap:inherit;inline-size:100%;min-block-size:100%;transform-origin:center;transition:transform var(--reveal-press-transition) cubic-bezier(.2,.84,.28,1)}.reveal-item:before,.reveal-item:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}.reveal-item:before{opacity:0;transition:opacity .18s ease;background:radial-gradient(circle 110px at var(--item-fx-x, -9999px) var(--item-fx-y, -9999px),var(--reveal-hover-color),transparent 70%)}.reveal-item.reveal-hover:before{opacity:1}.reveal-item:after{opacity:0;transform:scale(var(--reveal-ripple-start-scale));transform-origin:var(--click-origin-x, 50%) var(--click-origin-y, 50%);z-index:2;background:radial-gradient(circle var(--reveal-ripple-size) at var(--click-origin-x, 50%) var(--click-origin-y, 50%),color-mix(in oklab,var(--reveal-click-color) var(--reveal-ripple-core-strength),#ffffff),color-mix(in oklab,var(--reveal-click-color) var(--reveal-ripple-mid-strength),#ffffff) 34%,transparent 76%)}.reveal-item.reveal-pressed{transform:none}.reveal-item.reveal-pressed>.reveal-press-content{transform:scale(var(--reveal-press-scale))}.reveal-container[data-reveal-focus=on] .reveal-item.reveal-focus-visible{z-index:var(--reveal-focus-z-index);outline:var(--reveal-focus-width) solid var(--reveal-focus-color);outline-offset:var(--reveal-focus-offset);box-shadow:0 0 var(--reveal-focus-glow-soft) var(--reveal-focus-color),0 0 var(--reveal-focus-glow) var(--reveal-focus-color)}.reveal-item.reveal-ripple-active:after{animation:reveal-click-follow var(--reveal-ripple-duration) cubic-bezier(.14,.76,.22,1) forwards}.reveal-item.reveal-ripple-static:after{opacity:var(--reveal-ripple-end-opacity);transform:scale(var(--reveal-ripple-end-scale))}.reveal-container[data-reveal-ripple=off] .reveal-item.reveal-pressed:after{animation:none;opacity:0}.reveal-container[data-reveal-ripple=off] .reveal-item.reveal-ripple-active:after,.reveal-container[data-reveal-ripple=off] .reveal-item.reveal-ripple-static:after{animation:none;opacity:0}@keyframes reveal-click-follow{0%{opacity:var(--reveal-ripple-start-opacity);transform:scale(var(--reveal-ripple-start-scale))}64%{opacity:var(--reveal-ripple-mid-opacity)}to{opacity:var(--reveal-ripple-end-opacity);transform:scale(var(--reveal-ripple-end-scale))}}@media(prefers-reduced-motion:reduce){.reveal-border-host:before,.reveal-item:before,.reveal-item>.reveal-press-content{transition:none}.reveal-item.reveal-pressed{transform:none}.reveal-item.reveal-pressed>.reveal-press-content{transform:scale(var(--reveal-press-scale))}.reveal-item.reveal-pressed:after{animation:none;opacity:var(--reveal-ripple-mid-opacity);transform:scale(var(--reveal-ripple-start-scale))}.reveal-item.reveal-ripple-static:after{opacity:var(--reveal-ripple-end-opacity);transform:scale(var(--reveal-ripple-end-scale))}.reveal-container[data-reveal-focus=on] .reveal-item.reveal-focus-visible{box-shadow:0 0 var(--reveal-focus-glow-soft) var(--reveal-focus-color),0 0 var(--reveal-focus-glow) var(--reveal-focus-color)}}