/* Shared tokens and structural rules; visual.css defines the observation surface. */
:root {
 color-scheme:dark; --bg:#080B10; --ui:#426A8C; --point:#C2D5E5; --white:#FFFFFF; --amber:#C9A668;
 --line:1px; --strong-line:2px; --s1:8px; --s2:16px; --s3:24px; --s4:32px;
 --f1:12px; --f2:17px; --f3:24px; --f4:34px; --regular:400; --bold:600;
 --mono:Consolas,ui-monospace,monospace; --body:'Yu Gothic UI',Meiryo,sans-serif;
 --panel-width:1fr; --dot-size:6px; --hit-size:28px; --reticle-size:40px;
 font:var(--regular) var(--f2)/1.5 var(--body); color:var(--point);background:var(--bg);
}
*{box-sizing:border-box}body{margin:0}button,input,a{font:inherit;color:inherit}button{cursor:pointer}
button,a,input{-webkit-tap-highlight-color:transparent}button{border:var(--line) solid color-mix(in srgb,var(--ui) 65%,transparent);background:transparent;padding:var(--s1) var(--s2)}
button:hover,a:hover{color:var(--white);border-color:var(--point)}
button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:var(--strong-line) solid var(--white);outline-offset:2px}
[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3,strong{font-weight:var(--bold)}a{color:inherit;text-decoration:none}
.app{--player-frame-height:144px;--player-dock-height:calc(var(--player-frame-height) + 34px);height:100dvh;min-height:720px;display:grid;grid-template-rows:64px minmax(0,1fr) var(--player-dock-height);position:relative;isolation:isolate;overflow:hidden}
.app,.boot,#continuous-world{max-width:1920px;margin-inline:auto}
.header{padding:0 var(--s3);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.brand{display:flex;align-items:center;gap:var(--s2);white-space:nowrap}
.brand h1{font:var(--regular) var(--f4)/1 var(--mono);letter-spacing:.1em}.brand p{font-size:var(--f1)}
.header-actions{display:flex;align-items:center;gap:var(--s2)}.demo-label,.panel-footer{font-size:var(--f1)}.demo-label{border:var(--line) solid var(--ui);padding:0 var(--s1)}
.outline-button,.plain-button,.subtle-button{font-size:var(--f1)}.plain-button,.subtle-button{border:0}.icon-button{width:32px;height:32px;padding:0;font-size:var(--f3)}
.event-tabs{display:flex;gap:var(--s1);overflow-x:auto;min-width:0;scrollbar-width:none;flex:1}
.event-tabs button{flex:none;font-size:var(--f1);padding:0 var(--s2);height:32px;white-space:nowrap}
.event-tabs button[aria-pressed=true]{border-color:var(--white);color:var(--white)}.event-tabs button.recruiting,.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1.41421356237fr) minmax(0,1fr);gap:var(--s2);padding:0 var(--s2) var(--s1);position:relative}
.map{min-width:0;min-height:0;display:grid;grid-template-rows:40px minmax(0,1fr) 48px;position:relative;border:var(--line) solid color-mix(in srgb,var(--ui) 65%,transparent)}
.map-stage{position:relative;min-height:0;isolation:isolate;overflow:hidden}
.map-footer{display:grid;grid-template-rows:24px 24px;padding:0 var(--s2);border-top:var(--line) solid color-mix(in srgb,var(--ui) 45%,transparent);font-size:var(--f1);overflow:hidden}
.map-footer button{white-space:nowrap;font-size:var(--f1)}.map-status{font-size:var(--f1);line-height:1.4}
.sidebar{min-height:0;border:var(--line) solid color-mix(in srgb,var(--ui) 65%,transparent);display:grid;grid-template-rows:32px 32px minmax(372px,1fr) 24px;background:var(--bg)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:0 var(--s2)}
.list-controls{padding:0 var(--s2);min-width:0}
#event-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{display:flex;align-items:center;gap:var(--s1);border:var(--line) solid color-mix(in srgb,var(--ui) 60%,transparent);border-radius:0;padding:0 var(--s1);height:32px}
.search:focus-within{border-color:var(--point)}
#search:focus-visible{outline:none}
.search-icon{width:16px;height:16px;flex:none;fill:none;stroke:var(--text-note);stroke-width:1;stroke-linecap:round}
.search input{min-width:0;width:100%;background:transparent;border:0;font-size:var(--f2);padding:var(--s1) 0}
.search input::placeholder{color:var(--point);opacity:.7}
.track-list{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ui) transparent;overscroll-behavior:contain;overflow-anchor:none;margin-top:17px;margin-left:-12px;padding-left:12px;padding-bottom:8px}
.track-row{display:flex;width:100%;height:36px;align-items:center;gap:var(--s1);padding:0 var(--s2);border:0;border-bottom:var(--line) solid color-mix(in srgb,var(--ui) 25%,transparent);text-align:left}
.track-row strong{font-size:var(--f2);font-weight:var(--regular);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-row small{font-size:var(--f1);max-width:35%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.track-row:focus-visible{outline:1px solid var(--point);outline-offset:-1px}.track-row.selected:focus-visible{outline:none}.list-empty{padding:var(--s2);font-size:var(--f2)}
.panel-footer{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-edge{position:absolute;right:0;top:0;bottom:var(--player-dock-height);width:24px;display:flex;align-items:center;background:transparent}
.panel-toggle{width:24px;height:64px;padding:0;border:1px solid var(--ui);border-radius:4px 0 0 4px;background:var(--bg);display:grid;place-items:center}
.boot{position:fixed;inset:0;z-index:20;background:var(--bg)}.boot-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.boot-shade{background:var(--bg);opacity:.65}.boot-brand{position:absolute;left:0;right:0;top:45%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.boot-logo{display:block;width:min(280px,calc((88dvh - 210px) * 840 / 682));max-width:calc(100vw - 32px);height:auto;opacity:.9;flex:none}.boot-brand p{font-size:var(--f2);margin-top:var(--s2)}
.boot-sequence{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:480px}.sequence-caption{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--f1);margin-bottom:var(--s2)}
.sequence-caption>span:first-child{font-family:var(--mono)}progress{appearance:none;width:100%;height:2px;background:var(--ui);border:0}
progress::-webkit-progress-bar{background:var(--ui)}progress::-webkit-progress-value{background:var(--point)}progress::-moz-progress-bar{background:var(--point)}
.boot-sequence button{margin-top:var(--s2)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:no-preference){.boot.leaving{animation:boot-out .2s linear forwards}@keyframes boot-out{to{opacity:0}}}

/* Stage 2: observation-window hierarchy; dimensions are never scaled as a page. */
.observation-heading{display:flex;align-items:center;gap:var(--s1);padding:0 var(--s2);border-bottom:var(--line) solid color-mix(in srgb,var(--ui) 45%,transparent);min-width:0}
.window-title{font:600 14px/1 var(--mono);letter-spacing:.12em;display:inline-flex;align-items:center;white-space:nowrap;flex:none}
.event-tabs{align-items:center}
.event-tabs .event-button{display:flex;align-items:center;gap:var(--s1);padding:0 var(--s1);border-color:transparent;max-width:280px}
.event-tabs .event-button[aria-pressed=true]{background:color-mix(in srgb,var(--ui) 12%,transparent);border-color:color-mix(in srgb,var(--point) 50%,transparent)}
.event-label{overflow:hidden;text-overflow:ellipsis}
.recruitment-badge{color:var(--amber);font-size:var(--f1);border:var(--line) solid color-mix(in srgb,var(--amber) 45%,transparent);padding:0 var(--s1)}
.motion-toggle{display:flex;align-items:center;gap:var(--s1);border:0;padding:0;white-space:nowrap;font-size:var(--f1)}
.toggle-track{width:24px;height:12px;border:var(--line) solid var(--ui);border-radius:8px;position:relative}
.toggle-track::after{content:'';position:absolute;width:8px;height:8px;left:1px;top:1px;border-radius:50%;background:var(--point)}
.motion-toggle[aria-pressed=true] .toggle-track{border-color:var(--white)}
.motion-toggle[aria-pressed=true] .toggle-track::after{left:13px;background:var(--white)}
.map-legend{display:flex;align-items:center;gap:var(--s1);white-space:nowrap}
.legend-dot{width:6px;height:6px;background:var(--point);border-radius:50%;flex:none}
.legend-selected{width:12px;height:12px;border:var(--line) solid var(--white);border-radius:50%;margin-left:var(--s1);flex:none}
.map-actions{display:flex;align-items:center;gap:var(--s1);padding:0 var(--s2);border-top:var(--line) solid color-mix(in srgb,var(--ui) 35%,transparent);min-width:0}
.map-actions button{font-size:var(--f1);white-space:nowrap}.map-status{min-width:0;flex:1}
.panel-footer{line-height:16px;opacity:.55}
.workspace:has(.sidebar[hidden]){grid-template-columns:minmax(0,1fr)}

/* Navigation surface: photo and curtain are behind ALL instrumentation. */
.space-backdrop{position:absolute;inset:0;z-index:-1;background:var(--bg);pointer-events:none}
.background-art,.background-curtain{position:absolute;inset:0;background-size:cover;background-position:center}
.background-curtain{background:var(--bg);opacity:var(--curtain,1)}
.grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--ui) 18%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ui) 18%,transparent) 1px,transparent 1px);background-size:64px 64px;background-position:calc(50% + 32px) calc(50% + 32px);pointer-events:none}
.observation-border{position:absolute;inset:8px;pointer-events:none}
.corner{position:absolute;width:16px;height:16px;border-color:var(--point);opacity:.8}
.corner.tl{top:0;left:0;border-top:var(--strong-line) solid;border-left:var(--strong-line) solid}.corner.tr{top:0;right:0;border-top:var(--strong-line) solid;border-right:var(--strong-line) solid}
.corner.bl{bottom:0;left:0;border-bottom:var(--strong-line) solid;border-left:var(--strong-line) solid}.corner.br{bottom:0;right:0;border-bottom:var(--strong-line) solid;border-right:var(--strong-line) solid}
.stars{position:absolute;inset:0;pointer-events:none}.galaxy-view{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.rotor{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--angle,0deg));will-change:transform}
.orbit-boundary{position:absolute;left:-250px;top:-250px;width:500px;height:500px;border:var(--line) solid color-mix(in srgb,var(--ui) 30%,transparent);border-radius:50%;pointer-events:none}
.star{position:absolute;width:var(--hit-size);height:var(--hit-size);padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);pointer-events:auto}
.star-glyph{position:absolute;inset:-6px;width:var(--reticle-size);height:var(--reticle-size);transform:rotate(calc(-1 * var(--angle,0deg)));display:grid;place-items:center;pointer-events:none}
.star-dot{width:var(--dot-size);height:var(--dot-size);background:var(--point);border-radius:50%;pointer-events:none}
.star.selected .star-glyph::before,.star:focus-visible .star-glyph::before,.star:hover .star-glyph::before,.star.hovered .star-glyph::before{content:'';position:absolute;inset:var(--s1);border:var(--line) solid var(--white);border-radius:50%}
.star.selected .star-glyph::after{content:'';position:absolute;inset:0;border:var(--line) solid var(--white);border-radius:50%;mask-image:conic-gradient(from 20deg,transparent 0deg 50deg,var(--white) 50deg 90deg,transparent 90deg 140deg,var(--white) 140deg 180deg,transparent 180deg 230deg,var(--white) 230deg 270deg,transparent 270deg 320deg,var(--white) 320deg 360deg)}
.star.selected .star-dot{background:var(--white)}.star.dimmed{opacity:.3}.star:focus-visible{outline-offset:0;outline:var(--line) solid var(--white)}
/* fix28: dots are canvas-drawn; ring and focus elements take no pointer input (hit tests are by coordinate). */
.star-canvas{position:absolute;left:0;top:0;pointer-events:none}
#stars .star{pointer-events:none}
.readout{position:absolute;left:50%;top:50%;width:70px;height:24px;transform:translate(-50%,-50%);background:var(--bg);font:var(--f1)/12px var(--body);text-align:center;pointer-events:none;overflow:hidden}
.readout span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.selection-leader{position:absolute;left:50%;top:50%;width:1px;height:1px;overflow:visible;pointer-events:none}
.selection-leader path{fill:none;stroke:var(--point);stroke-width:var(--line);opacity:.65;pointer-events:none}
.map-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-size:var(--f2);max-width:280px;pointer-events:none}

