:root{--ink:#17221d;--paper:#f5f6f0;--mint:#d3f3e5;--pink:#f487ba;--line:#ccd3c9;--lime:#d9f875}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px}
.shell{max-width:1320px;margin:auto;padding:0 48px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #a32664;outline-offset:5px}
button:disabled{cursor:default}
header{display:flex;align-items:center;gap:40px;min-height:110px;border-bottom:1px solid var(--ink)}
.brand{position:relative;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:31px;line-height:.87;font-weight:700;letter-spacing:-2px;text-decoration:none}
.brand span{display:block;font-size:21px;letter-spacing:2px;margin-top:6px}
.brand i{position:absolute;font-size:14px;right:-17px;top:-4px;font-style:normal;letter-spacing:0}
.header-note{font-size:12px;font-weight:700;letter-spacing:1px;line-height:1.6}
.sound{margin-left:auto;border:1px solid var(--line);border-radius:30px;padding:11px 18px;background:transparent;font-size:14px}
.sound:hover{background:var(--mint)}
.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:40px 0 30px}
.eyebrow,.section-label,.memo-tag,.memo-sign,.phone-top,.room-label,.employee,.speech>span,.control-note,.transcript-heading>span,footer{font-family:'Courier New',monospace}
.eyebrow{font-size:12px;letter-spacing:1.4px;margin:0 0 14px}
h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(38px,4.5vw,62px);line-height:1.02;letter-spacing:-2.8px;margin:0;font-weight:600}
h1 em{font-style:normal;position:relative}
h1 em:after{content:'';position:absolute;height:5px;background:var(--pink);bottom:4px;left:0;right:0;z-index:-1}
.intro-note{font-size:16px;line-height:1.6;margin:0 0 4px;color:#566157}
.office{display:grid;grid-template-columns:340px 1fr;gap:28px}
aside{display:flex;flex-direction:column}
.section-label{font-size:12px;letter-spacing:1px;border-bottom:1px solid var(--line);padding:14px 0;display:flex;justify-content:space-between}
.department{display:flex;align-items:center;gap:18px;text-align:left;width:100%;border:0;border-bottom:1px solid var(--line);padding:24px 16px;background:transparent;color:var(--ink);transition:background .2s}
.department.selected{background:var(--ink);color:white;border-radius:7px;margin-top:9px;border-color:transparent}
.department:not(.selected):hover{background:#e8eae0}
.department .ext{font-family:'Courier New',monospace;font-size:14px;opacity:.65;align-self:flex-start;padding-top:3px}
.department strong{display:block;font-size:21px;letter-spacing:-.6px;margin-bottom:7px}
.department small{font-size:14px;opacity:.75}
.choose{margin-left:auto;font-size:24px}
.department:disabled{opacity:.6}
.department.selected:disabled{opacity:1}
.office-memo{background:#edf0dc;border:1px solid #dce0c9;padding:24px;margin:28px 8px 0;transform:rotate(-2deg);box-shadow:3px 5px 0 #e6e8dd}
.memo-tag{font-size:12px;letter-spacing:.8px}
.office-memo p{font-size:18px;line-height:1.5;margin:18px 0}
.memo-sign{font-size:13px}
.aside-foot{font-size:13px;color:#6c756c;line-height:1.5;margin:24px 10px 0}
.call-panel{border:1px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--mint);box-shadow:0 5px 0 #17221d}
.phone-top{height:49px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #17221d30;font-size:12px;letter-spacing:1px}
.status{display:flex;align-items:center;gap:8px}
.status i{width:7px;height:7px;background:var(--ink);border-radius:100%}
.active .status i{animation:blink 1s infinite}
.stage{height:365px;position:relative;overflow:hidden;background:var(--mint)}
.room-label{position:absolute;left:22px;top:20px;line-height:1.3;font-size:12px;letter-spacing:1px;z-index:1}
.mascot{width:365px;height:365px;object-fit:contain;position:absolute;left:50%;transform:translateX(-50%);top:-5px;mix-blend-mode:multiply}
.employee{position:absolute;right:19px;top:23px;font-size:11px;line-height:1.5;text-align:right;letter-spacing:.3px}
.speech{position:absolute;bottom:13px;left:18px;right:18px;padding:14px 18px;background:#f9fff9ed;border:1px solid #17221d55;border-radius:7px;box-shadow:2px 3px 0 #17221d20;min-height:86px}
.speech>span{font-size:11px;font-weight:700;letter-spacing:1px;color:#68766b}
.speech p{font-size:18px;line-height:1.35;margin:5px 0 0;max-width:650px}
.controls{padding:15px 18px;border-top:1px solid #17221d25;background:#e6f7ed}
.call-button{display:flex;align-items:center;gap:12px;background:var(--ink);color:white;border:0;width:100%;padding:17px 21px;font-weight:700;border-radius:6px;transition:transform .15s,background .15s;font-size:18px}
.call-button:hover{background:#304238;transform:translateY(-1px)}
.call-button svg{width:21px;height:21px}
.button-arrow{margin-left:auto}
.active .call-button{background:#a12c50}
.active .call-button:hover{background:#862440}
.control-note{font-size:12px;text-align:center;color:#627065;line-height:1.4;margin:10px 0}
.choices{display:flex;gap:8px;flex-wrap:wrap}
.choices:not(:empty){padding-bottom:12px}
.choices button{flex:1;border:1px solid var(--ink);padding:11px 13px;border-radius:4px;background:var(--lime);font-size:14px;font-weight:600}
.choices button:hover{background:var(--ink);color:white}
.transcript-panel{margin:34px 0 0;border-top:1px solid var(--line)}
.transcript-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0}
.transcript-heading h2{font-size:16px;font-weight:600;margin:0}
.transcript-heading>span{font-size:11px;letter-spacing:1px;color:#667467}
.transcript{max-height:230px;overflow:auto;scrollbar-color:#b5c6b8 transparent}
.empty{font-size:14px;color:#6c756c;margin:0;padding:2px 0 22px}
.entry{display:grid;grid-template-columns:115px 1fr;gap:15px;padding:11px 0;border-top:1px solid #e3e7dd;font-size:14px;line-height:1.5}
.entry b{font-family:'Courier New',monospace;font-size:12px;letter-spacing:.5px}
.entry.you b{color:#a32664}
.entry p{margin:0}
footer{display:flex;gap:20px;justify-content:space-between;padding:26px 0;border-top:1px solid var(--line);font-size:11px;line-height:1.5;margin-top:28px;color:#6b766c}
@keyframes blink{50%{opacity:.25}
}
@media(max-width:900px){.shell{padding:0 24px}
.office{grid-template-columns:280px 1fr;gap:18px}
.employee{display:none}
.intro-note{max-width:170px}
.department{padding:20px 12px;gap:12px}
.office-memo{padding:18px;margin-left:0;margin-right:0}
}
@media(max-width:680px){.shell{padding:0 18px}
header{min-height:88px;gap:20px}
.header-note{display:none}
.brand{font-size:27px}
.brand span{font-size:17px}
.intro{padding:27px 0 24px}
.intro-note{display:none}
h1{font-size:43px;letter-spacing:-2px}
.eyebrow{font-size:10px}
.office{display:flex;flex-direction:column;gap:17px}
.section-label{padding-top:0}
.departments{display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px}
.department,.department.selected{display:block;margin:0;padding:13px 9px;border:1px solid var(--line);border-radius:5px;min-height:85px}
.department .ext{font-size:11px;display:block;padding:0;margin-bottom:5px}
.department strong{font-size:16px;margin:0;letter-spacing:-.3px}
.department small,.choose,.office-memo,.aside-foot{display:none}
.stage{height:340px}
.mascot{width:340px;height:340px;top:-10px}
.speech p{font-size:16px}
.phone-top{padding:0 15px}
.room-label{font-size:10px;left:16px;top:16px}
.controls{padding-left:13px;padding-right:13px}
.transcript-heading{align-items:flex-start}
.transcript-heading h2{font-size:14px}
.transcript-heading>span{font-size:10px;text-align:right}
.entry{grid-template-columns:80px 1fr;gap:10px}
footer{flex-wrap:wrap;gap:10px;font-size:10px}
footer span:last-child{display:none}
.sound{padding:10px 13px}
.choices button{min-width:100px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
.mascot{content:url('assets/slong.png');object-fit:contain;height:270px;top:0;width:250px}
}


.choices .chart-link{display:block;flex-basis:100%;padding:12px 14px;border:1px solid var(--ink);border-radius:4px;color:var(--ink);background:var(--paper);font-size:14px;font-weight:600;text-align:center;text-decoration:none}
.choices .chart-link:hover{background:var(--ink);color:white}


/* Compact reception layout; the call is the main event. */
.shell{max-width:1120px;padding:0 32px}

header{min-height:92px}

.brand{font-size:32px;letter-spacing:-1.7px;line-height:1;font-weight:900}

.brand span{font-size:13px;letter-spacing:3px;margin-top:4px}

.sound{border-color:var(--ink);border-radius:4px;min-height:44px}

.intro{padding:27px 0 25px}

h1{font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-1.8px;line-height:1.08}

h1 em:after{z-index:0;bottom:-2px;height:3px}

.office{grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}

.section-label{font-size:13px;letter-spacing:1px;padding:10px 0}

.department{padding:18px 16px}

.department.selected{border-radius:3px}

.department strong{font-size:20px}

.office-memo{margin:26px 0 0;padding:19px;background:#f2efcf;border-color:#d6d1af;transform:rotate(-1deg);box-shadow:2px 3px 0 #17221d12}

.memo-tag,.memo-sign{font-size:13px}

.office-memo p{font-size:17px}

.call-panel{border-radius:5px;box-shadow:0 3px 0 var(--ink)}

.phone-top{font-size:13px;height:45px;padding:0 18px;letter-spacing:.4px}

.stage{height:285px;background:#d2f2e4}

.mascot{width:300px;height:300px;top:-6px;mix-blend-mode:normal}

.room-label{font-size:12px;left:18px;top:18px}

.employee{font-size:12px}

.speech{position:relative;inset:auto;margin:0;padding:15px 18px;min-height:96px;border:0;border-top:1px solid #17221d30;border-radius:0;box-shadow:none;background:#f8fcf7}

.speech>span{font-size:12px;letter-spacing:.5px;color:#47584b}

.speech p{font-size:18px;line-height:1.45;overflow-wrap:anywhere}

.controls{padding:14px 16px;background:#f8fcf7}

.call-button{border-radius:3px;min-height:54px;padding:15px 18px}

.call-button:hover{transform:none}

.choices button{min-height:44px;background:#f4e8b9;border-radius:3px}

.transcript-panel{margin-top:30px}

.transcript-heading>span{font-size:12px}

.entry{grid-template-columns:140px minmax(0,1fr)}

.entry b{overflow-wrap:anywhere}

footer{font-size:12px;gap:18px;flex-wrap:wrap}

@media(max-width:760px){
.shell{padding:0 18px}

header{min-height:76px}

.intro{padding:20px 0}

h1{font-size:34px;letter-spacing:-1.2px}

.office{display:flex;flex-direction:column;gap:14px}

aside,.call-panel{width:100%;min-width:0}

.section-label,.office-memo{display:none}

.departments{display:block;margin:0}

.department,.department.selected{min-height:0;margin:0;padding:12px 14px}

.department strong{font-size:16px;margin:0}

.department small{display:none}

.stage{height:224px}

.mascot{width:244px;height:244px;top:-8px}

.employee{display:none}

.speech{min-height:86px;padding:13px 15px}

.speech p{font-size:16px;line-height:1.4}

.phone-top{padding:0 14px;font-size:12px}

.room-label{font-size:12px;left:14px;top:14px}

.transcript-heading h2{font-size:16px}

.transcript-heading>span{font-size:12px}

.entry{grid-template-columns:100px minmax(0,1fr)}

footer{margin-top:20px;padding:20px 0;font-size:12px}

footer span:last-child{display:block}

}

@media(prefers-reduced-motion:reduce){.mascot{width:210px;height:240px;top:0}
}