/* Pixel theme, loaded last. Galmuri bitmap fonts stay sharp only at native sizes:
   Galmuri11 at 12/24/36/48px (UI, headings) and Galmuri14 at 15px (notes and reading text).
   Press Start 2P (Latin only, 8px grid: 8/16/24/144px) gives counts, numbers and English labels an arcade feel.
   Card shapes follow the jolgong practice board (3px frame, 8px checker, bevel buttons) in the studio's green palette. */
@font-face{font-family:Galmuri11;font-weight:100 500;font-display:swap;src:url('fonts/Galmuri11.woff2') format('woff2')}
@font-face{font-family:Galmuri11;font-weight:600 900;font-display:swap;src:url('fonts/Galmuri11-Bold.woff2') format('woff2')}
@font-face{font-family:Galmuri14;font-weight:100 900;font-display:swap;src:url('fonts/Galmuri14.woff2') format('woff2')}
@font-face{font-family:'Press Start 2P';font-weight:100 900;font-display:swap;src:url('fonts/PressStart2P-latin.woff2') format('woff2')}
:root{--px-ink:#050807;--px-frame:#4b6443;--px-frame-hi:#9fca68;--px-tex:#c6ef7909;--px-inset:#c6ef7914;--px-cream:#f0f6e6;--px-muted:#9aaa9d;--px-bevel:inset -3px -3px 0 #00000040,inset 3px 3px 0 #ffffff1c}
::selection{background:var(--lime);color:#14200f}

body{font-family:Galmuri11,'DM Sans','Noto Sans KR',sans-serif;font-synthesis:none;-webkit-font-smoothing:none;word-break:keep-all;overflow-wrap:break-word;background:linear-gradient(#c6ef790b 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,#c6ef790b 1px,transparent 1px) 0 0/20px 20px,radial-gradient(ellipse at 78% 0%,#1a2a25 0,transparent 43%),var(--bg)}
/* Every size snaps to the 12px grid unless a rule below asks for a larger native size. */
body *{font-size:12px!important;letter-spacing:0!important}
p,.small,label,.analysis-status,.speed-hint,#timingHelp,.demo-disclaimer,.login-card>small,.welcome-bottom p{line-height:20px!important}
/* Arcade labels: English-only kickers, step badges and beat digits in Press Start 2P at 8px. Never on Korean text. */
.eyebrow,.cover-label,.art-caption,.art-bottom,.welcome-features span,.setup-art-caption,.setup-kicker small,.setup-chips span,.setup-art-count small,.setup-art-count strong,.welcome-art>strong>span,.step,.beats span,.demo-beats span,.demo-progress>strong{font-family:'Press Start 2P',Galmuri11,sans-serif;font-size:8px!important;font-weight:400;line-height:16px;letter-spacing:1px!important}
.welcome-art>strong>span{letter-spacing:8px!important}

/* Reading text: card notes, hero paragraphs, inputs, toasts and section headings. */
.note-view,.note-block .note-editor textarea,.card textarea,.demo-card textarea,.welcome-copy p,#welcomeLogin p,.setup-intro p,#toast,#title,#youtube,.section-label h2,.timing-panel h3,.aside-top h2,.welcome-features h2,.settings-fold>summary,.demo-top strong,.playback-gate strong,.transport .now strong{font-family:Galmuri14,Galmuri11,sans-serif;font-size:15px!important;font-weight:400}
.settings-fold>summary small{font-family:Galmuri11,sans-serif}
.note-view,.note-block .note-editor textarea,.card textarea,.demo-card textarea,.welcome-copy p,#welcomeLogin p,.setup-intro p{line-height:24px!important}

/* Display sizes in Galmuri11 Bold. */
.song-copy h1,.demo-intro h2,.login-card h2,.setup-record-center b,.count-mark,#mediaEmpty span{font-size:24px!important;font-weight:700;line-height:1.25}
.setup-intro h1,.welcome-bottom h2{font-size:36px!important;font-weight:700;line-height:1.3!important}
.welcome-copy h1,#welcomeLogin h1{font-size:48px!important;font-weight:700;line-height:1.25}
/* Arcade numbers: the count on the transport, the logo, BPM fields and the big welcome 8. */
.transport #beatDisplay,.logo{font-family:'Press Start 2P',Galmuri11,sans-serif;font-size:24px!important;font-weight:400;line-height:1.25}
.timing-fields input{font-family:'Press Start 2P',Galmuri11,sans-serif;font-size:16px!important;font-weight:400;line-height:1.5}
.welcome-art>strong{font-family:'Press Start 2P',Galmuri11,sans-serif;font-size:144px!important;font-weight:400;letter-spacing:0!important}
/* Highlighted words inside headings keep the heading size. */
h1 *,h2 *{font-size:inherit!important}
.login-eight,.login-eight b{font-size:36px!important;letter-spacing:12px!important}
.transport-center>button{font-size:18px!important}
.setup-record-center small{display:none}

/* Square corners everywhere except the decorative record and orbit art. */
body *,body *::before,body *::after{border-radius:0!important}
.art-orbit,.art-orbit::after,.setup-art::before,.setup-art::after,.setup-record,.setup-record::before,.setup-record-center{border-radius:50%!important}

/* Pixel frames: 3px borders, a dark inner line and hard offset shadows instead of soft glows. */
.song-hero,section.source-panel,.media-panel,.timing-panel,.routine,.settings-fold,.account-panel,.welcome-art,.demo-studio,.login-card,.setup-intro{border-width:3px;box-shadow:inset 0 0 0 3px #0e1513,6px 6px 0 var(--px-ink)}
.settings-fold .source-panel,.settings-fold .timing-panel{border:0;box-shadow:none}
.library-item,.analysis-status,.playback-gate,.demo-card,.setup-art,#videoWrap,.wave-box,#mediaEmpty,input:not([type=checkbox]):not([type=range]),textarea,select,.song-stats span,#cardCount,.step,.demo-parts button,.demo-badge,nav button.active,#toast,.transport #loopToggle{border-width:2px}
#toast{box-shadow:4px 4px 0 var(--px-ink)}
.setup-kicker-dot,.loop-progress i,.beats span.on,.demo-beats .on,.transport #loopToggle.is-on{box-shadow:none}

/* Bevelled buttons that press down a pixel step instead of easing. */
button,.card,.song-cover img,.loop-progress i{transition:none}
button:hover:not(:disabled){transform:none;filter:brightness(1.12)}
.primary,.add,.quiet,.file-button,.transport .play{border-width:2px;box-shadow:var(--px-bevel),4px 4px 0 var(--px-ink)}
.primary,.add,.transport .play{border-style:solid;border-color:#e3f7b8}
.primary:hover,.add:hover{box-shadow:var(--px-bevel),4px 4px 0 var(--px-ink)}
.primary:active:not(:disabled),.add:active:not(:disabled),.quiet:active:not(:disabled),.file-button:active{transform:translate(2px,2px);box-shadow:inset 3px 3px 0 #00000040,1px 1px 0 var(--px-ink)}
/* Transport buttons are centred with translateY(-50%); hover and press must keep it. */
.transport-center>button:hover:not(:disabled){transform:translateY(-50%)}
.transport-center>button:active:not(:disabled){transform:translate(2px,calc(-50% + 2px))}
.transport-center>#play:active:not(:disabled){box-shadow:inset 3px 3px 0 #00000040,1px 1px 0 var(--px-ink)}

/* Header and logo. */
header{border-bottom:3px solid #1f2b26}
.logo{box-shadow:3px 3px 0 var(--px-ink);padding:4px 11px}

/* 8-count board: the cards sit straight on the grid like the reference board. */
.routine:not(.parts-panel){padding:0!important;background:none;border:0;box-shadow:none}
.routine:not(.parts-panel) .section-label h2{font-family:Galmuri11,sans-serif;font-size:24px!important;font-weight:700;color:var(--px-cream);text-shadow:2px 2px 0 var(--px-ink)}
#cards{gap:12px;counter-reset:part}

/* Part headings: numbered badge, large title, play button, time range on the right. */
.card-group-title,.card-group-title.colored-part{counter-increment:part;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 12px;margin:28px 0 14px;padding:0;background:none;border:0;box-shadow:none}
#cards>.card-group-title:first-child{margin-top:6px}
.card-group-title strong,.card-group-title.colored-part strong{display:flex;align-items:center;gap:12px;font-family:Galmuri11,sans-serif;font-size:24px!important;font-weight:700;line-height:1.2;color:var(--px-cream);text-shadow:2px 2px 0 var(--px-ink)}
.card-group-title strong::before{content:counter(part,decimal-leading-zero);display:grid;place-items:center;flex:none;width:44px;height:44px;font-family:'Press Start 2P',Galmuri11,sans-serif;font-size:16px!important;font-weight:400;color:#eaf7cf;background:#2c3d27;border:2px solid var(--px-frame-hi);text-shadow:none;box-shadow:3px 3px 0 var(--px-ink)}
.card-group-title.colored-part strong::before{border-color:var(--part-accent);color:var(--part-accent);background:var(--part-bg)}
.card-group-title strong,.card-group-title span{flex-basis:auto}
.card-group-title span{margin-left:auto;color:var(--px-muted)}
.card-group-title button{min-height:34px;padding:7px 12px}
.card-group-title .group-play,.card-group-title.colored-part .group-play{background:#263321;color:var(--lime);border:2px solid var(--px-frame)}

/* 8-count cards: 3px frame, 8px checker texture, count and time on top, note, beats and actions below. */
.card{min-height:170px;padding:14px 14px 12px;border:3px solid var(--px-frame);background-color:#172022;background-image:linear-gradient(90deg,var(--px-tex) 50%,transparent 50%),linear-gradient(var(--px-tex) 50%,transparent 50%);background-size:8px 8px;box-shadow:inset 3px 3px 0 var(--px-inset),4px 4px 0 var(--px-ink)}
.card:hover{border-color:var(--px-frame-hi);box-shadow:inset 3px 3px 0 var(--px-inset),4px 4px 0 var(--px-ink)}
.colored-part.card{border-color:var(--part-border);background-color:var(--part-bg)}
.colored-part.card:hover{border-color:var(--part-accent)}
.card.active,.card.active:hover,.colored-part.card.active{outline:0;border-color:var(--lime);background-color:#25301e;box-shadow:inset 0 0 0 2px var(--lime),0 0 0 2px var(--lime),5px 5px 0 var(--px-ink)}
.card.in-loop:not(.loop-current){border-color:var(--px-frame-hi)}
.card.loop-start{border:3px dashed var(--lime)}
.card.loop-current{border-color:var(--lime);box-shadow:inset 0 0 0 2px var(--lime),0 0 0 2px var(--lime),5px 5px 0 var(--px-ink);animation:pixel-blink 1s steps(1) infinite}
@keyframes pixel-blink{50%{box-shadow:inset 0 0 0 2px #c6ef7955,0 0 0 2px #c6ef7955,5px 5px 0 var(--px-ink)}}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:nowrap;color:var(--px-muted)}
.card-top strong{font-weight:400;white-space:nowrap}
.card-top span{color:var(--px-muted);white-space:nowrap}
.note-block{margin:14px 0 10px}
.note-view{color:var(--px-cream);min-height:0;overflow-wrap:anywhere}
.note-view:empty::before{content:attr(data-placeholder);color:#7e927f}
.note-editor{display:grid;gap:8px}
.note-block .note-editor textarea{min-height:72px}
.card-tools{border-top:2px dashed #33452c;padding-top:8px}
.card-tools label{display:grid;gap:4px;color:var(--px-muted)}
.card-tools button{min-height:34px;padding:7px 8px;background:#263321;color:#b7d397;border:2px solid var(--px-frame);box-shadow:var(--px-bevel),3px 3px 0 var(--px-ink);font-weight:700}
.card-tools button:active:not(:disabled){transform:translate(2px,2px);box-shadow:inset 3px 3px 0 #00000040,1px 1px 0 var(--px-ink)}
.card-bottom{gap:4px}
.beats{display:flex;gap:1px;flex:0 1 auto;min-width:0;margin:0;padding:0;border:0}
.beats span{flex:none;padding:0 1px;border:0;background:none;color:#7c927d;line-height:18px;letter-spacing:0!important}
.beats span:first-child{color:var(--lime)}
.card.active .beats span:first-child:not(.on){color:#7c927d}
.beats span.on{background:var(--lime);color:#14200f}
.card-actions{gap:8px}
.card-actions button,.card-actions .quiet{min-height:28px;padding:4px 0;background:none;border:0;box-shadow:none;font-weight:700}
.card-actions .note-edit{color:#c4d0c8}
.card-actions .card-play{color:var(--lime)}
.card-actions button:active:not(:disabled){transform:translateY(1px);box-shadow:none}

/* Transport: thick top edge and a segmented loop progress bar. */
.transport{border-top:4px solid #8fb85c;box-shadow:0 -4px 0 var(--px-ink)}
.transport #loopToggle{grid-template-rows:1fr 4px}
.loop-progress{height:4px}
.loop-progress i{background:repeating-linear-gradient(90deg,var(--lime) 0 4px,transparent 4px 6px)}

/* Retro screen feel on the song art. */
.song-cover img,.library-thumb{image-rendering:pixelated}
.song-cover:after{background:repeating-linear-gradient(0deg,#00000040 0 2px,transparent 2px 4px),linear-gradient(90deg,transparent 45%,#16231d55),linear-gradient(0deg,#0c1512bb,transparent 60%)}

/* Wider screens have room for the arcade card header and clock; phones keep Galmuri there. */
@media(min-width:651px){.card-top strong,.card-top span,#clock{font-family:'Press Start 2P',Galmuri11,sans-serif;font-size:8px!important;line-height:16px}}
@media(max-width:900px){.welcome-copy h1,#welcomeLogin h1{font-size:36px!important}.welcome-art>strong{font-size:96px!important}}
@media(max-width:650px){
  .setup-intro h1,.welcome-bottom h2{font-size:24px!important}
  .demo-card>small{display:none}
  .card{min-height:158px;padding:12px 10px 10px}
  .beats{gap:0}
  .beats span{padding:0}
  .card-actions{gap:6px}
  /* Badge, title and time range share the first row; the part buttons start a new row. */
  .card-group-title span{order:1}
  .card-group-title::after{content:'';order:1;flex-basis:100%;height:0}
  .card-group-title button{order:2}
  .transport #beatDisplay{font-family:'Press Start 2P',Galmuri11,sans-serif;font-size:16px!important;font-weight:400}
  .transport .now strong{font-family:Galmuri11,sans-serif;font-size:12px!important;font-weight:700}
  .transport>.now{max-width:42vw}
  .transport #loopStatus{display:none}
}
@media(prefers-reduced-motion:reduce){.card.loop-current{animation:none}}