:root{
  --rsn-green:#009b57;
  --rsn-green-dark:#007944;
  --rsn-green-soft:#eaf7f0;
  --rsn-ink:#1c1c1c;
  --rsn-text:#33383d;
  --rsn-muted:#70767b;
  --rsn-border:#e3e6e4;
  --rsn-bg:#f6f7f6;
  --rsn-white:#fff;
  --danger:#d92d20;
  --shadow:0 14px 38px rgba(20,31,25,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;color:var(--rsn-ink);background:var(--rsn-bg)}
body:before{content:"";display:block;height:5px;background:var(--rsn-green)}
button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.kiosk-shell{width:min(1080px,100%);margin:0 auto;padding:24px clamp(18px,4vw,48px) 34px}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:14px 0 24px;border-bottom:1px solid var(--rsn-border);margin-bottom:34px}
.brand-logo{display:block;width:clamp(190px,24vw,245px);height:auto;object-fit:contain}
.brand-context{text-align:right;line-height:1.2}
.brand-kicker{display:block;color:var(--rsn-green);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}
.screen{display:none;animation:screenIn .2s ease}
.screen.active{display:block}
@keyframes screenIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.hero{max-width:820px;margin:52px auto 30px;text-align:center}
.hero.compact{margin-top:26px}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:800;color:var(--rsn-green);margin-bottom:12px}
.hero h1{font-size:clamp(38px,5.2vw,62px);line-height:1.02;letter-spacing:-.045em;margin:0;color:var(--rsn-ink)}
.hero p{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--rsn-muted);max-width:720px;margin:17px auto 0}
.hero p strong{color:var(--rsn-ink)}
.panel,.recorder-card{background:var(--rsn-white);border:1px solid var(--rsn-border);box-shadow:var(--shadow);border-radius:18px}
.name-panel{max-width:720px;margin:0 auto;padding:34px}
.name-panel label,.mail-panel label{display:block;font-weight:800;font-size:16px;margin-bottom:10px;color:var(--rsn-text)}
.name-panel input,.mail-panel input{width:100%;border:1.5px solid #cfd4d1;border-radius:8px;padding:17px 18px;font-size:21px;outline:none;background:#fff;transition:border-color .18s ease,box-shadow .18s ease}
.name-panel input:focus,.mail-panel input:focus{border-color:var(--rsn-green);box-shadow:0 0 0 4px rgba(0,155,87,.11)}
.btn{border:0;border-radius:7px;padding:15px 22px;font-weight:800;cursor:pointer;transition:transform .1s ease,opacity .12s ease,background .12s ease,box-shadow .12s ease}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn-xl{min-height:68px;font-size:20px}
.btn-primary{background:var(--rsn-green);color:#fff;box-shadow:0 8px 18px rgba(0,155,87,.18)}
.btn-primary:hover:not(:disabled){background:var(--rsn-green-dark)}
.name-panel .btn{width:100%;margin-top:20px}
.btn-dark{background:#202020;color:#fff}
.btn-dark:hover:not(:disabled){background:#050505}
.btn-secondary{background:#eff2f0;color:#222}
.btn-danger-soft{background:#fff0ee;color:#a9261d}
.full{width:100%;margin-top:16px}
.link-btn{display:block;margin:22px auto 0;background:transparent;border:0;color:#646b67;font-weight:700;padding:10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.recorder-card{max-width:820px;margin:0 auto;padding:30px;overflow:hidden;position:relative}
.recorder-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--rsn-green);opacity:.2;transition:opacity .2s ease,background .2s ease}
.recorder-card.is-recording:before{background:#e02424;opacity:1}
.recording-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.record-indicator{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:#606763;letter-spacing:.01em}
.status-dot{width:12px;height:12px;border-radius:50%;background:#aeb4b0;box-shadow:0 0 0 5px #f0f2f1;flex:0 0 auto}
.is-recording .record-indicator{color:#c11f1f;text-transform:uppercase;letter-spacing:.06em}
.is-recording .status-dot{background:#e02424;box-shadow:0 0 0 5px rgba(224,36,36,.12);animation:recordPulse 1.25s infinite}
@keyframes recordPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.55}}
.timer{font-size:clamp(29px,4.5vw,44px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rsn-ink)}
.waveform-shell{position:relative;background:#f7faf8;border:1px solid #e3ece7;border-radius:12px;padding:34px 16px 12px;height:190px;overflow:hidden;margin-bottom:24px}
.waveform-shell:after{content:"";position:absolute;left:16px;right:16px;top:50%;height:1px;background:#dce4df;pointer-events:none}
.waveform-label{position:absolute;z-index:2;top:12px;left:16px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7a817d}
.waveform-label span{width:7px;height:7px;border-radius:50%;background:var(--rsn-green)}
.is-recording .waveform-label{color:#c11f1f}
.is-recording .waveform-label span{background:#e02424;animation:recordPulse 1.25s infinite}
#waveform-canvas{position:relative;z-index:1;display:block;width:100%;height:138px}
.record-actions{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.btn-record{background:var(--rsn-green);color:#fff}
.btn-record:hover:not(:disabled){background:var(--rsn-green-dark)}
.btn-stop{background:#202020;color:#fff}
.btn-stop:not(:disabled){background:#d52828}
.record-icon{display:inline-block;width:15px;height:15px;border-radius:50%;background:#fff;margin-right:8px;vertical-align:-1px}
.stop-icon{display:inline-block;width:13px;height:13px;background:#fff;margin-right:8px;vertical-align:-1px}
.review-panel,.mail-panel{max-width:760px;margin:0 auto;padding:30px}
.review-panel audio{display:block;width:100%;margin:4px 0 22px}
.review-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.review-panel>.btn-primary{width:100%}
.status{font-size:14px;font-weight:700;margin-top:10px;min-height:20px}
.status.ok{color:#087a45}.status.error{color:#b42318}
.done-hero{margin-bottom:24px}
.success-badge{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;margin:0 auto 18px;background:var(--rsn-green);color:#fff;font-size:38px;font-weight:900;box-shadow:0 9px 22px rgba(0,155,87,.22)}
.mail-heading{display:flex;align-items:center;gap:13px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--rsn-border)}
.mail-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--rsn-green-soft);color:var(--rsn-green);font-size:22px}
.mail-heading strong{display:block;font-size:20px}.mail-heading span:not(.mail-icon){display:block;color:var(--rsn-muted);font-size:13px;margin-top:2px}
.mail-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.privacy-note{font-size:13px;color:#7b817e;line-height:1.45;margin:10px 0 0}
.next-person{display:block;width:min(760px,100%);margin:18px auto 0}
.stand-footer{text-align:center;color:#8a908c;font-size:13px;margin-top:40px;padding-top:20px;border-top:1px solid var(--rsn-border)}
@media(max-width:720px){
  .kiosk-shell{padding:16px 14px 30px}.brandbar{margin-bottom:20px;padding:10px 2px 18px}.brand-context{display:none}.brand-logo{width:205px}.hero{margin-top:28px}.hero.compact{margin-top:20px}.record-actions,.review-actions{grid-template-columns:1fr}.recorder-card{padding:22px 16px}.waveform-shell{height:170px}.waveform-shell canvas{height:120px}.mail-row{grid-template-columns:1fr}.mail-row .btn{min-height:56px}.name-panel,.review-panel,.mail-panel{padding:24px 18px}.recording-header{align-items:flex-start}.record-indicator{font-size:13px;max-width:60%}
}
@media(max-width:420px){.hero h1{font-size:36px}.waveform-shell{height:155px;padding-left:10px;padding-right:10px}.timer{font-size:31px}.btn-xl{font-size:18px}.brand-logo{width:185px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.screen{animation:none}.status-dot,.waveform-label span{animation:none!important}}