/* fix01: non-interactive decorative arcs, behind every song. */
.spiral-arcs{position:absolute;left:-250px;top:-250px;width:500px;height:500px;pointer-events:none}
.spiral-arcs path{fill:none;stroke:var(--ui);stroke-width:var(--line);opacity:.35;pointer-events:none}

/* Isolated, deliberately approximate visual comparison. */
.orbit-choice{display:flex;align-items:center;gap:8px;font-size:var(--f1)}
.orbit-choice select{font:inherit;color:var(--point);background:var(--bg);border:1px solid var(--ui);padding:8px}
.orbit-choice select:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.rotor{transform:none;will-change:auto}
.star-glyph{transform:none}
.orbit-guides{position:absolute;left:-250px;top:-250px;width:500px;height:500px;pointer-events:none}
.orbit-guides ellipse{fill:none;stroke:var(--ui);stroke-width:1;opacity:.35;pointer-events:none}

/* Guides are optional comparison aids, never songs or interactive objects. */
.orbit-guides{display:none}
.show-orbit-lines .orbit-guides{display:block}
#orbit-lines[aria-pressed=true]{color:var(--white);border-color:var(--white)}

/* Focus-centered guides can extend past the normalized 250px canvas. */
.orbit-guides{overflow:visible}

/* Non-interactive shared trail layer below the song buttons. */
#orbit-trails{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--point)}
#tail-toggle{font-size:12px;padding:0 8px;white-space:nowrap}
#tail-toggle[aria-pressed=false]{opacity:.5}

/* Separate orbit-line study: the former tail preview remains available. */
#line-study-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--point);display:none}
.line-study #line-study-layer{display:block}
.line-study #orbit-trails,.line-study #orbit-study-control,.line-study #orbit-lines,.line-study #tail-toggle,.line-study .orbit-guides{display:none!important}

