@import url("/fonts/cal-sans-ui/font.css");
@font-face{font-family:Plaak;src:url('/muso/fonts/Plaak2Trial-42-Bold.otf') format('opentype');font-display:swap}
@font-face{font-family:EightBitDragon;src:url('./assets/EightBitDragon.ttf') format('truetype');font-display:block}
@font-face{font-family:EightBitDragon;src:url('./assets/MusoPixelArrow.ttf') format('truetype');font-display:block;unicode-range:U+2197}
:root{color-scheme:dark;--ground:#1b56fd;--text:#fffdf5;--blue:#1b56fd;--paper:#fffdf5;--cream:#f3f0e8;--ink:#20211f;--tint:#dce6ff;--hair:#8ba8f6;--box-height:258px;--box-bottom:24px}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--site-body);height:100dvh;min-height:100svh;overflow:hidden} /* taste-skill-ignore: approved site body face */
header{padding:18px 36px;position:fixed;inset:0 0 auto;z-index:6;pointer-events:none;color:var(--paper);transition:color 180ms;display:flex;align-items:center;justify-content:space-between;gap:12px}
header[data-on="light"]{color:var(--blue)}
.room-controls{display:flex;align-items:center;gap:20px;pointer-events:auto}
#back-to-desk{display:flex;align-items:center;min-height:44px;font:400 22px/1 Plaak,sans-serif;letter-spacing:.01em;text-decoration:none;white-space:normal;color:var(--paper);transition:color 180ms}
#back-to-desk[data-on="light"]{color:var(--blue)}
@supports (background-clip:text){#back-to-desk[data-mixed]{background-color:currentColor;background-size:100% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}} /* taste-skill-ignore: solid paper/blue ink follows the actual roof edge so every glyph stays readable. */
#back-to-desk:focus-visible{outline-color:currentColor}
h1{font:400 34px/1 Plaak,sans-serif;margin:0;letter-spacing:-.02em}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:0;background:none;min-height:44px;padding:10px 15px}
button:focus-visible,a:focus-visible,#messages:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#stage{position:fixed;inset:0;min-width:0;min-height:0;overflow:hidden}
canvas{display:block;width:100%;height:100%}
/* taste-skill-ignore: outlined-box hairline — final brief's instrument plates, framed windows and mechanical screws. */
#dialogue{position:fixed;z-index:2;left:50%;bottom:var(--box-bottom);transform:translateX(-50%);width:min(1120px,calc(100% - 48px));height:auto;min-height:150px;max-height:270px;display:grid;grid-template-columns:minmax(0,1fr) 260px;background:var(--paper);color:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 1px rgb(32 33 31 / .20);border-radius:14px;color-scheme:light;isolation:isolate} /* taste-skill-ignore: shadow — zero-blur 1px ink keyline outside the specified paper plate ring. */
#dialogue[data-layout="choices"],#dialogue[data-layout="roles"]{height:auto}
#dialogue[data-layout="end"]{max-height:310px}
#dialogue::before,#conversation::before{content:"";position:absolute;inset:6px;border:1px solid var(--blue);border-radius:8px;pointer-events:none;z-index:2} /* taste-skill-ignore: Anatomy inset plate edge */
.screw{position:absolute;display:block;width:9px;height:9px;border:1px solid var(--blue);border-radius:50%;background:var(--cream);z-index:3;pointer-events:none} /* taste-skill-ignore: Anatomy slotted screw head */
.screw::after{content:"";position:absolute;left:1px;right:1px;top:3px;height:1px;background:var(--blue);transform:rotate(-35deg)} /* taste-skill-ignore: Anatomy screw slot */
.top-left{left:12px;top:12px}.top-right{right:12px;top:12px}.bottom-left{left:12px;bottom:12px}.bottom-right{right:12px;bottom:12px}
#text-compartment{position:relative;min-width:0;padding:14px 28px;display:flex;flex-direction:column;justify-content:center;gap:8px;font-family:EightBitDragon,sans-serif;font-synthesis:none;-webkit-font-smoothing:none;font-smooth:never;letter-spacing:0}
/* The supplied face uses ten nominal font pixels per em: 20px type has 2px pixels. */
#advance{position:relative;text-align:left;padding:0;min-height:116px;width:100%;font-size:20px;line-height:28px;display:block;border-radius:3px}
#advance:disabled{color:var(--ink);cursor:default;opacity:1}
#dialogue-line{display:block;min-height:28px}
#untyped{visibility:hidden}
#line-measure{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
#continue-marker{display:flex;align-items:center;gap:10px;position:absolute;right:0;bottom:0;color:var(--blue)}
#continue-marker kbd{font:400 10px/12px EightBitDragon,sans-serif;background:var(--paper);padding:5px 9px;border:1px solid var(--blue);border-bottom:3px solid #143cac;border-radius:3px} /* taste-skill-ignore: physical Space key explicitly requested */
#continue-marker i{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--blue);animation:signal 1.6s ease-in-out infinite}
#portrait-compartment{min-height:0;background:var(--cream);border-radius:0 12px 12px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px}
#portrait-window{width:150px;height:150px;flex-shrink:0;background:var(--paper);border:2px solid var(--blue);border-radius:4px;padding:10px;box-shadow:inset 0 0 0 1px var(--paper);position:relative} /* taste-skill-ignore: shadow — zero-blur inner paper mat, not an elevation effect. */
#portrait{width:100%;height:100%;object-fit:contain;display:block}
#muso-portrait{display:grid;place-items:center;height:100%;color:var(--blue)}
#muso-portrait svg{width:60%;height:60%}
#nameplate{position:relative;z-index:1;margin-top:0;width:150px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--blue);color:var(--paper);border-radius:4px;font:400 30px/.95 Plaak,sans-serif;letter-spacing:-.01em;text-transform:uppercase}
#nameplate .screw{width:7px;height:7px;border-color:var(--paper);background:transparent;top:18px;left:10px}
#nameplate .screw:last-child{left:auto;right:10px}
#nameplate .screw::after{background:var(--paper);left:0;right:0;top:2px}
#dialogue[data-layout="choices"] #advance,#dialogue[data-layout="roles"] #advance,#dialogue[data-layout="approve"] #advance{min-height:0}
#dialogue[data-layout="choices"] #text-compartment,#dialogue[data-layout="roles"] #text-compartment{padding-top:12px;padding-bottom:12px}
#replies{display:flex;flex-direction:column;gap:5px}
#replies button,#replies a{display:block;position:relative;text-align:left;text-decoration:none;font-size:20px;line-height:24px;padding:6px 12px 6px 30px;min-height:48px;border:2px solid transparent;border-radius:4px;color:var(--ink);transition:transform .09s ease-out} /* taste-skill-ignore: requested game choice frame */
#replies [data-active="true"]{border-color:var(--blue);color:var(--ink);text-shadow:1px 0 currentColor} /* taste-skill-ignore: shadow — pixel-bold; 1px (half a font pixel) keeps counters open, still whole device pixels at DPR 1 and 2 (Opus, round 4 review). */
.choice-label{display:block;padding-right:2px}
#replies button::before,#replies a::before{content:"";position:absolute;left:12px;top:calc(50% - 5px);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid var(--blue);visibility:hidden}
#replies [data-active="true"]::before{visibility:visible}
#replies :focus-visible{outline-offset:2px}
#replies :active,#replies [data-picked="true"]{transform:translateY(1px)}
#replies .primary{background:var(--blue);color:var(--paper);border-color:var(--blue);padding:14px 45px 14px 20px}
#replies .primary::before{display:none}
#replies .primary::after{content:"↗";position:absolute;right:17px;top:50%;transform:translateY(-50%)}
#end-copy h2{font:400 36px/1.05 Plaak,sans-serif;max-width:570px;letter-spacing:-.02em;margin:0 0 8px}
#end-copy p{font-size:20px;line-height:28px;margin:0}
#speaker-marker{position:fixed;top:0;left:0;z-index:1;pointer-events:none;width:29px;height:45px}
#speaker-marker svg{display:block;width:29px;height:45px;overflow:visible;animation:signal 1.8s ease-in-out infinite}
#speaker-marker path{stroke:var(--blue);stroke-width:2;stroke-linecap:round;fill:var(--blue)}
#speaker-marker path:first-child{fill:none}
#room-tab{display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:44px;background:var(--blue);color:var(--paper);border:1px solid var(--paper);border-radius:4px} /* taste-skill-ignore: outlined-box — Gagan explicitly requested an outlined paper Room tab on blue. */
#room-tab svg{width:22px;height:22px;display:block}
#room-tab span{font-size:16px;font-weight:600}
#room-tab[aria-expanded="true"]{background:var(--paper);color:var(--blue)}
#conversation{position:fixed;z-index:5;right:28px;top:82px;bottom:24px;width:440px;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;padding:22px;gap:16px;border:2px solid var(--paper);box-shadow:0 0 0 1px rgb(32 33 31 / .20);border-radius:14px;color-scheme:light;animation:room-in .22s ease-out both} /* taste-skill-ignore: final brief's paper Room plate */
#room-heading{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 0 4px}
#room-heading h2{display:flex;align-items:center;gap:12px;font:400 30px/1 Plaak,sans-serif;letter-spacing:-.01em;margin:0}
#log-glyph{color:var(--blue);display:flex}#log-glyph svg{width:28px;height:28px}
#close-room{display:grid;place-items:center;padding:8px;width:40px;height:40px;min-height:40px;color:var(--blue);border:1px solid var(--blue);border-radius:3px} /* taste-skill-ignore: inset plate control */
#close-room:focus-visible{outline-offset:-5px}
#close-room svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#messages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--hair) transparent;display:flex;flex-direction:column;padding:0 5px 0 0}
.message{display:grid;grid-template-columns:46px 1fr;gap:12px;padding:18px 8px;flex-shrink:0;border-bottom:1px solid var(--hair)} /* taste-skill-ignore: hairline — required engraved Room rows */
.message:last-child{border-bottom:0}
.log-portrait{width:46px;height:50px;padding:4px;border:2px solid var(--blue);border-radius:4px;box-shadow:inset 0 0 0 1px var(--paper);background:var(--paper);color:var(--blue);display:grid;place-items:center} /* taste-skill-ignore: Anatomy portrait frame */
.log-portrait img,.log-portrait svg{width:100%;height:100%;object-fit:contain;object-position:center top}
.message b{font-size:16px;font-weight:600;line-height:1.4}
.message p{font-size:16px;line-height:1.5;margin:4px 0 0;white-space:pre-line}
.message[data-kind="muso"]{background:var(--tint)}
.model-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffc83d;margin-left:8px;vertical-align:middle}
.agent-session{margin:12px 1px;padding:16px 12px;display:grid;grid-template-columns:40px 1fr;gap:12px;border:2px solid var(--blue);border-radius:5px;flex-shrink:0;background:var(--cream)} /* taste-skill-ignore: final brief's physical agent-session card */
.agent-session svg{width:36px;height:36px;color:var(--blue)}
.agent-session b{font:400 24px/1 Plaak,sans-serif;display:block}.agent-session p{font-size:16px;line-height:1.5;margin:7px 0 2px}.agent-session span{font-size:16px}
.mode-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;gap:4px;background:var(--cream);border:1px solid var(--hair);border-radius:5px;flex-shrink:0} /* taste-skill-ignore: three-position mechanical mode switch */
.mode-switch span{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:7px 4px;border:1px solid transparent;font-size:12px;line-height:1.3;color:var(--ink)} /* taste-skill-ignore: mode key edge */
.mode-switch span[data-active="true"]{border-color:var(--blue);border-bottom-width:3px;background:var(--paper);color:var(--blue);border-radius:3px} /* taste-skill-ignore: raised mode key */
#compose-mode{max-width:600px}
#compose-mode span{font-size:10px;line-height:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#failure{position:absolute;inset:25% 20px auto;max-width:440px;text-align:center;font-size:16px;background:var(--ground);padding:20px;z-index:4}
[hidden]{display:none!important}
@keyframes signal{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes room-in{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@media(min-width:701px) and (max-width:1100px){#dialogue{grid-template-columns:minmax(0,1fr) 230px}#text-compartment{padding:12px 24px}}
@media(max-width:700px){
  :root{--box-height:46dvh;--box-bottom:max(16px,env(safe-area-inset-bottom))}
  header{padding:12px 20px}h1{font-size:30px}
  .room-controls{gap:10px}#back-to-desk{font-size:18px}
  #dialogue,#dialogue[data-layout="roles"],#dialogue[data-layout="choices"],#dialogue[data-layout="end"]{width:calc(100% - 32px);height:auto;min-height:300px;max-height:60dvh;grid-template-columns:1fr;grid-template-rows:124px minmax(0,1fr)}
  #portrait-compartment{grid-row:1;border-radius:12px 12px 0 0;flex-direction:row;justify-content:flex-start;gap:12px;padding:24px}
  #portrait-window{width:76px;height:76px;padding:4px}
    #nameplate{margin-top:0;width:150px;height:36px;font-size:24px}#nameplate .screw{top:14px;left:8px}#nameplate .screw:last-child{right:8px}
  #text-compartment{padding:16px 20px 24px;justify-content:center;gap:12px}
  #advance{font-size:20px;line-height:28px;min-height:116px;padding-bottom:30px}
  #dialogue[data-layout="choices"] #advance,#dialogue[data-layout="roles"] #advance{padding-bottom:0}
  #continue-marker{bottom:-4px}
  #dialogue[data-layout="choices"] #text-compartment,#dialogue[data-layout="roles"] #text-compartment{padding:14px 18px 20px;gap:10px}
  #replies{gap:4px}
  #replies button,#replies a{font-size:20px;line-height:24px;padding:6px 9px 6px 27px;min-height:48px}
  #replies button::before,#replies a::before{left:9px}
  #dialogue[data-layout="choices"] #replies button{padding:6px 2px 6px 12px}
  #dialogue[data-layout="choices"] #replies button::before{left:3px}
  #dialogue[data-layout="composer"] #text-compartment{padding-left:16px;padding-right:16px}
  #replies .primary{padding:14px 8px}
  #replies .primary::before{content:"↗";display:block;float:right;position:static;width:20px;height:24px;margin-left:4px;border:0;visibility:visible}
  #replies .primary::after{display:none}
  #end-copy h2{font-size:24px;line-height:1.05;max-width:280px}
  #dialogue[data-layout="end"] #text-compartment{padding:12px 18px 20px;gap:10px}
  #room-tab{right:16px;top:16px;padding:9px 12px;gap:8px}
  #conversation{top:72px;left:8px;right:8px;width:auto;bottom:16px;padding:20px 16px 18px;gap:12px}
  #messages{padding-right:4px}.message{padding:15px 5px;gap:10px}
  .mode-switch{gap:2px;padding:3px}.mode-switch span{font-size:12px;padding:6px 2px}
}
@media(max-height:650px) and (max-width:700px){:root{--box-height:62dvh}#dialogue,#dialogue[data-layout]{grid-template-rows:96px minmax(0,1fr)}#portrait-window{width:48px;height:48px}#text-compartment{overflow:auto;justify-content:flex-start}#conversation{bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The supplied Muso artwork stays unchanged; masks inherit the plate colour. */
.muso-wordmark{display:block;width:71px;height:28px;background:currentColor;mask:url('/muso/brand/muso-wordmark.svg') center / contain no-repeat}
.muso-mark{display:block;width:60%;height:60%;background:currentColor;mask:url('/muso/brand/muso-mark.svg') center / contain no-repeat}
.log-portrait .muso-mark{width:85%;height:85%}
#chapter-title{position:fixed;z-index:1;top:94px;left:24px;right:24px;margin:0;text-align:center;pointer-events:none;color:var(--paper);font:400 72px/1 Plaak,sans-serif;letter-spacing:-.02em;opacity:0;transform:translateY(-22px);transition:opacity .35s,transform .45s}
#chapter-title[data-visible="true"]{opacity:1;transform:translateY(0)}
html[data-arrival="waiting"] body>*{visibility:hidden}
html[data-departure] body{will-change:transform,opacity;pointer-events:none}
html[data-arrival="resolving"] #stage,html[data-arrival="resolving"] #chapter-title{animation:arrive .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@media(max-width:700px){#chapter-title{top:88px;font-size:40px;left:16px;right:16px}.muso-wordmark{height:28px;width:71px}}
@media(prefers-reduced-motion:reduce){#chapter-title{transform:none;transition:opacity .2s!important}html[data-arrival="resolving"] #stage,html[data-arrival="resolving"] #chapter-title{animation:arrive-fade .6s both!important}@keyframes arrive-fade{from{opacity:0}to{opacity:1}}}

/* The Desk cursor, as on every other page (generated by .ai/mockups/desk/source/cursor.mjs; relative to this file in the mockup and at /muso). */
/* Native cursor assets preserve a precise hotspot without a JS cursor follower. */
@media (hover:hover) and (pointer:fine){
  body{cursor:url("../../desk/assets/desk-cursor-20.svg") 3 2,auto}
  body :is(a,button,summary,[role="button"],[role="link"],select,.obj){cursor:url("../../desk/assets/desk-cursor-link-20.svg") 3 2,pointer}
  body :is(input,textarea,[contenteditable="true"]){cursor:text}
  body :is(:disabled,[aria-disabled="true"]){cursor:not-allowed}
}
@media (hover:hover) and (pointer:fine) and (max-width:1100px){ body{cursor:url("../../desk/assets/desk-cursor-18.svg") 2 2,auto}
  body :is(a,button,summary,[role="button"],[role="link"],select,.obj){cursor:url("../../desk/assets/desk-cursor-link-18.svg") 2 2,pointer} }
@media (hover:hover) and (pointer:fine) and (min-width:1700px){ body{cursor:url("../../desk/assets/desk-cursor-22.svg") 3 2,auto}
  body :is(a,button,summary,[role="button"],[role="link"],select,.obj){cursor:url("../../desk/assets/desk-cursor-link-22.svg") 3 2,pointer} }
@media (hover:hover) and (pointer:fine) and (min-width:2300px){ body{cursor:url("../../desk/assets/desk-cursor-26.svg") 3 2,auto}
  body :is(a,button,summary,[role="button"],[role="link"],select,.obj){cursor:url("../../desk/assets/desk-cursor-link-26.svg") 3 2,pointer} }

html{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
:is(#room-tab,#close-room,#back-to-desk,#advance):active:not(:disabled){translate:0 1px;opacity:.72}
#close-room{position:relative}
#close-room::after{content:"";position:absolute;inset:-2px}
header{padding-top:calc(18px + env(safe-area-inset-top,0px));padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}
#dialogue{--box-bottom:max(24px,env(safe-area-inset-bottom,0px));max-width:calc(100% - max(24px,env(safe-area-inset-left,0px)) - max(24px,env(safe-area-inset-right,0px)))}
#conversation{top:calc(82px + env(safe-area-inset-top,0px));right:max(28px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px))}
@media(max-width:700px){header{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}#dialogue{--box-bottom:max(16px,env(safe-area-inset-bottom,0px));max-width:calc(100% - max(16px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px)))}#conversation{top:calc(72px + env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px))}#chapter-title{top:calc(88px + env(safe-area-inset-top,0px))}}
@media(max-height:500px) and (orientation:landscape){
 header{padding-block:8px}#chapter-title{top:calc(60px + env(safe-area-inset-top,0px));font-size:32px}
 #dialogue,#dialogue[data-layout]{--box-bottom:max(12px,env(safe-area-inset-bottom,0px));min-height:0;max-height:calc(100dvh - 112px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:auto}
 #text-compartment{overflow:auto;justify-content:flex-start;padding:12px 20px}
 #portrait-compartment{grid-row:auto;padding:16px;gap:8px;flex-direction:column}
 #portrait-window{width:64px;height:64px;padding:4px}#nameplate{width:118px;height:36px;font-size:24px}
 #advance{min-height:70px}#conversation{top:60px;bottom:max(12px,env(safe-area-inset-bottom,0px))}
}


@media(any-pointer:coarse){#close-room{width:44px;height:44px;min-height:44px}#close-room::after{inset:0}#dialogue:is([data-layout="choices"],[data-layout="roles"],[data-layout="approve"]) #advance{min-height:44px}}

@media(max-height:500px) and (orientation:landscape){header{padding-top:calc(8px + env(safe-area-inset-top,0px))}#conversation{top:calc(60px + env(safe-area-inset-top,0px))}#dialogue[data-layout] #advance{min-height:44px}}