.demo{min-width:0;max-width:650px}.demo-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}.demo-tabs button{font-size:11px;padding:7px 11px;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface);color:var(--muted);cursor:pointer}.demo-tabs button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}.demo-title{font-size:18px;font-weight:600;letter-spacing:-.4px;margin-bottom:6px}.demo-hint{font-size:11px;color:var(--muted);margin-bottom:18px}.demo-stage{min-height:368px}.journey-steps{list-style:none;padding:0;margin:0 0 15px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;font-size:10px;color:var(--muted)}.journey-steps li{display:flex;align-items:center;gap:5px;transition:color .2s}.journey-steps li span{display:grid;place-items:center;border:1px solid var(--line);width:19px;height:19px;flex:none;border-radius:50%;font-family:monospace}.journey-steps li.active{color:var(--ink);font-weight:600}.journey-steps li.active span{border-color:var(--accent);background:var(--accent);color:var(--surface)}
.youtube-window,.app-window,.direct-form,.batch-window{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:0 12px 30px #2425220b;position:relative}.browser-toolbar{display:flex;align-items:center;gap:10px;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 12px;font-size:10px}.browser-dots{font-size:7px;letter-spacing:2px;color:var(--muted)}.browser-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;color:var(--muted);background:var(--surface);border-radius:4px;padding:5px 8px}.extension-icon{width:32px;height:30px;border:1px solid var(--line);background:var(--surface);border-radius:6px;cursor:pointer;flex:none}.extension-icon img{display:block;margin:auto}.youtube-surface{padding:14px 18px 12px}.youtube-label{font-size:12px;font-weight:600;margin-bottom:8px}.youtube-label:before{content:'▶';display:inline-grid;place-items:center;background:#d54234;color:white;width:22px;height:15px;font-size:8px;border-radius:4px;margin-right:5px}.youtube-player{position:relative;height:159px;overflow:hidden;background:var(--ink);border-radius:6px}.youtube-thumbnail{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block}.video-play{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:white;text-shadow:0 1px 5px #000}.youtube-surface h3{font-size:12px;margin:9px 0 2px;line-height:1.35}.youtube-surface p{font-size:10px;color:var(--muted);margin:0}.source-link{display:inline-block;font-size:10px;color:var(--muted);margin-top:5px}
.extension-pop{position:absolute;right:11px;top:49px;width:234px;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:16px;border-radius:var(--radius);box-shadow:0 9px 25px #24252222;animation:arrive .4s ease both}.extension-pop-title{display:flex;align-items:center;gap:7px;font-size:12px}.extension-pop p{font-size:11px;line-height:1.4;color:var(--muted);margin:12px 0}.extension-pop button{display:flex;justify-content:space-between;width:100%;font-size:11px;cursor:pointer;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface);color:var(--ink);padding:9px 10px;margin-top:7px}.extension-pop .extension-download{background:var(--accent);color:var(--surface);border-color:var(--accent);font-weight:600}.highlight{outline:2px solid var(--accent);outline-offset:3px}.demo-pointer{position:absolute;color:var(--ink);font-size:26px;filter:drop-shadow(1px 1px 0 white);z-index:2;right:23px;top:38px;pointer-events:none}.demo-pointer[data-target=download]{top:143px;right:43px}
.app-window{min-height:312px;animation:arrive .5s ease both}.app-top{display:flex;gap:8px;align-items:center;padding:16px 17px;border-bottom:1px solid var(--line);font-size:12px}.app-top>span{margin-left:auto;color:var(--muted)}.app-layout{display:grid;grid-template-columns:116px 1fr}.app-sidebar{background:var(--paper);padding:20px 10px 10px;border-right:1px solid var(--line);font-size:10px;display:flex;flex-direction:column;gap:11px;color:var(--muted)}.app-sidebar span{padding:5px 6px;border-radius:6px}.app-sidebar span.active{color:var(--accent-ink);background:var(--accent-soft)}.app-content{padding:22px 19px;min-width:0}.app-heading{display:flex;align-items:center;gap:8px;margin-bottom:18px}.app-heading h3{font-family:var(--display);font-weight:900;font-size:12px;margin:0;overflow-wrap:anywhere}.app-count{font-size:10px;background:var(--accent-soft);color:var(--accent-ink);border-radius:4px;padding:1px 6px}.app-media{display:flex;align-items:center;gap:11px;min-width:0;margin-bottom:13px}.app-thumb{width:62px;height:45px;object-fit:cover;border-radius:6px;flex:none}.app-media>div{min-width:0}.app-media strong{font-size:11px;font-weight:600;display:block;line-height:1.4}.app-media span,.app-media small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.app-media small{color:var(--success)}.progress{height:4px;background:var(--line);margin:7px 0;border-radius:3px;overflow:hidden}.progress span{height:4px;background:var(--accent);display:block;width:0;transition:width .6s ease}.app-folder{font-size:10px;color:var(--muted);margin-top:17px}.app-receipt{font-size:10px;color:var(--success);margin:19px 0 0}
.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:18px}.demo-controls p{font-size:10px;color:var(--muted);margin:0}.demo-controls>div{display:flex;gap:6px}.demo-controls button{font-size:10px;color:var(--muted);padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;white-space:nowrap}.demo-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.direct-form,.batch-window{min-height:310px;padding:0 18px 20px}.direct-form .app-top,.batch-window .app-top{margin:0 -18px 20px}.desk-label{font-size:11px;color:var(--muted);margin:12px 0 7px}.field{border:1px solid var(--line);border-radius:var(--control-radius);background:var(--paper);padding:12px;color:var(--ink)}.direct-form .field{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;min-height:40px}.folder-choice{display:flex;justify-content:space-between;padding:10px;border:1px solid var(--line);border-radius:var(--control-radius);font-size:11px}.folder-choice span:last-child{color:var(--muted)}.demo-primary,.batch-actions button{font-size:11px;background:var(--accent);color:var(--surface);border:1px solid var(--accent);padding:9px 12px;border-radius:var(--control-radius);cursor:pointer}.demo-primary{margin:17px 0 8px}.direct-result{display:flex;align-items:center;gap:10px;margin-top:15px;animation:arrive .4s ease both}.direct-result strong,.direct-result span,.direct-result small{display:block;font-size:10px;line-height:1.5}.direct-result span{color:var(--muted)}.direct-result small{color:var(--success)}.batch-window h3{font-family:var(--display);font-size:15px;font-weight:900;margin-bottom:20px}.batch-window .app-media{padding:10px 0;border-bottom:1px solid var(--line);animation:arrive .4s ease both}.batch-actions{display:flex;justify-content:space-between;gap:10px;margin-top:24px}.batch-actions button:first-child{background:var(--surface);border-color:var(--line);color:var(--ink)}.batch-actions button:disabled{opacity:.5;cursor:default}
.demo [hidden]{display:none!important}.reveal{opacity:1}.motion-ready .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}.motion-ready .reveal.visible{opacity:1;transform:none}.demo[data-paused=true] *{animation:none!important;transition:none!important}.demo[data-paused=true] .extension-pop,.demo[data-paused=true] .app-window,.demo[data-paused=true] .direct-result,.demo[data-paused=true] .app-media{opacity:1;transform:none}@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.examples{display:grid;grid-template-columns:1fr 1fr;gap:20px}.example{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}.example-thumbnail{width:100%;height:215px;object-fit:cover;display:block}.example>div{padding:20px}.example h3{font-size:16px;line-height:1.35;margin-bottom:7px}.example p{font-size:12px;color:var(--muted);margin-bottom:14px}.example a{font-size:11px}.example .project-link{display:block;margin-top:8px;color:var(--muted)}.source-note{max-width:860px;margin:20px 0 0}.source-disclosure{margin-top:22px;color:var(--muted)}.source-disclosure summary{font-size:11px}.source-disclosure .examples{margin-top:18px}
.install-section>div:first-child{max-width:700px}.install-section>div:first-child p,.account-section p{color:var(--muted);font-size:14px;max-width:540px}.install-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:26px 0 18px}.install-option{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.install-option>span:first-child{font-size:12px;color:var(--muted)}.availability{font-size:11px;color:var(--muted);display:block}.button:disabled{opacity:.55;cursor:not-allowed;transform:none}.button:disabled:hover{background:var(--accent);border-color:var(--accent);color:var(--surface)}.button.secondary:disabled:hover{background:var(--surface);border-color:var(--line);color:var(--ink)}.account-section{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}.account-action{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.account-action .micro{margin:0}
.guide-steps{margin-top:30px}.guide-steps section{border-top:1px solid var(--line);padding-top:22px}.guide-steps h2{margin-top:0}.article .guide-tip{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:18px}.article .guide-tip h2{font-family:var(--body);font-size:16px;font-weight:600;margin:0 0 7px}.article .guide-tip p{font-size:13px;margin:0}.guide-actions{margin:24px 0}
@media(max-width:900px){.install-options{grid-template-columns:1fr 1fr}.demo-stage{min-height:355px}.youtube-player{height:190px}}
@media(max-width:580px){.demo-tabs button{font-size:10px;padding:7px 9px}.demo-title{font-size:17px}.demo-hint{font-size:10px}.journey-steps{gap:3px;font-size:8px}.journey-steps li{gap:3px;flex-direction:column;align-items:flex-start}.journey-steps li span{width:17px;height:17px}.youtube-surface{padding:11px 12px}.youtube-player{height:150px}.browser-toolbar{gap:6px;padding:7px 9px}.browser-dots{display:none}.extension-pop{width:216px;right:8px;top:46px;padding:13px}.demo-pointer[data-target=download]{top:132px;right:35px}.app-layout{grid-template-columns:84px 1fr}.app-sidebar{padding:17px 5px;font-size:8px;gap:9px}.app-content{padding:20px 12px}.app-heading h3{font-size:10px}.app-thumb{width:48px;height:37px}.app-media{gap:8px}.app-media strong{font-size:10px}.app-media span,.app-media small{font-size:9px}.app-folder{font-size:9px}.demo-controls{align-items:flex-start}.demo-controls p{max-width:150px;font-size:9px}.demo-controls button{font-size:9px;padding:4px 6px}.examples,.install-options,.account-section{grid-template-columns:1fr}.example-thumbnail{height:200px}.account-section{gap:18px}.install-options{gap:12px;margin:20px 0}.install-option{padding:20px}.demo-stage{min-height:375px}.nav{gap:8px}.nav a{font-size:11px}.lang{padding-left:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-ready .reveal{opacity:1;transform:none}}