:root{color-scheme:dark;--bg:#080808;--surface:#1a1a1a;--ink:#f8f6f3;--muted:#aaa7a3;--line:#333;--accent:#efeee9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,input{touch-action:manipulation}button,a{color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c3d8ff;outline-offset:4px}button{border:0}button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(2.5rem,9vw,3.5rem);line-height:1.03;letter-spacing:-.06em;overflow-wrap:anywhere}h2{font-size:2.15rem;line-height:1.12;letter-spacing:-.04em}p{line-height:1.5}input{width:100%;border:1px solid #8887;background:#ffffff12;color:#fff;border-radius:16px;padding:17px 18px;font-size:1rem}input::placeholder{color:#ccc}.button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border-radius:18px;background:var(--accent);color:#101010;font-size:1rem;font-weight:600;text-decoration:none;padding:16px 20px}.button.secondary{background:#ffffff14;color:var(--ink);border:1px solid #ffffff17}.button.danger{background:#e8524920;color:#ffb6b0}.text-button{padding:12px;background:none;font-size:.95rem;color:var(--muted)}.icon-button{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffffff12}.muted,.meta{color:var(--muted)}.meta{font-size:.875rem;line-height:1.5}.brand{font:2.1rem/1 Georgia,serif;letter-spacing:-.09em;text-decoration:none}.welcome{max-width:440px;min-height:100svh;margin:auto;padding:80px 28px 32px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:28px}.welcome .brand{margin-bottom:44px}.welcome>p{color:var(--muted)}.notice{padding:20px;color:#eee;background:#222}.error{padding:14px 16px;border-radius:14px;color:#ffb9b4;background:#78281c40;line-height:1.45}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;padding-top:max(16px,env(safe-area-inset-top))}.topbar .actions{display:flex;gap:8px}.invite{position:relative;isolation:isolate;min-height:100svh;max-width:600px;margin:auto;display:flex;flex-direction:column;overflow:hidden}.invite>.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}.invite:before{content:"";position:absolute;inset:0;background:linear-gradient(#0006,#0000 22%,#0007 43%,#000e 75%,#080808);z-index:-1}.invite-content{margin-top:auto;padding:100px 26px max(26px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:600}.invite h1{max-width:460px}.invite .host{font-family:Georgia,serif;font-style:italic;font-size:1.2rem;color:#dfdfdd}.facts{display:flex;gap:10px;flex-wrap:wrap}.pill{background:#ffffff16;border:1px solid #ffffff18;border-radius:99px;padding:9px 13px;font-size:.875rem}.join-form{display:grid;gap:10px;margin-top:12px}.join-form label{font-size:.875rem;color:#ddd}.invite .links{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.875rem;color:#c5c5c5}.album{max-width:700px;margin:auto;min-height:100svh;padding-bottom:calc(130px + env(safe-area-inset-bottom))}.album-head{padding:32px 24px 26px;display:grid;gap:15px}.album-head h1{font-size:2.7rem}.album-cover{float:right;width:68px;height:86px;object-fit:cover;border-radius:8px;transform:rotate(5deg);margin-left:20px}.status-strip{display:flex;justify-content:space-between;gap:16px;padding:16px 24px;border-block:1px solid #282828;font-size:.875rem;color:var(--muted)}.section-label{padding:26px 24px 16px;font-family:Georgia,serif;font-size:1.5rem;letter-spacing:-.04em}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.memory{padding:0;background:#262522;position:relative;aspect-ratio:3/4;overflow:hidden}.memory img{width:100%;height:100%;object-fit:cover;display:block}.memory .caption{position:absolute;bottom:0;left:0;right:0;text-align:left;padding:20px 9px 9px;background:linear-gradient(transparent,#000a);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.memory.developing:after{content:"Developing";position:absolute;inset:0;display:grid;place-items:center;background:#0003;color:#ddd;font-size:.75rem}.empty{padding:60px 28px;text-align:center;display:grid;justify-items:center;gap:14px;color:var(--muted)}.empty svg{width:42px;height:42px;fill:none;stroke:#aaa;stroke-width:1}.empty h2{color:var(--ink);font-size:1.7rem}.bottom-dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,700px);padding:18px 24px max(20px,env(safe-area-inset-bottom));background:linear-gradient(#08080800,#080808 20%);z-index:5;display:grid;gap:8px}.bottom-dock .meta{text-align:center}.load-more{margin:22px auto;display:block}.voice-list{padding:0 20px;display:grid;gap:10px}.voice-row{padding:18px;background:#191919;border-radius:16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left}.voice-row .play{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ddd;color:#111}.voice-row .play svg{width:20px;height:20px}.voice-row p{font-family:Georgia,serif;font-size:1.2rem}.voice-row .meta{font-size:.875rem}.capture-screen{min-height:100svh;max-width:600px;margin:auto;display:flex;flex-direction:column}.viewfinder{position:relative;aspect-ratio:3/4;width:calc(100% - 32px);margin:8px 16px 20px;background:#242424;overflow:hidden;border-radius:3px;display:grid;place-items:center}.viewfinder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.viewfinder .hint{padding:32px;text-align:center;z-index:1}.viewfinder.flash:after{content:"";position:absolute;inset:0;background:#fff;animation:flash .32s forwards}.camera-controls{display:flex;align-items:center;justify-content:space-around;gap:20px;padding:10px 20px 20px}.shutter{height:84px;width:84px;flex-shrink:0;border-radius:50%;border:3px solid #eee;box-shadow:inset 0 0 0 5px #090909;background:#eee}.counter{text-align:center;min-width:60px}.counter strong{display:block;font:2.2rem Georgia,serif}.counter span{font-size:.75rem;color:#aaa}.capture-foot{padding:12px 24px 28px;margin-top:auto;text-align:center}.tape-stage{padding:35px 24px 25px;display:grid;gap:24px;text-align:center;justify-items:center}.tape-stage .tape-asset{width:min(100%,380px);aspect-ratio:1.42;object-fit:contain;filter:drop-shadow(0 22px 20px #0008)}.tape-stage h1{font-size:2.4rem;max-width:430px}.timer{font:2rem ui-monospace,monospace;font-variant-numeric:tabular-nums}.waveform{height:44px;display:flex;gap:4px;align-items:center;justify-content:center}.waveform i{display:block;width:4px;height:8px;border-radius:4px;background:#efeee9;transform-origin:center}.recording .waveform i{animation:wave .6s ease-in-out infinite alternate}.recording .waveform i:nth-child(3n){animation-delay:-.2s}.recording .waveform i:nth-child(2n){animation-delay:-.4s}.record-button{width:82px;height:82px;border-radius:50%;background:#ee5d4e;box-shadow:0 0 0 6px #ee5d4e20;margin:8px}.record-button .stop{display:block;background:white;width:26px;height:26px;border-radius:5px;margin:auto}.record-button svg{width:32px;height:32px}.record-actions{padding:0 24px 28px;display:grid;justify-items:center;gap:14px}.record-actions audio{width:100%;margin-bottom:8px}#toast{position:fixed;bottom:140px;left:50%;transform:translateX(-50%);max-width:min(90vw,440px);padding:14px 20px;border-radius:16px;background:#eceae3;color:#111;box-shadow:0 8px 40px #0006;z-index:30;font-size:.95rem}dialog{color:var(--ink);background:#181818;border:1px solid #393939;border-radius:24px;padding:24px;width:min(94vw,520px);max-height:88svh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.sheet-head h2{font-size:1.9rem}.sheet-body{display:grid;gap:16px}.sheet-body img.full-photo{width:100%;height:auto;max-height:58svh;object-fit:contain;border-radius:5px}.sheet-body audio{width:100%}.queue-item{border:1px solid #383838;border-radius:14px;padding:15px;display:grid;gap:8px}.queue-actions{display:flex;flex-wrap:wrap;gap:6px}.queue-actions button{background:#333;border-radius:9px;padding:10px 13px;font-size:.875rem}.link-list{display:grid;gap:18px}.offline{background:#564220;padding:11px 20px;font-size:.875rem;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes flash{to{opacity:0}}@keyframes wave{to{transform:scaleY(3)}}@media(prefers-reduced-motion:no-preference){.invite-content,.album-head,.tape-stage{animation:appear .45s ease-out}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(min-width:800px){.invite{min-height:min(100svh,980px);border-inline:1px solid #333}.album,.capture-screen{border-inline:1px solid #252525}.grid{gap:5px}.invite-content{padding-inline:40px}.viewfinder{max-height:65svh;width:auto;align-self:center;max-width:calc(100% - 32px);min-width:260px}.topbar{padding-inline:26px}}@media(max-height:700px){.invite-content{padding-top:50px}.tape-stage{padding-top:12px;gap:16px}.tape-stage .tape-asset{max-height:180px}.viewfinder{max-height:55svh}}

/* Match the native tape surface and keep camera preview/capture crops identical. */
.viewfinder{width:min(calc(100% - 32px),48.75svh);max-height:none;align-self:center;min-width:0}
.topbar>.eyebrow{max-width:60%;text-align:center;overflow-wrap:anywhere}.album-head h1{overflow-wrap:anywhere}
.tape-stage{gap:18px}.tape-card{width:225px;height:280px;display:grid;place-items:center;border-radius:35px;background:color-mix(in srgb,var(--tape-accent) 12%,transparent)}
.tape-stage .tape-asset{width:165px;height:246px;aspect-ratio:auto;max-height:none;transform:rotate(-3deg)}
.recording .tape-asset{animation:tape-rock 1.3s ease-in-out infinite alternate}.waveform i{background:var(--tape-accent,#efeee9);transition:height .1s ease-out}.recording .waveform i{animation:none}
.record-button{background:var(--tape-accent,#ee5d4e);box-shadow:0 0 0 6px color-mix(in srgb,var(--tape-accent,#ee5d4e) 20%,transparent)}
@keyframes tape-rock{to{transform:rotate(3deg)}}@media(max-height:700px){.viewfinder{width:min(calc(100% - 32px),41.25svh);max-height:none}.tape-card{width:180px;height:224px}.tape-stage .tape-asset{width:132px;height:197px}.tape-stage h1{font-size:2rem}}