:root { color-scheme: light; --paper:#FBF8F2; --ink:#1A1A1A; --orange:#D97B28; --muted:#71695F; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif; -webkit-tap-highlight-color:transparent; }
main { min-height:100svh; height:100dvh; max-width:760px; margin:auto; display:flex; flex-direction:column; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
header { display:flex; align-items:center; justify-content:space-between; font-size:17px; letter-spacing:-.04em; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
button:focus-visible,a:focus-visible { outline:3px solid #2C4F8A; outline-offset:6px; }
header button { width:44px; height:44px; border:0; background:none; font-family:Georgia,serif; font-style:italic; font-size:21px; color:var(--muted); }
.companion { flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:0; }
#mascot { width:min(100%,440px,60svh); aspect-ratio:1; flex:none; }
#mascot svg { display:block; width:100%; height:100%; }
#status { min-height:1.5em; font-size:19px; text-align:center; margin:0 0 18px; }
footer { text-align:center; padding-top:8px; }
.primary { min-width:176px; min-height:54px; padding:14px 24px; border:1.5px solid var(--ink); border-radius:32px; background:var(--ink); color:var(--paper); font-weight:500; }
.primary span { margin-left:16px; }
.primary.active { background:transparent; color:var(--ink); }
#hint { font-size:12px; color:var(--muted); margin:14px 0 0; min-height:18px; }
#intro { position:fixed; inset:0; z-index:2; background:var(--paper); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px; transition:opacity .45s ease; }
#intro.leaving { opacity:0; pointer-events:none; }
#intro[hidden] { display:none; }
#wordmark { width:min(100%,720px); }
#wordmark svg { display:block; width:100%; }
#skip { position:absolute; bottom:max(48px,env(safe-area-inset-bottom)); background:none; border:0; padding:16px; color:var(--muted); font-size:14px; }
#skip span { padding-left:12px; }
dialog { background:var(--paper); border:1px solid #DCD7CD; border-radius:22px; padding:36px 28px 28px; max-width:420px; width:calc(100% - 40px); color:var(--ink); line-height:1.6; }
dialog::backdrop { background:#1a1a1a44; backdrop-filter:blur(5px); }
dialog h1 { font-size:25px; font-weight:500; letter-spacing:-.04em; }
dialog p { font-size:15px; color:#5F5B54; }
dialog a { color:inherit; }
dialog .credit { font-size:12px; }
#close-info { position:absolute; top:9px; right:12px; width:44px; height:44px; border:0; background:none; font-size:26px; }
#replay { background:none; border:0; padding:12px 0; text-decoration:underline; text-underline-offset:4px; }
/* Keep the same vertical composition on short screens, scaling the drawing
   instead of allowing it to overlap the greeting or controls. */
@media (max-height:740px) { #mascot { width:min(100%,440px,calc(100svh - 300px)); } }
@media (max-height:520px) {
  main { padding-top:max(8px,env(safe-area-inset-top)); padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  #mascot { width:min(100%,240px,max(80px,calc(100svh - 210px))); }
  #status { margin:0 0 8px; font-size:15px; }
  footer { padding:0; }
  #hint { margin-top:5px; margin-bottom:5px; }
  .primary { min-height:44px; padding:9px 20px; }
}
@media (prefers-reduced-motion:reduce) { #intro { transition:none; } }

#mochi-name,#mochi-rename { margin:0; font-size:22px; font-weight:400; letter-spacing:-.04em; max-width:100%; text-align:center; }
#mochi-name { overflow-wrap:anywhere; cursor:text; touch-action:manipulation; }
#mochi-rename { width:12em; min-width:0; font-family:inherit; color:inherit; background:transparent; border:0; border-bottom:1px solid var(--muted); border-radius:0; padding:0; }
header button { display:grid; place-items:center; }
dialog { max-height:calc(100dvh - 40px); overflow:auto; }
.dialog-close { position:absolute; top:9px; right:12px; width:44px; height:44px; border:0; background:none; font-size:26px; }
#preferences label { display:block; margin:14px 0; font-size:14px; }
#preferences input:not([type="checkbox"]):not([type="color"]),select { display:block; width:100%; font:inherit; color:var(--ink); margin-top:6px; }
#preferences input[type="text"],#pref-name,select { min-height:44px; border:1px solid #CFC8BB; border-radius:10px; background:transparent; padding:8px 10px; }
.colours { display:flex; gap:24px; }
.colours input { display:block; margin-top:6px; width:48px; height:40px; border:1px solid #CFC8BB; border-radius:8px; background:none; padding:3px; }
#preferences .check { display:flex; align-items:center; gap:10px; }
.check input { width:20px; height:20px; accent-color:var(--orange); }
dialog .small { font-size:12px; line-height:1.5; margin:8px 0; }
.text-button { border:0; background:none; padding:12px 0; text-decoration:underline; text-underline-offset:4px; font-size:14px; }
summary { cursor:pointer; padding:12px 0; font-size:14px; }
#saved-calls { border-top:1px solid #DCD7CD; margin-top:14px; }
#recordings-list button { display:block; width:100%; text-align:left; background:none; border:0; padding:12px 0; border-bottom:1px solid #DCD7CD; font-size:13px; }
#recording-detail audio { width:100%; margin:6px 0 12px; }
#recording-detail pre { white-space:pre-wrap; font:inherit; font-size:13px; }
#recording-detail textarea { width:100%; min-height:60px; background:transparent; border:1px solid #CFC8BB; border-radius:8px; font:inherit; font-size:14px; }
.review-buttons { display:flex; gap:16px; }
@media (max-height:520px) { #mochi-name,#mochi-rename { font-size:16px; } }

#status { max-width:380px; line-height:1.5; }
#hint { max-width:390px; margin-left:auto; margin-right:auto; }
.primary { max-width:100%; }

header,footer,#status,#mochi-name,#mochi-rename { flex:none; }
.colours { flex-wrap:wrap; }
.check input { flex:none; }
@media (pointer:coarse) { #preferences input:not([type="checkbox"]):not([type="color"]),#preferences select { font-size:16px; } }

@media (orientation:landscape) { .primary { min-width:144px; min-height:44px; padding:10px 18px; font-size:14px; line-height:20px; } }

/* The optional Spotify player appears only after a listener adds a link. */
#spotify-player { max-width:380px; margin:12px auto 0; }
#spotify-frame iframe { display:block; width:100%; border:0; border-radius:12px; }
.music-actions { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.music-actions a,.music-actions button { background:none; border:0; padding:12px 0; font:inherit; font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
#spotify-link { display:block; width:100%; min-height:44px; margin-top:6px; padding:8px 10px; font:inherit; font-size:16px; color:inherit; background:transparent; border:1px solid #CFC8BB; border-radius:10px; }
#spotify-form label { font-size:14px; }
.with-music #mascot { width:min(100%,440px,60svh,max(160px,calc(100svh - 510px))); }

.footer-tools { display:flex; margin-top:4px; }
#spotify-launch { display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 0; border:0; background:none; font-size:12px; color:var(--muted); }
#music-dialog h2 { font-size:15px; font-weight:500; margin-top:20px; }
#spotify-native { max-width:380px; margin:12px auto 0; }
#spotify-track { display:block; overflow-wrap:anywhere; font-size:13px; color:var(--ink); text-decoration:none; }
.spotify-controls { display:flex; align-items:center; justify-content:center; gap:12px; }
.spotify-controls button { min-height:44px; min-width:44px; border:0; background:none; font-size:18px; }
#spotify-play { font-size:14px; }
#spotify-now-status { font-size:12px; color:var(--muted); margin:4px 0; }
.music-search { display:flex; gap:8px; }
.music-search input { min-width:0; width:100%; min-height:44px; border:1px solid #CFC8BB; border-radius:10px; background:none; padding:8px; font:inherit; font-size:16px; }
.music-search button { border:0; background:none; font-size:14px; }
.music-choice { display:block; width:100%; text-align:left; border:0; border-bottom:1px solid #DCD7CD; padding:12px 0; background:none; font-size:14px; }
@media (max-height:740px) { #mascot { width:min(100%,440px,max(100px,calc(100svh - 348px))); } }
@media (max-height:520px) { #mascot { width:min(100%,240px,max(80px,calc(100svh - 258px))); } }

/* Hidden demo controls must stay hidden despite label/layout display rules. */
[hidden] { display:none !important; }