.demo-folie{--window:#ebebeb;--surface:#fff;--well:#e2e2e2;--active:#d2d2d2;--ink:#24242a;--muted:#4e4e57;--dim:#5c5c65;--mark:#8a8a94;--brand:#142bca;--tint:#eceefb;--tint-deep:#dee1f8;--hairline:#33333338;--ease:cubic-bezier(0, 0, .58, 1);--serif:"New York", ui-serif, "Iowan Old Style", Georgia, serif;background:var(--window);width:100%;height:600px;color:var(--ink);-webkit-font-smoothing:antialiased;text-align:left;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border-radius:12px;font:400 13px/1.4 -apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Inter,system-ui,sans-serif;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 .5px #0000002e,0 22px 60px -20px #00000047;container:folie/inline-size}.demo-folie *,.demo-folie :before,.demo-folie :after{box-sizing:border-box}.demo-folie p,.demo-folie dl,.demo-folie dd{margin:0}.demo-folie button{color:inherit;font:inherit;cursor:pointer;text-align:inherit;background:0 0;border:0;margin:0;padding:0}.demo-folie button:focus-visible,.demo-folie .fl-input:focus-visible,.demo-folie .fl-note:focus-visible{outline:none}.demo-folie button:focus-visible{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--brand);border-radius:6px}.demo-folie .fl-serif{font-family:var(--serif)}.demo-folie .fl-dim{color:var(--dim)}.demo-folie .fl-side{flex-direction:column;flex:none;width:208px;min-height:0;display:flex}.demo-folie .fl-brand{align-items:center;gap:7px;padding:22px 16px;display:flex}.demo-folie .fl-mark{flex:none}.demo-folie .fl-name{font-size:15px;font-weight:600}.demo-folie .fl-beta{box-shadow:inset 0 0 0 1px var(--hairline);color:var(--muted);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:500}.demo-folie .fl-rail{scrollbar-width:none;flex:1;min-height:0;padding-bottom:16px;overflow-y:auto;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),#0000);mask-image:linear-gradient(#000 calc(100% - 28px),#0000)}.demo-folie .fl-rail::-webkit-scrollbar{display:none}.demo-folie .fl-group{color:var(--mark);padding:0 16px 6px;font-size:14px}.demo-folie .fl-gap{padding-top:22px}.demo-folie .fl-row{width:100%;color:var(--ink);align-items:baseline;gap:6px;padding:6px 16px;font-size:14px;display:flex}.demo-folie .fl-row.fl-sub{color:var(--muted);padding:4px 16px 4px 30px;font-size:13px}.demo-folie .fl-row[aria-pressed=true]{color:var(--brand);font-weight:500}@media (hover:hover){.demo-folie .fl-row:hover{color:var(--brand)}}.demo-folie .fl-row:focus-visible{box-shadow:inset 0 0 0 2px var(--brand);border-radius:9px}.demo-folie .fl-n{color:var(--dim);font-family:var(--serif);font-size:13px;font-weight:400}.demo-folie .fl-foot{border-top:1px solid var(--hairline);color:var(--muted);margin:0 16px;padding:12px 0 16px}.demo-folie .fl-count .fl-serif{color:var(--ink);font-size:15px}.demo-folie .fl-card{background:var(--surface);min-width:0;box-shadow:0 0 0 .5px var(--hairline), 0 1px 3px #0000000f;border-radius:20px;flex-direction:column;flex:1;margin:10px 10px 10px 0;display:flex;position:relative;overflow:hidden}.demo-folie .fl-head{flex:none;padding:16px 24px 12px}.demo-folie .fl-search{align-items:center;gap:12px;display:flex}.demo-folie .fl-field{cursor:text;flex-wrap:wrap;flex:1;align-items:center;gap:4px;min-width:0;display:flex}.demo-folie .fl-input{min-width:6ch;height:44px;color:var(--ink);font-family:var(--serif);letter-spacing:-.01em;background:0 0;border:0;flex:1;padding:0;font-size:30px;font-style:italic}.demo-folie .fl-input::placeholder{color:var(--dim);opacity:1}.demo-folie .fl-chip,.demo-folie .fl-cat{background:var(--well);height:24px;color:var(--ink);white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:0 12px;font-size:13px;display:inline-flex;position:relative}.demo-folie .fl-chip svg{color:var(--dim)}.demo-folie .fl-cat{align-items:baseline;line-height:24px}.demo-folie .fl-cat .fl-serif{font-size:13px}@media (hover:hover){.demo-folie .fl-chip:hover,.demo-folie .fl-cat:hover,.demo-folie .fl-capsule:hover{background:var(--active)}}.demo-folie .fl-chip:focus-visible,.demo-folie .fl-cat:focus-visible,.demo-folie .fl-capsule:focus-visible{border-radius:999px}.demo-folie .fl-key{color:var(--dim);background:#24242a12;border-radius:4px;padding:2px 5px;font-family:inherit;font-size:10px;font-weight:500;line-height:1.2}.demo-folie .fl-clear{width:24px;height:24px;color:var(--dim);border-radius:999px;place-items:center;display:grid}.demo-folie .fl-order{flex:none;position:relative}.demo-folie .fl-capsule{background:var(--well);border-radius:999px;align-items:center;gap:4px;min-height:24px;padding:4px 12px;font-size:13px;display:inline-flex}.demo-folie .fl-capsule svg{color:var(--dim)}.demo-folie .fl-menu{z-index:10;width:218px;box-shadow:0 0 0 .5px var(--hairline), 0 10px 30px #00000029;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff5;border-radius:13px;padding:6px;position:absolute;top:calc(100% + 6px);right:0}.demo-folie .fl-menu-item{border-radius:7px;align-items:center;gap:6px;width:100%;min-height:28px;padding:4px 8px;font-size:13px;display:flex}@media (hover:hover){.demo-folie .fl-menu-item:hover{background:var(--tint-deep)}}.demo-folie .fl-check{width:14px;color:var(--brand);font-size:12px}.demo-folie .fl-rule{background:var(--hairline);height:1px;margin-top:8px}.demo-folie .fl-cats{flex-wrap:wrap;gap:4px;margin-top:10px;display:flex}.demo-folie .fl-scroll{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#24242a38 transparent;flex:1;min-height:0;position:relative;overflow-y:auto}.demo-folie .fl-grid{width:100%;position:relative}.demo-folie .fl-tile{position:absolute;top:0;left:0}.demo-folie .fl-open{border-radius:var(--r);background:var(--well);width:100%;height:100%;display:block;position:relative;overflow:hidden;box-shadow:0 0 0 .5px #24242a1a}.demo-folie .fl-open img{object-fit:cover;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}@media (hover:hover){.demo-folie .fl-tile:hover .fl-open{transform:scale(1.012);box-shadow:0 0 0 .5px #24242a1a,0 6px 32px #0000002e}}.demo-folie .fl-open:focus-visible{box-shadow:0 0 0 2px var(--brand);border-radius:var(--r)}.demo-folie .fl-star{border-radius:max(6px, calc(var(--r) - 8px));-webkit-backdrop-filter:blur(18px)saturate(1.4);backdrop-filter:blur(18px)saturate(1.4);color:#24242ac7;opacity:0;background:#ffffff3d;place-items:center;width:32px;height:32px;display:grid;position:absolute;top:8px;right:8px;box-shadow:inset 0 0 0 .5px #ffffff57,0 0 0 .5px #24242a17,0 1px 5px #00000024}.demo-folie .fl-star[aria-pressed=true]{color:var(--brand);background:#ffffff57}.demo-folie .fl-star:focus-visible{border-radius:max(6px, calc(var(--r) - 8px))}.demo-folie .fl-tile:hover .fl-star,.demo-folie .fl-tile:focus-within .fl-star,.demo-folie .fl-tile.is-fav .fl-star{opacity:1}.demo-folie .fl-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;display:flex;position:absolute;inset:0}.demo-folie .fl-empty-title{font-family:var(--serif);font-size:19px}.demo-folie .fl-empty-body{max-width:34ch;color:var(--dim)}.demo-folie .fl-light{z-index:20;grid-template-columns:300px minmax(0,1fr);display:grid;position:absolute;inset:0}.demo-folie .fl-light>.fl-meta{grid-area:1/1}.demo-folie .fl-light>.fl-shot{grid-area:1/2}.demo-folie .fl-scrim{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);cursor:zoom-out;background:#ffffff9e;border-radius:0;position:absolute;inset:0}.demo-folie .fl-shot{pointer-events:none;place-items:center;min-height:0;padding:44px;display:grid;position:relative}.demo-folie .fl-shot img{pointer-events:auto;border-radius:16px;width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:0 0 0 .5px #24242a1a,0 18px 50px #00000038}.demo-folie .fl-meta{background:var(--surface);min-height:0;box-shadow:.5px 0 0 var(--hairline);flex-direction:column;padding:26px;display:flex;position:relative;overflow-y:auto}.demo-folie .fl-meta>*{flex-shrink:0}.demo-folie .fl-controls{gap:6px;margin-bottom:20px;display:flex}.demo-folie .fl-ctl{background:var(--well);width:30px;height:30px;color:var(--muted);border-radius:10px;place-items:center;display:grid}.demo-folie .fl-ctl.is-on{color:var(--brand);background:var(--tint)}.demo-folie .fl-ctl:focus-visible{border-radius:10px}@media (hover:hover){.demo-folie .fl-ctl:hover{background:var(--active)}}.demo-folie .fl-close{margin-left:auto}.demo-folie .fl-eyebrow{color:var(--dim);margin-bottom:3px;font-size:13px}.demo-folie .fl-note{color:#000;width:100%;font:inherit;resize:none;background:0 0;border:0;margin:0 0 8px;padding:0;font-size:15px;line-height:1.35}.demo-folie .fl-note::placeholder{color:var(--mark)}.demo-folie .fl-date{color:var(--dim);font-size:11px}.demo-folie .fl-hair{background:var(--hairline);height:1px;margin:16px 0}.demo-folie .fl-leds{display:grid}.demo-folie .fl-led{gap:12px;padding:5px 0;font-size:12px;display:flex}.demo-folie .fl-led dt{width:76px;color:var(--dim);flex:none}.demo-folie .fl-led dd{color:var(--ink)}.demo-folie .fl-link{color:var(--brand)}@media (hover:hover){.demo-folie .fl-link:hover{text-decoration:underline}}@media (prefers-reduced-motion:no-preference){.demo-folie .fl-tile{transition:transform .28s var(--ease)}.demo-folie .fl-open{transition:transform .18s var(--ease), box-shadow .18s var(--ease)}.demo-folie .fl-star{transition:opacity .18s var(--ease)}.demo-folie .fl-light{animation:fl-in .18s var(--ease)}.demo-folie .fl-chip,.demo-folie .fl-cat{transition:background-color .16s var(--ease)}}@keyframes fl-in{0%{opacity:0}to{opacity:1}}@media (pointer:coarse){.demo-folie .fl-chip,.demo-folie .fl-cat{height:36px;padding:0 14px;line-height:36px}.demo-folie .fl-capsule{min-height:36px}.demo-folie .fl-clear,.demo-folie .fl-star{width:36px;height:36px}.demo-folie .fl-ctl{width:40px;height:40px}.demo-folie .fl-cats,.demo-folie .fl-field{gap:6px}}@container folie (max-width:700px){.demo-folie .fl-side{display:none}.demo-folie .fl-card{border-radius:16px;margin:8px}.demo-folie .fl-head{padding:12px 14px 10px}.demo-folie .fl-input{height:40px;font-size:24px}.demo-folie .fl-key{display:none}.demo-folie .fl-search{align-items:flex-start}.demo-folie .fl-input{min-width:3ch}.demo-folie .fl-field{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}.demo-folie .fl-field::-webkit-scrollbar{display:none}.demo-folie .fl-chip{flex:none}.demo-folie .fl-light{grid-template-rows:44% minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.demo-folie .fl-light>.fl-shot{grid-area:1/1}.demo-folie .fl-light>.fl-meta{grid-area:2/1}.demo-folie .fl-shot{padding:16px}.demo-folie .fl-meta{box-shadow:0 -.5px 0 var(--hairline);padding:16px}.demo-folie .fl-controls{margin-bottom:12px}}