/* Interactive rail, pinned to the browser edge. */
body{padding-right:90px}
.demo{--d-bg:#10110f;--d-raised:#1b1c1a;--d-line:#34382e;--d-text:#f0f0e0;--d-muted:#a1a695;--d-accent:#dee888;position:fixed;z-index:50;right:0;top:calc(50% - 163px);width:76px;height:326px;color:var(--d-text);font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px}.demo.paper{--d-bg:#f5f3e9;--d-raised:#e9e8dc;--d-line:#d3d5c4;--d-text:#30382c;--d-muted:#66715d;--d-accent:#576d39}.demo button{color:inherit;font:inherit}.demo button:focus-visible,.demo textarea:focus-visible,.demo input:focus-visible{outline:2px solid var(--d-accent);outline-offset:3px}.demo-shape{position:absolute;inset:0;width:76px;height:326px;fill:var(--d-bg);stroke:#6b725d;stroke-width:1;filter:drop-shadow(-3px 3px 9px #0002);pointer-events:none}.demo-rail{position:relative;display:flex;align-items:center;flex-direction:column;height:100%;padding:34px 0 34px 6px;gap:8px}.demo-grip{border:0;background:none;width:48px;height:24px;flex-shrink:0;cursor:ns-resize;touch-action:none}.demo-grip:before{content:'';display:block;width:17px;height:3px;border-radius:3px;background:var(--d-muted);margin:auto}.demo-control{width:66px;height:58px;flex-shrink:0;padding:3px 0;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:5px}.demo-control:hover .demo-icon,.demo-control[aria-expanded=true] .demo-icon{background:var(--d-raised);border-color:var(--d-accent)}.demo-control small{font-size:10px;font-variant-numeric:tabular-nums}.demo-icon{display:grid;place-items:center;border:2px solid var(--d-line);border-radius:50%;width:34px;height:34px;color:var(--d-accent)}.demo svg.icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.demo-settings{background:none;border:0;min-height:28px;width:40px;color:var(--d-muted)!important}.demo-panel{position:absolute;right:88px;top:0;width:320px;height:490px;max-height:calc(100dvh - 24px);border:1px solid #656c59;border-radius:23px;background:var(--d-bg);box-shadow:0 18px 70px #0003;padding:18px 16px;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}.demo [hidden]{display:none!important}.demo-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-shrink:0}.demo-brand{font-size:22px;font-weight:650;letter-spacing:-1px;display:flex;align-items:center;gap:8px}.demo-brand .mark{color:var(--d-accent);width:18px;height:18px}.demo-close{width:30px;height:30px;border:0;background:none;font-size:23px!important;color:var(--d-muted)!important}.demo-tabs{display:flex;gap:3px;background:var(--d-raised);border-radius:14px;padding:4px;margin-bottom:16px;flex-shrink:0}.demo-tabs button{flex:1;background:none;border:0;color:var(--d-muted);padding:9px 5px;border-radius:11px;font-size:12px}.demo-tabs button[aria-pressed=true]{background:var(--d-line);color:var(--d-text)}.demo-view{flex:1}.demo-dial{width:185px;height:185px;border:3px solid var(--d-accent);border-radius:50%;margin:4px auto 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.demo-dial>span{font-size:10px;letter-spacing:3px;color:var(--d-accent);text-transform:uppercase}.demo-time{font-size:46px;font-weight:300;letter-spacing:-2px;font-variant-numeric:tabular-nums}.demo-dots{font-size:11px;letter-spacing:4px;color:var(--d-accent)}.demo-primary{border:0;border-radius:24px;background:var(--d-accent);color:var(--d-bg)!important;width:100%;padding:13px;font-weight:600!important;font-size:14px!important}.demo-actions{display:flex;justify-content:space-between;margin:12px 0 18px}.demo-actions button{background:none;border:0;color:var(--d-muted);font-size:11px;padding:5px}.demo-footer{font-size:10px;color:var(--d-muted);border-top:1px solid var(--d-line);padding-top:12px;margin-top:16px;line-height:1.6;flex-shrink:0}.demo-help{font-size:12px;color:var(--d-muted);line-height:1.7;margin:0 0 18px}.demo-track{width:100%;text-align:left;display:flex;align-items:center;gap:15px;padding:18px 12px;margin-bottom:8px;border:1px solid var(--d-line);border-radius:12px;background:var(--d-raised)}.demo-track[aria-pressed=true]{border-color:var(--d-accent)}.demo-track .track-name{flex:1}.demo-track small{display:block;font-size:10px;color:var(--d-muted);margin-top:5px}.demo-wave{font-size:22px;color:var(--d-accent)}.demo-volume{display:flex;gap:12px;align-items:center;font-size:11px;color:var(--d-muted);margin-top:24px}.demo-volume input{min-width:0;flex:1;accent-color:var(--d-accent)}.demo textarea{display:block;width:100%;height:155px;resize:vertical;max-height:210px;padding:14px;background:var(--d-raised);border:1px solid var(--d-line);border-radius:12px;color:var(--d-text);font:inherit;line-height:1.7;margin:10px 0 15px}.demo label{font-size:12px}.demo-saved{padding:0;list-style:none;max-height:130px;overflow:auto}.demo-saved li{border-bottom:1px solid var(--d-line);padding:10px 0;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.demo-saved-label{font-size:11px;color:var(--d-muted);margin-top:20px}.demo-settings-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:20px 0}.demo-settings-row input{width:64px;background:var(--d-raised);color:var(--d-text);border:1px solid var(--d-line);border-radius:8px;padding:9px}.demo-settings-row button{border:1px solid var(--d-line);border-radius:15px;padding:8px 16px;background:var(--d-raised)}.demo-toast{position:fixed;bottom:20px;right:98px;background:var(--d-bg);color:var(--d-text);border:1px solid var(--d-line);border-radius:12px;padding:12px 18px;max-width:280px;font-size:12px;box-shadow:0 5px 25px #0002}.demo.playing [data-open=sound] .demo-icon{border-color:var(--d-accent)}
@media(max-width:760px){body{padding-right:82px}.demo-panel{right:88px;width:min(320px,calc(100vw - 100px));padding:15px 12px}.hero,.bright .hero{padding:40px 7% 60px;min-height:490px}.hero h1,.dark h1,.bright h1{font-size:43px}.hero .lead{font-size:14px}.toolbar{padding-right:8px}.tabs button{font-size:10px;padding:8px}.features{grid-template-columns:1fr}.proof{justify-content:flex-start}.demo-dial{width:160px;height:160px;margin-bottom:16px}.demo-time{font-size:40px}.demo-tabs button{font-size:11px}.demo-panel{height:480px}.edge-invite{font-size:11px}.demo-toast{right:88px;max-width:calc(100vw - 106px)}}
@media(prefers-reduced-motion:no-preference){.demo-panel{animation:demo-reveal .18s ease-out}@keyframes demo-reveal{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:translateX(0)}}}

