/* v6: dropdown navigasi, bendera bahasa, tepi scroll, dock musik/guestbook, thumbnail project, kontak, Guides/Devlogs/Papers. */
:root{--disc-size:72px;--ease-out:cubic-bezier(.22,1,.36,1);--reveal:opacity .85s,filter .85s,transform .85s cubic-bezier(.2,.7,.2,1);--tint:color-mix(in srgb,var(--signal) 9%,transparent)}
html.lenis{scroll-behavior:auto}

/* ===== Dropdown navigasi ===== */
.nav-group{position:relative}
.nav-parent{display:flex;align-items:center;gap:7px;padding:11px 7px 11px 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:11px VCR;transition:.25s}
.nav-parent>svg{width:17px;height:17px}
.nav-parent>svg:last-child{width:12px;height:12px;transition:transform .35s var(--ease-out)}
.nav-parent[aria-expanded=true]>svg:last-child{transform:rotate(180deg)}
.nav-parent:hover,.nav-parent.active,.nav-parent[aria-expanded=true]{color:var(--signal);background:var(--tint)}
.nav-sub{position:absolute;z-index:5;top:calc(100% + 16px);left:50%;min-width:232px;padding:7px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel-solid) 97%,transparent);box-shadow:0 18px 50px #000a;opacity:0;visibility:hidden;transform:translate(-50%,-10px) scale(.96);transform-origin:top center;transition:opacity .2s,transform .34s var(--ease-out),visibility 0s .34s}
.nav-sub.open{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
.desktop-nav .nav-sub a{justify-content:flex-start;gap:12px;padding:10px 12px;border-radius:8px;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease-out),background .2s}
.desktop-nav .nav-sub.open a{opacity:1;transform:none}
.nav-sub.open a:nth-child(2){transition-delay:.05s}.nav-sub.open a:nth-child(3){transition-delay:.1s}
.nav-sub a>span{display:grid;gap:5px;text-align:left}
.nav-sub a b{font-weight:400;color:var(--paper);white-space:nowrap}
.nav-sub a small{font:11px HelveticaAZ,Arial,sans-serif;color:var(--muted);white-space:nowrap}
.nav-sub a.active b,.nav-sub a:hover b{color:var(--signal)}