#seed-controls{display:flex;gap:16px;font-size:12px}
#seed-controls label{display:flex;gap:8px;align-items:center}
#seed-controls select{font:inherit;color:var(--point);background:var(--bg);border:1px solid var(--ui);padding:8px}
.seed-study .map-legend > :not(#seed-record){display:none}
#seed-record{font:12px var(--mono)}
#seed-url{color:var(--point)}

/* Appearance controls sit in existing map top-right space, never reduce drawing height. */
.appearance-controls{position:absolute;top:52px;right:24px;z-index:2;display:flex;gap:8px;font-size:12px}
.appearance-controls label{display:flex;align-items:center;gap:4px}
.appearance-controls select{font:inherit;color:var(--point);background:var(--bg);border:1px solid var(--ui);padding:4px}
.seed-study .star .star-dot{background:var(--point)}
.seed-study.stars-five .star .star-dot{background:var(--star-color)}

/* Only loaded by the isolated F/G page. */
.label-study #readout,.label-study #selection-leader{display:none!important}
.label-study .appearance-controls>label:not(:last-child){display:none}
#orbit-label{position:absolute;z-index:3;height:28px;padding:4px 6px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:14px/18px var(--body);color:var(--point);background:rgba(9,13,18,.9);border:1px solid rgba(66,106,140,.35);pointer-events:none}

.port-route-study .appearance-controls>label{display:none}.port-route-study .appearance-controls>label:last-child{display:flex}
#route-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--point)}
#selected-orbit{stroke:currentColor;stroke-width:1.1;opacity:.65}
#port-direction{stroke:currentColor;stroke-width:1;opacity:.4}

/* Scoped background comparison; no geometry or typography changes. */
.background-study .map{background:rgb(8 11 16 / var(--window-opacity,.35))}
.background-study .background-art{background-repeat:no-repeat}
#background-settings{position:relative;font-size:12px;z-index:10}
#background-settings summary{cursor:pointer;border:1px solid var(--ui);padding:8px}
.background-options{position:absolute;right:0;top:100%;width:330px;padding:16px;background:var(--bg);border:1px solid var(--ui)}
.background-options label{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.background-options input{width:150px}.background-options p{font-size:12px}
.background-options #seed-controls{display:block}.background-options select{font-size:12px}

#continuous-world{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg);pointer-events:none}
#continuous-world img{position:absolute;max-width:none;opacity:0;transition:opacity 3s linear}
#continuous-shade{position:absolute;inset:0;z-index:2;background:var(--bg);opacity:.30;transition:opacity .6s ease}
.continuous-flow.navigation-visible #continuous-shade{opacity:.75}
.continuous-flow .space-backdrop{display:none}
.continuous-flow #app{z-index:1;opacity:0;transition:opacity .6s ease}
.continuous-flow.navigation-visible #app{opacity:1}
.continuous-flow #boot{background:transparent}
.continuous-flow .boot-shade{display:none!important}
@media(prefers-reduced-motion:reduce){#continuous-world img,#continuous-shade,.continuous-flow #app{transition:none}}
#readout,#selection-leader{display:none!important}
#continuous-shade{opacity:var(--intro-curtain);transition-duration:var(--entrance-fade)}
.continuous-flow.navigation-visible #continuous-shade{opacity:var(--main-curtain)}
.continuous-flow #app{transition-duration:var(--entrance-fade)}

/* FIX02 display-radius inheritance; glyphs and hit targets keep their CSS size. */
.orbit-boundary{left:calc(-1 * var(--display-radius,250px));top:calc(-1 * var(--display-radius,250px));width:calc(2 * var(--display-radius,250px));height:calc(2 * var(--display-radius,250px))}
.orbit-plane,.scene-plane{position:absolute;inset:0;pointer-events:none}
.orbit-plane{z-index:0}.scene-plane{z-index:2}
#center-port{position:absolute;left:50%;top:50%;width:calc(var(--display-radius,250px)*.24);height:auto;transform:translate(-50%,-50%);opacity:var(--center-port-opacity,.6);z-index:1;pointer-events:none}
#route-overlay{z-index:2}
.sidebar{grid-template-rows:32px 32px minmax(372px,1fr) 24px}
.panel-footer{line-height:16px;min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 7b: information hierarchy. Orbit geometry, glyphs and hit targets are unchanged. */
:root{--text-primary:#EEF2FF;--text-secondary:#8BA3CC;--text-note:#6F7F9E;color:var(--text-secondary)}
.workspace{grid-template-columns:minmax(0,1fr) 380px;margin-right:24px;padding-left:24px}
.brand h1,.track-row strong{color:var(--text-primary)}
.brand p{letter-spacing:.04em;color:var(--text-secondary)}
.brand .catchcopy-en,.boot-brand .catchcopy-en{font:var(--f1)/1 var(--mono);letter-spacing:.08em;color:var(--text-note);white-space:nowrap}
.brand .catchcopy>p:first-child{font-size:16px}
.brand .catchcopy-en{font-size:11px;letter-spacing:-.5px}
.boot-brand .catchcopy-en{margin-top:var(--s1)}
.demo-label,.site-note{font-size:11px;color:var(--text-note);border:0;padding:0}
/* fix33: the "generated with Suno" note sits beside the demo note and stays when example_data is false. */
.site-note{white-space:nowrap}
.window-title{color:var(--point);opacity:1;position:relative;align-self:stretch}
/* fix38: the title fills its band's height (text stays centred), so the bar runs between the band's upper and lower lines. */
.window-title::before{content:'';position:absolute;left:-13px;top:0;bottom:0;width:3px;background:var(--amber);pointer-events:none}
/* The dock frame and the dashed line are drawn over the ticket header's own box, so keep 1px clear of each. */
.ticket-heading::before{top:1px;bottom:1px}
/* Map and list headings sit like the boarding pass: the bar 9px inside the frame line, the text 10px after it. */
.observation-heading,.panel-heading{padding-left:22px}
.event-label{color:var(--text-secondary)}
.event-button[aria-pressed=true] .event-label{color:var(--white)}
.recruitment-badge{background:var(--amber);color:var(--bg);border:0}
.orbit-boundary{border-color:color-mix(in srgb,var(--ui) 6%,transparent)}
#line-study-layer{color:var(--point)}
.map-footer{grid-template-rows:1fr;align-items:center}
.sidebar{border:var(--line) solid color-mix(in srgb,var(--ui) 65%,transparent);background:linear-gradient(90deg,rgb(8 11 16 / 75%),rgb(8 11 16 / 97%) 120px);grid-template-rows:40px 40px minmax(364px,1fr) 24px}
/* fix63 rev. 3 J: 8px between the SONG LIST heading's line and the search box (its row is 8px taller); the list below
   moves down and gets shorter by as much (its least height too, 372px to 364px, so the list still ends 8px above the
   frame at 1280x720). The phone layout sets its own rows and padding. */
.list-controls{padding-top:var(--s1)}
.panel-heading{border-bottom:var(--line) solid color-mix(in srgb,var(--ui) 45%,transparent)}
.event-tabs .event-button{font:12px/1.5 var(--mono);border:0;background:transparent;color:var(--text-note)}
.event-tabs .event-button[aria-pressed=true]{background:transparent;color:var(--text-secondary)}
.event-tabs .event-button .event-label{color:inherit}
.event-tabs .event-button[aria-pressed=true] .event-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.event-tabs .event-button[aria-pressed=false]{color:color-mix(in srgb,var(--text-note) 85%,var(--bg))}
.search input{font-size:15px;padding:0}.search input::placeholder{color:var(--text-note);opacity:1}
.track-row{height:48px;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:20px 16px;column-gap:8px;row-gap:0;padding:6px 16px;border-bottom-color:color-mix(in srgb,var(--ui) 14%,transparent)}
.track-artwork{grid-column:1;grid-row:1/3;width:34px;height:34px;align-self:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--ui) 35%,transparent)}
.track-artwork img{display:block;width:100%;height:100%;object-fit:cover}
.track-row strong{grid-column:2;grid-row:1;font-size:15px;line-height:20px;align-self:end}
.track-row small{grid-column:2;grid-row:2;max-width:100%;font-size:12px;line-height:16px;color:var(--text-secondary);align-self:start}

.map-actions{padding:0 16px;gap:8px}.map-actions button{padding:4px 8px}.map-status{font-size:11px;line-height:16px;color:var(--text-secondary)}

/* The empty-event outline remains; populated maps show individual track orbits. */
.galaxy-view:has(.star:not([hidden])) .orbit-boundary{display:none}
#orbit-label{color:var(--text-primary)}

/* Selected-row actions share the row surface without nesting links in a button. */
.panel-heading{gap:8px}
.panel-heading h2{white-space:nowrap}
#result-count{margin-left:auto;white-space:nowrap;font:var(--f1)/1.5 var(--mono);color:var(--text-note)}
/* fix69: 「149 SONGS | 103 CREATORS」: the numbers 18px (1.5 times the 12px words); the words and | stay 12px
   monospace in --text-note; no light, shadow or motion. The heading keeps its height (40px). fix70: the numbers are in
   --text-note too, like the words (white was a little too strong). */
#result-count .count-number{font:18px/1 var(--mono);color:var(--text-note)}
.track-item{display:flex;position:relative;height:48px;margin-left:0;transition:height .15s ease-out,margin-left .15s ease-out}
.track-item::after{content:'';position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid color-mix(in srgb,var(--ui) 14%,transparent);pointer-events:none}
.track-item:has(.track-row.selected){height:64px;margin-left:-12px;background:color-mix(in srgb,var(--point) 12%,transparent);border-radius:4px;z-index:1}
.track-item:has(.track-row.selected)::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);border-radius:4px 0 0 4px;pointer-events:none}
.track-item:has(.track-row.selected)::after{left:2px;right:2px;bottom:-8px;height:8px;border:0;background:radial-gradient(ellipse at 50% 0,rgb(0 0 0 / 50%),transparent 70%)}
/* fix71 rev. 1: a song not listened to yet has a faintly lighter navy row (--ui 10% over the list, like an unread mail);
   once heard, the row melts into the list's ground. The selected row keeps its own look (left out here). No light,
   shadow or motion; the background changes at once (no transition). It takes no room. Rows only; the map's stars show
   nothing of it. Rev. 2: the background shows only listened / not yet and the selection (the selected row's line is
   amber, as the headings' marks, above). */
.track-item.unheard:not(:has(.track-row.selected)){background:color-mix(in srgb,var(--ui) 10%,transparent)}
/* fix71 rev. 2: under the mouse (devices that hover) a row keeps its background colour; a 2px --ui line at its left
   (full height) and a white title (as the selected one) show it. The line is a background image, not a ::before: while
   a key is held the row under the mouse keeps changing, and making and removing a box each time needs layout (measured
   in the key hold; a background image is only painted). The artist keeps its colour; the selected row keeps its own
   look. No transition, light, shadow or motion. */
@media (hover:hover){
 .track-item:not(:has(.track-row.selected)):hover{background-image:linear-gradient(var(--ui),var(--ui));background-size:2px 100%;background-repeat:no-repeat}
 .track-item:not(:has(.track-row.selected)):hover .track-row strong{color:var(--white)}
}
.track-row{flex:1;min-width:0;height:100%;border:0;background:transparent;transition:grid-template-columns .15s ease-out,grid-template-rows .15s ease-out,padding-left .15s ease-out}
/* fix72 2d: a heard row also shows a small green check at its right end (heard-check.svg: #86B89A = --suno, as SUNO ↗;
   12px, a 1.5 line; 16px from the row's right end, in its middle), besides its background (fix71 rev. 2); a decoration
   (the spoken name says 、聴いた). It is the row's background image, not an element: an svg in every row made the
   list's layout heavier while a key was held (measured), and a background image is only painted when it comes or goes
   (heard, the record cleared, the selection, the buttons shown, the wait). Not on the selected row, a row showing its
   buttons (SUNO ↗ / X / play: the selected and the open song) or a row waiting (its note 「少し待つと再生できます」 sits
   there). Every row not selected keeps 20px at its right (padding 16px -> 36px), so titles and artists never run under
   it and a row does not change when heard. */
.track-row:not(.selected){padding-right:36px}
.track-item:not(.unheard):not(.cooling):not(:has(> .track-links:not([hidden]))) .track-row{background:url(../images/heard-check.svg) no-repeat right 16px center/12px 12px}
.track-row.selected{grid-template-columns:56px minmax(0,1fr);grid-template-rows:30px 26px;padding:4px 16px 4px 6px}
.track-artwork{transition:width .15s ease-out,height .15s ease-out}
.track-row.selected .track-artwork{width:56px;height:56px}
.track-row.selected strong{color:var(--white);font-size:16px;line-height:22px}
.track-row.selected strong,.track-row.selected small{position:relative;top:-1px}
.track-links{display:flex;align-items:center;gap:12px;padding-right:16px}
.track-links:empty{display:none}
.track-links a{display:flex;align-items:center;min-height:32px;padding:6px 0;border:0;font-size:14px;line-height:20px;color:var(--text-secondary);white-space:nowrap}
.track-links a:hover,.track-links a:focus-visible{color:var(--point)}
.track-links a:focus-visible{outline:1px solid var(--point);outline-offset:2px}
.x-link svg{display:block;width:16px;height:auto}
@media(prefers-reduced-motion:reduce){.track-item,.track-row,.track-artwork{transition:none}}
.panel-toggle{color:var(--point)}
.panel-toggle:hover,.panel-toggle:focus-visible{background:color-mix(in srgb,var(--ui) 20%,var(--bg));color:var(--white);border-color:var(--ui)}
.panel-toggle:focus-visible{outline:1px solid var(--point);outline-offset:-2px}
.panel-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

#camera-plane{position:absolute;inset:0}
#camera-plane>.grid{inset:calc(-1 * var(--camera-grid-margin,calc(2 * var(--display-radius,250px))))}
#camera-plane>#route-overlay{overflow:visible}
.event-tabs::-webkit-scrollbar{display:none}
.map-footer{display:flex;justify-content:space-between;gap:16px}
.map-footer .map-actions{flex:1;min-width:0;padding:0;border:0}
.map-actions #random,.map-toggles{flex:none}
.map-toggles{display:flex;align-items:center;gap:16px}
.map-actions #collection-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Recruitment guidelines use a native modal and keep scrolling inside it. */
.header-actions #reload-page{flex:none;white-space:nowrap}
#guidelines-open{flex:none;height:32px;padding:0 12px;border:1px solid color-mix(in srgb,var(--ui) 60%,transparent);border-radius:0;font-size:16px;color:var(--text-secondary)}
#guidelines-open:hover,#guidelines-open:focus-visible{border-color:var(--point);outline:none}
body:has(.guidelines-dialog[open]){overflow:hidden}
.guidelines-dialog{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--ui);background:var(--bg);color:var(--text-secondary);font-size:15px;overflow:hidden}
.guidelines-dialog[open]{display:flex;flex-direction:column}
.guidelines-dialog::backdrop{background:rgb(0 0 0 / 65%)}
.guidelines-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2);border-bottom:1px solid color-mix(in srgb,var(--ui) 35%,transparent);flex:none}
.guidelines-heading h2{font-size:var(--f2);color:var(--text-primary)}
.guidelines-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--s2);scrollbar-width:thin;scrollbar-color:var(--ui) transparent}
.guidelines-body section+section{margin-top:var(--s3)}
.guidelines-infographic{display:block;width:100%;height:auto;margin-bottom:var(--s3)}
/* fix44: "お問い合わせ" inside a dialog opens the contact dialog; it looks like the links around it. */
.guidelines-body .dialog-link{display:inline;padding:0;border:0;background:transparent;font:inherit;color:var(--point);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* At every width the header's right side is two right-aligned lines (the policy / contact links above the Suno note)
   with リロード to their right. The links take the note's size and colour. */
.header-notes{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.header-note-line{display:flex;align-items:center;gap:var(--s2)}
.header-links{display:flex;align-items:center;font-size:11px;color:var(--text-note);white-space:nowrap}
.header-links .header-link{padding:0;border:0;background:transparent;font:inherit;color:inherit}
.header-links .header-link:hover,.header-links .header-link:focus-visible{color:var(--point);text-decoration:underline;text-underline-offset:3px}
/* リロード is built like SUNO ↗ (square 1px frame, 32px high, monospace 12px label, white text on a --ui 20% fill on hover
   and keyboard focus) in the colours of the 募集要項 button. */
/* margin-right equals the workspace's right padding, so the button's right edge meets the song list frame's outer line. */
#reload-page{flex:none;height:32px;margin-right:var(--s2);padding:0 10px;border:1px solid color-mix(in srgb,var(--ui) 60%,transparent);border-radius:0;background:transparent;font:12px/1 var(--mono);letter-spacing:.06em;color:var(--text-secondary);white-space:nowrap}
#reload-page:hover,#reload-page:focus-visible{color:var(--white);background:color-mix(in srgb,var(--ui) 20%,transparent);border-color:color-mix(in srgb,var(--ui) 60%,transparent)}
#reload-page:focus-visible{outline:1px solid var(--point);outline-offset:2px}
.guidelines-body h3{font-size:15px;color:var(--text-primary);margin-bottom:var(--s1)}
.guidelines-body p+p{margin-top:var(--s1)}
.guidelines-body a{color:var(--point);text-decoration:underline;text-underline-offset:3px}
/* fix72: 再生ログ. The count, then 聴いた記録を消す; its question 「聴いた記録を消しますか？」 with 消す and やめる takes the
   button's place, and 「聴いた記録を消しました。」 shows beside it. The buttons are framed like リロード (32px high, 1px
   --ui 60% frame, 13px; white on a --ui 20% fill under the mouse and keyboard focus). */
.listened-clear,.listened-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.listened-clear{margin-top:var(--s2)}
.listened-button{height:32px;padding:0 12px;border:1px solid color-mix(in srgb,var(--ui) 60%,transparent);border-radius:0;background:transparent;font:13px/1 var(--body);color:var(--text-secondary);white-space:nowrap}
.listened-button:hover,.listened-button:focus-visible{color:var(--white);background:color-mix(in srgb,var(--ui) 20%,transparent);border-color:color-mix(in srgb,var(--ui) 60%,transparent)}
.listened-done{font-size:13px;color:var(--text-secondary)}

.brand h1 img{display:block;width:auto;height:30px}

/* Uncommitted player trial: anchored to the map, outside the moving camera. */
.player-dock{min-width:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:center;gap:16px;margin:0 40px 0 24px;padding:9px 0;background:linear-gradient(90deg,rgb(8 11 16 / 75%),rgb(8 11 16 / 97%) 120px)}
.player-dock::before{content:'';position:absolute;inset:0;border:var(--line) solid color-mix(in srgb,var(--ui) 65%,transparent);pointer-events:none}
.player-hint{grid-column:1;min-width:0;padding:0 16px;font:12px/1.5 var(--mono);color:var(--text-note)}
.player-controls{display:grid;position:relative;min-width:0;height:calc(var(--player-frame-height) + 2px);grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:1fr 1fr;grid-column:2}
.player-transport{display:flex;justify-content:flex-end;gap:8px;grid-area:1 / 1;align-items:center;margin:0 16px;min-width:0}
.player-controls .player-control{display:flex;flex:none;align-items:center;justify-content:center;min-width:36px;min-height:36px;width:36px;height:36px;padding:0;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);background:transparent;color:var(--text-secondary)}
.player-dismiss{grid-area:1 / 2 / 3 / 3;border-left:1px solid color-mix(in srgb,var(--ui) 35%,transparent);display:grid;place-items:center}
.player-controls .player-close{border:0}
.player-controls svg{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.player-close svg{width:16px;height:16px}
.player-auto-mode svg{width:24px;height:18px}
.player-controls .player-control:not(:disabled):hover,.player-controls .player-control:not(:disabled):focus-visible{color:var(--white);background:color-mix(in srgb,var(--ui) 20%,transparent)}
.player-controls .player-control:focus-visible{outline:1px solid var(--point);outline-offset:2px}
.player-controls .player-control:disabled{color:var(--text-secondary);background:transparent}
.player-auto{display:flex;align-items:center}
.player-controls .player-auto-mode{width:140px;min-width:140px;justify-content:flex-start;padding:0 6px 0 14px;gap:6px;border-color:var(--amber);color:var(--amber)}
.player-controls .player-auto-mode:hover,.player-controls .player-auto-mode:focus-visible{background:color-mix(in srgb,var(--amber) 12%,transparent)}
.player-mode-name{font:12px var(--mono);letter-spacing:.06em;white-space:nowrap}
.player-auto-notes{grid-area:2 / 1;margin:0 16px;border-top:1px solid color-mix(in srgb,var(--ui) 35%,transparent);display:flex;align-items:center;justify-content:flex-end;min-width:0}
.player-countdown{display:flex;align-items:baseline;justify-content:flex-end;gap:12px;white-space:nowrap}
.player-countdown-label{font:10px/18px var(--mono);letter-spacing:.12em;color:var(--text-note)}
.player-countdown-value{font:24px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--point);min-width:5ch;text-align:right}
.player-surface{grid-area:1 / 1;margin-left:9px;min-width:0;height:calc(var(--player-frame-height) + 2px);border:1px solid rgb(255 255 255 / 8%);border-radius:4px;background:var(--bg);overflow:hidden}
.player-frame{display:block;width:100%;height:var(--player-frame-height);border:0;opacity:0;background:var(--bg)}
.player-frame.loaded{opacity:1}
.player-fallback{display:flex;height:100%;align-items:center;justify-content:center;font-size:14px}
.track-links .track-play{display:flex;align-items:center;justify-content:center;min-height:32px;min-width:32px;padding:6px 4px;border:0;background:transparent;font-size:14px;line-height:20px;color:var(--text-secondary)}
.track-links .track-play:hover,.track-links .track-play:focus-visible{color:var(--point)}
.track-links .track-play:focus-visible{outline:1px solid var(--point);outline-offset:2px}

/* Opened-track departure decoration stays inside the map-stage clipping boundary. */
.rocket-layer{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;pointer-events:none}
.departure-rocket,.rocket-trail{position:absolute;display:block;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:hidden}
.departure-rocket{width:20px;height:20px;color:var(--point)}
.rocket-trail{width:8px;height:8px}
/* fix74: the shooting stars' layer (meteor.js), shown only while one flies; over the stars, never in the way of the pointer. */
.meteor-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2;display:none}.meteor-layer.flying{display:block}
/* fix75 rev. 5 (the user's choice, from the site's own colours): the shooting stars are bluish white. The one place their
   colours are set, for the flying star and the 流れ星 / 流星群 symbols (meteor.js paints from these; white is --white):
   pale (was the warm white #fff3dc) the stars' white, mid (was the cream #f6e3bf) --point, deep (was the gold #e2b25a)
   the stars' blue, spark (was the sparks' gold #f3d29a) --point. */
