/* 1920 × 1080 design coordinates; the stage scales as one composition. */
:root {
  color-scheme:dark;
  --ink:#092b31;
  --ink-deep:#061f25;
  --paper:#f3efe5;
  --muted:#a6bfbd;
  --gold:#e8c58b;
  --gold-dark:#8c6f43;
  --jade:#74d4b4;
  --amber:#edc777;
  --line:rgba(187,213,203,.16);
  --serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif;
  --sans:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:#04191d;
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow:hidden
}

button,input {
  font:inherit
}

button {
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent
}

button:disabled {
  cursor:default
}

button:focus-visible,input:focus-visible {
  outline:3px solid var(--paper);
  outline-offset:7px
}

button {
  touch-action:manipulation
}

button,svg {
  flex-shrink:0
}

button svg,svg.icon {
  width:27px;
  height:27px
}

svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.fill-icon {
  fill:currentColor;
  stroke:none
}

[hidden] {
  display:none!important
}

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.viewport {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden
}

.stage {
  width:1920px;
  height:1080px;
  position:absolute;
  overflow:hidden;
  background:radial-gradient(ellipse at 76% 37%,#174747 0,transparent 49%),linear-gradient(125deg,#0b3037,#07262c 66%,#092e31);
  transform-origin:center;
  isolation:isolate
}

.ambient {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 20% 110%,rgba(71,140,118,.13),transparent 60%)
}

.ambient:after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:url("../assets/grain.svg");
  mix-blend-mode:soft-light
}

.topbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:150px;
  padding:49px 96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:5
}

.brand {
  display:flex;
  align-items:center;
  gap:19px
}

.brand img {
  width:58px;
  height:58px
}

.brand-name {
  font-family:var(--serif);
  font-size:29px;
  letter-spacing:6px;
  font-weight:600;
  display:block
}

.brand-subtitle {
  display:block;
  color:var(--muted);
  font-size:15px;
  letter-spacing:4px;
  margin-top:5px
}

.header-center {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:18px;
  color:#a6bfbd;
  letter-spacing:3px;
  white-space:nowrap
}

.header-right {
  display:flex;
  align-items:center;
  gap:33px
}

.location {
  font-size:18px;
  letter-spacing:4px;
  color:#c1cfbe;
  display:flex;
  align-items:center;
  gap:25px
}

.location i {
  width:7px;
  height:7px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 18px #c7a66d55
}

.back-button {
  border:0;
  background:none;
  display:flex;
  gap:11px;
  align-items:center;
  font-size:22px;
  color:#d1dfd7;
  padding:16px 0 16px 10px;
  min-height:64px
}

.back-button svg {
  width:26px
}

.demo-chip {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  color:#edce96;
  border:1px solid #bb9b5a66;
  padding:10px 17px;
  border-radius:6px;
  background:#ba8e3c0b;
  letter-spacing:1px
}

.demo-chip>span {
  width:6px;
  height:6px;
  background:#dfbd7d;
  border-radius:50%
}

.bottom-bar {
  position:absolute;
  bottom:0;
  left:96px;
  right:96px;
  height:85px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:17px;
  letter-spacing:2px;
  color:#a2b9b5;
  z-index:3
}

.bottom-bar>span:first-child {
  display:flex;
  align-items:center;
  gap:26px
}

.page-index {
  color:#e5cfaa;
  font-size:17px;
  letter-spacing:1px;
  font-variant-numeric:tabular-nums
}

.page-index i {
  font-style:normal;
  color:#718f8e;
  margin-left:8px
}

.footer-divider {
  height:14px;
  width:1px;
  background:#65827a66
}

.page {
  position:absolute;
  inset:150px 0 86px;
  animation:page-enter .5s ease both
}

.page h1,.page h2,.page p {
  margin:0
}

.eyebrow {
  font-size:20px;
  letter-spacing:4px;
  color:#ddc390;
  display:flex;
  align-items:center;
  gap:18px
}

.short-line {
  width:38px;
  height:1px;
  background:var(--gold);
  display:inline-block
}

.button {
  min-height:82px;
  border:1px solid transparent;
  border-radius:10px;
  padding:0 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  font-size:26px;
  font-weight:500;
  letter-spacing:1px;
  transition:background .2s,transform .2s,box-shadow .2s
}

