:root{color-scheme:dark;--bg:#101114;--menu:#222328;--window:#1b1d23;--side:#202229;--editor:#181a20;--tab:#252831;--line:#343741;--text:#e4e6eb;--muted:#9a9fae;--accent:#80aeff;--shadow:0 24px 80px #0008}html[data-theme=light]{color-scheme:light;--bg:#e9ebf1;--menu:#f6f6f8;--window:#fff;--side:#f1f2f6;--editor:#fff;--tab:#e9ebf0;--line:#dce0e9;--text:#242734;--muted:#646c7d;--accent:#365fbb;--shadow:0 22px 65px #30364b26}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.mac-menu{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--menu);border-bottom:1px solid var(--line);font-size:13px}.menu-left,.menu-right,.mac-menu nav{display:flex;align-items:center;gap:23px}.mac-menu nav a{color:var(--muted)}.mac-menu nav .active,.mac-menu nav a:hover{color:var(--text)}.apple{display:flex}.apple img{object-fit:contain}.theme-toggle{background:none;border:0;color:var(--text);font-size:18px;line-height:1}.menu-clock{color:var(--muted)}.window{max-width:1320px;min-height:calc(100vh - 92px);margin:24px auto;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--window);box-shadow:var(--shadow);display:flex;flex-direction:column}.titlebar{height:41px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}.lights{position:absolute;left:16px;display:flex;gap:8px}.lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}.title-right{position:absolute;right:18px}.tabs{display:flex;background:var(--side);height:39px;border-bottom:1px solid var(--line)}.tabs a{padding:8px 22px;border-right:1px solid var(--line);color:var(--muted);font-size:12px}.tabs .selected{background:var(--editor);border-top:2px solid var(--accent);padding-top:6px;color:var(--text)}.work{display:grid;grid-template-columns:225px minmax(0,1fr);flex:1}.sidebar{background:var(--side);border-right:1px solid var(--line);padding:17px 0;font-size:12px}.explorer-title{letter-spacing:.1em;font-weight:700;color:var(--muted);padding:0 18px 17px}.folder{display:flex;align-items:center;gap:8px;padding:5px 18px;font-weight:600}.file-link{display:block;padding:8px 20px 8px 38px;color:var(--muted)}.file-link:hover,.file-link.selected{background:var(--tab);color:var(--text)}.file-link.selected{border-left:2px solid var(--accent);padding-left:36px}.sidebar-caption{margin:40px 18px;color:var(--muted);line-height:2}.editor{background:var(--editor);min-width:0}.breadcrumb{border-bottom:1px solid var(--line);padding:9px 25px;color:var(--muted);font-size:12px}.breadcrumb span{margin:0 9px}.wrap,.article{max-width:930px;margin:0 auto;padding:54px clamp(20px,5vw,72px) 90px}.hero{border-bottom:1px solid var(--line);padding-bottom:30px;margin-bottom:30px}.eyebrow,.category{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.hero h1,.article h1{font-size:clamp(32px,5vw,54px);line-height:1.14;letter-spacing:-.035em;margin:8px 0 14px}.hero>p:last-child,.meta,.card p{color:var(--muted)}.hero>p:last-child{font-size:16px;max-width:650px}.grid{display:grid;gap:14px}.card{display:grid;grid-template-columns:minmax(0,185px) 1fr;gap:22px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:9px;background:var(--window);transition:border-color .2s,transform .2s}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px}.card h2{font-size:20px;letter-spacing:-.015em;line-height:1.3;margin:5px 0}.card h2 a:hover{color:var(--accent)}.card p{margin:4px 0 10px}.card time,.meta{font-size:12px;color:var(--muted)}.article{max-width:850px}.back{display:inline-block;margin-bottom:34px;color:var(--accent)}.back:hover{text-decoration:underline}.article h1{font-size:clamp(30px,4.8vw,49px)}.cover{width:100%;margin:36px 0;border-radius:9px}.prose{margin-top:36px;font-size:16px;line-height:1.85}.prose h2,.prose h3{line-height:1.3;margin-top:1.8em}.prose a{color:var(--accent);text-decoration:underline}.prose code{background:var(--side);padding:.15em .4em;border-radius:4px}.prose blockquote{border-left:3px solid var(--accent);margin-left:0;padding-left:18px;color:var(--muted)}.status{display:flex;justify-content:space-between;gap:10px;background:#326bb5;color:#fff;padding:3px 15px;font-size:11px}@media(max-width:720px){.mac-menu{padding:0 12px}.menu-left,.menu-right,.mac-menu nav{gap:12px}.menu-clock,.title-right{display:none}.window{margin:0;border:0;border-radius:0;min-height:calc(100vh - 40px)}.work{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}.wrap,.article{padding:38px 20px 60px}.card{grid-template-columns:1fr}.card img{aspect-ratio:16/9}}

/* Blog app-shell: header + status tetap terlihat saat artikel dibaca */
@media(min-width:721px){html,body{height:100%;overflow:hidden}.mac-menu{position:relative;z-index:100}.window{height:calc(100vh - 88px);min-height:0}.work{min-height:0;overflow:hidden}.editor{min-height:0;overflow-y:auto;overscroll-behavior:contain}.status{flex:0 0 auto}}
.featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:28px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:26px;margin-bottom:34px;background:var(--window)}.featured h2{font-size:clamp(25px,3.2vw,38px);line-height:1.18;letter-spacing:-.025em;margin:7px 0 10px}.featured h2 a:hover{color:var(--accent)}.featured-copy>p:not(.eyebrow){color:var(--muted);font-size:15px}.featured-image img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px}.featured-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;color:var(--muted);font-size:12px}.featured-meta a{color:var(--accent)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px}.section-head p{margin:0}.section-head span{font-size:11px;color:var(--muted)}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}.tags span{font-size:10px;line-height:1;border:1px solid var(--line);border-radius:999px;padding:6px 8px;color:var(--muted);background:var(--side)}.pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:28px}.pagination a,.pagination span{min-width:34px;text-align:center;border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:12px}.pagination a:hover,.pagination .current{border-color:var(--accent);color:var(--accent);background:var(--side)}
@media(max-width:720px){.featured{grid-template-columns:1fr;padding:18px}.featured-image{order:-1}.featured-meta{align-items:flex-start;flex-direction:column}.section-head{align-items:flex-start;flex-direction:column}.pagination{justify-content:flex-start}}