:root{--meteor-pale:#E4EDF4;--meteor-mid:var(--point);--meteor-deep:#8BBDE2;--meteor-spark:var(--point)}

/* Boarding pass: fixed header above the existing player and controls. */
.player-dock{padding-top:33px}
.ticket-header{position:absolute;inset:0 0 auto;height:24px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;border-bottom:1px dashed color-mix(in srgb,var(--ui) 45%,transparent);font:10px/1 var(--mono);letter-spacing:.12em;color:var(--text-note);text-transform:uppercase}
.ticket-main-header,.ticket-stub-header{display:flex;align-items:center;min-width:0;gap:16px;padding:0 10px}
.ticket-heading{color:var(--amber);white-space:nowrap}
.ticket-event{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket-stub-header{padding:0 64px 0 16px;justify-content:space-between}
.ticket-sequence{white-space:nowrap}
.ticket-perforation{position:absolute;top:0;bottom:0;right:388px;border-left:1px dashed color-mix(in srgb,var(--ui) 45%,transparent);pointer-events:none}
.ticket-perforation::before,.ticket-perforation::after{content:'';position:absolute;left:-6px;width:11px;height:11px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);border-radius:50%;background:var(--bg)}
.ticket-perforation::before{top:-6px}.ticket-perforation::after{bottom:-6px}
.player-auto-notes{display:grid;grid-template-columns:66px 74px minmax(0,1fr);align-items:stretch;justify-content:normal}
.ticket-field{display:flex;flex-direction:column;justify-content:center;gap:5px;border-right:1px solid color-mix(in srgb,var(--ui) 35%,transparent);padding:0 6px}
.ticket-field:first-child{padding-left:0}
.ticket-label{font:9px/1 var(--mono);letter-spacing:.08em;color:var(--text-note)}
.ticket-value{font:12px/1 var(--mono);color:var(--point);white-space:nowrap}
.ticket-departure{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;padding-left:6px}
.player-countdown{gap:5px;align-items:center}
.player-countdown-label{font-size:9px;letter-spacing:.04em}
.player-countdown-value{min-width:4ch;text-align:right}
.player-controls .ticket-barcode{width:12px;height:22px;stroke-width:1;color:var(--text-note);stroke-linecap:butt}

/* Ticket 18a: compact paired columns and equal 4px player insets. */
.player-dock{padding:28px 0 4px;overflow:hidden}
.player-surface{position:absolute;grid-area:auto;left:4px;right:392px;top:28px;margin:0}
.ticket-perforation{right:387px;z-index:4}
.ticket-perforation::before,.ticket-perforation::after{left:-6px;width:12px;height:12px;box-sizing:border-box}
.ticket-perforation::before{top:-6px}.ticket-perforation::after{bottom:-6px}
.player-controls{display:grid;grid-template-columns:minmax(0,1fr) 140px 48px;grid-template-rows:1fr;column-gap:12px;align-items:center;padding-left:8px}
.player-transport{grid-area:1 / 2;display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin:0}
.ticket-navigation{display:flex;justify-content:flex-end;gap:8px}
.player-auto-notes{grid-area:1 / 1;margin:0;border:0;display:block}
.ticket-departure{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0}
.ticket-identity{display:flex;gap:10px;white-space:nowrap}
.ticket-value{font:10px/12px var(--mono);color:var(--text-note)}
.player-controls .ticket-barcode{width:64px;height:16px;align-self:flex-start;stroke-width:1}
.player-countdown{justify-content:flex-start;gap:6px}
.player-countdown-value{min-width:4ch}
.player-dismiss{position:absolute;right:0;top:-28px;bottom:-4px;width:48px;grid-area:auto;border-left:1px dashed color-mix(in srgb,var(--ui) 45%,transparent)}

/* Keep the ticket clear of the viewport bottom. fix63: also clear of a home bar (viewport-fit=cover reaches every
   device; 0 on a mouse PC, so nothing moves there). */
.app{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

.ticket-header{border-bottom:0}
.ticket-header::after{content:"";position:absolute;left:0;right:48px;bottom:0;border-bottom:1px dashed color-mix(in srgb,var(--ui) 45%,transparent);pointer-events:none}

.player-controls .ticket-barcode{fill:currentColor;stroke:none}

/* Ticket type follows the site heading / supporting text / time hierarchy. */
.ticket-main-header{padding-left:23px}
.ticket-heading{color:var(--point)}
.ticket-header,.ticket-value,.player-countdown-label{font:400 12px/18px var(--mono);color:var(--text-note)}
.ticket-departure-ja,.player-hint{font:400 12px/18px var(--body);color:var(--text-note)}
.ticket-departure{gap:6px}
.player-countdown-label{letter-spacing:0}

.player-no-next{display:block;margin-top:6px;font:400 12px/18px var(--body);color:var(--text-note);white-space:nowrap}

/* fix63: parts of the phone layout; never shown on PC. The phone rules are in one block at the end of this file, after
   every rule they adjust. fix68: the ticket's おまかせ航行 is shown on PC too (below). */
.phone-hint,.phone-footer,.player-phone-note,.map-return{display:none}

/* fix40: SUNO ↗ is built like REPEAT ALL (1px square frame, monospace label, white text on a --ui 20% fill on hover
   and keyboard focus) but in a muted green, so the link out to Suno reads apart from the amber in-site controls.
   Both are 32px high; the ticket one sits above REPEAT ALL and looks disabled without an open song. */
:root{--suno:#86B89A}
.track-links .suno-button,.player-controls .suno-button{justify-content:center;width:auto;min-width:0;height:32px;min-height:32px;padding:0 10px;border:1px solid var(--suno);border-radius:0;background:transparent;color:var(--suno);font:12px/1 var(--mono);letter-spacing:.06em;white-space:nowrap}
.track-links .suno-button:hover,.track-links .suno-button:focus-visible,.player-controls .suno-button:hover,.player-controls .suno-button:focus-visible{color:var(--white);background:color-mix(in srgb,var(--ui) 20%,transparent)}
.player-controls .suno-button[aria-disabled=true],.player-controls .suno-button[aria-disabled=true]:hover{border-color:color-mix(in srgb,var(--ui) 65%,transparent);color:var(--text-secondary);background:transparent;opacity:.45;cursor:default}
/* Play / stop inside a thin circle in the symbol's colour; the 32px hit area stays. During the stop cooldown the
   symbol and circle are dimmed to 45%. */
.track-links .track-play{width:32px;height:32px;padding:0;border:1px solid currentColor;border-radius:50%}
.track-links .track-play.cooling,.track-links .track-play.cooling:hover{color:color-mix(in srgb,var(--text-secondary) 45%,transparent);cursor:default}
/* The cooldown note shows while the pointer is anywhere on that song's row except the SUNO / X links. The row ends
   where ▶ begins, so 8px inside the row's right edge is 8px left of ▶. */
.track-row{position:relative}
/* fix45: while the restart wait lasts, ↻ looks like the disabled ticket buttons (it keeps focus; clicks are ignored). */
.player-controls .player-restart[aria-disabled=true],.player-controls .player-restart[aria-disabled=true]:hover{color:var(--text-secondary);background:transparent;opacity:.45;cursor:default}
/* While ↻ waits and is hovered or keyboard-focused, the bottom line of the departure column shows the song list's note
   in its place. The line's own text is hidden meanwhile (so it is not read twice) and returns when the wait ends. */
.player-no-next{position:relative}
.player-controls:has(.player-restart[aria-disabled=true]:is(:hover,:focus-visible)) .player-no-next{visibility:hidden}
.player-controls:has(.player-restart[aria-disabled=true]:is(:hover,:focus-visible)) .player-no-next::after{content:'少し待つと再生できます';visibility:visible;position:absolute;left:0;top:50%;transform:translateY(-50%);padding:2px 8px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);background:var(--bg);font:400 12px/18px var(--body);color:var(--text-secondary);white-space:nowrap;pointer-events:none;z-index:2}
.track-item.cooling:hover:not(:has(.track-links a:hover)) .track-row::after{content:'少し待つと再生できます';position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:2px 8px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);background:var(--bg);font:400 12px/18px var(--body);color:var(--text-secondary);white-space:nowrap;pointer-events:none;z-index:2}
/* fix52: 「星を共有」 sits left of SUNO ↗ above REPEAT ALL, with SUNO ↗'s height and type in the muted frame of the other
   ticket buttons. The row is wider than the 140px column and reaches into the empty right of the departure column,
   clear of the countdown digits (7.8px with a 5-character time; measured at 1280x720, 100% and 110%). */
.ticket-links{display:flex;justify-content:flex-end;gap:8px}
.player-controls .share-button{gap:6px;width:auto;min-width:0;height:32px;min-height:32px;padding:0 10px;font:12px/1 var(--mono);letter-spacing:.06em;white-space:nowrap}
.player-controls .share-button svg{width:14px;height:14px}
.player-controls .share-button[aria-disabled=true],.player-controls .share-button[aria-disabled=true]:hover{color:var(--text-secondary);background:transparent;opacity:.45;cursor:default}
/* 「リンクをコピーしました」 covers the departure column's bottom line, centred on it like the fix45 note; that line's own
   text is hidden meanwhile. Empty, the status element has no box. */
.player-auto-notes{position:relative}
.player-share-note{position:absolute;left:0;bottom:9px;transform:translateY(50%);font:400 12px/18px var(--body);color:var(--text-secondary);white-space:nowrap;pointer-events:none;z-index:3}
.player-share-note:not(:empty){padding:2px 8px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);background:var(--bg)}
.player-controls[data-share-note] .player-no-next{visibility:hidden}
/* When copying is refused: a small box just above the ticket (which clips its own overflow), right edges aligned. */
.share-fallback{position:absolute;right:40px;bottom:calc(var(--player-dock-height) + 24px);z-index:20;width:380px;box-sizing:border-box;display:grid;gap:6px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);background:var(--bg)}
.share-fallback-text{font:400 12px/18px var(--body);color:var(--text-secondary)}
.share-fallback-link{width:100%;box-sizing:border-box;height:28px;padding:0 6px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);border-radius:0;background:transparent;color:var(--text-primary);font:12px/1 var(--mono)}
.share-fallback-link:focus-visible{outline:1px solid var(--point);outline-offset:2px}
/* 「この星は見つかりませんでした」: top centre of the map, inside the observation frame, for about 3 s. */
.star-notice{position:absolute;left:50%;top:16px;transform:translateX(-50%);font:400 12px/18px var(--body);color:var(--text-secondary);white-space:nowrap;pointer-events:none;z-index:6}
.star-notice:not(:empty){padding:2px 8px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);background:var(--bg)}
/* fix54: 「リンクをコピーしました」 and the fix45 「少し待つと再生できます」 share the bottom line; only the one that came last
   (data-front, set by player.js) shows, and the other returns when that one ends if it is still due. */