.button:hover {
  transform:translateY(-2px)
}

.button:active {
  transform:translateY(1px)
}

.primary {
  color:#183737;
  background:linear-gradient(115deg,#f0d6a7,#ddba7e);
  box-shadow:0 9px 32px #0002,inset 0 1px 0 #fff5
}

.primary:hover {
  background:linear-gradient(115deg,#f8dfb6,#e8c78f);
  box-shadow:0 10px 38px #0003
}

.secondary {
  background:#123a3d55;
  border-color:#c4d9cb44;
  color:#e3e8da
}

.secondary:hover {
  background:#35585155;
  border-color:#c9d6bd88
}

.text-button {
  border:0;
  background:none;
  color:#b4cbc3;
  font-size:23px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px;
  min-height:70px
}

.text-button:hover {
  color:var(--paper)
}

.text-button:disabled {
  opacity:.3
}

.text-button svg {
  width:23px
}

/* Home: a single visual, generous negative space, one invitation. */
.page h1:focus {
  outline:none
}

.home-page {
  overflow:visible
}

.home-copy {
  position:absolute;
  top:102px;
  left:130px;
  z-index:2
}

.home-copy h1 {
  font-family:var(--serif);
  font-weight:500;
  font-size:112px;
  line-height:1.32;
  letter-spacing:5px;
  margin:34px 0 26px
}

.home-copy h1 em {
  font-style:normal;
  color:var(--gold)
}

.home-intro {
  font-size:26px;
  line-height:1.9;
  letter-spacing:2px;
  color:#bed0c9
}

.home-start {
  margin-top:43px;
  min-width:308px;
  justify-content:space-between;
  padding:0 31px 0 41px;
  height:88px;
  font-size:29px
}

.home-start svg {
  width:30px
}

.touch-note {
  font-size:18px;
  color:#9eb5ad;
  letter-spacing:2px;
  margin-top:22px!important
}

.hero-art {
  position:absolute;
  width:1120px;
  height:1000px;
  right:-42px;
  top:-160px;
  object-fit:contain;
  opacity:.96;
  animation:silk-breathe 24s ease-in-out infinite alternate;
  pointer-events:none;
  user-select:none
}

.art-caption {
  position:absolute;
  right:126px;
  top:135px;
  display:flex;
  align-items:center;
  gap:22px
}

.vertical-caption {
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:9px;
  color:#d4d1b0
}

.art-stamp {
  font-family:var(--serif);
  font-size:18px;
  color:#ddc39b;
  line-height:1.35;
  padding:8px;
  border:1px solid #c5a3747a;
  border-radius:2px
}

.home-steps {
  position:absolute;
  bottom:55px;
  left:130px;
  display:flex;
  align-items:center;
  gap:28px;
  color:#b2c7bd;
  font-size:19px;
  letter-spacing:1px
}

.home-steps i {
  font-family:Georgia,serif;
  font-style:italic;
  color:#c4a774;
  margin-right:10px
}

.home-steps b {
  width:39px;
  height:1px;
  background:#89a49740
}

/* A purpose-built single-song mode selector. */
.modes-page {
  padding:84px 110px;
  display:grid;
  grid-template-columns:600px 1fr;
  gap:100px;
  align-items:center
}

.square-art {
  height:630px;
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:radial-gradient(ellipse at 75% 34%,#46655588,transparent 65%),linear-gradient(140deg,#1d4946,#123b3c 68%,#0a2b30);
  box-shadow:0 36px 70px #001a1d55;
  border:1px solid #a7ba9440
}

.square-art:after {
  content:"";
  position:absolute;
  inset:17px;
  border:1px solid #d4c29c40;
  pointer-events:none
}

.square-art>img {
  position:absolute;
  width:840px;
  height:840px;
  right:-260px;
  bottom:-206px;
  opacity:.85;
  transform:rotate(-10deg)
}

.cover-top {
  position:absolute;
  left:45px;
  right:45px;
  top:41px;
  display:flex;
  justify-content:space-between;
  color:#d9d8b5;
  font-size:18px;
  letter-spacing:4px
}

.cover-title {
  position:absolute;
  left:54px;
  top:134px;
  z-index:1;
  font-family:var(--serif);
  font-size:76px;
  line-height:1.45;
  letter-spacing:5px;
  text-shadow:0 4px 24px #12302c
}

.cover-title em {
  font-style:normal;
  color:var(--gold)
}

.cover-bottom {
  position:absolute;
  left:48px;
  right:48px;
  bottom:43px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#d0d7be;
  font-size:18px;
  letter-spacing:3px
}

.cover-bottom svg {
  width:30px;
  height:30px;
  color:var(--gold)
}

.modes-content {
  align-self:center
}

.modes-content h1 {
  font-family:var(--serif);
  font-size:64px;
  font-weight:500;
  letter-spacing:2px;
  margin-top:19px
}

.song-meta {
  display:flex;
  align-items:center;
  gap:13px;
  color:#bad0c6;
  font-size:20px;
  margin-top:22px!important;
  letter-spacing:1px
}

.song-meta svg {
  width:22px;
  height:22px;
  color:var(--gold)
}

.song-meta>span {
  height:15px;
  width:1px;
  background:#7c9a8d66;
  margin:0 8px
}

.song-intro {
  font-size:22px;
  letter-spacing:1px;
  line-height:1.6;
  color:#b5cac0;
  margin-top:25px!important
}

.mode-options {
  display:flex;
  gap:25px;
  margin-top:45px
}

.mode-option {
  width:calc(50% - 12px);
  height:360px;
  position:relative;
  text-align:left;
  padding:30px 31px 26px;
  border:1px solid #8cb6a340;
  background:linear-gradient(140deg,#28554c55,#123a3b55);
  border-radius:12px;
  transition:transform .25s,border-color .25s,background .25s;
  display:flex;
  flex-direction:column
}

.mode-option:hover {
  transform:translateY(-5px);
  border-color:#9dc5b9;
  background:linear-gradient(140deg,#376b5b80,#143d3c66)
}

.mode-option.sing-option {
  border-color:#d6b37870;
  background:linear-gradient(140deg,#a4894a22,#7263390d)
}

.sing-option:hover {
  border-color:var(--gold);
  background:linear-gradient(140deg,#aa8f4b3a,#72633922)
}

.mode-icon {
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  color:#a9d8c6
}

.mode-icon svg {
  width:37px;
  height:37px;
  stroke-width:1.4
}

.sing-option .mode-icon {
  color:var(--gold)
}

.mode-number {
  position:absolute;
  right:29px;
  top:49px;
  font-size:15px;
  letter-spacing:2px;
  color:#9eb9ac
}

.sing-option .mode-number {
  display:none
}

.option-demo {
  position:absolute;
  right:25px;
  top:34px;
  font-size:16px;
  letter-spacing:1px;
  border:1px solid #bd9e6155;
  border-radius:5px;
  padding:7px 11px;
  color:#e2c58e
}

.mode-option strong {
  font-size:34px;
  font-weight:500;
  margin-top:18px;
  letter-spacing:2px
}

.mode-description {
  font-size:21px;
  color:#b6cbc0;
  line-height:1.65;
  margin-top:15px
}

.mode-entry {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:21px;
  letter-spacing:1px;
  margin-top:auto;
  padding-top:23px;
  border-top:1px solid #9cc0a82b;
  color:#d1e8d9
}

.sing-option .mode-entry {
  color:var(--gold);
  border-color:#d9b67633
}

.mode-entry svg {
  width:24px
}

/* Video-led learning: generous stage image and a quiet control column. */
.learn-page {
  display:grid;
  grid-template-columns:1152px 1fr;
  gap:64px;
  padding:65px 96px;
  align-items:center
}

.video-frame {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid #a5bdae38;
  border-radius:10px;
  background:#04181c;
  box-shadow:0 24px 70px #001a1d55
}

.video-frame video {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#020b0d
}

.video-tag {
  position:absolute;
  left:22px;
  top:22px;
  padding:9px 14px;
  border-radius:5px;
  background:#061f25cc;
  color:#eee5d2;
  font-size:17px;
  letter-spacing:2px;
  pointer-events:none
}

.video-caption {
  display:flex;
  justify-content:space-between;
  margin-top:25px;
  font-size:18px;
  letter-spacing:2px;
  color:#9fb9ae
}

.video-caption>span:first-child {
  font-family:var(--serif);
  color:#cfceb0;
  font-size:22px
}

.learn-content h1 {
  font-family:var(--serif);
  font-size:67px;
  line-height:1.4;
  font-weight:500;
  letter-spacing:4px;
  margin-top:26px
}

.learn-content h1 em {
  font-style:normal;
  color:var(--gold)
}

.learn-description {
  font-size:23px;
  line-height:1.8;
  color:#b9d0c6;
  margin-top:25px!important;
  letter-spacing:1px
}

.source-switch {
  display:flex;
  padding:5px;
  border:1px solid #a5bfad38;
  border-radius:9px;
  background:#041e234d;
  gap:5px
}

.source-switch button {
  min-height:60px;
  flex:1;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:#aac2b7;
  font-size:22px;
  padding:0 22px;
  letter-spacing:1px
}

.source-switch button[aria-pressed=true] {
  background:#c7b47c20;
  border-color:#d2ba7d55;
  color:#eed3a0
}

.source-switch button:hover {
  color:#f3e5cd
}

.source-switch button:disabled {
  opacity:.5
}

.learn-content .source-switch {
  margin-top:32px
}

.source-note {
  font-size:17px;
  color:#a1bcb0;
  letter-spacing:1px;
  margin-top:15px!important;
  min-height:24px
}

.learn-seek {
  margin-top:24px
}

input[type=range] {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:28px;
  background:transparent;
  cursor:pointer;
  display:block;
  margin:0
}

input[type=range]::-webkit-slider-runnable-track {
  height:5px;
  border-radius:4px;
  background:linear-gradient(to right,var(--gold) var(--progress,0%),#6c94825c var(--progress,0%))
}

input[type=range]::-moz-range-track {
  height:5px;
  background:#6c94825c;
  border-radius:4px
}

input[type=range]::-moz-range-progress {
  height:5px;
  background:var(--gold)
}

input[type=range]::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:17px;
  height:17px;
  margin-top:-6px;
  border-radius:50%;
  background:#edd09d;
  box-shadow:0 0 0 7px #e1c08711
}

input[type=range]::-moz-range-thumb {
  width:17px;
  height:17px;
  border:0;
  border-radius:50%;
  background:#edd09d
}

.time-row {
  display:flex;
  justify-content:space-between;
  font-size:19px;
  color:#aec4ba;
  margin-top:8px;
  font-variant-numeric:tabular-nums
}

.learn-controls {
  margin-top:31px;
  display:flex;
  align-items:center;
  gap:28px
}

.round-button {
  width:73px;
  height:73px;
  border:1px solid #9ab5a855;
  background:#21494444;
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background .2s
}

.round-button:hover {
  background:#37665b99
}

.round-button svg {
  width:29px;
  height:29px
}

.round-button.play-button {
  width:92px;
  height:92px;
  color:#1b3a34;
  background:var(--gold);
  border:0
}

.play-button svg {
  width:31px;
  height:31px
}

.play-label {
  color:#d8e1d2;
  font-size:23px;
  letter-spacing:2px
}

.listening-note {
  font-size:18px;
  color:#9cb8ac;
  letter-spacing:1px;
  margin-top:31px!important;
  display:flex;
  align-items:center;
  gap:12px
}

.listening-note>span {
  height:6px;
  width:6px;
  border-radius:50%;
  background:#86bba3
}

.audio-error {
  font-size:17px;
  color:#e6c58f;
  margin-top:15px!important;
  line-height:1.6
}

/* Performance: synchronized video leads; the melody stays in a quiet side panel. */
.sing-settings {
  display:flex;
  align-items:center;
  gap:40px
}

.sing-settings .source-switch {
  width:350px
}

.performance-grid {
  display:grid;
  grid-template-columns:928px 1fr;
  gap:48px;
  margin-top:20px
}

.sing-visual .source-note {
  margin-top:13px!important
}

.pitch-panel {
  padding-top:4px
}
.sing-page {
  padding:24px 96px 0
}

.sing-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end
}

.sing-heading h1 {
  font-family:var(--serif);
  font-weight:500;
  font-size:46px;
  letter-spacing:3px;
  margin-top:13px
}

.sing-heading .eyebrow {
  font-size:18px;
  letter-spacing:3px
}

.sing-duration {
  font-size:33px;
  color:#e4dbbd;
  min-width:200px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  padding-bottom:7px
}

.time-slash {
  font-size:21px;
  color:#94afa5
}

.mini-progress {
  height:3px;
  background:#81a89833;
  width:190px;
  margin-top:16px;
  overflow:hidden
}

.mini-progress>span {
  width:0%;
  display:block;
  height:3px;
  background:var(--gold);
  transition:width .1s linear
}

.track-legend {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:0;
  font-size:18px;
  color:#b6ccbf;
  letter-spacing:1px
}

.track-legend>span {
  display:flex;
  align-items:center;
  gap:11px
}

.track-legend i {
  width:23px;
  height:4px;
  border-radius:3px
}

.legend-reference {
  background:#b7c3b1
}

.legend-user {
  background:var(--jade)
}

.track-demo-note {
  margin-left:auto;
  color:#9bb4a8;
  font-size:17px
}

.pitch-stage {
  margin-top:20px;
  height:382px;
  position:relative;
  background:linear-gradient(180deg,#163f402e,#163f400d);
  border-top:1px solid #9cbf9f33;
  border-bottom:1px solid #9cbf9f33;
  overflow:hidden
}

#pitch-canvas {
  display:block;
  width:100%;
  height:325px
}

.track-times {
  position:absolute;
  left:0;
  right:0;
  bottom:21px;
  display:flex;
  justify-content:space-between;
  color:#a6beb0;
  letter-spacing:1px;
  font-size:17px
}

.track-times>span:nth-child(2) {
  color:#94b0a5;
  font-size:18px;
  letter-spacing:1px
}

.prepare-overlay {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-bottom:30px;
  background:linear-gradient(180deg,#061f2570,#061f25e8);
  backdrop-filter:blur(2px)
}

.prepare-icon {
  width:70px;
  height:70px;
  color:var(--gold);
  background:#c8ad6d0c;
  border:1px solid #d9ba7955;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:20px
}

.prepare-icon svg {
  width:30px;
  height:30px
}

.prepare-overlay h2 {
  font-family:var(--serif);
  font-weight:500;
  font-size:42px;
  letter-spacing:4px
}

.prepare-overlay p {
  font-size:21px;
  color:#b2c9ba;
  letter-spacing:1px;
  margin-top:19px
}

.prepare-overlay.counting .prepare-icon {
  display:none
}

.prepare-overlay.counting h2 {
  font-size:106px;
  color:var(--gold);
  font-family:Georgia,serif
}

.feedback-row {
  margin-top:26px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:19px;
  min-height:80px
}

.feedback {
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--jade);
  font-size:27px;
  letter-spacing:2px;
  transition:color .4s
}

.feedback-symbol {
  width:35px;
  height:35px;
  border:1px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:21px
}

.feedback[data-kind=encourage] {
  color:var(--amber)
}

.feedback[data-kind=neutral] {
  color:#b1bdb4
}

.feedback-note {
  font-size:19px;
  color:#a3bdb1;
  letter-spacing:1px
}

.performance-controls {
  margin-top:17px;
  padding-top:18px;
  border-top:1px solid #9cbf9f22;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative
}

.main-controls {
  display:flex;
  gap:20px;
  position:absolute;
  left:50%;
  transform:translateX(-50%)
}

.main-controls .button {
  min-width:220px
}

.main-controls .primary {
  min-width:260px
}

.session-state {
  display:flex;
  align-items:center;
  gap:20px
}

.session-state strong {
  font-size:22px;
  font-weight:400;
  display:block;
  letter-spacing:1px
}

.session-state div>span {
  display:block;
  margin-top:7px;
  font-size:16px;
  color:#9bb6a8;
  letter-spacing:1px
}

.state-bars {
  height:31px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#9db4a0
}

.state-bars i {
  display:block;
  width:4px;
  background:currentColor;
  height:13px;
  border-radius:3px
}

.state-bars i:nth-child(2) {
  height:28px
}

.state-bars i:nth-child(3) {
  height:21px
}

.state-bars.is-running {
  color:var(--jade)
}

.state-bars.is-running i {
  animation:bars .85s ease-in-out infinite alternate
}

.state-bars.is-running i:nth-child(2) {
  animation-delay:-.4s
}

.state-bars.is-running i:nth-child(3) {
  animation-delay:-.7s
}

.finish-button {
  padding-right:0
}

/* Result: warm, calm celebration with no invented analytics. */
.result-page {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center
}

.result-content {
  position:relative;
  z-index:1;
  margin-top:-21px
}

.result-content>.eyebrow {
  justify-content:center;
  font-size:19px;
  letter-spacing:5px
}

.result-content>h1 {
  font-family:var(--serif);
  font-size:44px;
  font-weight:500;
  letter-spacing:4px;
  margin-top:20px
}

.score-display {
  position:relative;
  height:269px;
  margin-top:5px;
  display:flex;
  align-items:center;
  justify-content:center
}

.score-value {
  font-family:Georgia,"Times New Roman",serif;
  color:#ebcb8f;
  font-size:218px;
  line-height:1;
  font-weight:400;
  letter-spacing:-9px;
  text-shadow:0 0 90px #d2ae5d1e
}

.score-unit {
  align-self:flex-end;
  margin:0 0 52px 22px;
  color:#e5d3a7;
  font-size:29px
}

.score-caption {
  position:absolute;
  bottom:6px;
  left:0;
  right:0;
  font-size:18px;
  letter-spacing:4px;
  color:#bea679
}

.result-message {
  font-size:25px;
  line-height:1.8;
  color:#d1dfcf;
  margin-top:22px!important;
  letter-spacing:2px
}

.result-duration {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  color:#a7c1b0;
  font-size:18px;
  letter-spacing:1px;
  margin-top:29px
}

.result-duration strong {
  font-size:22px;
  font-weight:500;
  color:#e1d8b9;
  letter-spacing:2px;
  font-variant-numeric:tabular-nums
}

.result-separator {
  height:16px;
  width:1px;
  background:#8fa58c50;
  margin:0 8px
}

.result-actions {
  display:flex;
  justify-content:center;
  gap:23px;
  margin-top:35px
}

.result-actions .button {
  min-width:255px
}

.result-art {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.7
}

.result-orbit {
  position:absolute;
  left:50%;
  top:48%;
  width:820px;
  height:820px;
  border:1px solid #c6b37c18;
  border-radius:50%;
  transform:translate(-50%,-50%)
}

.orbit-two {
  width:970px;
  height:970px;
  border-color:#a6b6900c
}

.result-orbit:after {
  content:"";
  position:absolute;
  inset:70px;
  border:1px solid #c6b37c0d;
  border-radius:50%
}

.result-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 43%,#a48a3820,transparent 49%)
}

.result-particle {
  position:absolute;
  color:#ceb37c;
  font-size:41px
}

.p-one {
  left:29%;
  top:27%;
  transform:rotate(-11deg)
}

.p-two {
  right:28%;
  top:43%;
  font-size:28px
}

.p-three {
  left:32%;
  top:63%;
  height:6px;
  width:6px;
  border-radius:50%;
  background:#ceb37c
}

.p-four {
  right:33%;
  top:20%;
  height:4px;
  width:4px;
  border-radius:50%;
  background:#ceb37c
}

.review-state-switch {
  position:absolute;
  bottom:26px;
  right:96px;
  display:flex;
  gap:5px;
  align-items:center;
  font-size:16px;
  color:#9bb4a6;
  z-index:2
}

.review-state-switch>span {
  margin-right:13px;
  letter-spacing:1px
}

.review-state-switch button {
  background:none;
  border:1px solid transparent;
  border-radius:6px;
  padding:13px 17px;
  color:#b4c6b9;
  min-height:48px;
  font-size:16px
}

.review-state-switch button[aria-pressed=true] {
  border-color:#a3b8a23d;
  background:#b8c6a310;
  color:#e1d4ae
}

.review-state-switch button:hover {
  background:#b8c6a31c
}

.empty-score {
  margin-top:25px;
  height:254px
}

.empty-ring {
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  border:1px solid #a8baaa55;
  border-radius:50%;
  color:#b0c9b6;
  font-family:Georgia,serif;
  font-size:40px;
  margin:0 auto 17px
}

.empty-score h2 {
  font-family:var(--serif);
  font-size:44px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:4px;
  color:#e0e5d4
}

.result-page.is-empty .result-content>h1 {
  font-size:30px;
  color:#b7cbb8
}

.result-page.is-empty .result-message {
  font-size:23px;
  color:#bcd0bf
}

.result-page.is-empty .result-particle {
  opacity:.3
}

/* Exit confirmation remains within the scaled touch composition. */
.modal-backdrop {
  position:absolute;
  inset:0;
  background:#031b20bb;
  backdrop-filter:blur(12px);
  z-index:20;
  display:grid;
  place-items:center
}

.exit-modal {
  width:740px;
  background:linear-gradient(135deg,#1d4646,#103338);
  border:1px solid #b0c2a84d;
  padding:56px;
  border-radius:18px;
  box-shadow:0 30px 120px #0007;
  text-align:center
}

.modal-kicker {
  font-size:19px;
  letter-spacing:4px;
  color:var(--gold)
}

.exit-modal h2 {
  font-family:var(--serif);
  font-size:39px;
  font-weight:500;
  letter-spacing:2px;
  margin:21px 0
}

.exit-modal p {
  font-size:23px;
  color:#b5c8b9;
  line-height:1.6;
  margin:0 0 38px
}

.exit-modal>div {
  display:flex;
  justify-content:center;
  gap:20px
}

.exit-modal .button {
  font-size:23px;
  min-width:200px;
  padding:0 25px
}

.orientation-hint {
  display:none;
  position:fixed;
  bottom:5vh;
  width:100%;
  text-align:center;
  color:#c4d3c9;
  font-size:14px;
  letter-spacing:2px;
  pointer-events:none
}

@keyframes page-enter {
  from {
    opacity:0;
    transform:translateY(12px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

}

@keyframes silk-breathe {
  from {
    transform:translateY(-5px) rotate(-1deg)
  }

  to {
    transform:translateY(12px) rotate(1deg)
  }

}

@keyframes vinyl-turn {
  to {
    transform:rotate(360deg)
  }

}

@keyframes bars {
  to {
    transform:scaleY(.5)
  }

}

@media(orientation:portrait) {
  .orientation-hint {
    display:block
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

  .record {
    animation:none
  }

}

/* Keep the touch controls comfortably above the persistent footer. */
.home-copy {
  top:72px
}

.home-copy h1 {
  font-size:108px;
  margin-top:29px;
  margin-bottom:24px
}

.home-start {
  margin-top:32px
}

.home-steps {
  bottom:40px
}

.sing-page .pitch-stage {
  height:382px
}

.performance-controls {
  margin-top:25px;
  padding-top:22px
}

.feedback-row {
  margin-top:22px
}

/* KTV: a quiet caption strip covers burned-in subtitles, without editing video. */
.karaoke-layer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:19%;
  min-height:100px;
  padding:10px 28px 13px;
  background:#08282e;
  z-index:1;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px
}

.karaoke-layer:before {
  content:"";
  position:absolute;
  top:-16px;
  left:0;
  right:0;
  height:16px;
  background:linear-gradient(transparent,#08282e)
}

.karaoke-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#b4c8bb;
  font-size:16px;
  letter-spacing:2px;
  line-height:1.2
}

.karaoke-entry {
  display:flex;
  align-items:center;
  gap:14px
}

.karaoke-dots {
  display:flex;
  gap:9px
}

.karaoke-dots i {
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--gold)
}

.karaoke-dots i.is-past {
  background:#708d8390
}

.karaoke-disclaimer {
  color:#a7b7ac;
  font-size:15px;
  letter-spacing:1px
}

.karaoke-line {
  display:flex;
  justify-content:center;
  gap:2px;
  color:#f3efe5;
  font-size:36px;
  font-weight:500;
  line-height:1.35;
  white-space:nowrap
}

.karaoke-character {
  display:inline-block;
  color:#f3efe5
}

.karaoke-character.is-sung {
  color:var(--gold)
}

.karaoke-character.is-current {
  color:transparent;
  background:linear-gradient(90deg,var(--jade) var(--fill,0%),#f3efe5 var(--fill,0%));
  background-clip:text;
  -webkit-background-clip:text
}

.prepare-overlay {
  z-index:2
}