:root{--paper:#e7e2d5;--ink:#242d2d;--muted:#74766b;--red:#9e402c;--mono:'Courier New',monospace;--serif:Houzun,serif;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:#222927;color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button,a{touch-action:manipulation}button{border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:4px}[hidden]{display:none!important}.publication{width:min(100%,470px);min-height:100svh;margin:0 auto;background:var(--paper);box-shadow:0 20px 80px #0006;position:relative;isolation:isolate}.publication:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23656552' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.issue-header{height:80px;display:flex;align-items:center;justify-content:space-between;margin:0 24px;border-bottom:1px solid #242d2d;gap:12px}.issue-header>button:first-child{font:700 14px/.95 var(--mono);letter-spacing:-.8px;text-align:left;padding:12px 0}.issue-header>button:first-child span{display:block;font-size:8px;letter-spacing:2px;margin-top:6px}.edition{text-align:center;font-size:15px;line-height:1.4}.edition b{font:8px var(--mono);letter-spacing:.4px}.issue-header>button:last-child{font-size:16px;min-height:44px;padding:0}.issue-header>button:last-child span{margin-left:10px}
.cover{padding:22px 24px 0}.issue-tag,.running-label{font:8px/1.5 var(--mono);letter-spacing:1.3px}.issue-tag{color:var(--red)}.cover-title h1{font-size:clamp(70px,24vw,102px);font-weight:400;line-height:.98;letter-spacing:3px;margin:15px 0 0;display:flex;align-items:flex-end;justify-content:space-between}.cover-title h1 span{writing-mode:vertical-rl;font:8px var(--mono);letter-spacing:2px;margin-bottom:8px}.cover-title>p{font-size:17px;margin:16px 0 24px;letter-spacing:1px;border-bottom:3px double #777b6e;padding-bottom:19px}.cover-body{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:20px}.feature{min-width:0}.sea-print{margin:0}.sea-print img{width:100%;aspect-ratio:1.16;display:block;object-fit:cover;filter:saturate(.58) contrast(.88);border:1px solid #34433b}.sea-print figcaption{font-size:12px;line-height:1.5;margin:10px 0 22px;color:#585e54}.cover-story .running-label{font-size:7px;letter-spacing:.8px}.cover-story h2{font-size:34px;font-weight:400;line-height:1.4;margin:12px 0}.cover-story p{font-size:17px;line-height:1.7;color:#626659;margin:0 0 20px}.editorial-cta{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center;width:100%;min-height:49px;text-align:left;font-size:20px}.editorial-cta span{font-family:serif;font-size:25px}.paper-footer{display:flex;justify-content:space-between;gap:12px;padding:25px 0 max(20px,env(safe-area-inset-bottom));font-size:12px;color:#616457}.paper-footer a{border-bottom:1px solid #87887a;padding-bottom:4px}
.color-index{display:flex;flex-direction:column;gap:0;align-items:center;border-left:1px solid #26312a2c;padding-left:9px;align-self:start}.color-index:before{content:'CHANNEL';font:7px var(--mono);letter-spacing:.4px;display:block;margin-bottom:11px;color:#696d62}.channel{width:44px;min-height:43px;padding:6px;display:grid;place-items:center;position:relative}.channel:focus-visible{outline-offset:0}.channel-cap{width:27px;height:27px;border-radius:5px;background:linear-gradient(145deg,#ffffff66,#ffffff00 44%,#00000033),var(--channel);box-shadow:0 3px 0 color-mix(in srgb,var(--channel),#181e1d 55%),0 5px 6px #30332242,inset 0 1px 1px #fffb,inset 1px 0 1px #ffffff60;border:1px solid #3d49363d;transition:transform .3s,box-shadow .3s;display:block}.channel[aria-pressed=true] .channel-cap{transform:scale(1.2);box-shadow:0 2px 0 color-mix(in srgb,var(--channel),#151b17 70%),0 4px 8px #30332255,inset 0 1px 1px #fff8}.channel[aria-pressed=true]:after{content:'';position:absolute;left:0;width:3px;height:10px;background:var(--red);border-radius:1px}.channel:active .channel-cap{transform:translateY(2px) scale(.94);box-shadow:0 1px 1px #30332277}.channel:hover .channel-cap{filter:brightness(1.07)}
.room{padding:0 24px 24px}.track-head{display:flex;align-items:center;justify-content:space-between;padding:23px 0 16px;gap:15px}.track-head h1{font-size:62px;line-height:1.05;font-weight:400;margin:8px 0 0;max-width:230px;overflow-wrap:anywhere}.track-byline{font:8px/1.7 var(--mono);text-align:right}.track-byline span{font:14px/1.7 var(--serif);color:#686a60;display:block}.room-body{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:20px}.reading-main{min-width:0}.sleeve{margin:0}.sleeve img{display:block;width:100%;aspect-ratio:1;object-fit:cover;box-shadow:2px 3px 0 #b9b7a7,5px 7px 11px #242f241a;border:5px solid #efeadf;outline:1px solid #b8b7aa}.sleeve figcaption{display:flex;justify-content:space-between;gap:8px;font-size:11px;line-height:1.6;margin:10px 0 14px;color:#636858}.sleeve figcaption>span:last-child{font:7px var(--mono);letter-spacing:.5px;margin-top:3px;flex-shrink:0}.reading-tabs{display:flex;gap:22px;border-bottom:1px solid #949889;align-items:center}.reading-tabs button{font-size:18px;min-height:40px;position:relative;padding:0 0 7px}.reading-tabs button[aria-selected=true]:after{content:'';height:3px;background:var(--red);position:absolute;bottom:-1px;left:0;right:0}.reading-tabs button[aria-selected=false]{color:#747a6b}.follow-label{font-size:11px;color:#777d6f;margin-left:auto;white-space:nowrap}.lyric-window{height:131px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9baa9 transparent;mask-image:linear-gradient(transparent,#000 12%,#000 86%,transparent)}#lyrics{padding:42px 0 62px}.lyric-line{font-size:21px;line-height:1.5;margin:0;padding:7px 0;color:#898c7d;transition:color .4s}.lyric-line.active{color:#242d2d}.lyric-line.active:before{content:'•';color:var(--red);margin-right:6px}.note{height:131px;overflow:auto;font-size:17px;line-height:1.75;padding:13px 0;scrollbar-width:thin}.note h2{font-size:22px;font-weight:400;margin:0 0 8px}.note p{margin:0 0 15px}
.console{position:relative;margin:19px -9px 0;padding:15px 20px 19px;background:linear-gradient(110deg,#353b39,#262d2c 65%,#303735);border-radius:9px;border:1px solid #111b19;box-shadow:0 2px 0 #697066 inset,0 -4px 0 #0a1312 inset,0 8px 16px #17232030;color:#dedccb;isolation:isolate}.console:before{content:'';position:absolute;inset:2px;border-radius:7px;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px);z-index:-1}.console-label{display:flex;align-items:center;justify-content:space-between;font:7px var(--mono);letter-spacing:.8px;margin:0 4px 12px}.console-label>span{display:flex;align-items:center;gap:6px}.console-label a{font:14px var(--serif);padding:4px 0}.console-label i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#616648;box-shadow:0 0 0 2px #182320}.playing .console-label i{background:#e7bf66;box-shadow:0 0 6px #e4b557aa}.screw{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#a1a193,#3b4340 43%,#121d19 48%,#111b19 58%,#7a8276 63%,#464f48);box-shadow:0 1px 2px #0008;position:absolute}.top-left{top:8px;left:8px}.top-right{top:8px;right:8px}.bottom-left{bottom:8px;left:8px}.bottom-right{bottom:8px;right:8px}
.meter-row{display:flex;gap:17px;align-items:center}.meter-pair{display:flex;gap:5px;flex:1;min-width:0;background:#111a16;border-radius:5px;padding:4px;box-shadow:0 1px 1px #b9c0a340,0 2px 4px #000 inset}.meter{flex:1;min-width:0;height:67px;background:radial-gradient(ellipse at 50% 80%,#efe1ab,#c6b88a);position:relative;overflow:hidden;border-radius:2px;box-shadow:0 4px 6px #372c184a inset;color:#4a4332}.meter>span{display:block;text-align:center;white-space:nowrap;font:5px var(--mono);margin-top:10px;position:relative;z-index:1}.meter em{color:#a74330;font-style:normal}.meter-arc{height:70px;position:absolute;left:8px;right:8px;top:21px;border-top:2px solid #504738;border-radius:50%}.meter-arc:after{content:'';position:absolute;left:4px;right:4px;top:-7px;height:5px;background:repeating-linear-gradient(90deg,#574c35 0 1px,transparent 1px 9px)}.meter b{position:absolute;bottom:8px;width:100%;text-align:center;font:8px var(--mono);letter-spacing:1px}.needle{position:absolute;width:1px;height:44px;background:#a24431;bottom:-5px;left:50%;transform-origin:bottom center;transform:rotate(-43deg);box-shadow:1px 0 1px #0003;transition:transform .09s linear}.volume-control{width:65px;flex-shrink:0;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;font-size:11px;line-height:1}.knob{width:48px;height:48px;display:block;margin-top:6px;border-radius:50%;border:2px solid #171e1b;background:repeating-conic-gradient(#656d63 0deg 3deg,#2c3430 4deg 7deg);box-shadow:0 4px 5px #0009,0 1px 0 #a6b09b66 inset;position:relative}.knob:before{content:'';position:absolute;inset:4px;border-radius:50%;background:linear-gradient(145deg,#616c60,#323c36 65%,#27312d);box-shadow:0 1px 1px #b5be9d70 inset,0 -1px 2px #121b17}.knob i{position:absolute;inset:5px;border-radius:50%;transform:rotate(54deg);z-index:1}.knob i:before{content:'';position:absolute;top:3px;left:calc(50% - 1px);width:2px;height:10px;border-radius:1px;background:#e9d9ac;box-shadow:0 0 3px #fff4}.volume-control input{opacity:0;position:absolute;inset:13px 0 0;width:65px;height:52px;margin:0;cursor:ew-resize}.volume-control:focus-within .knob{outline:2px solid #e3c684;outline-offset:3px}.volume-scale{font:8px var(--mono);letter-spacing:5px;margin-top:6px;padding-left:5px}
.timeline{display:flex;gap:9px;align-items:center;margin:12px 2px 11px;font:8px var(--mono);color:#b6baa9}.timeline input{flex:1;min-width:0;height:23px;appearance:none;background:transparent;margin:0;cursor:pointer}.timeline input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,#bb683e var(--progress,0%),#141e19 var(--progress,0%));border-radius:2px;box-shadow:0 1px 0 #76816b55}.timeline input::-webkit-slider-thumb{appearance:none;height:13px;width:18px;border-radius:2px;background:linear-gradient(#d1d0bd,#a8aa98);margin-top:-5px;border:1px solid #202c22;box-shadow:0 2px 3px #0008}.timeline input::-moz-range-track{height:3px;background:#141e19}.timeline input::-moz-range-thumb{height:11px;width:16px;background:#c7c7b4;border-radius:2px;border:1px solid #202c22}.transport{display:grid;grid-template-columns:1fr 1.25fr 1fr .8fr;gap:8px;padding:4px 4px 7px;border-radius:5px;background:#121d17;box-shadow:0 1px 0 #606c5c77}.hardware-key{height:49px;border-radius:4px;border:1px solid #a0a18e;background:linear-gradient(#e5e1ca,#c4c5ae 82%,#b5b8a1);box-shadow:0 5px 0 #858e79,0 6px 3px #000a,inset 0 1px 1px #fff9;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#354033;gap:3px;transition:transform .13s,box-shadow .13s}.hardware-key svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.hardware-key span{font:7px var(--mono);letter-spacing:.5px}.play-key{background:linear-gradient(#cc7455,#b9543a);color:#fff1d8;border-color:#b35c44;box-shadow:0 5px 0 #713c2c,0 6px 3px #000a,inset 0 1px 1px #ffc99c88}.repeat-key{background:linear-gradient(#687061,#4c594b);border-color:#5d6857;color:#c5cbb7;box-shadow:0 5px 0 #2f3f30,0 6px 3px #000a,inset 0 1px 1px #c3cda244}.hardware-key:active,.play-key.is-down,.repeat-key[aria-pressed=true]{transform:translateY(4px);box-shadow:0 1px 0 #17251b,0 1px 4px #0009,inset 0 1px 3px #101a1d55}.repeat-key[aria-pressed=true]{color:#f9d290}.playing .play-key{color:#ffecc5}
dialog{border:1px solid #8f9780;background:var(--paper);color:var(--ink);width:min(92vw,430px);max-height:90svh;padding:23px;border-radius:2px;box-shadow:0 20px 80px #0007}dialog::backdrop{background:#101c17bb;backdrop-filter:blur(4px)}.index-top{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono)}.index-top button{font:30px serif;width:44px;height:44px}dialog h2{font-size:56px;font-weight:400;margin:14px 0 18px}#trackIndex{border-top:2px solid var(--ink)}.index-row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;min-height:49px;border-bottom:1px solid #6f776251;font-size:23px}.index-row .index-no{font:9px var(--mono);color:#767a69}.index-row i{width:12px;height:12px;border:1px solid #3d463033}.index-row time{font:9px var(--mono);margin-left:auto;color:#737867}dialog>p{font-size:15px;color:#757865;margin-bottom:0}#status{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 20px;background:#18261e;color:#f2ead4;font-size:18px;border:1px solid #8e9779;z-index:20;max-width:90vw;width:max-content}
@media(min-width:700px){.publication{margin:36px auto;min-height:850px;border-radius:3px}.cover{padding-top:25px}.cover-title h1{font-size:110px}.room .sleeve img{max-height:270px;object-fit:contain}.lyric-window,.note{height:145px}.track-head h1{font-size:76px}.cover-story h2{font-size:41px}}
@media(max-width:360px){.issue-header{margin:0 17px}.cover{padding:20px 17px 0}.room{padding:0 17px 20px}.cover-body,.room-body{gap:12px;grid-template-columns:minmax(0,1fr) 46px}.cover-title h1{font-size:78px;letter-spacing:1px}.track-head h1{font-size:52px}.track-byline{max-width:108px}.follow-label{display:none}.color-index{padding-left:2px}.cover-story h2{font-size:31px}.meter-row{gap:10px}.console{padding-left:17px;padding-right:17px}.volume-control{width:55px}.volume-control input{width:55px}.console-label{font-size:6px}.meter>span{font-size:4px}.lyric-line{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
/* Give playback controls a stable place on the phone; reading takes the remaining space. */
.in-room .issue-header>button:first-child{font:18px var(--serif);letter-spacing:0}
@media(max-width:699px) and (min-height:740px){
 .in-room .publication{height:100svh;min-height:0;display:flex;flex-direction:column}
 .in-room .issue-header{height:60px;flex-shrink:0}.in-room main{flex:1;min-height:0}
 .room{height:100%;display:flex;flex-direction:column;padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .track-head{padding:11px 0 12px;flex-shrink:0}.track-head h1{font-size:49px;line-height:1;margin-top:5px}
 .room-body{flex:1;min-height:0}.reading-main{display:flex;flex-direction:column;min-height:0}
 .sleeve{flex-shrink:0}.sleeve img{width:min(100%,21svh);margin:auto}.sleeve figcaption{margin:8px 0 8px;font-size:10px}
 .reading-tabs{flex-shrink:0}.reading-tabs button{min-height:34px;font-size:16px;padding-bottom:5px}.follow-label{font-size:10px}
 #readingPanel{flex:1;min-height:0}.lyric-window,.note{height:100%}.lyric-line{font-size:22px}
 .room .color-index{height:100%;width:54px;justify-content:center}.room .color-index:before{display:none}.room .channel{min-height:38px;height:43px;flex:1;max-height:44px}.room .channel-cap{width:25px;height:25px}
 .console{flex-shrink:0;margin-top:12px;padding-top:10px;padding-bottom:14px}.console-label{margin-bottom:4px}.console-label a{font-size:12px}
 .meter{height:58px}.volume-control .knob{width:42px;height:42px;margin-top:4px}.volume-scale{margin-top:4px}
 .timeline{margin-top:5px;margin-bottom:6px}.hardware-key{height:44px}.transport{padding-bottom:6px}
}