/* Japanese graph notebook concept layer. */
@font-face{font-family:'Sriracha';src:url('assets/fonts/Sriracha-Regular.ttf') format('truetype');font-display:swap}
.local-concept{--grid-size:28px;--hand:'Segoe Print','Bradley Hand','Comic Sans MS',cursive}
.local-concept:before{opacity:.2;background-size:var(--grid-size) var(--grid-size);background-image:linear-gradient(#abc0c014 1px,transparent 1px),linear-gradient(90deg,#abc0c014 1px,transparent 1px);mask-image:none}
.local-concept header{border-bottom:1px solid #ffffff1c}
.local-concept .brand b{font-weight:500}.local-concept .brand span{letter-spacing:.22em}.local-concept .brand small{letter-spacing:.18em}
.local-concept .intro{position:relative;overflow:hidden}.local-concept .intro:after{content:'01 / SONG NOTEBOOK';position:absolute;right:4px;bottom:22px;padding:5px 11px;border:1px solid var(--line);font:700 9px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:var(--muted)}
.local-concept .intro .eyebrow{font-family:ui-monospace,Consolas,monospace;letter-spacing:.18em}.local-concept h1{font-family:Georgia,'Yu Mincho',serif;font-weight:400}.local-concept h1 span{font-family:'Yu Mincho','Noto Serif JP',serif}
.local-concept .intro>p:last-child{font-family:var(--hand);font-size:18px;transform:rotate(-1deg);transform-origin:left center}
.local-concept .quiz-banner{position:relative;border-radius:4px;box-shadow:10px 12px 0 #0002}.local-concept .quiz-banner:before{content:'';position:absolute;inset:9px;border:1px solid var(--line);pointer-events:none}.local-concept .quiz-banner-copy,.local-concept .quiz-banner-side,.local-concept .home-board{position:relative}
.local-concept .quiz-banner-copy .eyebrow,.local-concept .section-title h2 span{font-family:ui-monospace,Consolas,monospace}.local-concept .quiz-banner-copy h2{font-family:var(--hand);font-weight:500;transform:rotate(-1deg)}
.local-concept .quiz-play{border-radius:3px;text-transform:uppercase;letter-spacing:.12em;box-shadow:4px 4px 0 #0004}
.local-concept .tabs{gap:0;border:1px solid var(--line);border-width:0 0 1px}.local-concept .tabs button{position:relative;flex:1;border-right:1px solid var(--line)}.local-concept .tabs button:last-child{border-right:0}.local-concept .tabs button.active:after{content:'';position:absolute;height:3px;left:18px;right:18px;bottom:7px;background:var(--accent);transform:rotate(-1deg)}
.local-concept .section-title h2{font-family:Georgia,'Yu Mincho',serif;font-weight:400}.local-concept #stats{font-family:ui-monospace,Consolas,monospace;border-radius:2px}
.local-concept .tools{border-radius:3px;box-shadow:6px 7px 0 #0002}.local-concept .tools input,.local-concept .tools select,.local-concept .tools button{border-radius:2px}
.local-concept .listening-tools button,.local-concept .quiz-button{border-radius:2px}.local-concept .listening-tools button[aria-pressed=true]{box-shadow:3px 3px 0 #0004}
.local-concept .grid{gap:25px 20px}.local-concept .card{position:relative;border-radius:2px;box-shadow:5px 6px 0 #0003;overflow:visible}.local-concept .card:before{content:'';position:absolute;top:-1px;bottom:-1px;left:10px;width:1px;background:var(--accent);opacity:.5;z-index:2;pointer-events:none}.local-concept .card:hover{transform:translate(-2px,-7px) rotate(-.2deg);box-shadow:10px 15px 0 #0004}
.local-concept .cover{border-radius:1px 1px 0 0}.local-concept .card-body{position:relative;padding-left:25px;background-image:linear-gradient(transparent 27px,#94a9ad16 28px);background-size:100% 28px}
.local-concept .card h3{font-family:'Yu Mincho','Noto Serif JP',Georgia,serif}.local-concept .romaji{font-family:var(--hand);font-size:14px}.local-concept .thai-reading{font-family:var(--hand);transform:rotate(-.5deg);transform-origin:left}
.local-concept .card-links a{border-radius:2px}.local-concept .lyrics-button{text-decoration:underline;text-decoration-style:wavy;text-underline-offset:5px}
.local-concept .player{border-radius:3px;box-shadow:8px 9px 0 #0006}.local-concept #now-playing strong{font-family:'Yu Mincho','Noto Serif JP',Georgia,serif}.local-concept .full-song-button{border-radius:2px;box-shadow:3px 3px 0 #0004}.local-concept dialog{border-radius:3px}
.local-concept .random-card{z-index:12;width:360px;max-height:calc(100dvh - 190px);padding:18px;border-radius:3px;background:#121718;color:#eef0e9;border-color:#394648;box-shadow:9px 11px 0 #0006}.local-concept .random-card .random-art{width:120px;height:120px;float:left;margin:12px 16px 12px 0}.local-concept .random-card h2{font-size:22px;line-height:1.3;margin:12px 0 5px}.local-concept .random-card h2,.local-concept .random-card .english{color:#f5f3eb}.local-concept .random-card .official{color:#a8b5b6}.local-concept .random-card .romaji,.local-concept .random-card .release{color:#bdc8c8}.local-concept .random-card .thai-reading{color:#efb77f}.local-concept .random-card .translation{clear:both;color:#e1e7e3;border-color:#ffffff24;padding-top:10px}.local-concept .random-card .card-links{clear:both;padding-top:8px}.local-concept .random-card button{color:#eef0e9}.local-concept .random-card .card-links a{background:#222e30!important;border:1px solid #ffffff24!important;color:#f4f1e8!important}.local-concept .random-card .card-links a:hover{background:#303f42!important;border-color:#e6b681!important}.local-concept .random-card .discovery-video{clear:both;margin-top:14px}.local-concept .random-card .random-actions{margin-top:14px}.local-concept .random-card .random-actions button:not(:first-child){background:#1d282a;border-color:#ffffff2b;color:#eef0e9}.local-concept .random-card #close-random{background:transparent;border-color:transparent;color:#eef0e9}
.local-concept .theme-toggle,.local-concept .header-links a{border-radius:2px}.local-concept .theme-toggle{font-family:ui-monospace,Consolas,monospace}
html[data-theme="light"] body.local-concept{background-color:#f3f0e7;background-image:linear-gradient(#95a9ad26 1px,transparent 1px),linear-gradient(90deg,#95a9ad26 1px,transparent 1px),radial-gradient(circle at 78% 4%,#d9e7e5 0,transparent 34rem);background-size:var(--grid-size) var(--grid-size),var(--grid-size) var(--grid-size),auto}
html[data-theme="light"] .local-concept:before{display:none}html[data-theme="light"] .local-concept header{background:#f8f5edee;border-color:#7e939529}html[data-theme="light"] .local-concept .intro{background:#f8f5ed8a}
html[data-theme="light"] .local-concept .quiz-banner{background:#faf9f3f2;box-shadow:10px 12px 0 #64787b18}html[data-theme="light"] .local-concept .tabs{background:#f6f3ebf2}html[data-theme="light"] .local-concept .tools{background:#faf9f3f0;box-shadow:6px 7px 0 #64787b16}
html[data-theme="light"] .local-concept .card{background:#fcfbf6;box-shadow:5px 6px 0 #64787b1d}html[data-theme="light"] .local-concept .card:hover{box-shadow:10px 15px 0 #64787b25}html[data-theme="light"] .local-concept .card-body{background-color:#fcfbf6;background-image:linear-gradient(transparent 27px,#72898d18 28px)}html[data-theme="light"] .local-concept .player{background:#fbfaf5f5;box-shadow:8px 9px 0 #344e5438}
html[data-theme="light"] .local-concept .random-card{background:#fbfaf4;color:#17262b;border-color:#9eaaa8;box-shadow:9px 11px 0 #52646738}html[data-theme="light"] .local-concept .random-card .eyebrow{color:#5e7073}html[data-theme="light"] .local-concept .random-card h2,html[data-theme="light"] .local-concept .random-card .english{color:#17262b}html[data-theme="light"] .local-concept .random-card .official{color:#657477}html[data-theme="light"] .local-concept .random-card .romaji,html[data-theme="light"] .local-concept .random-card .release{color:#526467}html[data-theme="light"] .local-concept .random-card .thai-reading{color:#9a4f28}html[data-theme="light"] .local-concept .random-card .translation{color:#33484d;border-color:#17262b24}html[data-theme="light"] .local-concept .random-card #close-random{color:#253b40}html[data-theme="light"] .local-concept .random-card #close-random:hover{color:#8d4825;border-color:#8d4825}html[data-theme="light"] .local-concept .random-card .card-links a{background:#e8eeeb!important;border-color:#879694!important;color:#20353a!important}html[data-theme="light"] .local-concept .random-card .card-links a:hover{background:#d9e3df!important;border-color:#9a4f28!important}html[data-theme="light"] .local-concept .random-card .random-actions button:first-child{background:#a96132;border-color:#a96132;color:#fffaf2}html[data-theme="light"] .local-concept .random-card .random-actions button:not(:first-child){background:#eef1ec;border-color:#879694;color:#20353a}
html[data-theme="light"] .local-concept .quiz-banner-modes .lv-easy{--lv:#28734a}html[data-theme="light"] .local-concept .quiz-banner-modes .lv-normal{--lv:#985128}html[data-theme="light"] .local-concept .quiz-banner-modes .lv-hard{--lv:#ad3e38}
html[data-theme="light"] .local-concept .platforms a{background:#263c46;color:#f7f4eb;border:1px solid #263c46}html[data-theme="light"] .local-concept .platforms a:hover{background:#34515e;border-color:#a96132}
html[data-theme="light"] .local-concept .sources,html[data-theme="light"] .local-concept .sources a{color:#53666a}html[data-theme="light"] .local-concept .highlight-info a,html[data-theme="light"] .local-concept #spotify-login-hint a{color:#83451f}
html[data-theme="light"] .local-concept input::placeholder{color:#66777a;opacity:1}
html[data-theme="dark"] body.local-concept{background-color:#0b0d0e;background-image:radial-gradient(circle at 65% -20%,#394247 0,transparent 43rem),linear-gradient(115deg,#0a0c0d,#15191b 52%,#090b0c);color:#f1efe6}
html[data-theme="dark"] .local-concept:before{opacity:.22;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px),radial-gradient(#ffffff09 1px,transparent 1px);background-size:28px 28px,28px 28px,4px 4px}html[data-theme="dark"] .local-concept header{background:#0b0e0fdd}html[data-theme="dark"] .local-concept .quiz-banner{background:linear-gradient(145deg,#1a1d1fee,#0f1214ee)}html[data-theme="dark"] .local-concept .tabs{background:#0c0f10ee}html[data-theme="dark"] .local-concept .tools{background:#121617e8}html[data-theme="dark"] .local-concept .card,html[data-theme="dark"] .local-concept .card-body{background-color:#141819}html[data-theme="dark"] .local-concept .player{background:#101415f5}
html[data-theme="dark"] .local-concept .full-song-button{background:#e6b681;border-color:#e6b681;color:#17252e}html[data-theme="dark"] .local-concept .platforms a{color:#f2f1ea}html[data-theme="dark"] .local-concept input::placeholder{color:#9eafb2;opacity:1}
.local-concept .premium{top:9px;left:9px;padding:4px 7px;border:1px solid #ffffff2d;background:#202b2d;color:#efb77f;font:700 8px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase;box-shadow:2px 2px 0 #0004}html[data-theme="light"] .local-concept .premium{background:#f7f1e6;color:#71391f;border-color:#a961326b;box-shadow:2px 2px 0 #53646724}
.local-concept #lyrics-dialog{background:#182b34;color:#f3f2ec;border-color:#ffffff28}.local-concept #lyrics-dialog .lyrics-header h2{color:#f5f3eb}.local-concept #lyrics-dialog .lyrics-header p{color:#b8c7ca}.local-concept #close-lyrics{background:#182b34;color:#f3f2ec;border-color:#ffffff32}.local-concept #close-lyrics:hover{border-color:#e6b681;color:#f2c796}.local-concept .lyrics-reader-tools button:not([aria-pressed=true]){color:#e8edeb;border-color:#ffffff30}.local-concept .lyrics-reader-tools button:not([aria-pressed=true]):hover{border-color:#e6b681;color:#f2c796}
.local-concept .service-status:hover,.local-concept .service-status:focus-within{background:#142a38f5;color:#eef4f2}.local-concept .service-status .service-copy strong{color:#eef4f2}.local-concept .service-status .service-copy small,.local-concept .service-status .dock-title,.local-concept .service-status .dock-note{color:#aebdc2}.local-concept .service-status #refresh-services{color:#d7e0e1}
@media(max-width:1100px) and (min-width:701px){.local-concept .random-card{top:96px;right:16px;width:300px;max-height:calc(100dvh - 190px);padding:17px}.local-concept .random-card .random-art{width:112px;height:112px;margin:12px 15px 10px 0}.local-concept .random-card h2{font-size:20px;line-height:1.25;margin:11px 0 5px}.local-concept .random-card .english,.local-concept .random-card .romaji,.local-concept .random-card .thai-reading,.local-concept .random-card .translation,.local-concept .random-card .release{font-size:11px;margin-block:3px}.local-concept .random-card .random-actions{margin-top:12px}.local-concept .random-card .random-actions button{padding:6px 9px}}
@media(max-width:850px){.local-concept .intro:after{display:none}.local-concept .tabs button{flex:0 0 auto;min-width:150px}}
@media(max-width:560px){.local-concept{--grid-size:24px}.local-concept .intro>p:last-child{font-size:15px}.local-concept .card{box-shadow:4px 5px 0 #0002}.local-concept .quiz-banner{box-shadow:6px 7px 0 #0002}.local-concept .random-card{top:76px;bottom:auto;width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 200px);padding:15px}.local-concept .random-card .random-art{width:96px;height:96px;margin:10px 12px 9px 0}.local-concept .random-card h2{font-size:19px}}

/* Yorushika identity — transparent source artwork */
.local-concept .brand{gap:16px}
.local-concept .brand-logo{display:block;width:58px;height:44px;object-fit:contain;flex:0 0 auto;filter:brightness(0) invert(1);opacity:.92;transition:filter .2s ease,opacity .2s ease}
.local-concept .brand:hover .brand-logo{opacity:1}
html[data-theme="light"] .local-concept .brand-logo{filter:none;opacity:.94}
@media(max-width:560px){.local-concept .brand{gap:10px}.local-concept .brand-logo{width:44px;height:34px}.local-concept .brand span{font-size:10px}.local-concept .brand small{font-size:6px}}

/* Loki-inspired kinetic title: readable text with independently shifting letterforms */
.local-concept .intro h1{overflow:visible}
.local-concept .loki-word{display:inline-flex;align-items:baseline;gap:.015em;isolation:isolate;white-space:nowrap;letter-spacing:-.07em}
.local-concept .loki-word>span{position:relative;display:inline-block;min-width:.48em;text-align:center;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-style:normal;transform-origin:50% 58%;animation:loki-glyph 5.4s steps(1,end) infinite,loki-breathe 2.7s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.43s);text-shadow:0 0 .035em currentColor,0 0 .22em #f2eee48c;will-change:transform,filter}
.local-concept .loki-word>span:nth-child(1){--i:1}.local-concept .loki-word>span:nth-child(2){--i:5}.local-concept .loki-word>span:nth-child(3){--i:2}.local-concept .loki-word>span:nth-child(4){--i:8}.local-concept .loki-word>span:nth-child(5){--i:4}.local-concept .loki-word>span:nth-child(6){--i:7}.local-concept .loki-word>span:nth-child(7){--i:3}.local-concept .loki-word>span:nth-child(8){--i:6}.local-concept .loki-word>span:nth-child(9){--i:9}
.local-concept .loki-word>span:nth-child(3n+1){animation-duration:6.1s,3.1s}.local-concept .loki-word>span:nth-child(3n+2){animation-duration:4.9s,2.4s}
@keyframes loki-glyph{0%,100%{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-style:normal;transform:translateY(0) scaleX(1) rotate(0)}18%{font-family:Impact,"Arial Black",sans-serif;font-weight:800;font-style:normal;transform:translateY(-.035em) scaleX(.72) rotate(-1deg)}37%{font-family:"Arial Narrow",Arial,sans-serif;font-weight:300;font-style:italic;transform:translateY(.02em) scaleX(.9) skewX(-7deg)}59%{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-style:italic;transform:translateY(-.015em) scaleX(1.08) rotate(1deg)}78%{font-family:ui-monospace,Consolas,monospace;font-weight:400;font-style:normal;transform:translateY(.025em) scaleX(.8) rotate(-.5deg)}}
@keyframes loki-breathe{0%,100%{filter:blur(0);opacity:.93}50%{filter:blur(.25px);opacity:1}}
html[data-theme="light"] .local-concept .loki-word>span{text-shadow:0 0 .025em #2d1b10,0 0 .18em #a968342d}
@media(max-width:760px){.local-concept .loki-word{display:flex;font-size:.82em;margin-bottom:.12em}.local-concept .intro h1>.archive-title{display:block;font-size:.42em;letter-spacing:.03em;margin-top:.2em}}
@media(prefers-reduced-motion:reduce){.local-concept .loki-word>span{animation:none;filter:none}}
.local-concept .intro h1>.loki-word{display:inline-flex!important;font-size:clamp(76px,9.5vw,148px)!important;line-height:.86!important;letter-spacing:-.07em!important;margin:0 0 .16em!important;color:inherit}
.local-concept .intro h1>.loki-word>span{display:inline-block!important;font-size:1em!important;line-height:inherit!important}
.local-concept .intro h1>.archive-title{font-size:clamp(25px,3vw,42px)}
@media(max-width:760px){.local-concept .intro h1>.loki-word{font-size:clamp(48px,15vw,78px)!important}}
@media(min-width:761px){.local-concept .intro h1>.loki-word{font-size:clamp(72px,7.8vw,112px)!important}}
@media(min-width:761px){.local-concept .intro h1>.loki-word{font-size:clamp(68px,6.9vw,96px)!important}}

/* Japanese editorial display faces + local effect speed control */
.local-concept .loki-word>span{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",Georgia,serif}
@keyframes loki-glyph{0%,100%{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",Georgia,serif;font-weight:500;font-style:normal;transform:translateY(0) scaleX(1) rotate(0)}18%{font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-weight:800;font-style:normal;transform:translateY(-.035em) scaleX(.72) rotate(-1deg)}37%{font-family:"BIZ UDPGothic","Yu Gothic UI",Arial,sans-serif;font-weight:300;font-style:italic;transform:translateY(.02em) scaleX(.9) skewX(-7deg)}59%{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:700;font-style:italic;transform:translateY(-.015em) scaleX(1.08) rotate(1deg)}78%{font-family:"MS Gothic","BIZ UDGothic",ui-monospace,monospace;font-weight:400;font-style:normal;transform:translateY(.025em) scaleX(.8) rotate(-.5deg)}}

/* Dark notebook grid — minor 28px squares with a warmer 112px guide line */
html[data-theme="dark"] body.local-concept{background-image:radial-gradient(circle at 65% -20%,#394247 0,transparent 43rem),linear-gradient(115deg,#090b0c,#14191b 52%,#080a0b)}
html[data-theme="dark"] body.local-concept:before{display:block;opacity:1;background-image:linear-gradient(#b9d1d11a 1px,transparent 1px),linear-gradient(90deg,#b9d1d11a 1px,transparent 1px),linear-gradient(#e6b68120 1px,transparent 1px),linear-gradient(90deg,#e6b68120 1px,transparent 1px),radial-gradient(#ffffff0c .7px,transparent .8px);background-size:28px 28px,28px 28px,112px 112px,112px 112px,4px 4px;background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px,0 0}

/* Match the light notebook grid density in dark mode. */
html[data-theme="dark"] body.local-concept:before{opacity:1;background-image:linear-gradient(#b9d1d120 1px,transparent 1px),linear-gradient(90deg,#b9d1d120 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size),var(--grid-size) var(--grid-size);background-position:-1px -1px,-1px -1px}
@media(max-width:760px){.local-concept .intro h1>.loki-word{font-size:clamp(34px,10.5vw,52px)!important;width:100%;justify-content:flex-start}.local-concept .loki-word>span{min-width:.43em}}

/* Dark filter and player controls: distinct surfaces over the notebook grid */
html[data-theme="dark"] .local-concept .tools{background:#151b1df2;border:1px solid #526166;box-shadow:6px 7px 0 #0006}
html[data-theme="dark"] .local-concept .tools input,html[data-theme="dark"] .local-concept .tools select{background:#090e10;color:#f1f0e9;border:1px solid #46565b;box-shadow:inset 0 0 0 1px #0006}
html[data-theme="dark"] .local-concept .tools input:hover,html[data-theme="dark"] .local-concept .tools select:hover{border-color:#d4a978}
html[data-theme="dark"] .local-concept .tools input:focus,html[data-theme="dark"] .local-concept .tools select:focus{border-color:#e6b681;background:#0d1416}
html[data-theme="dark"] .local-concept .tools input::placeholder{color:#b6c1c2}
html[data-theme="dark"] .local-concept .tools button{background:#202a2d;color:#f1f0e9;border-color:#526166}
html[data-theme="dark"] .local-concept .tools button:hover{background:#2a3639;border-color:#e6b681}
html[data-theme="dark"] .local-concept .listening-tools{margin-top:14px;padding:12px 12px 16px;background:#111719e8;border:1px solid #3c4b50;box-shadow:4px 5px 0 #0004;color:#b9c4c5}
html[data-theme="dark"] .local-concept .listening-tools button,html[data-theme="dark"] .local-concept .listening-tools .quiz-button{background:#1e2a2e;color:#f0efe8;border-color:#53656b}
html[data-theme="dark"] .local-concept .listening-tools button:hover,html[data-theme="dark"] .local-concept .listening-tools .quiz-button:hover{border-color:#e6b681;color:#f2c796}
html[data-theme="dark"] .local-concept .listening-tools button[aria-pressed="true"]{background:#e6b681;color:#182124;border-color:#e6b681}
html[data-theme="dark"] .local-concept .listening-tools label{display:flex;align-items:center;gap:8px;color:#efc392;font-weight:700}
html[data-theme="dark"] .local-concept #engine{min-width:190px;padding:8px 34px 8px 10px;background:#0a1012;color:#f4f2eb;border:1px solid #63747a;border-radius:2px;color-scheme:dark}
html[data-theme="dark"] .local-concept #engine:hover,html[data-theme="dark"] .local-concept #engine:focus{border-color:#e6b681}
html[data-theme="dark"] .local-concept #engine option{background:#11191c;color:#f4f2eb}
html[data-theme="dark"] .local-concept #engine option:checked{background:#b77945;color:#fff}
html[data-theme="dark"] .local-concept #engine option:disabled{background:#151b1d;color:#7f8d90}
html[data-theme="dark"] .local-concept #status{color:#f0bd8b;background:#101719d9;border-left:3px solid #d79d69;padding:5px 9px;margin-top:8px}
@media(max-width:700px){html[data-theme="dark"] .local-concept .listening-tools{padding:10px}html[data-theme="dark"] .local-concept .listening-tools label{width:100%;justify-content:space-between}html[data-theme="dark"] .local-concept #engine{min-width:0;flex:1}}

/* Dark theme legibility pass: keep the notebook character without making text fight the grid. */
html[data-theme="dark"] body.local-concept:before{opacity:.62}
html[data-theme="dark"] .local-concept .library-head h2,html[data-theme="dark"] .local-concept .card h3{color:#fffdf5}
html[data-theme="dark"] .local-concept .count,html[data-theme="dark"] .local-concept .card .release,html[data-theme="dark"] .local-concept .card .translation{color:#c4cece}
html[data-theme="dark"] .local-concept .card .english{color:#e8ece8}
html[data-theme="dark"] .local-concept .card .official{color:#aebbbc}
html[data-theme="dark"] .local-concept .card .romaji{color:#bbc6c7}
html[data-theme="dark"] .local-concept .card .thai-reading{color:#f0bc88}
html[data-theme="dark"] .local-concept .card,html[data-theme="dark"] .local-concept .card-body{background:#151a1bf7;border-color:#3f4b4e}
html[data-theme="dark"] .local-concept .platforms a,html[data-theme="dark"] .local-concept .details-button,html[data-theme="dark"] .local-concept .lyrics-button{background:#223034;color:#f5f3eb;border-color:#526267}
html[data-theme="dark"] .local-concept .platforms a:hover,html[data-theme="dark"] .local-concept .details-button:hover,html[data-theme="dark"] .local-concept .lyrics-button:hover{background:#304044;border-color:#e6b681;color:#ffd2a4}
html[data-theme="dark"] .local-concept .media-label{background:#111719;color:#f0c28f;border-color:#768185}

/* Keep controls opaque, soften the page grid, and start the notebook margin below artwork. */
html[data-theme="dark"] body.local-concept:before{opacity:.30}
html[data-theme="dark"] .local-concept .tools{background:#151b1d}
html[data-theme="dark"] .local-concept .listening-tools{background:#111719}
html[data-theme="dark"] .local-concept .tools input,
html[data-theme="dark"] .local-concept .tools select{background-color:#080d0f}
.local-concept .card:before{display:none}
.local-concept .card-body:before{content:'';position:absolute;top:0;bottom:0;left:10px;width:1px;background:var(--accent);opacity:.5;z-index:0;pointer-events:none}
.local-concept .card-body>*{position:relative;z-index:1}

/* Personal font trial — hero Thai tagline only. */
.local-concept .intro>p:last-child{font-family:'Sriracha','Leelawadee UI',Tahoma,sans-serif;font-size:clamp(21px,2vw,30px);font-weight:400;letter-spacing:.015em}

/* Light hero: ink on paper — navy title, copper subtitle, ballpoint-blue handwriting */
html[data-theme="light"] .local-concept .loki-word>span{color:#1d3540;text-shadow:0 0 .02em #1d354055,0 .05em .16em #a3592c1f}
html[data-theme="light"] .local-concept .intro h1>.archive-title{color:#a3592c;text-shadow:none}
html[data-theme="light"] .local-concept .intro>p:last-child{color:#2c5a74}
/* Quiz card: level chips get inner padding; leaderboard shows all three levels as a podium (top 3 each) */
.local-concept .quiz-banner-modes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;margin:18px 0}
.local-concept .quiz-banner-modes li{min-width:0;padding:10px 12px!important;border:1px solid var(--line);border-top:3px solid var(--lv);border-radius:3px;gap:2px}
.local-concept .quiz-banner-modes li b{font-size:15px}
.local-concept .quiz-banner-modes span{line-height:1.35}
.local-concept .home-board{display:block!important;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)}
.local-concept .home-board h3{font-family:var(--hand);font-weight:500;margin:0 0 12px}
.local-concept .lb3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
.local-concept .lb3-col:not(:first-child){display:block}
.local-concept .lb3-col h4{font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.12em;margin:0 0 4px}
.local-concept .lb3-list{gap:2px;padding-top:4px}
.local-concept .lb3-list li{display:grid;grid-template-columns:12px 22px minmax(0,1fr);grid-template-rows:auto auto;column-gap:6px;padding:5px 4px;border-radius:2px;font-size:12px}
.local-concept .lb3-list li::before{grid-row:1/3;align-self:center;width:auto;font-size:12px}
.local-concept .lb3-list li img{grid-row:1/3;align-self:center;width:22px;height:22px}
.local-concept .lb3-list li b{grid-column:3}
.local-concept .lb3-list li span{grid-column:3;font-size:11px;line-height:1.2}
.local-concept .lb3-list .empty{display:block;padding:8px;font-size:11px}
html[data-theme="light"] .local-concept .lb3-list li span{color:#6c7c80}
html[data-theme="light"] .local-concept .lb3-list li:nth-child(1):not(.empty){--medal:#9a6a00;--halo:#e3b23c}
html[data-theme="light"] .local-concept .lb3-list li:nth-child(2):not(.empty){--medal:#5d6b73;--halo:#aebcc5}
html[data-theme="light"] .local-concept .lb3-list li:nth-child(3):not(.empty){--medal:#9a4f22;--halo:#e09a68}
@media(max-width:560px){.local-concept .lb3{grid-template-columns:1fr!important}.local-concept .quiz-banner-modes{grid-template-columns:1fr!important}}
html[data-theme="light"] .local-concept .lb3-list li:nth-child(-n+3):not(.empty) b{text-shadow:0 0 .5px var(--medal),0 1px 6px color-mix(in srgb,var(--halo) 35%,transparent);animation:none}
html[data-theme="light"] .local-concept .lb3-list li:nth-child(-n+3):not(.empty)::before{text-shadow:none}
/* Player stays above the sticky header/tabs (9/8) while scrolling; Now Discovering card (12) stays on top */
.local-concept .player{z-index:10}

/* ---- 1. Opaque search/listening panels, fainter grid (both themes) ---- */
html[data-theme="dark"] body.local-concept:before{opacity:.18}
html[data-theme="light"] body.local-concept{background-image:linear-gradient(#95a9ad14 1px,transparent 1px),linear-gradient(90deg,#95a9ad14 1px,transparent 1px),radial-gradient(circle at 78% 4%,#d9e7e5 0,transparent 34rem)}
html[data-theme="light"] .local-concept .tools{background:#faf9f3;border:1px solid #c9d2cf}
html[data-theme="light"] .local-concept .listening-tools{margin-top:14px;padding:12px 12px 16px;background:#faf9f3;border:1px solid #c9d2cf;box-shadow:4px 5px 0 #64787b16}

/* ---- 2. Dialogs follow the notebook palette: neutral charcoal in dark, paper in light ---- */
html[data-theme="dark"] .local-concept dialog,html[data-theme="dark"] .local-concept #lyrics-dialog,html[data-theme="dark"] .local-concept #close-lyrics{background:#151b1d;border-color:#3c4b50}
html[data-theme="dark"] .local-concept .lyric-follow-tools,html[data-theme="dark"] .local-concept .lyric-highlight-controls{background:#151b1df5}
html[data-theme="dark"] .local-concept .lyrics-reading-pane{scrollbar-color:#526166 #151b1d}

html[data-theme="light"] .local-concept #lyrics-dialog,html[data-theme="light"] .local-concept #close-lyrics{background:#fbfaf5;color:#17262b;border-color:#c9d2cf}
html[data-theme="light"] .local-concept #lyrics-dialog .lyrics-header h2,html[data-theme="light"] .local-concept #lyrics-panel .lyric-japanese{color:#17262b}
html[data-theme="light"] .local-concept #lyrics-dialog .lyrics-header p,html[data-theme="light"] .local-concept #lyrics-panel .lyric-romaji,html[data-theme="light"] .local-concept .lyrics-reader-tools span,html[data-theme="light"] .local-concept .lyric-follow-tools span,html[data-theme="light"] .local-concept .lyric-highlight-controls p,html[data-theme="light"] .local-concept #lyric-video-status,html[data-theme="light"] .local-concept #lyric-shared-player span,html[data-theme="light"] .local-concept .lyric-timing-note{color:#5e7175}
html[data-theme="light"] .local-concept .lyric-japanese rt,html[data-theme="light"] .local-concept .lyrics-credit a,html[data-theme="light"] .local-concept .lyrics-empty a,html[data-theme="light"] .local-concept .lyrics-credits-details summary,html[data-theme="light"] .local-concept .lyrics-video-pane>a,html[data-theme="light"] .local-concept .credit-group h3{color:#a3592c}
html[data-theme="light"] .local-concept .lyrics-credit,html[data-theme="light"] .local-concept .credit-group dt,html[data-theme="light"] .local-concept .credit-source,html[data-theme="light"] .local-concept .credit-meaning,html[data-theme="light"] .local-concept .lyrics-video-pane>.eyebrow{color:#6c7a7d;border-color:#17262b1c}
html[data-theme="light"] .local-concept .lyric-follow-tools,html[data-theme="light"] .local-concept .lyric-highlight-controls{background:#fbfaf5f5;border-color:#17262b1c}
html[data-theme="light"] .local-concept .lyrics-reader-tools button:not([aria-pressed=true]),html[data-theme="light"] .local-concept #close-lyrics{color:#17262b;border-color:#c9d2cf}
html[data-theme="light"] .local-concept .lyrics-reader-tools button:not([aria-pressed=true]):hover,html[data-theme="light"] .local-concept #close-lyrics:hover{color:#a3592c;border-color:#a3592c}
html[data-theme="light"] .local-concept .lyrics-reader-tools button[aria-pressed=true],html[data-theme="light"] .local-concept .lyrics-tabs button[aria-selected=true],html[data-theme="light"] .local-concept .lyric-platform-choice button[aria-pressed=true],html[data-theme="light"] .local-concept .lyrics-video-controls button{background:#a96132;border-color:#a96132;color:#fff9f2}
html[data-theme="light"] .local-concept .lyric-highlight-controls button{background:#eef3f1;border-color:#9fb8b2;color:#17262b}
html[data-theme="light"] .local-concept .timed-lyrics .lyric-active .lyric-japanese{color:#1d3540;text-shadow:none}
html[data-theme="light"] .local-concept .timed-lyrics .lyric-active .lyric-romaji{color:#2c5a74}
html[data-theme="light"] .local-concept .timed-lyrics.highlight-playing .lyric-line.lyric-active{border-left-color:#a3592c}
html[data-theme="light"] .local-concept .lyrics-reading-pane{scrollbar-color:#b7c3c0 #fbfaf5}
html[data-theme="light"] .local-concept #lyric-shared-player{border-color:#17262b1c}
html[data-theme="light"] body.local-concept.lyrics-open::before{background:#2b3a3f66}
html[data-theme="light"] .local-concept .full-primary,html[data-theme="light"] .local-concept .full-song-button{color:#fff9f2}
html[data-theme="light"] .local-concept .full-result.ok{color:#28734a}
html[data-theme="light"] .local-concept .full-result.bad{color:#ad3e38}
.local-concept dialog::backdrop{background:#0b10128c;backdrop-filter:blur(2px)}
html[data-theme="light"] .local-concept .listening-tools label{color:#a3592c;font-weight:700}
html[data-theme="light"] .local-concept #engine{color:#17262b;background:#fff;border:1px solid #c9d2cf;border-radius:2px}
html[data-theme="light"] .local-concept #engine option{color:#17262b;background:#fff}
html[data-theme="light"] .local-concept #detail .platforms a{background:#fff;color:#17262b;border:1px solid #c9d2cf;border-radius:2px;box-shadow:2px 2px 0 #64787b14}
html[data-theme="light"] .local-concept #detail .platforms a:hover{border-color:#a3592c;color:#a3592c}
/* Translation credit block in the sources & notes footer */
.local-concept .thaifans-credit{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);background:color-mix(in srgb,var(--white) 70%,transparent)}
.local-concept .thaifans-credit p{margin:0 0 6px}.local-concept .thaifans-credit p:last-child{margin:0}
.local-concept .thaifans-credit b{color:var(--ink);font-size:12px;letter-spacing:.04em}
.local-concept .thaifans-credit a{color:var(--accent)}
.local-concept .thaifans-terms{font-size:11px;opacity:.85}
/* Sources & notes: always open (was a collapsible <details>) */
.local-concept #notes{grid-column:1/-1;border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-size:12px;color:var(--muted)}
.local-concept #notes h2{margin:0 0 12px;font:500 18px var(--hand);color:var(--ink)}
/* Translator team names shown large so the people behind the translations stand out */
.local-concept .thaifans-team{margin:12px 0 14px}
.local-concept .thaifans-team>span{display:block;margin-bottom:8px;font:600 11px ui-monospace,Consolas,monospace;letter-spacing:.14em;color:var(--accent)}
.local-concept .thaifans-team ul{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0;padding:0;list-style:none}
.local-concept .thaifans-team li{padding:6px 16px 8px;border:1px solid var(--line);background:var(--white);box-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 22%,transparent);font:400 clamp(20px,2.4vw,28px)/1.2 'Sriracha','Segoe Print',cursive;color:var(--ink);transform:rotate(-1deg)}
.local-concept .thaifans-team li:nth-child(even){transform:rotate(1deg)}
.local-concept .title-credit{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--line);font-size:11px;color:var(--accent);text-decoration:none;vertical-align:1px}
.local-concept .title-credit:hover{border-color:var(--accent)}
/* Wide screens: quiz card goes full width under the hero (same as <=1180px) so easy > normal > hard sit side by side */
@media(min-width:1181px){
.local-concept main{grid-template-columns:1fr}
.local-concept .intro{grid-column:1;min-height:330px}
.local-concept .quiz-banner{grid-column:1;grid-row:auto;margin:0 0 28px}
.local-concept .quiz-banner-side{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.local-concept .quiz-play{width:auto;align-items:center;padding-inline:28px}
.local-concept .lb3-list li{grid-template-columns:14px 22px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center}
.local-concept .lb3-list li::before,.local-concept .lb3-list li img{grid-row:auto}
.local-concept .lb3-list li b{grid-column:3}
.local-concept .lb3-list li span{grid-column:4;font-size:12px}
}
/* Home leaderboard shows Top 10 per level (the base concept capped it at 3) */
.local-concept .lb3-list li:nth-child(n+4){display:grid}
/* Site intent note in the hero: right column on wide screens, under the Thai line elsewhere */
.local-concept .intro{display:flex;flex-direction:column}
.local-concept .site-intent{order:1;margin:22px 0 8px;max-width:520px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);background:color-mix(in srgb,var(--white) 88%,transparent);box-shadow:5px 6px 0 #0003;font-size:13px;line-height:1.7;color:var(--muted)}
.local-concept .site-intent-eyebrow{margin:0 0 4px;font:600 10px ui-monospace,Consolas,monospace;letter-spacing:.18em;color:var(--accent)}
.local-concept .site-intent h2{margin:0 0 10px;font:400 22px/1.3 'Sriracha','Segoe Print',cursive;color:var(--ink)}
.local-concept .site-intent p{margin:0 0 8px}
.local-concept .site-intent b{color:var(--ink)}
.local-concept .site-intent ul{margin:4px 0 10px;padding:0;list-style:none;display:grid;gap:4px}
.local-concept .site-intent li::before{content:'✎ ';color:var(--accent)}
.local-concept .site-intent li span{margin-left:6px;padding:0 6px;border:1px dashed var(--line);font-size:10px;color:var(--accent);white-space:nowrap}
.local-concept .site-intent-sign{margin:0!important;text-align:right;font:400 16px 'Sriracha','Segoe Print',cursive;color:var(--ink)}
@media(min-width:1181px){
.local-concept .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);column-gap:48px;align-content:center}
.local-concept .intro>*{grid-column:1}
.local-concept .intro>.site-intent{grid-column:2;grid-row:1/4;align-self:center;margin:0 0 40px;transform:rotate(.6deg)}
}
html[data-theme="light"] .local-concept .site-intent{box-shadow:5px 6px 0 #64787b18}
/* Site intent as a letter (fits 二人称, an album told through letters): ruled cream paper, airmail edge, stamp, handwritten salutation and signature. Same paper in both themes. */
.local-concept .site-intent.letter{position:relative;padding:30px 26px 22px;border:0;border-radius:2px;background:#f7f1e3 repeating-linear-gradient(transparent 0 27px,#9fb6bc40 27px 28px);background-position:0 18px;color:#3b4a4f;font-size:13px;line-height:28px;box-shadow:0 1px 0 #0001,8px 10px 0 #0004,0 18px 40px #0005}
.local-concept .site-intent.letter::before{content:'';position:absolute;inset:0 0 auto;height:7px;background:repeating-linear-gradient(135deg,#b8423a 0 10px,#f7f1e3 10px 16px,#2c5a74 16px 26px,#f7f1e3 26px 32px)}
.local-concept .site-intent.letter::after{content:'';position:absolute;left:30px;top:0;bottom:0;border-left:1px solid #d9827a66}
.local-concept .letter>*{position:relative;z-index:1;padding-left:16px}
.local-concept .letter p{margin:0}
.local-concept .letter b{color:#1d3540}
.local-concept .letter-date{text-align:right;padding-right:64px;font:11px/28px ui-monospace,Consolas,monospace;color:#8a7a62}
.local-concept .letter h2{margin:0;font:400 24px/56px 'Sriracha','Segoe Print',cursive;color:#1d3540}
.local-concept .letter ul{margin:0;padding:0 0 0 16px;list-style:none}
.local-concept .letter li::before{content:'✎ ';color:#a3592c}
.local-concept .letter li span{margin-left:6px;padding:0 6px;border:1px dashed #a3592c80;font-size:10px;line-height:18px;color:#a3592c;white-space:nowrap}
.local-concept .letter-sign{margin-top:28px!important;text-align:right;padding-right:6px;font:400 15px/28px 'Sriracha','Segoe Print',cursive;color:#5e7175}
.local-concept .letter-sign b{display:block;font:400 26px/32px 'Sriracha','Segoe Print',cursive;color:#1d3540;transform:rotate(-3deg)}
.local-concept .letter-ps{font-size:12px;color:#6c7a7d}
.local-concept .letter-stamp{position:absolute;top:18px;right:16px;z-index:2;display:grid;place-items:center;width:58px;height:68px;padding:0!important;background:#f7f1e3;border:3px dotted #b8423a;outline:4px solid #f7f1e3;transform:rotate(6deg);text-align:center;color:#b8423a}
.local-concept .letter-stamp b{font:600 20px/1 'Yu Mincho','Hiragino Mincho ProN',serif;color:#b8423a}
.local-concept .letter-stamp small{display:block;font:7px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.06em}
@media(min-width:1181px){.local-concept .intro>.site-intent.letter{transform:rotate(1.2deg)}}
/* P.S. thank-you names, handwritten on the letter */
.local-concept .letter-ps p{margin:0}
.local-concept .letter .letter-thanks{display:flex;flex-wrap:wrap;gap:2px 16px;margin:2px 0 0;padding:0}
.local-concept .letter .letter-thanks li{font:400 18px/32px 'Sriracha','Segoe Print',cursive;color:#1d3540}
.local-concept .letter .letter-thanks li::before{content:none}
.local-concept .letter .letter-thanks li:last-child{color:#a3592c}
.local-concept .letter .letter-thanks a{color:#a3592c;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:5px;text-decoration-thickness:1px}
.local-concept .letter .letter-thanks a:hover{color:#b8423a}
/* README envelope: wiggles until opened, then the letter unfolds in its place */
.local-concept .letter-wrap{order:1;margin:22px 0 8px;max-width:520px}
.local-concept .letter-wrap>.site-intent{margin:0}
@media(min-width:1181px){.local-concept .intro>.letter-wrap{grid-column:2;grid-row:1/4;align-self:center;margin:0 0 40px;max-width:none}}
.local-concept .envelope{position:relative;display:block;width:100%;max-width:400px;aspect-ratio:1.6;margin:0 auto;padding:0;border:0;border-radius:3px;cursor:pointer;background:#ecdfc4;box-shadow:inset 0 0 0 7px transparent,8px 10px 0 #0004,0 18px 40px #0005;overflow:hidden;animation:envelope-wiggle 2.8s ease-in-out infinite;transform-origin:50% 90%}
.local-concept .envelope::before{content:'';position:absolute;inset:0;border:7px solid transparent;border-image:repeating-linear-gradient(135deg,#b8423a 0 10px,#ecdfc4 10px 16px,#2c5a74 16px 26px,#ecdfc4 26px 32px) 7;pointer-events:none}
.local-concept .envelope::after{content:'';position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(to top right,#e3d3b2 49.6%,transparent 50%) left/50% 100% no-repeat,linear-gradient(to top left,#e3d3b2 49.6%,transparent 50%) right/50% 100% no-repeat}
.local-concept .envelope-flap{position:absolute;inset:0 0 auto;z-index:2;height:56%;background:#f3e9d3;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 0 #0002);transform-origin:50% 0;transition:transform .5s ease}
.local-concept .envelope-stamp{position:absolute;top:16px;right:18px;z-index:3;display:grid;place-items:center;width:44px;height:52px;background:#f7f1e3;border:3px dotted #b8423a;transform:rotate(7deg)}
.local-concept .envelope-stamp b{font:600 15px/1 'Yu Mincho','Hiragino Mincho ProN',serif;color:#b8423a}
.local-concept .envelope-label{position:absolute;left:50%;top:60%;z-index:3;transform:translate(-50%,-50%) rotate(-2deg);display:grid;gap:2px;padding:8px 16px;background:#f7f1e3;border:1px solid #a3592c55;box-shadow:3px 3px 0 #a3592c33;text-align:center;white-space:nowrap}
.local-concept .envelope-label b{font:700 18px/1.1 ui-monospace,Consolas,monospace;letter-spacing:.24em;color:#1d3540}
.local-concept .envelope-label small{font:400 13px/1.3 'Sriracha','Segoe Print',cursive;color:#a3592c}
.local-concept .envelope:hover,.local-concept .envelope:focus-visible{animation-play-state:paused}
.local-concept .envelope:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
.local-concept .envelope.opening{animation:none}
.local-concept .envelope.opening .envelope-flap{transform:rotateX(180deg) translateY(-2px)}
.local-concept .envelope.opening .envelope-label{opacity:0;transition:opacity .25s}
@keyframes envelope-wiggle{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-3deg)}72%{transform:rotate(3deg)}78%{transform:rotate(-2deg)}84%{transform:rotate(1.5deg)}90%{transform:rotate(0)}}
.local-concept .letter.unfold{animation:letter-unfold .55s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
@keyframes letter-unfold{from{opacity:0;transform:translateY(14px) scaleY(.35)}to{opacity:1}}
.local-concept .letter:focus{outline:none}
@media(prefers-reduced-motion:reduce){.local-concept .envelope{animation:none}.local-concept .letter.unfold{animation:none}.local-concept .envelope-flap{transition:none}}
@media(min-width:1181px){.local-concept .letter-wrap>.letter{transform:rotate(1.2deg)}}
.local-concept .envelope[hidden]{display:none}
.local-concept .envelope.opening{overflow:visible}
/* Returning viewers who already opened the README skip the envelope */
.letter-opened .local-concept .envelope{display:none}
.letter-opened .local-concept #site-letter[hidden]{display:block}
/* P.S. names: the four translators on one line with dots, the page on its own line */
.local-concept .letter .letter-thanks{gap:0}
.local-concept .letter .letter-thanks li:not(:last-child)::after{content:'·';margin:0 9px;color:#a3592c}
.local-concept .letter .letter-thanks li:last-child{color:#1d3540}
.local-concept .letter .letter-page{text-align:center;font:400 18px/32px 'Sriracha','Segoe Print',cursive;color:#a3592c}
.local-concept .letter .letter-page a{color:#a3592c;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:5px;text-decoration-thickness:1px}
.local-concept .letter .letter-page a:hover{color:#b8423a}
.local-concept .letter .letter-thanks li{font-size:16px}.local-concept .letter .letter-thanks li:not(:last-child)::after{margin:0 6px}
/* Letter composition pass: tighter 24px ruled lines, compact list with inline tags, P.S. set apart */
.local-concept .site-intent.letter{padding:24px 22px 18px;font-size:13px;line-height:24px;background:#f7f1e3 repeating-linear-gradient(transparent 0 23px,#9fb6bc3a 23px 24px);background-position:0 23px}
.local-concept .letter-date{line-height:24px;padding-right:62px}
.local-concept .letter h2{font-size:22px;line-height:36px;margin:2px 0 4px}
.local-concept .letter>p:not([class]){margin:0 0 4px}
.local-concept .letter>p:not([class])+p:not([class]){text-indent:1.5em}
.local-concept .letter ul{margin:2px 0 0;padding-left:16px;display:grid;gap:0}
.local-concept .letter ul:not(.letter-thanks) li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;line-height:24px}
.local-concept .letter ul:not(.letter-thanks) li::before{margin-right:2px}
.local-concept .letter li span{margin-left:0;line-height:16px;padding:0 5px}
.local-concept .letter-sign{margin-top:8px!important;line-height:22px}
.local-concept .letter-sign b{font-size:24px;line-height:30px}
.local-concept .letter-ps{margin-top:10px;padding-top:8px;border-top:1px dashed #a3592c55;font-size:12px;line-height:20px;background:#f7f1e3}
.local-concept .letter-ps p{margin:0 0 4px}
.local-concept .letter .letter-thanks{justify-content:center;margin:2px 0 0;padding-left:16px}
.local-concept .letter .letter-thanks li{line-height:26px}
.local-concept .letter .letter-page{line-height:26px;font-size:16px}
/* P.S. credits: heartfelt thanks, one translator per line, then the page */
.local-concept .letter .letter-thanks-title{margin:6px 0 0;text-align:center;font:400 15px/24px 'Sriracha','Segoe Print',cursive;color:#5e7175}
.local-concept .letter .letter-thanks{display:grid;justify-items:center;gap:0;padding-left:0}
.local-concept .letter .letter-thanks li{font-size:18px;line-height:26px}
.local-concept .letter .letter-thanks li:not(:last-child)::after{content:none}
.local-concept .letter .letter-page{margin-top:2px}
/* P.S. names back on one line, each with a leading dot */
.local-concept .letter .letter-thanks{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px}
.local-concept .letter .letter-thanks li{font-size:16px}
.local-concept .letter .letter-thanks li::before{content:'·';margin-right:4px;color:#a3592c}
/* A barely-there secret written along the letter's edge */
.local-concept .letter .letter-secret{position:absolute;left:8px;bottom:36px;z-index:1;padding:0;writing-mode:vertical-rl;font:400 9px/1 'Sriracha','Segoe Print',cursive;letter-spacing:.2em;color:#a3592c;opacity:.22;pointer-events:none;user-select:none}
/* Footer: legal / fair-use notice at the very bottom */
.local-concept footer .footer-tag{margin:0 0 14px}
.local-concept .footer-legal{padding-top:12px;border-top:1px dashed var(--line);font:10px/1.7 ui-monospace,Consolas,monospace;letter-spacing:.02em;color:var(--muted);opacity:.85}
.local-concept .footer-legal p{margin:0}
.local-concept .footer-legal a{color:var(--accent)}
.local-concept .footer-legal>div{margin-bottom:10px}
.local-concept .footer-legal>div[lang="th"]{font-family:'Leelawadee UI',Tahoma,sans-serif;font-size:11px}
.local-concept .footer-legal p+p{margin-top:2px}
.local-concept .footer-legal b{color:var(--ink);font-weight:600}
.local-concept .footer-copy{margin-top:4px!important}
/* Legal notice: Thai and English set the same way, side by side on wide screens */
.local-concept .footer-legal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px;font:11px/1.75 'Leelawadee UI',Tahoma,sans-serif;letter-spacing:0}
.local-concept .footer-legal>div,.local-concept .footer-legal>div[lang="th"]{margin:0;font:inherit}
.local-concept .footer-legal>div p+p{margin-top:6px}
.local-concept .footer-legal .footer-copy{grid-column:1/-1;margin-top:10px!important;padding-top:8px;border-top:1px dashed var(--line);font-family:ui-monospace,Consolas,monospace;font-size:10px}
@media(max-width:760px){.local-concept .footer-legal{grid-template-columns:1fr}.local-concept .footer-legal>div[lang="en"]{margin-top:10px}}
/* New 余白 stamp logo: mark in the header, full stamp in the footer, light/dark files swap with the theme */
.local-concept .brand-logo{width:auto!important;height:40px!important;filter:none!important;opacity:1!important;object-fit:contain}
.local-concept .brand-logo-light,.local-concept .brand-full-light{display:none}
html[data-theme="light"] .local-concept .brand-logo-light,html[data-theme="light"] .local-concept .brand-full-light{display:block}
html[data-theme="light"] .local-concept .brand-logo-dark,html[data-theme="light"] .local-concept .brand-full-dark{display:none}
.local-concept .footer-logo{display:flex;justify-content:center;margin:8px 0 18px}
.local-concept .footer-logo img{width:min(240px,60vw);height:auto}
@media(max-width:560px){.local-concept .brand-logo{height:30px!important}}
/* Thai name beside "Archive" in the hero */
.local-concept .archive-title .thai-name{margin-left:.5em;font:400 .62em/1 'Sriracha','Leelawadee UI',sans-serif;letter-spacing:.04em;color:var(--accent);vertical-align:.15em;white-space:nowrap}
html[data-theme="light"] .local-concept .archive-title .thai-name{color:#2c5a74}
/* Thai name sits above the big Yorushika word */
.local-concept .intro h1>.thai-name{display:block;margin:0 0 .1em .08em;font:400 clamp(20px,2.2vw,30px)/1.3 'Sriracha','Leelawadee UI',sans-serif;letter-spacing:.12em;color:var(--accent)}
html[data-theme="light"] .local-concept .intro h1>.thai-name{color:#a3592c}
/* โยรุชิกะ: plain, larger, airier spacing */
.local-concept .intro h1>.thai-name{font-size:clamp(28px,3.4vw,46px);letter-spacing:.32em;margin:0 0 .25em .06em}
/* Hero Thai line as a quotation: big Mincho quote marks, accent rule on the left, one line on desktop */
.local-concept .intro>p:last-child{position:relative;max-width:none;width:max-content;max-inline-size:100%;margin-top:18px;padding:6px 1.3em 6px 1.5em;border-left:3px solid var(--accent);transform:none}
.local-concept .intro>p:last-child::before,.local-concept .intro>p:last-child::after{position:absolute;font:400 2.4em/1 'Yu Mincho','Hiragino Mincho ProN',Georgia,serif;color:var(--accent);opacity:.75}
.local-concept .intro>p:last-child::before{content:'“';left:.18em;top:-.12em}
.local-concept .intro>p:last-child::after{content:'”';right:0;bottom:-.55em}
@media(max-width:560px){.local-concept .intro>p:last-child{width:auto}}
/* Quote marks sit inline with the text (the grid used to stretch the box and drop the closing mark to the bottom) */
.local-concept .intro>p:last-child{align-self:start;height:auto;padding:4px 0 4px .9em}
.local-concept .intro>p:last-child::before,.local-concept .intro>p:last-child::after{position:static;font-size:1.7em;line-height:0;vertical-align:-.32em}
.local-concept .intro>p:last-child::before{margin-right:.12em}
.local-concept .intro>p:last-child::after{margin-left:.08em}
html[data-theme="dark"] .local-concept .intro h1>.archive-title{color:var(--accent);text-shadow:none}
/* Card title zone: the Thai title sits with the other names (no rule above it); the divider moves below it, before the release line */
.local-concept .card .thai-reading{margin-bottom:2px}
.local-concept .card .translation{border-top:0;padding-top:0;margin-top:2px;min-height:0;font-size:13px;line-height:1.5}
.local-concept .card .translation::before{content:'แปล · ';font-size:10px;letter-spacing:.06em;opacity:.65}
.local-concept .card .release{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
html[data-theme="dark"] .local-concept .card .translation{color:#e8ece8}
html[data-theme="light"] .local-concept .card .translation{color:#17262b}

/* HARDCORE: 4th quiz level (deep crimson) on the home quiz card */
.local-concept .quiz-banner-modes{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.local-concept .lb3{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.local-concept .quiz-banner-modes .lv-hardcore,.local-concept .lb3-col.lv-hardcore{--lv:#e0457b}
html[data-theme="light"] .local-concept .quiz-banner-modes .lv-hardcore,html[data-theme="light"] .local-concept .lb3-col.lv-hardcore{--lv:#9c1048}
@media(max-width:900px){.local-concept .quiz-banner-modes,.local-concept .lb3{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.local-concept .quiz-banner-modes,.local-concept .lb3{grid-template-columns:1fr!important}}

/* MARATHON: 5th quiz mode (sky blue); 5 boards wrap as 3 + 2 on wide screens */
.local-concept .quiz-banner-modes{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important}
.local-concept .lb3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.local-concept .quiz-banner-modes .lv-marathon,.local-concept .lb3-col.lv-marathon{--lv:#5aa9e6}
html[data-theme="light"] .local-concept .quiz-banner-modes .lv-marathon,html[data-theme="light"] .local-concept .lb3-col.lv-marathon{--lv:#1f6aa5}

/* NEW tag on the newest quiz modes (HARDCORE, MARATHON); delete the <i class="new"> markup when they stop being new */
.new{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--c,var(--lv));color:#fff;font:800 10px/1.5 'Leelawadee UI',sans-serif;font-style:normal;letter-spacing:.08em;vertical-align:middle;animation:new-pulse 1.8s ease-in-out infinite}
@keyframes new-pulse{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.new{animation:none}}
/* phones: home leaderboard shows Top 5 per mode (5 stacked boards of 10 is a long scroll); full lists live on quiz.html */
@media(max-width:560px){.local-concept .home-board .lb3-list li:nth-child(n+6){display:none}}
/* phones: home leaderboard modes become a swipeable slider (next mode peeks in); app.js auto-advances it */
@media(max-width:560px){
.local-concept .home-board .lb3{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.local-concept .home-board .lb3::-webkit-scrollbar{display:none}
.local-concept .home-board .lb3-col{flex:0 0 88%;scroll-snap-align:start}
}
/* lyrics dialog: Thai translation (stanzas), n-buna's note, and the per-song Thai Fans credit */
.local-concept .lyrics-thai{margin:28px 0 8px;padding-top:22px;border-top:1px dashed #ffffff2e}
.local-concept .lyrics-thai h3{font:700 13px/1.4 'Leelawadee UI',sans-serif;letter-spacing:.12em;color:#e6b681;margin:0 0 14px}
.local-concept .lyrics-thai-text p{margin:0 0 18px;font-size:15px;line-height:1.85;color:#e8e4d8}
.local-concept .nbuna-note{margin:26px 0 16px;padding:16px 18px;border-left:3px solid #e6b681;border-radius:0 10px 10px 0;background:#ffffff08}
.local-concept .nbuna-note p{margin:0;line-height:1.8;color:#d9d4c6}
.local-concept .nbuna-note .nbuna-src{margin-top:10px;font-size:12px;color:#9aa5a8}
.local-concept .lyrics-thai-credit{font-size:12.5px;line-height:1.7;color:#9aa5a8}
.local-concept .lyrics-thai-credit b{color:#f5f3eb}
.local-concept .lyrics-thai a{color:#e6b681}
html[data-theme="light"] .local-concept .lyrics-thai{border-top-color:#0000002a}
html[data-theme="light"] .local-concept .lyrics-thai h3,html[data-theme="light"] .local-concept .lyrics-thai a{color:#a3592c}
html[data-theme="light"] .local-concept .lyrics-thai-text p{color:#2b2a26}
html[data-theme="light"] .local-concept .nbuna-note{border-left-color:#a3592c;background:#a3592c0d}
html[data-theme="light"] .local-concept .nbuna-note p{color:#3a3833}
html[data-theme="light"] .local-concept .nbuna-note .nbuna-src,html[data-theme="light"] .local-concept .lyrics-thai-credit{color:#6c6a63}
html[data-theme="light"] .local-concept .lyrics-thai-credit b{color:#2b2a26}
.local-concept .lyrics-reader-tools[hidden]{display:none}
/* card cover variations: hovering the cover cross-fades from the album cover to the track's single cover (with a small label) */
.local-concept .cover .cover-alt{position:absolute;inset:0;opacity:0;transition:opacity .55s ease,transform .5s}
.local-concept .card:hover .cover .cover-alt,.local-concept .cover:focus-visible .cover-alt{opacity:1}
.local-concept .cover-alt-label{position:absolute;right:8px;top:8px;z-index:2;padding:2px 8px;border-radius:999px;background:#0f1416cc;color:#ffd2a4;font:600 10.5px/1.5 'Leelawadee UI',sans-serif;opacity:0;transform:translateY(-4px);transition:opacity .4s .15s,transform .4s .15s;pointer-events:none}
.local-concept .card:hover .cover-alt-label,.local-concept .cover:focus-visible .cover-alt-label{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.local-concept .cover .cover-alt,.local-concept .cover-alt-label{transition:none}}
/* album tracks that came out as a single first: small tag after "album · year" */
.local-concept .single-tag{display:inline-block;margin-left:8px;padding:0 7px;border:1px solid #e6b68166;border-radius:999px;color:#e6b681;font-size:.82em;line-height:1.6;vertical-align:1px}
html[data-theme="light"] .local-concept .single-tag{border-color:#a3592c66;color:#a3592c}
/* inline Thai translation under each lyric line (songs whose translation aligns line-for-line) */
#lyrics-panel .lyric-thai{margin-top:4px;font-size:15px;line-height:1.7;color:#e6b681}
html[data-theme="light"] #lyrics-panel .lyric-thai{color:#a3592c}
.hide-thai .lyric-thai{display:none}
/* เฉพาะคำแปล: hide Japanese + romaji, Thai lines read as the main text */
.thai-only #lyrics-panel .lyric-japanese,.thai-only #lyrics-panel .lyric-romaji{display:none}
.thai-only #lyrics-panel .lyric-thai{display:block;margin:0;font-size:19px;line-height:1.75;color:#f5f3eb}
html[data-theme="light"] .thai-only #lyrics-panel .lyric-thai{color:#2b2a26}
.local-concept #toggle-thai-only[aria-pressed=false]{opacity:.6}
.thai-only #lyrics-panel .lyric-line{margin-bottom:6px}
.thai-only #lyrics-panel .lyric-break{height:22px}
/* translator footnotes under the Thai translation */
.local-concept .tr-notes{margin:18px 0 12px;padding:12px 16px;border:1px dashed #ffffff2e;border-radius:8px}
.local-concept .tr-notes h4{margin:0 0 6px;font:700 12px/1.4 'Leelawadee UI',sans-serif;letter-spacing:.1em;color:#e6b681}
.local-concept .tr-notes p{margin:0 0 6px;font-size:13.5px;line-height:1.7;color:#c4cece;overflow-wrap:anywhere}
html[data-theme="light"] .local-concept .tr-notes{border-color:#0000002a}
html[data-theme="light"] .local-concept .tr-notes h4{color:#a3592c}
html[data-theme="light"] .local-concept .tr-notes p{color:#3a3833}
.local-concept .quiz-banner-modes .lv-lyrics,.local-concept .lb3-col.lv-lyrics{--lv:#c792ea}
html[data-theme="light"] .local-concept .quiz-banner-modes .lv-lyrics,html[data-theme="light"] .local-concept .lb3-col.lv-lyrics{--lv:#7b3fa0}
.local-concept .quiz-banner-modes li{padding:0!important;background:color-mix(in srgb,var(--lv) 7%,transparent);transition:background .15s}
.local-concept .quiz-banner-modes li a{display:grid;gap:2px;height:100%;padding:10px 12px;color:inherit;text-decoration:none}
.local-concept .quiz-banner-modes li:hover{background:color-mix(in srgb,var(--lv) 14%,transparent)}
.local-concept .quiz-play{align-self:center;padding:9px 20px;font-size:14px}
.card-links .pl-add{font:inherit;font-size:12px;cursor:pointer;padding:4px 12px;border-radius:999px;background:transparent;border:1px dashed currentColor;color:inherit;opacity:.8}
.card-links .pl-add:hover{opacity:1}
#random-card .pl-now{border-radius:999px!important}
.card-links .pl-add[aria-pressed=true],.pl-now[aria-pressed=true]{border-style:solid;color:#e0457b!important;border-color:#e0457b!important;opacity:1}
.pl-fab{position:absolute;right:14px;bottom:calc(100% + 10px);padding:9px 16px;border:1px solid #e6b681;border-radius:999px;background:#151b1d;color:#f4f1e8;font:600 14px 'Leelawadee UI',sans-serif;cursor:pointer;box-shadow:3px 4px 0 #0006}
.pl-fab b{display:inline-block;min-width:22px;margin-left:6px;padding:1px 7px;border-radius:999px;background:#e6b681;color:#10171d}
.pl-fab.bump{animation:pl-bump .45s ease}
@keyframes pl-bump{40%{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.pl-fab.bump{animation:none}}
.pl-dialog{width:min(440px,calc(100vw - 32px));max-height:min(80dvh,640px);padding:18px;border:1px solid #394648;border-radius:3px;background:#121718;color:#eef0e9;box-shadow:9px 11px 0 #0006}
.pl-dialog::backdrop{background:#000a}
.pl-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pl-head h2{margin:0;font-size:18px}
.pl-close{border:0;background:none;color:inherit;font-size:18px;cursor:pointer}
.pl-list{list-style:none;margin:14px 0;padding:0;display:grid;gap:6px;max-height:40dvh;overflow:auto}
.pl-list li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px}
.pl-list img{width:40px;height:40px;object-fit:cover}
.pl-list span{display:grid;min-width:0}.pl-list small{opacity:.65;font-size:12px}
.pl-list button{border:0;background:none;color:inherit;opacity:.6;cursor:pointer;font-size:14px}
.pl-empty{margin:18px 0;opacity:.7}
.pl-go{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl-go>*{display:grid;gap:3px;padding:12px;border:1px solid currentColor;border-radius:3px;background:transparent;color:inherit;text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.pl-go b{font-size:15px}.pl-go small{font-size:11.5px;opacity:.75;line-height:1.4}
.pl-go .pl-yt{color:#ff7b7b}.pl-go .pl-sp{color:#1ed760}
.pl-status{min-height:1.4em;margin:10px 0 0;font-size:13px;color:#1ed760}
.pl-clear{margin-top:8px;border:0;background:none;color:inherit;opacity:.6;font-size:12.5px;text-decoration:underline;cursor:pointer}
html[data-theme="light"] .pl-dialog{background:#fbfaf5;color:#17262b;border-color:#c9d2cf}
html[data-theme="light"] .pl-fab{background:#fbfaf5;color:#17262b}
html[data-theme="light"] .pl-go .pl-yt{color:#c0392b}html[data-theme="light"] .pl-go .pl-sp{color:#16843d}html[data-theme="light"] .pl-status{color:#16843d}
@media(max-width:480px){.pl-go{grid-template-columns:1fr}}
.audio-note{opacity:.7;cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
@media(max-width:700px){.local-concept .player{flex-wrap:wrap;row-gap:6px}.local-concept .player .player-content{flex:1 1 100%}.local-concept #now-playing>div{min-width:0}.local-concept #now-playing :is(strong,small){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.local-concept #now-playing{flex:1 1 0;width:auto;min-width:0}.local-concept #full-song{padding:7px 11px;font-size:13px;align-self:center}body:not(.lyrics-open) .player .volume-control{display:none}}
@media(max-width:560px){.local-concept .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}.local-concept #song-list .card{zoom:.74}}
.local-concept .tabs{position:relative;top:auto}
.local-concept .tools{position:sticky;top:82px;z-index:8;transition:transform .25s ease,opacity .25s ease}
.local-concept .tools.stuck{box-shadow:0 8px 22px #0007}
.local-concept .tools.idle{transform:translateY(-140%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.local-concept .tools{transition:none}}
@media(max-width:560px){.local-concept .tools{grid-template-columns:1fr 1fr auto!important;gap:6px;padding:8px}.local-concept .tools input{grid-column:1/-1!important}.local-concept .tools :is(select,button){min-width:0;padding-block:7px}.local-concept .tools select{width:100%;max-width:none;font-size:13px}}
.random-card{transition:translate .3s ease}
.random-card.folded{translate:calc(100% + 40px) 0}
.local-concept .random-card #fold-random{position:absolute;right:46px;top:12px;padding:3px 8px;background:transparent;border:1px solid transparent;color:inherit;font-size:15px;cursor:pointer}
.local-concept .random-card #fold-random:hover{border-color:currentColor}
.random-handle{position:fixed;right:0;top:120px;z-index:12;writing-mode:vertical-rl;padding:12px 6px;border:1px solid #e6b681;border-right:0;border-radius:6px 0 0 6px;background:#151b1d;color:#e6b681;font:700 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.18em;cursor:pointer;box-shadow:-3px 3px 0 #0006}
.random-handle[hidden]{display:none}
html[data-theme="light"] .random-handle{background:#fbfaf4;color:#a3592c;border-color:#a3592c}
@media(max-width:700px){.random-handle{top:84px}}
@media(prefers-reduced-motion:reduce){.random-card{transition:none}}
.random-card{touch-action:pan-y}
.release-en{opacity:.75}
@media(max-width:700px){.local-concept .service-status:not(:hover):not(:focus-within){flex-direction:row;width:auto;zoom:.72;top:auto;bottom:178px;transform:none}}
html{font-variant-emoji:text}