/* Connect the hero invitation to the live rail without covering the page. */
.demo-guide{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;fill:none;stroke:#6d8559;stroke-width:4.5}
.demo-guide[hidden]{display:none}
.guide-line,.guide-arrow{stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round;stroke-linejoin:round;opacity:.88}
.guide-line{stroke-width:4.5}
.guide-arrow{stroke-width:4.8}

@media(prefers-reduced-motion:no-preference){
  .demo-attention .demo-shape{animation:demo-attention 1s ease-out}
  @keyframes demo-attention{0%,100%{filter:drop-shadow(-3px 3px 9px #0002)}35%{filter:drop-shadow(-7px 0 18px #99b35caa)}}
}

@media(max-width:760px){
  body{padding-right:0}
  .rail-invitation .demo{position:absolute;right:-20px}
  .demo-panel{right:16px;width:min(320px,calc(100vw - 32px));height:490px;z-index:3}
  .demo textarea{font-size:16px}
  .demo-settings-row input{font-size:16px}
  .demo-toast{right:16px;max-width:calc(100vw - 32px)}
  .guide-line{stroke-width:3.5}
  .guide-arrow{stroke-width:3.8}
}

#demo-music{display:block;width:100%;height:42px;margin:0 0 14px;color-scheme:dark}
.demo.paper #demo-music{color-scheme:light}
.demo-music-list{max-height:214px;overflow-y:auto;overscroll-behavior:contain;padding:3px}
.demo-music-list .demo-track{padding:12px 10px;gap:10px}
.demo-music-list .track-name{min-width:0;font-size:12px}
.demo-music-list .sound-state{font-size:11px}
.demo-primary{color:var(--d-on-accent,var(--d-bg))!important}
.demo-shape{stroke:var(--d-border,#6b725d)}
.demo-panel{border-color:var(--d-border,#656c59)}
.demo-appearance{border:0;padding:0;margin:20px 0}
.demo-appearance legend{font-size:12px;margin-bottom:12px}
.theme-options{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.theme-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:10px;background:none;min-height:58px;padding:7px 3px;color:inherit;font-size:10px;cursor:pointer}
.theme-options i{display:grid;place-items:center;font-style:normal;width:28px;height:28px;border:1px solid;border-radius:50%;font-size:15px}
.theme-options button[aria-pressed=true]{border-color:var(--d-accent,#576742);background:var(--d-raised,#edf1e8)}
.theme-options button:hover{background:var(--d-raised,#edf1e8)}
/* The Mac screen is now the only home of the working demo. */
body{padding-right:0}
.mac-screen .demo{position:absolute;right:0;z-index:6}
.mac-screen .demo-guide{position:absolute;inset:0;width:100%;height:100%;z-index:5}
.mac-screen .demo-panel{right:88px;width:320px;z-index:8}
.mac-screen .demo-toast{position:absolute;bottom:0;right:88px;width:210px;max-width:none;z-index:9}
@media(max-width:760px){
  body{padding-right:0}
  .mac-screen .demo-panel{right:8px;width:calc(100vw - 80px);max-width:320px;height:490px}
  .mac-screen .demo-toast{right:8px;max-width:calc(100vw - 90px);width:230px}
}
.mac-screen .demo-guide{stroke:#243e2e}
/* Scale the rail silhouette and controls, independently of the opened panel. */
.mac-screen .demo{transform:none;width:calc(76px * var(--rail-scale,.4));height:calc(326px * var(--rail-scale,.4))}
.mac-screen .demo-shape{width:100%;height:100%}
.mac-screen .demo-rail{position:absolute;top:0;right:0;width:76px;height:326px;transform:scale(var(--rail-scale,.4));transform-origin:top right}
.mac-screen .demo-panel{right:calc(76px * var(--rail-scale,.4) + 12px)}

/* Match native panel-to-rail proportions instead of rendering a full-size browser panel. */
.mac-screen .demo-panel{width:320px;min-width:320px;max-width:320px;height:490px;min-height:490px;max-height:490px;transform:scale(var(--panel-scale,.4));transform-origin:top right;animation:none;overflow:auto}