.demo-page{--ink:#0c0709;--card-edge:rgba(255,255,255,0.1);--text:#f7f1f1;--muted:#b39a9c;--muted-dim:#8a7477;--red:#e4322f;--glass:rgba(255,255,255,0.06);--glass-strong:rgba(255,255,255,0.1);--radius-card:26px;--radius-control:16px;min-height:100vh;flex-direction:column;gap:18px;padding:28px 20px 48px;color:var(--text);font-family:var(--font-inter),ui-sans-serif,system-ui,-apple-system,sans-serif}.demo-intro,.demo-page{display:flex;align-items:center}.demo-intro{width:100%;max-width:720px;justify-content:space-between;gap:16px}.demo-intro h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}.demo-intro p{margin:4px 0 0;font-size:13px;color:var(--muted)}.demo-back{flex-shrink:0;padding:8px 14px;border:1px solid var(--card-edge);border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none}.demo-back:hover{color:var(--text);border-color:rgba(255,255,255,.25)}.recorder-window{width:100%;max-width:720px}.recorder-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px;overflow:hidden;border-radius:var(--radius-card);border:1px solid var(--card-edge);background:radial-gradient(120% 90% at 50% -10%,rgba(228,50,47,.42),transparent 62%),radial-gradient(100% 70% at 100% 100%,rgba(141,20,18,.34),transparent 60%),rgba(16,9,11,.9);backdrop-filter:blur(26px) saturate(150%);box-shadow:0 26px 60px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.09)}.recorder-card button:disabled{cursor:default;opacity:.5}.recorder-card button{cursor:pointer;font-family:inherit;color:inherit}.recorder-body{gap:10px}.recorder-body,.recorder-footer{display:flex;flex-direction:column}.recorder-footer{gap:8px;padding-top:2px}.recorder-head{justify-content:space-between}.recorder-head,.recorder-identity{display:flex;align-items:center;gap:10px}.recorder-identity{min-width:0}.recorder-identity p{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}.recorder-identity span{font-size:12px;color:var(--muted)}.recorder-dot{width:9px;height:9px;border-radius:999px;background:var(--muted-dim);flex-shrink:0}.recorder-dot.live{background:var(--red);box-shadow:0 0 0 4px rgba(228,50,47,.24);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.source-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border:1px solid var(--card-edge);border-radius:var(--radius-control);background:var(--glass);color:var(--muted);font-size:11.5px;font-weight:600;transition:background .12s ease,border-color .12s ease,color .12s ease}.source-tile:hover:not(:disabled){background:var(--glass-strong);color:var(--text)}.source-tile.selected{border-color:rgba(228,50,47,.75);background:rgba(228,50,47,.18);color:var(--text)}.source-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.source-summary{display:flex;align-items:center;justify-content:center;gap:8px;margin:-2px 0 0;font-size:12px;color:var(--muted);text-align:center}.camera-stage{position:relative;height:200px;border-radius:22px;background:rgba(0,0,0,.5);overflow:hidden;flex-shrink:0;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .26s ease}.camera-stage:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(150deg,rgba(255,255,255,.4),rgba(228,50,47,.32) 46%,rgba(255,255,255,.06));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6;transition:opacity .26s ease}.camera-stage.is-live{box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 30px -8px rgba(228,50,47,.45),0 0 0 1px rgba(255,255,255,.09)}.camera-stage.is-live:after{opacity:1}.camera-preview{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:0;transition:opacity .34s ease}.camera-stage.is-live .camera-preview{opacity:1}.camera-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 22%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 38%)}.camera-chip{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(16,9,11,.55);backdrop-filter:blur(14px) saturate(160%);font-size:10.5px;font-weight:600;color:rgba(255,255,255,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.camera-chip-dot{width:5px;height:5px;flex-shrink:0;border-radius:999px;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}.camera-waking{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.camera-waking p{margin:0;font-size:11px;color:var(--muted)}.camera-waking-ring{width:22px;height:22px;border-radius:999px;border:2px solid rgba(255,255,255,.14);border-top:2px solid var(--red);animation:camera-spin .72s linear infinite}@keyframes camera-spin{to{transform:rotate(1turn)}}.meter-track{height:4px;margin:-4px 2px 0;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;flex-shrink:0}.meter-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#ff8a5b,var(--red));transform-origin:left center;transition:transform 90ms linear}.select-field{position:relative;display:flex;align-items:center;gap:10px;padding:0 12px;height:46px;border:1px solid var(--card-edge);border-radius:var(--radius-control);background:var(--glass)}.select-icon{display:grid;place-items:center;color:var(--muted);flex-shrink:0}.select-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.select-field select{flex:1;min-width:0;appearance:none;border:0;background:transparent;color:inherit;font-family:inherit;font-size:13px;font-weight:500;outline:none}.select-field select option{color:#12090b}.select-chevron svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;height:46px;border:1px solid var(--card-edge);border-radius:var(--radius-control);background:var(--glass);font-size:13px;font-weight:500;cursor:pointer}.toggle-row input{position:absolute;opacity:0;pointer-events:none}.toggle-track{position:relative;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.16);transition:background .14s ease;flex-shrink:0}.toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:#fff;transition:transform .14s ease}.toggle-row input:checked~.toggle-track{background:var(--red)}.toggle-row input:checked~.toggle-track .toggle-thumb{transform:translateX(18px)}.record-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border:0;border-radius:999px;background:linear-gradient(180deg,#f04a41,var(--red));color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;box-shadow:0 12px 26px rgba(228,50,47,.34);flex-shrink:0}.record-button:hover:not(:disabled){filter:brightness(1.06)}.record-glyph{width:16px;height:16px;border-radius:999px;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}.record-button.recording{background:linear-gradient(180deg,#2a1416,#1c0d0f);border:1px solid rgba(228,50,47,.6);box-shadow:none}.record-button.recording .record-glyph{border-radius:4px;background:var(--red);box-shadow:none}.limit-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-dim)}.limit-warning{color:#ffb4a2}.limit-track{height:3px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.limit-fill{height:100%;border-radius:999px;background:var(--red);transform-origin:left center}.error-banner{background:rgba(228,50,47,.16);color:#ffd8d2}.error-banner,.notice-banner{margin:0;padding:9px 11px;border-radius:12px;font-size:11.5px;line-height:1.45}.notice-banner{background:rgba(255,255,255,.07);color:var(--muted)}.share-banner{display:flex;align-items:center;gap:8px;margin:0;padding:9px 11px;border-radius:12px;background:rgba(74,222,128,.12);font-size:11.5px;line-height:1.45;color:#cdf7d9}.share-banner a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-copy{margin-left:auto;flex-shrink:0;padding:4px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;font-size:11px;font-weight:600}.countdown-overlay{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(8,5,6,.82);backdrop-filter:blur(6px)}.countdown-number{font-size:92px;font-weight:700;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}.countdown-hint{font-size:11.5px;color:var(--muted)}@media (max-width:560px){.demo-intro{flex-direction:column;align-items:flex-start}}