/* A two-dimensional sea and sky, with the shared poem holo treatment. */
.musing-page { margin: 0; background: #bad3d5; }
.musing-experience {
    --musing-ink: #153744;
    --musing-glass: rgb(216 231 229 / 28%);
    --musing-line: rgb(30 70 84 / 20%);
    --pinsta-accent: #92cdda;
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    color: var(--musing-ink);
    background: linear-gradient(#82b4c7, #d8e3d9 50.8%, #b4ced0 51.2%, #66929f);
    font-family: system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.musing-experience *, .musing-experience *::before, .musing-experience *::after { box-sizing: border-box; }
.musing-experience [hidden] { display: none !important; }
.musing-experience[data-light="night"] {
    --musing-ink: #eff2ee;
    --musing-glass: rgb(6 20 38 / 24%);
    --musing-line: rgb(228 242 240 / 18%);
    background: linear-gradient(#0c1930, #334459 50.8%, #293d50 51.2%, #101e33);
}
.musing-canvas { position: fixed; inset: 0; display: block; width: 100%; height: 100%; z-index: -2; touch-action: none; opacity: 0; transition: opacity .7s; }
.musing-experience[data-ready="true"] .musing-canvas { opacity: 1; }
/* Sky swipes retain native page scrolling; the water owns freeform gestures. */
.musing-page .musing-canvas { touch-action: pan-y pinch-zoom; }
.musing-water-input { position: fixed; inset: 51% 0 0; z-index: -2; touch-action: none; pointer-events: none; }
.musing-experience[data-ready="true"] .musing-water-input { pointer-events: auto; }
.musing-reading-light { position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 50% 42%, rgb(222 233 226 / 22%), transparent 62%); }
[data-light="night"] .musing-reading-light { background: radial-gradient(ellipse at 50% 42%, rgb(6 20 34 / 24%), transparent 62%); }
[data-poem-hidden="true"] .musing-reading-light { visibility: hidden; }
.musing-header { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: calc(18px + env(safe-area-inset-top, 0px)) max(3vw, 20px) 16px; z-index: 3; }
.musing-experience a, .musing-experience button { color: inherit; }
.musing-experience button { font: inherit; cursor: pointer; }
.musing-back, .musing-toggle { border: 0; background: none; text-decoration: none; min-height: 44px; padding: 10px 6px; font-size: 11px !important; letter-spacing: .07em; opacity: .8; }
.musing-back span { margin-right: 8px; }
.musing-toggle span { margin-left: 8px; }
.musing-experience :is(a,button,input):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.musing-experience :is(a,button):hover { opacity: 1; }
.musing-reading { min-height: 100svh; display: grid; place-items: center; padding: 100px 24px 140px; pointer-events: none; }
.musing-experience .musing-poem {
    position: relative;
    display: block;
    width: min(680px, 100%);
    max-width: none;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    color: inherit;
    background: transparent;
    text-align: center;
    font-family: 'Pinsta Cormorant Garamond', Georgia, serif;
    pointer-events: auto;
}
.musing-page .musing-experience .musing-poem,
.musing-page .musing-experience .musing-poem * {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.musing-poem .holo-html-layer { padding: 0 12px; text-shadow: 0 1px 18px rgb(220 232 226 / 35%); }
[data-light="night"] .musing-poem .holo-html-layer { text-shadow: 0 2px 20px rgb(4 16 30 / 45%); }
.musing-poem[data-holo-webgl="true"] .holo-html-layer { text-shadow: none; }
.musing-poem h1 { margin: 0 0 30px; font-family: inherit; font-size: clamp(28px, 3.1vw, 42px); font-weight: 400; line-height: 1.2; letter-spacing: .045em; }
.musing-verse { font-family: inherit; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; letter-spacing: .012em; }
.musing-verse p { margin: 0 0 20px; }
.musing-verse p:last-child { margin-bottom: 0; }
.musing-poem[data-text-font="cormorant"] .musing-verse,
.musing-poem[data-text-font="fraunces"] .musing-verse { font-size: clamp(19px, 1.65vw, 24px); line-height: 1.5; }
.musing-poem[data-text-font="cormorant"] h1 { font-size: clamp(38px, 3.8vw, 54px); }
.musing-poem[data-holo-suspended="true"] .holo-html-layer.holo-effect { animation-play-state: paused; }
.musing-footer { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); pointer-events: none; z-index: 5; }
.musing-hint { margin: 0; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.musing-star { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 6px; border: 0; background: none; pointer-events: auto; font-size: 11px !important; letter-spacing: .035em; opacity: .8; visibility: visible; transition: opacity .16s ease .3s, visibility 0s linear .3s; }
.musing-star span { font-size: 20px; line-height: 1; }
/* Keep the star's space; it returns only after the panel has closed. */
.musing-footer:has(.pinsta-holo-controls:not(.collapsed):not([hidden])) .musing-star { visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
.musing-controls { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 3px 18px; border: 1px solid var(--musing-line); border-radius: 40px; background: var(--musing-glass); backdrop-filter: blur(12px); pointer-events: auto; font-size: 10px; letter-spacing: .08em; }
#musing-phase-label { min-width: 34px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
#musing-time { appearance: none; display: block; width: clamp(88px, 14vw, 170px); height: 32px; padding: 0; margin: 0; background: transparent; accent-color: var(--musing-ink); cursor: ew-resize; }
#musing-time::-webkit-slider-runnable-track { height: 2px; background: var(--musing-ink); opacity: .5; border-radius: 2px; }
#musing-time::-moz-range-track { height: 2px; background: var(--musing-ink); opacity: .5; border-radius: 2px; }
#musing-time::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: var(--musing-ink); }
#musing-time::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--musing-ink); }
.musing-pause { background: none; border: 0; padding: 8px 0; min-width: 43px; min-height: 44px; text-transform: uppercase; font-size: 9px !important; letter-spacing: .08em; }
.musing-controls > .pinsta-holo-controls { position: relative; inset: auto; padding-left: 8px; color: inherit; font-family: inherit; font-size: 10px; }
/* The divider belongs to the dock, outside the button's rounded fill. */
.musing-controls > .pinsta-holo-controls::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--musing-line); }
.musing-controls .pinsta-holo-controls .pinsta-holo-toggle {
    display: grid;
    grid-template-columns: 6px 1fr 6px;
    align-items: center;
    justify-items: center;
    gap: 6px;
    min-width: 68px;
    min-height: 44px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: transparent;
    color: inherit;
    box-shadow: none;
    animation: none;
    font-size: 9px;
    text-align: center;
}
/* Equal side slots keep the word centered, independently of its status dot. */
.musing-controls .pinsta-holo-controls .pinsta-holo-toggle::after { content: ''; display: block; width: 6px; height: 6px; margin: 0; opacity: 0; }
.musing-controls .pinsta-holo-controls .pinsta-holo-toggle::before { background: currentColor; opacity: .28; box-shadow: none; }
.musing-controls .pinsta-holo-controls:not(.holo-off) .pinsta-holo-toggle::before { background: #b4ffff; opacity: 1; box-shadow: 0 0 4px 1px rgb(150 220 255 / 70%); }
.musing-controls .pinsta-holo-controls:not(.collapsed) .pinsta-holo-toggle { background: var(--musing-glass); border-color: var(--musing-line); color: inherit; box-shadow: none; animation: none; }
.musing-controls .holo-indicator-wrap { display: none; }
.musing-controls .holo-control-panel { bottom: calc(100% + 14px); left: auto; right: -15px; transform-origin: bottom right; color: #f1f3f5; max-height: calc(100svh - 130px); overflow-y: auto; letter-spacing: normal; }
.musing-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* A still feed preview; graphics begin only when the poem opens. */
.musing-preview { position: relative; height: 100%; width: 100%; overflow: hidden; display: grid; place-items: center; color: #173f4b; background: linear-gradient(#9cc6d0, #dae3d9 51%, #c2d7d6 51.5%, #92b5be); }
.musing-preview-sun { position: absolute; width: 10%; aspect-ratio: 1; border-radius: 50%; right: 23%; top: 18%; background: #f6edd1; box-shadow: 0 0 32px 14px rgb(255 238 195 / 23%); }
.musing-preview-sun::after { content: ''; position: absolute; width: 100%; height: 100%; top: 570%; left: 0; border-radius: inherit; background: inherit; filter: blur(2px); opacity: .65; transform: scaleY(.8); }
.musing-preview-copy { position: relative; z-index: 1; text-align: center; width: 100%; padding: 9%; text-shadow: 0 1px 14px rgb(227 236 222 / 65%); }
.musing-preview-kicker, .musing-preview-label { display: none; }
.musing-preview-title { display: block; font: 400 clamp(24px, 2.8vw, 40px)/1.2 'Pinsta Cormorant Garamond', Georgia, serif; letter-spacing: .025em; margin-bottom: 15px; }
.musing-preview-excerpt { display: block; font: 400 clamp(13px, 1.2vw, 17px)/1.45 'Pinsta Cormorant Garamond', Georgia, serif; }
.musing-embedded { min-height: 0; overflow: hidden; }
.musing-embedded .musing-canvas { position: absolute; pointer-events: none; }
.musing-embedded .musing-poem { width: 100%; height: 100%; padding: 0; overflow-y: auto; }
.musing-embedded .holo-html-layer { display: flex; flex-direction: column; justify-content: center; min-height: 100%; max-width: 690px; margin-inline: auto; padding: max(65px, 9vh) 30px 100px; }
.musing-enter { position: absolute; bottom: 23px; right: 24px; padding: 12px 14px; background: var(--musing-glass); border: 1px solid var(--musing-line); border-radius: 30px; font-size: 11px; text-decoration: none; backdrop-filter: blur(10px); }
@media (max-width: 900px) {
    .musing-hint { display: none; }
}
@media (max-width: 640px) {
    .musing-header { padding-inline: 20px; }
    .musing-reading { padding: calc(110px + env(safe-area-inset-top, 0px)) 15px 180px; }
    .musing-verse { font-size: 15px; line-height: 1.65; }
    .musing-verse p { margin-bottom: 18px; }
    .musing-poem h1 { font-size: 29px; margin-bottom: 28px; }
    .musing-footer { padding-inline: 10px; flex-direction: column; row-gap: 4px; }
    .musing-hint { display: none; }
    .musing-star { order: -1; padding-inline: 16px; border: 1px solid var(--musing-line); border-radius: 40px; background: var(--musing-glass); backdrop-filter: blur(12px); }
    .musing-controls { gap: 9px; padding-inline: 14px; max-width: 100%; }
    .musing-controls .holo-control-panel { right: -10px; }
    .musing-embedded .holo-html-layer { padding: 75px 12px 100px; }
}
@media (prefers-reduced-motion: reduce) {
    .musing-experience *, .musing-experience *::before { transition: none !important; }
}