/* Labels directory */
.labels-panel{margin-top:34px;padding-top:24px;border-top:1px solid var(--line,#303641)}
.label-cloud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;margin-top:14px;max-width:720px}
.label-cloud a{display:flex;align-items:center;gap:8px;padding:7px 2px;color:inherit;text-decoration:none;font-size:14px;border-bottom:1px solid transparent}
.label-cloud a:hover{border-bottom-color:currentColor}.label-cloud b{color:#ff9d00;font-size:17px}.label-cloud span{margin-left:auto;opacity:.55;font-size:11px}
.tags a{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.label-hero .back{display:inline-block;margin-top:10px}
@media(max-width:640px){.label-cloud{grid-template-columns:1fr}}

/* V6 — Mobile app-shell: menu + status selalu terlihat, hanya konten yang scroll */
@media(max-width:720px){
  html,body{height:100%;height:100dvh;overflow:hidden}
  body{min-height:0}
  .mac-menu{height:40px;position:relative;z-index:100;flex:0 0 auto}
  .window{height:calc(100vh - 40px);height:calc(100dvh - 40px);min-height:0;margin:0;border:0;border-radius:0;overflow:hidden;display:flex;flex-direction:column}
  .titlebar,.tabs{flex:0 0 auto}
  .work{min-height:0;overflow:hidden;flex:1;display:grid;grid-template-columns:minmax(0,1fr)}
  .editor{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .status{flex:0 0 auto;position:relative;z-index:20;padding-bottom:max(3px,env(safe-area-inset-bottom))}
}