.player-controls[data-front=share]:has(.player-restart[aria-disabled=true]:is(:hover,:focus-visible)) .player-no-next::after{content:none}
.player-controls[data-front=restart]:has(.player-restart[aria-disabled=true]:is(:hover,:focus-visible)) .player-share-note{visibility:hidden}
/* fix67: gazing on PC (app.js puts .gazing on #app; never on a phone). The header, the map's heading and tabs, the band
   under the map, the song list and its edge button fade to --gaze-dim-opacity over 2 s and come back in 0.2 s. Only
   their opacity changes: they stay where they are and can still be pressed, focused and read. */
/* fix75: the control room's message and the 流れ星 / 流星群 buttons over the map dim with them (the map itself does not). */
.app>.header,.map>.observation-heading,.map>.map-footer,.workspace>.sidebar,.app>.panel-edge,.map-stage>.control-message,.map-stage>.control-stars{transition:opacity .2s ease-out}
.app.gazing>.header,.app.gazing .map>.observation-heading,.app.gazing .map>.map-footer,.app.gazing>.workspace>.sidebar,.app.gazing>.panel-edge,.app.gazing .map-stage>.control-message,.app.gazing .map-stage>.control-stars{opacity:var(--gaze-dim-opacity,.25);transition:opacity 2s ease-in-out}
@media(prefers-reduced-motion:reduce){.app>.header,.map>.observation-heading,.map>.map-footer,.workspace>.sidebar,.app>.panel-edge,.map-stage>.control-message,.map-stage>.control-stars{transition:none}}
/* fix68: おまかせ航行 on PC. The rocket symbol (rocket.js; the map rocket's shape) is outline only: a 1px line with round
   ends and joins, 20px, in the button's text colour. Under the map: the symbol before the words, an amber frame and
   letters (like 募集中 and AUTO), 32px tall in the 48px band, 24px clear of the toggles; hover, keyboard focus and
   disabled as the other buttons. In the ticket: the symbol only, 36 x 36 like the other ticket buttons, at the left of
   the bottom row; 前の曲・最初から・次の曲 stay where they are, the row becomes 168px wide (its left edge 1.8px left of the
   top row's, 11.9px clear of the departure column's bottom line; 1280x720). */