/* Menu mobile: grup yang bisa dibuka-tutup */
.menu-parent{width:100%;min-height:62px;display:grid;grid-template-columns:60px 1fr auto;align-items:center;padding:0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;transition:.25s}
.menu-parent small{font:10px VCR;color:var(--red)}
.menu-parent span{font-size:clamp(24px,3.5vw,48px);letter-spacing:-.045em}
.menu-parent>b{position:relative;width:22px;height:22px}
.menu-parent>b::before,.menu-parent>b::after{content:"";position:absolute;inset:50% 3px auto;height:1.5px;background:var(--muted);transition:transform .35s var(--ease-out)}
.menu-parent>b::after{transform:rotate(90deg)}
.menu-parent[aria-expanded=true]>b::after{transform:none}
.menu-parent:hover,.menu-parent.active,.menu-parent[aria-expanded=true]{color:var(--signal)}
.menu-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease-out)}
.menu-sub.open{grid-template-rows:1fr}
.menu-sub>div{min-height:0;overflow:hidden}
.menu-overlay nav .menu-sub a{min-height:54px;padding-left:16px;background:#ffffff05}
.menu-overlay nav .menu-sub a span{font-size:clamp(19px,2.4vw,30px)}

/* ===== Bendera bahasa (pixel art) ===== */
.language-switch{display:flex;align-items:center;gap:2px;height:38px;padding:3px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.header-actions .language-switch button{min-width:0;min-height:0;height:30px;padding:4px 5px;border:0;border-radius:5px;background:transparent;opacity:.5;transition:opacity .2s,background .2s}
.pixel-flag{display:block;width:32px;height:22px}
.header-actions .language-switch button:hover{opacity:.9}
.header-actions .language-switch button[aria-pressed=true]{opacity:1;background:color-mix(in srgb,var(--signal) 16%,transparent);box-shadow:inset 0 -2px 0 var(--signal)}

/* ===== Tepi layar memudar saat scroll ===== */
.scroll-edge{position:fixed;z-index:60;inset-inline:0;height:clamp(70px,12vh,130px);pointer-events:none;opacity:0;transition:opacity .4s;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.scroll-edge-top{top:0;background:linear-gradient(#0305079e,transparent);-webkit-mask-image:linear-gradient(#000 25%,transparent);mask-image:linear-gradient(#000 25%,transparent)}
.scroll-edge-bottom{bottom:0;background:linear-gradient(transparent,#03050780);-webkit-mask-image:linear-gradient(transparent,#000 75%);mask-image:linear-gradient(transparent,#000 75%)}
.scrolled .scroll-edge-top,body:not(.at-end) .scroll-edge-bottom{opacity:1}

/* ===== Dock musik (kiri) dan guestbook (kanan): tab kecil, piringan, lalu panel ===== */
.dock{position:fixed;z-index:85;bottom:max(18px,env(safe-area-inset-bottom));width:var(--disc-size);height:var(--disc-size)}
.dock-left{left:18px}.dock-right{right:18px}
.dock.disk-hidden{visibility:hidden;pointer-events:none;transition:visibility 0s .6s}
.disc-button{position:relative;width:100%;height:100%;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;transition:transform .7s var(--ease-out),opacity .4s,filter .4s}
.disc-button:hover{transform:scale(1.07);transition-duration:.25s}
.dock-left.disk-hidden .disc-button{transform:translateX(calc(-100% - 48px)) rotate(-200deg);opacity:0}
.dock-right.disk-hidden .disc-button{transform:translateX(calc(100% + 48px)) rotate(200deg);opacity:0}
.music-player.playing .disc-button{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--signal) 42%,transparent))}
/* Pantulan tetap diam saat piringan berputar */
.disc-button::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from -35deg,transparent 0deg,#ffffff22 40deg,transparent 80deg 180deg,#ffffff18 220deg,transparent 260deg 360deg)}
.vinyl-disc,.seal-disc{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border:1px solid #ffffff30;border-radius:50%;box-shadow:0 12px 28px #0008,0 0 0 3px #ffffff05,inset 0 0 10px #000b}
.vinyl-disc{background:repeating-radial-gradient(circle at center,#080b0f 0 2px,#20262e 2px 3px,#0b1016 3px 5px);animation:albumDiscSpin 10s linear infinite paused}
.music-player.playing:not(.disk-hidden) .vinyl-disc{animation-play-state:running}
.vinyl-label{position:absolute;inset:15%;overflow:hidden;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px #080b0f}
.vinyl-label img{width:100%;height:100%;object-fit:cover}
.vinyl-disc i{position:absolute;z-index:2;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#070c12;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #c7d0da,0 0 0 4px #111923}
.seal-disc{background:radial-gradient(circle at 35% 28%,#1a3144,#070f17 72%);color:var(--void)}
.seal-disc>svg{position:absolute;inset:0;width:100%;height:100%;animation:albumDiscSpin 26s linear infinite}
.disk-hidden .seal-disc>svg{animation-play-state:paused}
.seal-disc text{font:9.4px VCR;fill:var(--muted)}
.seal-disc i{display:grid;place-items:center;width:46%;height:46%;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px #080b0f}
.seal-disc i svg{width:56%;height:56%}
.dock-hide{position:absolute;top:50%;width:24px;height:30px;padding:0;transform:translateY(-50%);border:1px solid var(--line);background:var(--panel-solid);color:var(--muted);font-size:18px;line-height:1;transition:opacity .3s .3s,color .2s,border-color .2s}
.dock-left .dock-hide{right:-16px;border-radius:0 5px 5px 0}.dock-right .dock-hide{left:-16px;border-radius:5px 0 0 5px}
.dock-hide:hover{color:var(--signal);border-color:var(--signal)}
.disk-hidden .dock-hide{opacity:0;transition-delay:0s}
.dock-tab{position:fixed;z-index:85;bottom:max(26px,env(safe-area-inset-bottom));width:46px;height:54px;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-solid) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--signal);box-shadow:0 10px 30px #0006;transition:transform .55s var(--ease-out),opacity .3s,border-color .2s,background .2s}
.dock-tab.dock-left{left:0;border-left:0;border-radius:0 14px 14px 0}
.dock-tab.dock-right{right:0;border-right:0;border-radius:14px 0 0 14px}
.dock-tab:hover{border-color:var(--signal);background:var(--deep)}
.dock-tab.dock-left:hover{transform:translateX(4px)}.dock-tab.dock-right:hover{transform:translateX(-4px)}
.dock-tab.is-tucked{opacity:0;visibility:hidden;transition:transform .45s var(--ease-out),opacity .25s,visibility 0s .45s}
.dock-tab.dock-left.is-tucked{transform:translateX(-110%)}.dock-tab.dock-right.is-tucked{transform:translateX(110%)}
.dock-tab>svg{width:19px;height:19px}
/* Titik berdenyut: mengundang pengunjung untuk membuka */
.dock-tab::after{content:"";position:absolute;top:9px;width:6px;height:6px;border-radius:50%;background:var(--red);animation:dockPing 2.8s ease-out infinite}
.dock-tab.dock-left::after{right:8px}.dock-tab.dock-right::after{left:8px}
.tab-eq{display:flex;align-items:flex-end;gap:3px;height:17px}
.tab-eq i{width:3px;height:100%;border-radius:1px;background:currentColor;transform-origin:bottom;transform:scaleY(.4);animation:eqBar 1.1s ease-in-out infinite paused}
.tab-eq i:nth-child(2){transform:scaleY(.9);animation-delay:-.35s}.tab-eq i:nth-child(3){transform:scaleY(.6);animation-delay:-.7s}
.music-player.playing~.dock-tab .tab-eq i{animation-play-state:running}
.menu-open .dock,.menu-open .dock-tab{visibility:hidden}
@keyframes dockPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 60%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@keyframes eqBar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* Panel musik */
.music-player{isolation:isolate}
.music-panel{position:absolute;left:0;bottom:calc(var(--disc-size) + 16px);width:min(350px,calc(100vw - 32px));max-height:calc(100svh - 180px);overflow:auto;padding:20px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel-solid) 96%,transparent),color-mix(in srgb,var(--void) 92%,transparent));box-shadow:0 24px 60px #0000008c;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transform:translateY(18px) scale(.94);transform-origin:bottom left;transition:opacity .25s,transform .5s var(--ease-out),visibility 0s .5s}
.music-player.expanded .music-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.music-panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);font:9px VCR;letter-spacing:.08em}
.music-panel-head span{color:var(--signal)}
.music-hide{min-height:32px;padding:7px;border:0;background:transparent;color:var(--muted);font:9px VCR}
.music-info{display:grid;min-width:0;margin-top:20px}
.music-info small{font:10px VCR;color:var(--signal)}
.music-info b{margin-top:7px;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-info>span{margin-top:3px;font-size:12px;color:var(--muted)}
.music-controls{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;margin-top:20px}
.music-controls button{height:42px;border:1px solid var(--line);background:transparent;transition:.25s}
.music-controls button:hover{color:var(--signal);border-color:var(--signal)}
.music-progress,.music-volume{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:8px;margin-top:18px}
.music-volume{grid-template-columns:34px 1fr;margin-top:14px}
.music-progress span,.music-volume span{font:10px VCR;color:var(--muted)}
.music-panel input[type=range]{width:100%;height:3px;accent-color:var(--signal)}
.music-rights{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line);font:9px VCR;letter-spacing:.08em;color:var(--muted)}
/* Lagu tetap (halaman Gendut <3): tanpa tombol ganti lagu */
.fixed-track .music-controls{grid-template-columns:1fr}
.fixed-track :is(#previousTrack,#nextTrack,.music-info small){display:none}

/* ===== Thumbnail project: jendela aplikasi di atas latar gradient ===== */
.project-card .project-cover{background:radial-gradient(95% 120% at 100% 0%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%),radial-gradient(80% 90% at 0% 100%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 60%),#060d14}
.project-cover::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--accent) 15%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 100% at 100% 0%,#000,transparent 72%)}
.cover-window{position:absolute;inset:11% 8% -10%;display:flex;flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 40%,#ffffff1f);border-radius:9px 9px 0 0;background:#0a141d;box-shadow:0 28px 60px -18px #000d,0 0 46px -14px color-mix(in srgb,var(--accent) 60%,transparent);transform:translate3d(calc((var(--mx,.5) - .5) * -7px),calc((var(--my,.5) - .5) * -5px),0);transition:transform .45s var(--ease-out)}
.project-card:hover .cover-window{transform:translate3d(calc((var(--mx,.5) - .5) * -7px),calc((var(--my,.5) - .5) * -5px - 5px),0)}
.cover-bar{flex:none;display:flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-bottom:1px solid #ffffff12;background:#0d1a25}
.cover-bar i{width:6px;height:6px;border-radius:50%;background:#ffffff26}
.cover-bar i:first-child{background:var(--accent)}
.cover-bar span{margin-left:auto;font:8px VCR;letter-spacing:.06em;color:var(--muted)}
.cover-screen{position:relative;flex:1;min-height:0;overflow:hidden;background:#05080c}
.cover-screen>img:not(.hmif-logo){width:100%;height:100%;object-fit:cover;object-position:top center}
.cover-screen .pixel-dialog{inset:auto 10px calc(18% + 22px)}
.cover-terminal{display:grid;place-content:center;justify-items:center;gap:9px;height:86%;padding:0 18px;text-align:center;font:9px VCR;color:var(--muted)}
.cover-terminal b{font-size:38px;line-height:1;color:var(--accent)}
.cover-terminal strong{font:700 clamp(18px,2vw,26px) HelveticaAZ,Arial,sans-serif;letter-spacing:-.03em;color:var(--paper)}
.cover-vaultkeep .cover-bar{display:none}
.cover-vaultkeep .vault-window{border:0;border-radius:0;box-shadow:none}
.project-cover .preview-hud span{color:var(--accent)}
.view-more{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 18px;margin-top:26px;padding:22px 26px;border:1px solid var(--line);background:var(--panel);text-decoration:none;transition:transform .18s ease,border-color .25s,background .25s}
.view-more svg{grid-row:span 2;width:36px;height:36px;fill:currentColor}
.view-more span{align-self:end;font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:-.035em}
.view-more small{grid-column:2;align-self:start;font:10px VCR;color:var(--muted)}
.view-more b{grid-area:1/3/3;font-size:26px;color:var(--signal);transition:transform .3s var(--ease-out)}
.view-more:hover{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 7%,var(--panel))}
.view-more:hover b{transform:translate(4px,-4px)}

/* ===== Kontak: logo tiap platform ===== */
.social-card{--brand:var(--signal);--ink:#fff;grid-template-columns:auto 58px 1fr auto;border-radius:14px;transition:transform .18s ease,border-color .25s,background .3s,box-shadow .3s}
.social-card::before{inset:auto auto -75% -12%;width:70%;height:170%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 26%,transparent),transparent 68%);opacity:.45;transition:opacity .4s,transform .6s var(--ease-out)}
.social-card:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--panel));box-shadow:0 18px 44px -24px var(--brand)}
.social-card:hover::before{opacity:1;transform:scale(1.3)}
.social-icon{position:relative;width:58px;height:58px;border:0;border-radius:16px;background:var(--brand-bg,var(--brand));color:var(--ink);box-shadow:0 10px 24px -10px var(--brand),inset 0 1px 0 #ffffff40;transition:transform .4s var(--ease-out)}
.social-icon svg{width:30px;height:30px}
.social-card:hover .social-icon{transform:scale(1.08) rotate(-5deg)}
.social-card small,.social-card>b{transition:color .2s,transform .3s var(--ease-out)}
.social-card>b{color:var(--muted)}
.social-card:hover small{color:var(--brand)}
.social-card:hover>b{color:var(--brand);transform:translate(4px,-4px)}
.brand-github{--brand:#f0f6fc;--ink:#0d1117}
.brand-linkedin{--brand:#0a66c2}
.brand-email{--brand:#ea4335}
.brand-whatsapp{--brand:#25d366}
.brand-youtube{--brand:#f03}
.brand-instagram{--brand:#e1306c;--brand-bg:radial-gradient(circle at 30% 107%,#fdf497 0 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.brand-tiktok{--brand:#25f4ee;--brand-bg:#010101}
.brand-tiktok .social-icon svg{filter:drop-shadow(-1.5px -1.5px 0 #25f4ee) drop-shadow(1.5px 1.5px 0 #fe2c55)}

/* ===== Guides, Devlogs, Papers ===== */
.sample-tag,.latest-tag{padding:3px 6px;border:1px dashed #e8c886;color:#e8c886;font:8px VCR;font-style:normal;letter-spacing:.08em}
.latest-tag{border:1px solid var(--green);color:var(--green)}
.read-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 18px;border:1px solid var(--paper);background:var(--paper);color:var(--void);font:10px VCR;letter-spacing:.06em;transition:background .2s,border-color .2s}
.read-button svg{width:16px;height:16px}
button.read-button:hover{background:var(--signal);border-color:var(--signal)}
.read-button.disabled{border:1px dashed var(--line-strong);background:transparent;color:var(--muted);cursor:not-allowed}

/* Guides: sampul buku */
.guide-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
.guide-card{position:relative;display:grid;grid-template-columns:minmax(0,138px) 1fr;gap:26px;align-items:center;padding:26px 24px;border:1px solid var(--line);border-bottom:2px solid color-mix(in srgb,var(--accent) 70%,transparent);background:radial-gradient(90% 80% at 0% 100%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%),var(--panel);transition:var(--reveal),border-color .25s}
.guide-card:hover{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.guide-book{display:block;width:100%;padding:0;border:0;background:transparent;perspective:900px}
.book-cover{position:relative;display:block;aspect-ratio:3/4.2;overflow:hidden;border-radius:3px 7px 7px 3px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent) 40%,color-mix(in srgb,var(--accent) 52%,#04090e));box-shadow:5px 0 0 -1px #e9eef1,6px 0 0 -1px #7d8a93,0 20px 34px -14px #000c,0 0 44px -16px var(--accent);transform:rotateY(-20deg) rotateX(2deg);transform-origin:left center;transition:transform .55s var(--ease-out)}
.guide-card:hover .book-cover,.guide-book:focus-visible .book-cover{transform:rotateY(-5deg) translateY(-6px)}
.book-art{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:14px 12px 12px 20px;border-left:7px solid #0000002b;color:#061018;text-align:left}
.book-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#0000000f 1px,transparent 1px),linear-gradient(90deg,#0000000f 1px,transparent 1px);background-size:11px 11px;-webkit-mask-image:linear-gradient(160deg,transparent 35%,#000);mask-image:linear-gradient(160deg,transparent 35%,#000)}
.book-art small,.book-art em{font:8px VCR;font-style:normal;letter-spacing:.1em;opacity:.72}
.book-art strong{align-self:center;font-size:16px;line-height:1.1;letter-spacing:-.03em;overflow-wrap:anywhere}
.book-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.guide-copy{display:grid;gap:11px;justify-items:start;min-width:0}
.guide-copy small{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:10px VCR;color:var(--accent)}
.guide-copy h2{margin:0;font-size:22px;line-height:1.14;letter-spacing:-.03em}
.guide-copy p{margin:0 0 4px;font-size:14px;line-height:1.6;color:var(--muted)}

/* Devlogs: feed */
.devlog-feed{max-width:1000px;border-top:1px solid var(--line)}
.devlog-entry{display:grid;grid-template-columns:180px 1fr;gap:10px 30px;padding:32px 14px;border-bottom:1px solid var(--line);text-decoration:none;transition:var(--reveal),background .25s,padding .4s var(--ease-out)}
.devlog-entry:hover{background:var(--panel);padding-left:26px}
.devlog-entry time{padding-top:3px;font:10px VCR;color:var(--red)}
.devlog-entry small{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:10px VCR;color:var(--muted)}
.devlog-entry small span{margin-left:auto}
.devlog-entry h2{margin:14px 0 10px;font-size:clamp(24px,3vw,36px);line-height:1.08;letter-spacing:-.04em}
.devlog-entry p{max-width:64ch;margin:0 0 18px;font-size:15px;line-height:1.65;color:var(--muted)}
.devlog-more{font:10px VCR;color:var(--signal)}
.devlog-more b{display:inline-block;transition:transform .3s var(--ease-out)}
.devlog-entry:hover .devlog-more b{transform:translate(3px,-3px)}
.article-dialog{width:min(780px,calc(100vw - 24px));padding:clamp(22px,4vw,46px)}
.article-dialog h2{margin:18px 0 28px;font-size:clamp(28px,4.4vw,46px);line-height:1.06;letter-spacing:-.04em}
.devlog-body{max-width:66ch;font-size:16px;line-height:1.75;color:#c9d4db}
.devlog-body :is(p,ul,blockquote,pre){margin:0 0 18px}
.devlog-body p{color:inherit;line-height:inherit}
.devlog-body h3{margin:34px 0 10px;font-size:22px;letter-spacing:-.02em;color:var(--paper)}
.devlog-body ul{padding-left:20px}.devlog-body li{margin-bottom:6px}
.devlog-body a{color:var(--signal)}
.devlog-body blockquote{padding:2px 0 2px 18px;border-left:2px solid var(--red);color:var(--paper)}
.devlog-body pre{padding:16px;overflow-x:auto;border:1px solid var(--line);background:#050c12}
.devlog-body code{padding:2px 5px;background:#ffffff0f;font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
.devlog-body pre code{padding:0;background:none}

/* Papers */
.paper-list{display:grid;gap:18px}
.paper-card{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(210px,auto);gap:14px 34px;padding:30px;border:1px solid var(--line);background:var(--panel);transition:var(--reveal),border-color .25s}
.paper-card:hover{border-color:var(--line-strong)}
.paper-meta{display:grid;align-content:start;justify-items:start;gap:10px;font:10px VCR;color:var(--muted)}
.paper-meta time{color:var(--red)}
.paper-body h2{margin:0 0 10px;font-size:clamp(22px,2.5vw,30px);line-height:1.14;letter-spacing:-.035em}
.paper-body b{display:block;margin-bottom:12px;font:10px VCR;font-weight:400;color:var(--signal)}
.paper-body p{max-width:66ch;margin:0;font-size:15px;line-height:1.65;color:var(--muted)}
.paper-side{display:grid;align-content:space-between;justify-items:start;gap:18px}
.paper-status{position:relative;display:grid;justify-items:start;gap:8px}
.status-badge{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px 6px 9px;border:1px solid currentColor;border-radius:99px;background:color-mix(in srgb,currentColor 9%,transparent);font:10px VCR;letter-spacing:.04em;transition:background .2s}
.status-badge svg{width:17px;height:17px}
.status-badge:hover,.status-badge[aria-expanded=true]{background:color-mix(in srgb,currentColor 20%,transparent)}
.status-badge.is-on.status-published{color:var(--green)}
.status-badge.is-on.status-issued{color:var(--signal)}
.status-badge.is-off{color:var(--muted);border-style:dashed}
.status-badge.is-off.status-issued{color:#e8c886}
.status-note{position:absolute;z-index:4;top:calc(100% + 8px);right:0;width:min(280px,100%);padding:13px 15px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel-solid);box-shadow:0 18px 40px #000a;font-size:13px;line-height:1.55;color:var(--paper);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top right;transition:opacity .2s,transform .3s var(--ease-out),visibility 0s .3s}
.status-note.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.status-note em{display:block;margin-top:6px;font-style:normal;color:var(--muted)}

/* Pembaca PDF */
.reader-dialog{width:min(1100px,100vw);max-width:100vw;height:100svh;max-height:100svh;padding:0;border-radius:0;overflow:hidden}
.reader-dialog[open]{display:flex;flex-direction:column}
.reader-dialog .dialog-close{position:absolute;right:10px;top:9px;float:none;width:38px;height:38px}
.reader-bar{flex:none;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 58px 8px 16px;border-bottom:1px solid var(--line);background:var(--panel-solid)}
.reader-dialog .reader-bar h2{flex:1;min-width:0;margin:0;font-size:15px;line-height:1.3;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-bar output{position:absolute;z-index:2;left:50%;bottom:16px;translate:-50%;padding:7px 13px;border:1px solid var(--line);border-radius:99px;background:var(--panel-solid);font:10px VCR;color:var(--paper);white-space:nowrap}
.reader-bar output:empty{display:none}
.reader-tools{display:flex;gap:5px}
.reader-tools :is(button,a){display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);background:var(--void);color:var(--paper);font-size:18px;text-decoration:none}
.reader-tools :is(button,a):hover{color:var(--signal);border-color:var(--signal)}
.reader-pages{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 12px 60px;background:#02060a;-webkit-overflow-scrolling:touch}
.reader-page{width:min(calc(var(--zoom,1) * 100%),calc(var(--zoom,1) * 940px));margin:0 auto 14px;background:#fff;box-shadow:0 10px 30px #0009}
.reader-page canvas{display:block;width:100%;height:100%}
.reader-note{display:grid;place-content:center;justify-items:center;gap:16px;min-height:60svh;max-width:420px;margin:auto;text-align:center;font-size:15px;line-height:1.65;color:var(--muted)}
.reader-note::before{content:"";width:54px;height:70px;border:1px dashed var(--line-strong);border-radius:3px 12px 3px 3px;background:linear-gradient(var(--line),var(--line)) 50% 40%/55% 1px no-repeat,linear-gradient(var(--line),var(--line)) 50% 58%/55% 1px no-repeat}
.reader-note a{color:var(--signal)}

@media(max-width:1180px){.nav-parent{padding:10px 5px 10px 8px;font-size:10px;gap:5px}.nav-parent>svg{width:15px}.nav-parent>svg:last-child{width:10px}.paper-card{grid-template-columns:150px minmax(0,1fr)}.paper-side{grid-column:2;grid-template-columns:1fr auto;align-items:end}.paper-status{display:flex;flex-wrap:wrap}.status-note{right:auto;left:0;width:min(280px,80vw);transform-origin:top left}}
@media(max-width:700px){
  :root{--disc-size:60px}
  .dock-left{left:12px}.dock-right{right:12px}.dock{bottom:max(12px,env(safe-area-inset-bottom))}
  .dock-tab{width:42px;height:50px;bottom:max(17px,env(safe-area-inset-bottom))}
  .music-panel{width:min(330px,calc(100vw - 24px))}
  .menu-parent{min-height:64px;grid-template-columns:45px 1fr auto}.menu-parent span{font-size:28px}
  .menu-overlay nav .menu-sub a span{font-size:21px}
  .scroll-edge{height:64px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .social-card{grid-template-columns:auto 48px 1fr auto}.social-icon{width:48px;height:48px;border-radius:13px}.social-icon svg{width:25px;height:25px}
  .view-more{padding:18px;gap:4px 14px}.view-more svg{width:30px;height:30px}
  .guide-card{grid-template-columns:minmax(0,112px) 1fr;gap:20px;padding:20px 18px}.guide-copy h2{font-size:19px}.book-art strong{font-size:13px}
  .devlog-entry{grid-template-columns:1fr;padding:24px 4px}.devlog-entry:hover{padding-left:12px}
  .paper-card{grid-template-columns:1fr;padding:22px 18px}.paper-meta{display:flex;flex-wrap:wrap;align-items:center}.paper-side{grid-column:auto;grid-template-columns:1fr}
  .reader-bar{gap:8px;padding-left:12px}.reader-pages{padding:10px 6px 50px}
}
@media(prefers-reduced-motion:reduce){.dock-tab::after{display:none}}