:root{--cream:#f8f1e1;--paper:#fffaf0;--gold:#d9a441;--gold2:#e9c77b;--sage:#8fa877;--sage-d:#5f7a4c;--sky:#a9d3e8;--ink:#3d2f22;--rose:#c9785d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--cream);color:var(--ink);font-family:Georgia,"Iowan Old Style",serif;-webkit-user-select:none;user-select:none}
header{height:12vh;display:flex;align-items:center;gap:2vw;padding:0 2.5vw;background:linear-gradient(90deg,var(--paper),var(--cream));border-bottom:2px solid var(--gold2)}
h1{margin:0;font-size:3.6vw;font-weight:600;white-space:nowrap}h1 span{color:var(--rose);font-style:italic}
.note{margin:0;flex:1;font-size:1.6vw;background:#fff3d6;border:1px dashed var(--gold);padding:.6vw 1vw;border-radius:1vw}
main{display:flex;height:88vh;gap:1.5vw;padding:1.5vw}
#stage{position:relative;flex:0 0 40%;border-radius:2vw;overflow:hidden;box-shadow:0 1vw 3vw #5f4a2a33;background:linear-gradient(#bfe2f2,#e8f3ea 60%)}
.sun{position:absolute;top:8%;right:12%;width:7vw;height:7vw;border-radius:50%;background:radial-gradient(#ffe7a3,var(--gold));box-shadow:0 0 4vw #f5d17a;animation:glow 4s ease-in-out infinite}
.cloud{position:absolute;background:#fff;border-radius:5vw;height:3vw;opacity:.9;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:3.5vw;height:3.5vw;top:-1.6vw;left:1.5vw}.cloud::after{width:2.5vw;height:2.5vw;top:-1vw;left:4vw}
.c1{width:9vw;top:12%;animation-duration:40s}.c2{width:7vw;top:24%;animation-duration:55s;animation-delay:-20s}.c3{width:11vw;top:5%;animation-duration:70s;animation-delay:-45s}
@keyframes drift{from{transform:translateX(-14vw)}to{transform:translateX(45vw)}}
@keyframes glow{50%{transform:scale(1.08)}}
.hill{position:absolute;border-radius:50%}
.h1{width:80%;height:40%;bottom:-12%;left:-15%;background:#b6c79a}.h2{width:90%;height:45%;bottom:-18%;right:-25%;background:#a3b886}
.grass{position:absolute;bottom:0;left:-5%;width:110%;height:14%;background:repeating-linear-gradient(100deg,var(--sage) 0 .5vw,var(--sage-d) .5vw .7vw,transparent .7vw 1.1vw);transform-origin:bottom;animation:sway 3s ease-in-out infinite alternate;-webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
@keyframes sway{from{transform:skewX(-4deg)}to{transform:skewX(4deg)}}
.house{position:absolute;bottom:14%;left:8%;font-size:4vw}
#portrait{position:absolute;inset:0;display:grid;place-items:center}.frame{position:relative}
.frame{width:18vw;height:22vw;border-radius:1.6vw;background:var(--paper);border:.55vw solid var(--gold);box-shadow:0 0 0 .35vw var(--paper),0 1.5vw 3vw #0003;display:flex;flex-direction:column;overflow:hidden;animation:float 5s ease-in-out infinite}
.frame img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.frame .caption{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);width:18vw;text-align:center;background:linear-gradient(transparent,#0009 40%);color:#fff;padding:2.2vw .6vw .7vw;pointer-events:none}
.pname{font-size:2vw;font-style:italic;text-shadow:0 .1vw .3vw #0008}.pyears{font-size:1.1vw;opacity:.9}
@keyframes float{50%{transform:translateY(-1vw)}}
#player{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;pointer-events:none;transition:opacity .5s}
body.playing #player{opacity:1}
#subtitle{position:absolute;left:5%;right:5%;bottom:13%;text-align:center;font-size:2vw;color:#fff;background:#0008;padding:.8vw 1.2vw;border-radius:1vw;opacity:0;transform:translateY(1vw);transition:.4s}
body.playing #subtitle{opacity:1;transform:none}
.chip{display:inline-flex;align-items:center;gap:.6vw;background:var(--paper);border:2px solid var(--gold2);border-radius:5vw;padding:.6vw 1.3vw;font-size:1.6vw;font-family:system-ui,sans-serif}
.chip.small{font-size:1.1vw;padding:.4vw .9vw}
#status{position:absolute;top:3%;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;transition:opacity .3s}
body.playing #status{opacity:0;pointer-events:none}
.dot{width:1.2vw;height:1.2vw;border-radius:50%;background:#bbb}
body.listening .dot{background:#d9534f;animation:pulse 1.4s infinite}
body.playing .dot{background:var(--sage)}
@keyframes pulse{0%{box-shadow:0 0 0 0 #d9534f88}100%{box-shadow:0 0 0 1.4vw #d9534f00}}
#heard{position:absolute;bottom:3%;left:5%;right:5%;text-align:center;font-family:system-ui;font-size:1.3vw;color:var(--ink);opacity:.75;z-index:3;min-height:1.5em}
body.playing #heard{opacity:0}
#questions{flex:1;display:flex;flex-direction:column;min-width:0}
#questions h2{margin:0 0 1vw;font-size:1.9vw;font-weight:500;color:var(--sage-d)}
#list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1vw;flex:1}
#list li{flex:1;display:flex;align-items:center;gap:1.4vw;padding:0 1.6vw;background:var(--paper);border-radius:1.4vw;border:2px solid #ead9b3;box-shadow:0 .4vw 1vw #5f4a2a1a;font-size:2.1vw;cursor:pointer;transition:transform .2s,box-shadow .2s,background .3s;opacity:0;animation:enter .6s forwards,breathe 6s ease-in-out infinite}
#list li .n{flex:0 0 3.4vw;height:3.4vw;border-radius:50%;display:grid;place-items:center;background:var(--gold2);color:var(--ink);font-weight:700;font-family:system-ui}
#list li:active{transform:scale(.98)}
#list li.active{background:linear-gradient(90deg,#fff1cc,#fffaf0);border-color:var(--gold);box-shadow:0 0 0 .4vw #e9c77b88,0 1vw 2vw #d9a44155;transform:translateX(-.6vw)}
#list li.active .n{background:var(--rose);color:#fff}
body.playing #list li:not(.active){opacity:.45!important}
@keyframes enter{from{opacity:0;transform:translateX(3vw)}to{opacity:1;transform:none}}
@keyframes breathe{50%{box-shadow:0 .6vw 1.6vw #d9a44133}}
#start{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#f8f1e1ee;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .5s}
#start.gone{opacity:0;pointer-events:none}
.startcard{text-align:center;animation:float 4s ease-in-out infinite}.startcard .big{font-size:12vw}.startcard h2{font-size:4vw;margin:0}.startcard p{font-size:2vw;color:var(--rose);animation:glow 2s infinite}
@media (orientation:portrait){main{flex-direction:column}#stage{flex:0 0 45%}h1{font-size:5vw}.note{font-size:2.4vw}#list li{font-size:3.2vw}}