.player-controls .voyage-rocket,.map-actions #random .voyage-rocket{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.map-footer{gap:24px}
.map-actions #random{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px 0 8px;border-color:var(--amber);color:var(--amber)}
.map-actions #random:not(:disabled):hover{color:var(--white);border-color:var(--point)}
.player-controls .player-voyage span{display:none}
/* While the ticket's おまかせ航行 is pointed at or keyboard-focused, 「おまかせ：ランダム」 lies over the departure
   column's bottom line, boxed like the fix45 note (also with no song open). Of this note, the restart note and the copy
   note, only the one that came last shows (data-front, fix54). fix72 2c: shorter than 「おまかせ航行：ランダム」, so it
   stays clear of the rocket button in wide Japanese fonts too (iPad; measured 18px clear in BIZ UDGothic / MS Gothic). */
.player-controls:has(.player-voyage:is(:hover,:focus-visible)) .player-no-next{visibility:hidden}
.player-controls:has(.player-voyage:is(:hover,:focus-visible)) .player-auto-notes::after{content:'おまかせ：ランダム';position:absolute;left:0;bottom:9px;transform:translateY(50%);padding:2px 8px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);background:var(--bg);font:400 12px/18px var(--body);color:var(--text-secondary);white-space:nowrap;pointer-events:none;z-index:3}
.player-controls[data-front=restart]:has(.player-restart[aria-disabled=true]:is(:hover,:focus-visible)) .player-auto-notes::after,.player-controls[data-front=share][data-share-note] .player-auto-notes::after{content:none}
.player-controls[data-front=voyage]:has(.player-voyage:is(:hover,:focus-visible)) .player-no-next::after{content:none}
.player-controls[data-front=voyage]:has(.player-voyage:is(:hover,:focus-visible)) .player-share-note{visibility:hidden}
/* fix68 rev. 4: with no song open, the bottom line keeps its place (unseen, not read), so the departure column stays
   118px tall and 出発まで, DEPARTS IN, the barcode, the SEQ row, the bottom line and the notes over it sit where they sit
   with a song open (the column is centred in the ticket; without the line it moved 12px down). */
.player-controls .player-no-next[hidden]{display:block!important;visibility:hidden}
/* fix75: the control room's messages on the PC map (the user's pictures 1, 2, 3, 5, 6; never on a phone or with reduced
   motion: app.js and message.js). The message lies at the map's top left inside the corner marks, like a notice on an
   instrument screen: the frame of the map and the list (1px --ui 65%), their dark ground that lets a little through,
   square corners; 「MESSAGE」 in the ticket heading's letters (12px monospace, 0.12em, --text-note) and a thin line after
   it, the envelope (a 16px line drawing, 1px, as the rocket), the words (14px, --text-primary) and 開く (再生ログ's
   buttons at 24px). 「MESSAGE」 is left out where the message would pass the map's middle (app.js measures); where even
   that is too wide the words wrap. Not opened, it shrinks to its envelope (rev. 3: 42 x 34px, folding). */
.control-message,.control-stars{position:absolute;z-index:6}
.control-message{left:24px;top:24px;max-width:calc(100% - 48px)}
.control-message-box{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 4px 4px 12px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);background:linear-gradient(90deg,rgb(8 11 16 / 75%),rgb(8 11 16 / 97%) 120px)}
.control-message-kicker{display:inline-flex;align-items:center;gap:8px;flex:none;font:400 12px/1 var(--mono);letter-spacing:.12em;color:var(--text-note);white-space:nowrap}
.control-message-kicker::after{content:'';width:1px;height:14px;background:color-mix(in srgb,var(--ui) 65%,transparent)}
.control-message-box.bare .control-message-kicker{display:none}
.control-message-text{min-width:0;font:400 14px/20px var(--body);color:var(--text-primary)}
.control-message-open{flex:none;height:24px;margin-left:4px;padding:0 10px;border:1px solid color-mix(in srgb,var(--ui) 60%,transparent);border-radius:0;background:transparent;font:400 12px/1 var(--body);color:var(--text-primary);white-space:nowrap}
/* rev. 3: the envelope's own button has the message's height (34px) and its envelope where the folded message has it
   (13px in from the left, 9px down: 1px frame + 12px left; the frame lines where the message's are) and the same ground.
   While the message folds into it, its words and 「MESSAGE」 stay on one line and are cut at its edges. */
.control-message-small{display:grid;place-items:center;width:42px;height:34px;padding:0;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);border-radius:0;background:linear-gradient(90deg,rgb(8 11 16 / 75%),rgb(8 11 16 / 97%) 120px)}
.control-message-box.folding{overflow:hidden}
.control-message-box.folding .control-message-text,.control-message-box.folding .control-message-kicker{overflow:hidden;white-space:nowrap}
.control-message-open:hover,.control-message-open:focus-visible,.control-message-small:hover,.control-message-small:focus-visible{color:var(--white);background:color-mix(in srgb,var(--ui) 20%,var(--bg));border-color:color-mix(in srgb,var(--ui) 60%,transparent)}
.control-message-open:focus-visible,.control-message-small:focus-visible,.control-star:focus-visible{outline:1px solid var(--point);outline-offset:2px}
.control-message.small .control-message-box,.control-message:not(.small) .control-message-small{display:none}
.control-message-mark{position:relative;display:block;flex:none;width:16px;height:16px;color:var(--point)}
.message-envelope{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
/* Glow B: only the envelope: a layer made in advance (the envelope again in white and a small soft --point 35% fill
   around it, a gradient), at rest unseen. Rev. 2: its opacity, the envelope's turn and the message's slide are moved by
   app.js (messageMotion, Web Animations, the seconds from the settings): only opacity and transform. No filter, shadow
   or blur; nothing moves with reduced motion. */
.message-glow{position:absolute;inset:-5px -6px;display:grid;place-items:center;background:radial-gradient(closest-side,color-mix(in srgb,var(--point) 35%,transparent),transparent);color:var(--white);opacity:0;pointer-events:none;will-change:opacity}
/* The buttons at the map's bottom left inside the corner marks, just above its band: the shape of おまかせ航行 (32px, a
   1px square frame, a 20px symbol and 12px words) with the ground of 「↑ NAVIGATION」 over the map; no amber (おまかせ航行's).
   While a star flies or waits (aria-disabled) they look as the ticket's buttons that cannot be used. */
.control-stars{left:24px;bottom:24px;display:flex;gap:8px}
.control-star{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px 0 8px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);border-radius:0;background:rgb(8 11 16 / 92%);font:400 12px/18px var(--body);color:var(--text-primary);white-space:nowrap}
.control-star:not([aria-disabled=true]):is(:hover,:focus-visible){color:var(--white);background:color-mix(in srgb,var(--ui) 20%,var(--bg));border-color:color-mix(in srgb,var(--ui) 65%,transparent)}
.control-star[aria-disabled=true],.control-star[aria-disabled=true]:hover{color:var(--text-secondary);border-color:color-mix(in srgb,var(--ui) 65%,transparent);opacity:.45;cursor:default}
.control-star .meteor-symbol{display:block;flex:none;width:20px;height:20px}
/* The two windows behave as the others (fix44); as the user's pictures 2 and 3 they add an amber line at the heading's
   left, the envelope before 管制室より, a framed 「× 閉じる」 and brighter words with wider lines, one sentence a line. The
   other windows do not change. */
