/* Same website hierarchy: heading 16/18 @600; body 16/18 @350;
   nested 14/16 @350; metadata 12/14; micro 10/12. */
button,summary { transition:font-weight .18s ease; }
button:hover,summary:hover { text-decoration:none; font-weight:700; }
#controls-toggle { position:relative; z-index:1; }
.open .core { r:7; fill:var(--paper); }
.control-symbol { stroke-width:1; }
#controls:before { display:none; }
.presence { text-shadow:none; }
#reflection,#toast { background:transparent; backdrop-filter:none; }
#controls { bottom:112px; max-height:calc(100% - 140px); }
#controls.open~.presence { top:auto; bottom:28px; }
#controls-panel:before { bottom:5px; width:1px; }
.branches button:before { height:1px; }
#through-time { position:absolute;left:26px;bottom:23px;width:300px;z-index:4; }
#through-time h2 { display:flex;align-items:center;gap:20px;margin:0 0 9px 9px;font-size:var(--type-heading);line-height:var(--leading-heading);font-weight:600; }
.section-dot { width:15px;height:15px;border:1px solid var(--ink);border-radius:50%;flex-shrink:0; }
.time-bar { display:flex;align-items:center;gap:15px;padding-left:4px; }
#play { width:26px;height:26px;flex-shrink:0;display:grid;place-items:center; }
#play svg { width:24px;height:24px;stroke:currentColor;stroke-width:1;fill:none; }
.pause-shape { display:none; }
#play[aria-pressed=true] .pause-shape { display:block; }
#play[aria-pressed=true] .play-shape { display:none; }
#time { width:244px;margin:0; }
input[type=range]::-webkit-slider-runnable-track { height:1px; }
input[type=range]::-moz-range-track { height:1px; }
#pins { overflow:hidden; }
.room-trace { position:absolute;left:0;top:0;width:max-content;max-width:220px;transform-origin:50% 50%;pointer-events:none;will-change:transform,opacity,filter; }
.room-trace p { margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:18px;font-weight:350;color:var(--ink); }
.room-trace img { display:block;max-width:170px;max-height:135px;width:auto;height:auto;object-fit:contain;margin-bottom:5px; }
.room-trace.own { pointer-events:auto; }
#image-preview img { max-width:180px;max-height:130px;display:block;margin:12px 0 8px; }
#image-preview button,.image-label,#note-image { font-size:12px;line-height:14px;font-weight:350; }
.image-label { display:block;margin:18px 0 8px; }
#note-image { max-width:100%; }
#note-image::file-selector-button { font:inherit;color:inherit;background:transparent;border:1px solid var(--ink);padding:5px 9px;cursor:pointer; }
#trace-error { font-size:12px;line-height:14px; }
.placing-note canvas { cursor:crosshair; }
@media(max-width:600px){#controls{left:16px;bottom:111px;max-height:calc(100% - 155px)}#through-time{left:16px;width:255px;bottom:23px}#time{width:201px}#controls.open~.presence,.presence{top:20px;bottom:auto;right:17px}.room-trace{max-width:180px}.room-trace p{font-size:14px;line-height:16px}}
@media(max-height:520px){#controls{bottom:100px;max-height:calc(100% - 120px)}#through-time{bottom:16px}}
@media(prefers-reduced-motion:reduce){button,summary{transition:none}}