:root{
  --sidebar-w:108px;
  --taskbar-h:48px;
  --topline-h:36px;
  --pad:18px;
  --bg-a:#6d71c6;
  --bg-b:#4b4c9a;
  --win:#3c2f68;
  --win-2:#5a4c8f;
  --title-a:#b4439b;
  --title-b:#488caf;
  --border:#16132d;
  --shadow:#090713;
  --text:#f4efff;
  --muted:#d9d1ea;
  --panel:#d8d1e6;
  --panel-text:#211a3d;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body.nicchan-ui{
  overflow:hidden;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-a),var(--bg-b));
  font-family:"Trebuchet MS",Verdana,sans-serif;
}
body.font-pixel{font-family:"Courier New",monospace}
a{color:inherit}
img{max-width:100%;display:block}

.retro-shell{
  height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  position:relative;
}
.retro-shell__backdrop{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.35) 0 1px, transparent 1.5px) 0 0/12px 12px,
    radial-gradient(circle at 70% 72%, rgba(162,224,255,.35) 0 1px, transparent 1.5px) 0 0/18px 18px,
    linear-gradient(155deg, rgba(255,255,255,.18) 0 16%, transparent 16% 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 30%, rgba(0,0,0,.18));
  opacity:.7;
}
.retro-sidebar{
  position:relative; z-index:2;
  padding:12px 10px 10px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.retro-sidebar__nav{display:flex; flex-direction:column; gap:8px}
.sidebar-link{
  color:#fff; text-decoration:none; text-align:center;
  display:flex; flex-direction:column; gap:4px; align-items:center;
  font-size:12px;
}
.sidebar-link__icon{
  width:36px;height:28px;border:2px solid var(--border);
  background:linear-gradient(180deg,#f2c6ee,#8ad7ff);
  box-shadow:2px 2px 0 var(--shadow);
  position:relative;
}
.sidebar-link__icon:before{content:"";position:absolute;left:5px;right:5px;top:6px;bottom:6px;border:2px solid rgba(0,0,0,.35)}
.sidebar-link.is-active .sidebar-link__icon{transform:translateY(-1px)}
.retro-sidebar__hits{font-size:12px;text-align:center;opacity:.9}

.retro-desktop{
  position:relative; z-index:2; min-width:0;
  display:grid; grid-template-rows:var(--topline-h) 1fr var(--taskbar-h);
  min-height:100vh; overflow:hidden;
}
.retro-topline{display:flex;align-items:center;padding:0 var(--pad)}
.retro-topline h1{font-size:20px;margin:0; font-weight:700}
.retro-stage{
  position:relative; overflow:hidden;
  margin:0 var(--pad) 10px 0;
}
.retro-taskbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 var(--pad) 10px 0;
}
.retro-taskbar__tabs{display:flex; gap:8px; min-width:0; overflow:auto; padding-bottom:2px}
.taskbar-tab,.settings-button,.settings-row button{
  appearance:none; border:2px solid var(--border);
  background:var(--panel); color:var(--panel-text);
  padding:7px 12px; font:inherit; cursor:pointer;
  box-shadow:2px 2px 0 var(--shadow);
}
.taskbar-tab.is-hidden{opacity:.5}
.settings-button{margin-left:auto}

.window{
  position:absolute;
  display:flex; flex-direction:column;
  min-width:220px; min-height:120px;
  background:rgba(55,42,98,.96);
  border:2px solid var(--border);
  box-shadow:4px 4px 0 var(--shadow);
}
.window.is-max{inset:0 !important; width:auto !important; height:auto !important; z-index:30 !important}
.window.is-min .window-body{display:none}
.window-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg,var(--title-a),var(--title-b));
  border-bottom:2px solid var(--border);
  padding:5px 8px; min-height:34px; cursor:move;
  user-select:none;
}
.window-titlebar strong{font-size:16px}
.window-actions{display:flex; gap:6px}
.win-btn{
  width:16px;height:16px;padding:0; border:2px solid var(--border); background:#eee; cursor:pointer;
  box-shadow:1px 1px 0 var(--shadow);
}
.win-btn[data-win-min]:before{content:"";display:block;height:2px;background:#1b1532;margin:8px 2px 0}
.win-btn[data-win-max]:before{content:"";display:block;height:8px;margin:2px;border:2px solid #1b1532}
.window-body{
  min-height:0; overflow:auto;
  padding:16px 18px 18px;
  font-size:15px; line-height:1.5;
}
.window-body h2,.window-body h3,.window-body h4{margin:0 0 .6em}
.window-body p:first-child{margin-top:0}
.window-body p:last-child{margin-bottom:0}
.retro-copy ul, .retro-copy ol{padding-left:1.2rem}
.retro-copy li{margin:.35rem 0}

.screen-grid{position:absolute; inset:0}
.screen-grid-home .window-home-intro{left:1%; top:2%; width:53%; height:76%}
.screen-grid-home .window-home-clients{left:56%; top:5%; width:42%; height:34%}
.screen-grid-home .window-home-recent{left:56%; top:43%; width:42%; height:35%}

.screen-grid-blog .window-blog-posts{left:1%; top:3%; width:60%; height:78%}
.screen-grid-blog .window-blog-tags{left:64%; top:5%; width:34%; height:34%}
.screen-grid-blog .window-blog-webring{left:64%; top:43%; width:34%; height:31%}

.screen-grid-post .window-post-toc{left:1%; top:8%; width:24%; height:66%}
.screen-grid-post .window-post-main{left:27%; top:4%; width:71%; height:76%}

.screen-grid-work .window-work-left{left:1%; top:4%; width:62%; height:76%}
.screen-grid-work .window-work-right{left:66%; top:8%; width:32%; height:52%}

.screen-grid-work-single .window-work-single-main{left:1%; top:3%; width:68%; height:78%}
.screen-grid-work-single .window-work-single-side{left:72%; top:9%; width:26%; height:58%}

.screen-grid-services .window-services-main{left:1%; top:4%; width:68%; height:76%}
.screen-grid-services .window-services-side{left:72%; top:16%; width:26%; height:42%}

.screen-grid-about .window-about-main{left:1%; top:4%; width:46%; height:74%}
.screen-grid-about .window-about-side{left:50%; top:8%; width:48%; height:66%}

.screen-grid-contact .window-contact-main{left:1%; top:8%; width:60%; height:58%}
.screen-grid-contact .window-contact-side{left:64%; top:14%; width:34%; height:42%}

.screen-grid-generic .window-generic-main{left:1%; top:4%; width:64%; height:76%}
.screen-grid-generic .window-generic-side{left:68%; top:10%; width:30%; height:52%}

.screen-grid-art{position:absolute; inset:0}
.window-art-thumb{width:22%; height:28%}
.screen-grid-art .window-art-thumb:nth-child(1){left:2%; top:6%}
.screen-grid-art .window-art-thumb:nth-child(2){left:27%; top:3%}
.screen-grid-art .window-art-thumb:nth-child(3){left:52%; top:7%}
.screen-grid-art .window-art-thumb:nth-child(4){left:74%; top:14%}
.screen-grid-art .window-art-thumb:nth-child(5){left:6%; top:41%}
.screen-grid-art .window-art-thumb:nth-child(6){left:31%; top:46%}
.screen-grid-art .window-art-thumb:nth-child(7){left:56%; top:42%}
.screen-grid-art .window-art-thumb:nth-child(8){left:76%; top:50%}
.screen-grid-art-single .window-art-single{left:8%; top:6%; width:84%; height:78%}

.home-intro-content{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.home-intro-visuals{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:start}
.portrait-wrap,.showcase-wrap,.work-card__img,.art-thumb-link img,.work-single-image{
  border:2px solid var(--border); box-shadow:2px 2px 0 var(--shadow); background:#1d1839; overflow:hidden;
}
.portrait-wrap img{width:100%;height:100%;object-fit:cover; aspect-ratio:1/1}
.showcase-wrap img{width:100%; aspect-ratio:16/8; object-fit:cover}
.home-intro-cta,.window-footer-link{margin-top:16px}
.home-intro-cta a,.window-footer-link a{font-weight:700}

.client-logo-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px;
}
.client-logo-grid > div{
  background:#efe9f8; color:#1f1838; border:2px solid var(--border); box-shadow:2px 2px 0 var(--shadow);
  min-height:66px; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px;
}

.retro-post-list{padding-left:1.3rem; margin:0}
.retro-post-list li{margin:0 0 12px}
.post-date{display:inline-block; min-width:140px; color:var(--muted)}
.tag-cloud-window{display:flex; flex-wrap:wrap; gap:8px}
.tag-cloud-window a{
  display:inline-block; padding:4px 8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  text-decoration:none;
}

.work-card-grid{display:grid;grid-template-columns:1fr;gap:16px}
.work-card{
  display:block;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.05);padding:12px;border:2px solid rgba(255,255,255,.16)
}
.work-card.small h3{font-size:18px}
.work-card h3{margin:10px 0 6px}
.work-card p{margin:0}
.work-card__img img{width:100%; aspect-ratio:16/9; object-fit:cover}

.work-single-hero{display:grid; grid-template-columns:minmax(0,1fr) 42%; gap:20px; margin-bottom:20px}
.work-single-copy h2{font-size:34px; margin:0 0 8px}
.work-subtitle{font-size:20px;color:var(--muted)}
.work-tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.work-tag-row span{
  border:1px solid rgba(255,255,255,.3); padding:3px 8px; background:rgba(255,255,255,.08)
}
.work-meta-line{font-size:14px;letter-spacing:.08em}

.retro-post-meta{font-size:14px;color:var(--muted);margin-bottom:14px}
.retro-post-content{max-width:70ch}
.retro-post-content h2,.retro-post-content h3{margin-top:1.4em}
.retro-post-content img{height:auto}

.art-thumb-link{text-decoration:none;display:block}
.art-thumb-link img{width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:10px}
.art-single-figure img{width:100%; max-height:55vh; object-fit:contain; background:#1d1839}
.art-single-figure figcaption{margin-top:8px;color:var(--muted)}

.window-settings{left:auto; right:22px; bottom:64px; width:420px; height:auto}
.window-settings .window-titlebar{cursor:default}
.settings-group + .settings-group{margin-top:16px}
.settings-group h3{font-size:16px;margin:0 0 8px}
.settings-row{display:flex; gap:8px; flex-wrap:wrap}
.settings-foot{margin-top:16px}

body.theme-light{
  --bg-a:#b8b8ef;
  --bg-b:#9ea4e2;
  --win:#ebe6f6;
  --win-2:#d3caec;
  --text:#231c43;
  --muted:#554b84;
}
body.theme-light .window{background:rgba(236,231,247,.98)}
body.theme-light .window-body a{color:#2c2f95}
body.theme-light .client-logo-grid > div, body.theme-light .taskbar-tab, body.theme-light .settings-button, body.theme-light .settings-row button{background:#f3f1f8}
body.theme-light .work-card{background:rgba(28,20,64,.06)}
body.theme-light .tag-cloud-window a{background:rgba(31,24,56,.06); border-color:rgba(31,24,56,.2)}

.hidden-window{display:none !important}

@media (max-width: 980px){
  body.nicchan-ui{overflow:auto}
  .retro-shell{grid-template-columns:1fr;min-height:100vh}
  .retro-sidebar{display:none}
  .retro-desktop{grid-template-rows:auto 1fr auto;min-height:auto}
  .retro-stage{margin:0 10px 10px}
  .retro-taskbar{padding:0 10px 10px; flex-direction:column; align-items:flex-start}
  .window,.window.is-max{
    position:relative !important; inset:auto !important; width:auto !important; height:auto !important; left:auto !important; top:auto !important;
    margin-bottom:14px;
  }
  .screen-grid,.screen-grid-art{position:relative}
  .home-intro-visuals,.work-single-hero{grid-template-columns:1fr}
}

body.nicchan-ui{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.25) 0 1px, transparent 1.5px) 0 0/12px 12px,
    linear-gradient(155deg, rgba(255,255,255,.12) 0 18%, transparent 18% 100%),
    url("../img/bg-scene.svg") center/cover no-repeat,
    linear-gradient(180deg,var(--bg-a),var(--bg-b));
  background-attachment: fixed;
}
.window-actions{display:flex;gap:4px}
.win-btn{
  width:16px;height:16px;appearance:none;border-radius:0;border:2px solid #140f28;
  background:#d7d1e1;box-shadow:inset 2px 2px 0 #f7f5fb,inset -2px -2px 0 #867d98;position:relative;cursor:pointer;padding:0;
}
.win-btn:before,.win-btn:after{content:"";position:absolute;background:#140f28}
.win-btn[data-win-min]:before{left:3px;right:3px;bottom:3px;height:2px}
.win-btn[data-win-max]:before{left:3px;right:3px;top:3px;height:2px}
.win-btn[data-win-max]:after{left:3px;right:3px;bottom:3px;height:2px;box-shadow:0 0 0 2px #140f28 inset;background:transparent;top:3px}
.win-btn:active{box-shadow:inset -2px -2px 0 #f7f5fb,inset 2px 2px 0 #867d98}
.retro-side-hits{display:inline-block;margin-top:auto;color:#fff;text-decoration:none;font-size:12px;opacity:.95}
.window-body{overflow:auto}
@media (max-width:980px){body.nicchan-ui{overflow:auto}}