.message-dialog .guidelines-heading{position:relative}
.message-dialog .guidelines-heading::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);pointer-events:none}
.message-dialog .guidelines-heading h2{display:flex;align-items:center;gap:12px}
.message-dialog .guidelines-heading .message-envelope{width:20px;height:20px;color:var(--point)}
.message-dialog .dialog-close{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid color-mix(in srgb,var(--ui) 60%,transparent);color:var(--text-secondary)}
.message-dialog .dialog-close:hover,.message-dialog .dialog-close:focus-visible{color:var(--white);background:color-mix(in srgb,var(--ui) 20%,transparent);border-color:color-mix(in srgb,var(--ui) 60%,transparent)}
.message-close-mark{display:block;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round}
.message-dialog .guidelines-body{padding:24px 32px 28px}
.message-dialog .guidelines-body p{line-height:2;color:var(--text-primary)}
/* rev. 3 (the user's pictures 7 and 8, with no date): the two windows are wider (720px) and their corners are marked
   outside them as the map's are (16px, 2px, --point 80%, 8px off the frame). Left, the map's middle port (its picture)
   among dots in the stars' colours, a dotted way bowed up over it (rev. 4) with a shooting star's teardrop along it in a
   line, and the count under them (the
   number in 30px monospace, 「STARS」 small and spaced); right, 「100 STARS VISITED」 / 「ALL STARS VISITED」 (12px
   monospace, spaced, --text-secondary) over the words. All but the words is decoration (aria-hidden). Under them,
   centred: 「RECEIVED」, the window's 流れ星 / 流星群 (the map's button, 40px high with 15px words) and its note. 680px
   wide or less, the picture goes over the words. */
.message-dialog{width:min(720px,calc(100vw - 32px));overflow:visible}
.message-corners{position:absolute;inset:-9px;pointer-events:none}
.message-letter{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:center;gap:32px}
.message-figure{display:flex;flex-direction:column;align-items:center;gap:6px}
.message-scene{position:relative;width:168px;height:132px}
.message-sky{position:absolute;inset:0;width:100%;height:100%}
.message-path{fill:none;stroke:var(--text-secondary);stroke-width:1;stroke-dasharray:1 4;stroke-linecap:round;opacity:.7}
.message-meteor{fill:var(--bg);stroke:var(--white);stroke-width:1;stroke-linejoin:round}
.message-scene img{position:absolute;left:40px;top:58px;width:96px;height:auto}
.message-stars{display:flex;align-items:baseline;gap:8px;font:400 30px/1 var(--mono);color:var(--text-primary)}
.message-stars-unit{font-size:11px;letter-spacing:.24em;color:var(--text-secondary)}
.message-kicker{margin-bottom:6px;font:400 12px/20px var(--mono);letter-spacing:.24em;color:var(--text-secondary)}
.message-received{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin-top:24px}
.message-received-label{font:400 14px/1 var(--mono);letter-spacing:.24em;color:var(--text-secondary)}
.message-dialog .message-fly{min-height:40px;padding:0 16px 0 12px;gap:8px;font-size:15px;line-height:20px}
.message-received-note{font-size:12px;color:var(--text-secondary)}
@media (max-width:680px){.message-letter{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px}.message-dialog .guidelines-body{padding:20px 20px 24px}}
/* rev. 2: in 再生ログ, under the count, the messages to read again: a line of words, then each one's envelope (16px,
   --point), its name and 読む (再生ログ's buttons), the 読む of both in one column. */
.listened-messages{margin-top:var(--s2)}
.listened-messages ul{display:grid;grid-template-columns:16px max-content max-content;align-items:center;gap:8px 12px;margin:8px 0 0;padding:0;list-style:none}
.listened-messages li{display:contents}
.listened-messages .message-envelope{color:var(--point)}
@media (hover: none) and (pointer: coarse) and (max-width: 737px), (hover: none) and (pointer: coarse) and (max-height: 500px){
 /* fix63: the phone layout (touch-first screens 737px wide or less, or 500px tall or less; tablets and mouse screens
    keep the PC layout; same query as SpaceportPhone.QUERY). fix60's band at the top is no longer shown; its Suno
    playlist link is at the end of the page. One column that scrolls with the page: header, NAVIGATION (a square map,
    its controls, the hint), SONG LIST (moving with the page, no scroll box of its own), the end of the page. While a
    song is open, #app has .band-fixed (app.js; not while typing in the search box) and the player is fixed: upright,
    a band at the bottom (the embed, then one row of 44px buttons); sideways, a card at the bottom right over the page
    (rev. 3 I, at the end of this block). --band-height (its height) keeps the end of the page clear of it. Without
    .band-fixed the player sits at the end of the page. Notch and home bar are kept clear. */
 .app{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible;padding:0 env(safe-area-inset-right) max(var(--band-height,0px),env(safe-area-inset-bottom)) env(safe-area-inset-left)}
 /* Double taps do not zoom; scrolling and pinch zoom stay. */
 .map-stage,.track-item,.track-row,button,a,.search{touch-action:manipulation}
 /* Header: the wordmark, then the Japanese and English lines as one two-line group (Japanese above, both aligned left)
    always beside it, centred on it (rev. 3 H; never under it); 募集要項 stays at the top right (its width is kept free).
    The narrower the screen, the smaller the letters (Japanese down to 10px), the wordmark (to 20px tall) and 募集要項
    (to 64px wide, 40px tall); neither line ever breaks. fix64 rev. 1: the English line stays on one line at every
    width: its size follows the room left for it (about 0.474 x the width - 50px, between the wordmark and 8px before
    募集要項), with about 2px to spare even in a monospace 0.65em wide (an iPhone wrapped the former line where 0.6em
    letters had 3.9px to spare, so its letters are wider than 0.6em; Consolas is 0.55em): 7.1px at 320px, 9.4px at
    393px, 11px from about 447px. */
 .header{display:block;padding:12px 16px 8px}
 .brand{--guide-width:clamp(64px,21vw,90px);position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding-right:calc(var(--guide-width) + 8px);white-space:normal}
 .brand h1{flex:none;display:flex;align-items:center;height:40px}
 .brand h1 img{height:clamp(20px,6.5vw,28px)}
 .brand .catchcopy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
 .brand .catchcopy>p:first-child{font-size:clamp(10px,2.8vw,12px);line-height:1.5;color:var(--text-note);white-space:nowrap}
 .brand .catchcopy-en{font-size:clamp(7px,calc(3.03vw - 2.56px),11px);line-height:1.2;white-space:nowrap}
 #guidelines-open{position:absolute;top:0;right:0;width:var(--guide-width);height:40px;padding:0;font-size:clamp(14px,3.75vw,16px)}
 .header-actions{display:none}
 .workspace{display:flex;flex-direction:column;gap:16px;margin:0;padding:0 16px}
 /* rev. 2 E: the map's parts are stacked in plain block flow (not grid rows, where a square kept by aspect-ratio could
    keep an old height after a turn), and the square's height is the map's own width (container query width), with
    aspect-ratio only where cqw is not known. */
 .map{display:block;container-type:inline-size}
 .map .observation-heading{height:40px}
 .map-stage{aspect-ratio:1 / 1;height:100cqw}
 .map-footer{flex-wrap:wrap;align-items:center;gap:4px 16px;padding:8px 16px;overflow:visible}
 .map-footer .map-actions{display:contents}
 /* fix68: おまかせ航行 keeps its phone size and padding and has no symbol; rev. 4: its frame and letters are amber as on
    PC (hover and disabled as on PC too). */
 .map-actions #random{order:1;min-height:40px;display:inline-block;padding:4px 8px}
 .map-actions #random .voyage-rocket{display:none}
 .map-toggles{order:2;margin-left:auto}
 .map-toggles .motion-toggle{min-height:40px}
 /* fix63 rev. 2: the note under おまかせ航行 is not shown on a phone (the button keeps its spoken name). */
 .map-actions #collection-note{display:none}
 /* rev. 3 K: the hint lies over the map, centred at the bottom of the square, just above the bottom corner marks (8px
    inset + 16px marks + 4px), so it takes no line of its own; presses go through it to the stars (it is still read). */
 /* fix64: where container units (cqw) are not known, the square's width is worked out from the screen's (16px page
    margins, the map's 1px frame, the side safe areas) by the first top; browsers that know cqw use the second. */
 .phone-hint{display:block;position:absolute;left:0;right:0;top:calc(40px + 100vw - 34px - env(safe-area-inset-left) - env(safe-area-inset-right) - 44px);top:calc(40px + 100cqw - 44px);margin:0;padding:0 8px;font:400 11px/16px var(--body);color:var(--text-note);text-align:center;white-space:nowrap;pointer-events:none}
 /* While a song is open the hint is not shown (over the map, so nothing moves). */
 .app:has(#player-dock .player-surface:not([hidden])) .phone-hint{visibility:hidden}
 .sidebar{grid-template-rows:40px auto auto auto;min-height:0}
 .list-controls{padding:12px 16px 0}
 .search{height:44px}
 /* 16px or more, so iPhone does not zoom in on the search box. */
 .search input{font-size:16px}
 .track-list{overflow:visible;min-height:0;margin-top:12px}
 .panel-edge{display:none}
 /* fix69: on screens 342px wide or less, 「149 SONGS | 103 CREATORS」 does not fit beside SONG LIST at 12px / 18px; there
    its words are 10px and its numbers 14px (one line, 18px from SONG LIST at 320px). The search's 「該当◯曲 / 全◯曲」
    stays 12px. */
 @media (max-width: 342px){#result-count .count-seen{font-size:10px}#result-count .count-number{font-size:14px}}
 .phone-footer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}
 .footer-playlist{display:inline-flex;align-items:center;height:44px;padding:0 16px;border:1px solid var(--suno);color:var(--suno);font:400 14px/1 var(--body)}
 .footer-playlist:hover,.footer-playlist:focus-visible{color:var(--white);background:color-mix(in srgb,var(--ui) 20%,transparent)}
 .footer-links{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-note)}
 .footer-link{min-height:44px;padding:0 8px;border:0;background:transparent;font:inherit;color:inherit}
 .footer-note{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px}
 .footer-note .site-note{white-space:normal}
 .footer-reload{height:44px;padding:0 16px;border:1px solid color-mix(in srgb,var(--ui) 60%,transparent);font:12px/1 var(--mono);letter-spacing:.06em;color:var(--text-secondary)}
 /* The player band. */
 #player-dock:has(.player-surface[hidden]){display:none}
 .player-dock{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:8px calc(8px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(8px + env(safe-area-inset-left));overflow:visible;background:rgb(8 11 16 / 97%);border-top:1px solid color-mix(in srgb,var(--ui) 65%,transparent)}
 .app.band-fixed .player-dock{position:fixed;left:0;right:0;bottom:0;z-index:15}
 .player-dock::before,.ticket-header,.ticket-perforation,.player-hint{display:none}
 .player-surface{position:static;margin:0;flex:none}
 .player-phone-note:not([hidden]){display:block;font:400 11px/16px var(--body);color:var(--text-secondary);white-space:nowrap}
 .player-controls{display:flex;align-items:center;gap:8px;height:44px;padding:0;flex:none}
 .player-dismiss,.player-transport,.ticket-links,.ticket-navigation{display:contents}
 /* rev. 2 F: the row is 前の曲, 「■ 停止」, 次の曲, おまかせ航行, SUNO ↗, 「星を共有」 (symbol only), in this order by CSS
    order (keyboard and screen readers keep the DOM's order), every one at least 44 x 44px. Left out on a phone: the
    play mode (it stays REPEAT ALL), restart, the countdown and the ticket's other lines. */
 .player-auto,.player-controls .player-restart,.ticket-departure,.player-no-next{display:none}
 .player-controls .player-previous{order:1}
 .player-controls .player-close{order:2}
 .player-controls .player-next{order:3}
 .player-controls .player-voyage{order:4}
 .player-controls .suno-button{order:5}
 .player-controls .share-button{order:6}
 .player-auto-notes{order:7}
 .player-controls .player-control{height:44px;min-height:44px;min-width:44px}
 .player-controls .player-previous,.player-controls .player-next{width:44px}
 /* 「■ 停止」 is the close button (player-close) with another look; its spoken name is set by player.js. */
 .player-controls .player-close{width:auto;padding:0 12px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent);font:400 13px/1 var(--body);color:var(--text-primary)}
 .player-controls .player-close svg{display:none}
 .player-controls .player-close::after{content:'■ 停止'}
 .player-controls .share-button{width:44px;padding:0}
 .player-controls .share-label{display:none}
 .player-controls .player-voyage{display:flex;width:auto;padding:0 12px;font:400 13px/1 var(--body)}
 .player-controls .player-voyage svg{display:none}
 /* fix68: the band keeps its words and its 18px symbol (now the map rocket's shape); the ticket's note and its place in
    the order of notes are PC only. */
 .player-controls .player-voyage span{display:inline}
 .player-controls .voyage-rocket{width:18px;height:18px}
 .player-controls:has(.player-voyage:is(:hover,:focus-visible)) .player-auto-notes::after{content:none}
 .player-controls[data-front=voyage]:has(.player-voyage:is(:hover,:focus-visible)) .player-share-note{visibility:visible}
 .player-controls .player-no-next[hidden]{display:none!important}
 /* Narrower phones, step by step: おまかせ航行 becomes おまかせ; 「■ 停止」 becomes ■; the gaps become 4px; おまかせ becomes
    the rocket symbol (its spoken name stays); SUNO ↗ gets smaller letters. All six stay, within the width. */
 @media (max-width: 431px){.player-controls .player-voyage .voyage-tail{display:none}}
 @media (max-width: 397px){.player-controls .player-close{width:44px;padding:0}.player-controls .player-close::after{content:'■'}}
 @media (max-width: 379px){.player-controls{gap:4px}}
 @media (max-width: 343px){.player-controls .player-voyage{width:44px;padding:0}.player-controls .player-voyage span{display:none}.player-controls .player-voyage svg{display:block}}
 @media (max-width: 335px){.player-controls .suno-button{padding:0 6px;font-size:10px}}
 /* Holds 「リンクをコピーしました」 at the right end of the row. */
 .player-auto-notes{display:block;flex:1;min-width:0;height:44px;position:relative}
 .player-share-note{left:auto;right:0;top:50%;bottom:auto;transform:translateY(-50%)}
 /* When copying is refused: across the screen (16px each side), just above the band: over the page while the band is
    fixed; otherwise in the page, right before the band (by order only; the band's box does not move in the DOM). */
 .share-fallback{position:fixed;left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));width:auto;bottom:calc(max(var(--band-height,0px),env(safe-area-inset-bottom)) + 8px)}
 .share-fallback{order:1}
 .player-dock{order:2}
 .app:not(.band-fixed) .share-fallback{position:static;margin:0 16px 8px}
 /* rev. 2 B: 「↑ NAVIGATION」 at the bottom left while the map is wholly out of view (app.js): 8px above a fixed band,
    else 16px above the home bar; left, so it never covers the SUNO ↗ / X links at a selected row's right end. Lettered
    like the map heading (monospace, its letter spacing), smaller; 44px tall; a thin frame, no glow or motion. */
 .map-return:not([hidden]){display:flex;align-items:center;position:fixed;z-index:16;left:calc(16px + env(safe-area-inset-left));bottom:max(calc(var(--band-height,0px) + 8px),calc(env(safe-area-inset-bottom) + 16px));height:44px;padding:0 12px;border:1px solid color-mix(in srgb,var(--ui) 60%,transparent);background:rgb(8 11 16 / 92%);color:var(--text-secondary);font:600 12px/1 var(--mono);letter-spacing:.12em;white-space:nowrap}
 .boot-sequence{width:min(480px,calc(100% - 32px))}
 /* rev. 3 I: turned sideways, the open player is a card fixed over the page at the bottom right; the page keeps its
    full width and does not move when a song starts or stops (what lies under the card shows when the page is moved).
    12px from the right and bottom edges (plus the safe area), a 1px square frame like the site's other frames; above
    the page, below the start screen and the dialogs (z-index 15). rev. 4 L: the embed at the top left, 360px wide (the
    width at which Suno's embed shows the artwork, as in the upright band) and 144px tall; on its right a 72px column
    with SUNO ↗ above 「星を共有」 (44px each); under the embed the note line, then 前の曲・■ 停止・次の曲・おまかせ航行 in
    one row, each at least 44 x 44px. The card is 460px wide (embed and its 1px frame + 8px + column + padding and
    frame), at most 75% of the screen's width and clear of 「↑ NAVIGATION」 (170px kept at the left), the embed
    narrowing with it (568px wide: a 398px card, a 298px embed). The end of the page is
    kept clear by the card's height and its 12px; 「↑ NAVIGATION」 stays at the bottom left; 「リンクをコピーしました」
    takes the note line's place; the box shown when copying is refused sits 8px above the card, as wide (where it does
    not fit, 8px below the screen's top, over the card; app.js keeps its height in --share-box-height). Taller than the
    screen, the card scrolls inside. */
 @media (orientation: landscape){
  .app.band-fixed{padding-bottom:calc(var(--band-height,0px) + 12px + env(safe-area-inset-bottom))}
  .app.band-fixed .player-dock{left:auto;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));width:min(460px,75vw,calc(100vw - 170px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;padding:8px;border:1px solid color-mix(in srgb,var(--ui) 65%,transparent)}
  .app.band-fixed .player-surface{width:calc(100% - 80px)}
  .app.band-fixed .player-controls{position:static;display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));grid-auto-rows:44px;gap:4px;height:auto}
  .app.band-fixed .player-controls .player-control{width:auto}
  .app.band-fixed .player-controls .player-voyage{padding:0 4px}
  /* The column right of the embed (the card's padding box holds them: 8px is its padding). */
  .app.band-fixed .player-controls .suno-button,.app.band-fixed .player-controls .share-button{position:absolute;right:8px;width:72px;padding:0}
  .app.band-fixed .player-controls .suno-button{top:8px}
  .app.band-fixed .player-controls .share-button{top:60px}
  /* Over the note line: 8px padding + the embed's 146px (with its frame) + 4px. */
  .app.band-fixed .player-auto-notes{position:absolute;left:8px;right:8px;top:158px;height:16px}
  .app.band-fixed .player-dock:has(.player-share-note:not(:empty)) .player-phone-note{visibility:hidden}
  .map-return:not([hidden]){bottom:calc(env(safe-area-inset-bottom) + 16px)}
  .app.band-fixed .share-fallback{left:auto;right:calc(12px + env(safe-area-inset-right));width:min(460px,75vw,calc(100vw - 170px - env(safe-area-inset-left) - env(safe-area-inset-right)));bottom:min(calc(var(--band-height,0px) + 20px + env(safe-area-inset-bottom)),calc(100dvh - 8px - env(safe-area-inset-top) - var(--share-box-height,0px)))}
 }
}