:root {
  --desktop: #008080;
  --desktop-dark: #0b6b6b;
  --window: #c0c0c0;
  --window-light: #ffffff;
  --window-mid: #dfdfdf;
  --window-dark: #808080;
  --window-deep: #404040;
  --title-a: #000080;
  --title-b: #1084d0;
  --text: #111111;
  --muted: #444444;
  --button-face: #c0c0c0;
  --button-hover: #d8d8d8;
  --warm: #7a2f00;
}

:root {
  --cursor-arrow: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M1%201h1v1H1zM2%202h1v1H2zM3%203h1v1H3zM4%204h1v1H4zM5%205h1v1H5zM6%206h1v1H6zM7%207h1v1H7zM8%208h1v1H8zM3%204h1v1H3zM3%205h1v1H3zM4%205h1v1H4zM4%206h1v1H4zM5%206h1v1H5zM5%207h1v1H5zM6%207h1v1H6zM6%208h1v1H6zM7%208h1v1H7zM7%209h1v1H7zM8%209h1v1H8zM4%208h1v1H4zM4%209h1v1H4zM4%2010h1v1H4zM5%2010h1v1H5zM5%2011h1v1H5zM6%2011h1v1H6zM6%2012h1v1H6zM7%2012h1v1H7z%27%20fill%3D%27%23000%27/%3E%3Cpath%20d%3D%27M2%201h1v1H2zM2%203h1v1H2zM3%202h1v1H3zM3%206h1v1H3zM4%203h1v1H4zM4%207h1v1H4zM5%204h1v1H5zM5%208h1v1H5zM6%205h1v1H6zM6%209h1v1H6zM7%206h1v1H7zM7%2010h1v1H7zM8%207h1v1H8zM8%2010h1v1H8zM5%209h1v1H5zM6%2010h1v1H6z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E") 0 0, default;
  --cursor-hand: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%201h1v7H6zM8%202h1v6H8zM10%203h1v5h-1zM12%204h1v5h-1zM5%208h1v5H5zM6%208h7v5H6zM7%2013h5v1H7zM8%2014h3v1H8z%27%20fill%3D%27%23fff%27/%3E%3Cpath%20d%3D%27M5%201h1v7H5zM6%200h2v1H6zM8%201h2v1H8zM10%202h2v1h-2zM12%203h2v1h-2zM4%208h1v5H4zM5%207h8v1H5zM13%204h1v9h-1zM6%2013h1v1H6zM12%208h1v5h-1zM7%2014h1v1H7zM11%2014h1v1h-1zM8%2015h3v1H8z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") 5 0, pointer;
  --cursor-text: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27none%27/%3E%3Cpath%20d%3D%27M6%201h4v1H6zM7%202h2v12H7zM6%2014h4v1H6z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") 8 8, text;
}

html, body {
  cursor: var(--cursor-arrow);
}

a, button, .desktop-icon, .task-button, .title-button, .icon, summary, label[for], [role="button"], .start-btn, .task-btn, .win-button, .btn, .about-trigger {
  cursor: var(--cursor-hand);
}

input, textarea, [contenteditable="true"] {
  cursor: var(--cursor-text);
}
* { box-sizing: border-box; }
html { background: var(--desktop); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.08)),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, var(--desktop) 0%, var(--desktop-dark) 100%);
  background-size: auto, 24px 24px, 24px 24px, auto;
  padding-bottom: 38px;
}
.desktop-icons { position: fixed; top: 12px; left: 10px; display: grid; gap: 12px; z-index: 1; }
.desktop-icon { width: 78px; text-decoration: none; color: #fff; text-align: center; font-size: 12px; text-shadow: 1px 1px 0 #000; }
.icon-art { display:block; font-size: 28px; margin-bottom: 4px; }
.window-shell { max-width: 1220px; margin: 18px auto 0; padding: 0 14px 28px; position: relative; z-index: 2; }
.win-titlebar, .mini-titlebar {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b)); color:#fff; font-weight:700;
}
.win-titlebar { padding: 6px 8px; border-top:2px solid var(--window-light); border-left:2px solid var(--window-light); border-right:2px solid var(--window-deep); }
.inside-window, .panel-box, .about-window {
  background: var(--window);
  border-top: 2px solid var(--window-light);
  border-left: 2px solid var(--window-light);
  border-right: 2px solid var(--window-deep);
  border-bottom: 2px solid var(--window-deep);
  box-shadow: 1px 1px 0 var(--window-dark);
}
.title-left { display:flex; align-items:center; gap:8px; }
.title-icon { font-size: 14px; }
.title-buttons { display:flex; gap: 4px; }
.win-btn, .title-close, .about-trigger {
  display:inline-flex; align-items:center; justify-content:center; min-width: 20px; height:20px;
  border-top: 2px solid var(--window-light); border-left: 2px solid var(--window-light); border-right: 2px solid var(--window-deep); border-bottom: 2px solid var(--window-deep);
  background: var(--button-face); color:#000; font: inherit; cursor:pointer; text-decoration:none;
}
.drag-fake { cursor: move; user-select: none; }
.blog-header { margin-top: 0; padding: 6px; display:flex; gap:16px; align-items:flex-start; }
.header-copy { flex:1; background: var(--window-mid); padding: 14px 16px 18px; border:1px solid var(--window-dark); }
.eyebrow, .hero-label, .sidebar-label {
  display:inline-block; padding:2px 6px; border:1px solid var(--window-dark); background:#ffffe1; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--warm);
}
.blog-header h1 { margin: 12px 0 10px; font-size: 38px; line-height: 1; }
.blog-header p, .hero-post p, .post-card p, .sidebar-card p, .template-note, .tiny, .small { color:var(--muted); line-height:1.5; }
.top-links { display:grid; gap:8px; min-width: 190px; }
.top-links a, .sidebar-links a, .read-more {
  display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; text-decoration:none; color:var(--text);
  background:var(--button-face); border-top:2px solid var(--window-light); border-left:2px solid var(--window-light); border-right:2px solid var(--window-deep); border-bottom:2px solid var(--window-deep); box-shadow:1px 1px 0 var(--window-dark); font-size:14px;
}
.top-links a:hover, .sidebar-links a:hover, .read-more:hover, .about-trigger:hover, .start-btn:hover, .task-btn:hover { background: var(--button-hover); }
.top-links a:active, .sidebar-links a:active, .read-more:active, .about-trigger:active, .start-btn:active, .task-btn:active, .title-close:active {
  border-top-color: var(--window-deep); border-left-color: var(--window-deep); border-right-color: var(--window-light); border-bottom-color: var(--window-light); box-shadow:none;
}
.hero-post { margin-top:14px; display:grid; grid-template-columns:1.35fr .8fr; gap:12px; }
.panel-box .box-pad { padding: 12px 14px 16px; background: var(--window-mid); border:1px solid var(--window-dark); }
.mini-titlebar { padding: 4px 8px; font-size: 13px; }
.hero-post h2 { margin:12px 0 10px; font-size:30px; line-height:1.05; }
.meta-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.meta-row span, .post-date, .tag-list li { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border:1px solid var(--window-dark); background:#efefef; font-size:12px; color:var(--text); }
.stat-pad { display:grid; gap:10px; }
.mini-stat { background:#efefef; border:1px solid var(--window-dark); padding:12px; }
.mini-stat strong { display:block; font-size:28px; line-height:1; margin-bottom:6px; }
.mini-stat span { color:var(--muted); font-size:13px; }
.blog-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr); gap:14px; margin-top:14px; }
.posts-column, .sidebar { display:grid; gap:12px; align-content:start; }
.template-note .box-pad { padding: 12px 14px; }
.post-card .box-pad, .sidebar-card .box-pad { padding: 14px 16px 16px; }
.post-card.featured-template .box-pad { outline:2px dotted var(--title-a); outline-offset:-6px; }
.post-card h3, .sidebar-card h3 { margin:10px 0 10px; font-size:24px; line-height:1.1; }
.read-more { margin-top:14px; width:fit-content; }
.profile-card h3 { color: var(--title-a); }
.tag-list { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.sidebar-links { display:grid; gap:8px; margin-top:12px; }
.post-template-box pre { margin: 0; padding: 14px; overflow: auto; background:#fff; border:1px solid var(--window-dark); font: 13px/1.45 "Courier New", monospace; }
.post-template-box summary { list-style:none; }
.post-template-box summary::-webkit-details-marker { display:none; }
code { font-family:"Courier New", monospace; background:#ffffe1; border:1px solid var(--window-dark); padding:1px 5px; }
.about-modal[hidden] { display:none !important; }
.about-modal { position:fixed; inset:0; background: rgba(0,0,0,.35); display:grid; place-items:center; z-index:20; }
.about-window { width:min(420px, calc(100vw - 24px)); }
.about-body { background: var(--window-mid); border:1px solid var(--window-dark); }
.about-actions { display:flex; justify-content:flex-end; margin-top:16px; }

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background: var(--window);
  border-top: 2px solid var(--window-light);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  z-index: 30;
}

.start-btn,
.task-btn {
  min-height: 26px;
  padding: 0 12px;
  text-decoration: none;
  color: #000;
  background: var(--button-face);
  border-top: 2px solid var(--window-light);
  border-left: 2px solid var(--window-light);
  border-right: 2px solid var(--window-deep);
  border-bottom: 2px solid var(--window-deep);
  font: inherit;
  display: inline-flex;
  align-items: center;
}

.start-btn { font-weight: 700; }

.task-btn.active {
  box-shadow: inset 1px 1px 0 var(--window-dark);
  border-top-color: var(--window-deep);
  border-left-color: var(--window-deep);
  border-right-color: var(--window-light);
  border-bottom-color: var(--window-light);
}

.taskbar-clock {
  margin-left: auto;
  min-width: 64px;
  text-align: center;
  padding: 4px 8px;
  background: #dfdfdf;
  border-top: 2px solid var(--window-deep);
  border-left: 2px solid var(--window-deep);
  border-right: 2px solid var(--window-light);
  border-bottom: 2px solid var(--window-light);
  font-size: 12px;
}

@media (max-width: 980px) {
  .desktop-icons { display:none; }
  .blog-header, .hero-post, .blog-layout { grid-template-columns:1fr; display:grid; }
  .top-links { min-width:0; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .window-shell { padding: 8px 8px 42px; }
  .blog-header h1 { font-size: 30px; }
  .hero-post h2 { font-size: 24px; }
  .top-links { grid-template-columns: 1fr; }
  .task-btn { display:none; }
}

/* taskbar parity + retro icon behavior */
.taskbar { height: 34px; padding: 4px 6px; gap: 6px; }
.start-btn, .task-btn {
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 12px;
  font-size: 12px;
}
.start-btn { min-width: 74px; font-weight: 700; }
.task-btn { min-width: 128px; }
.taskbar-clock { min-width: 64px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 12px; }
.desktop-icon { text-decoration: none; cursor: pointer; }
.desktop-icon:hover span:last-child { text-decoration: underline; }
.about-window { cursor: default; }


/* persistent shell embedded mode */
body.embedded {
  padding-bottom: 0 !important;
}
body.embedded .desktop-icons,
body.embedded .taskbar,
body.embedded .start-menu,
body.embedded .shell-status {
  display: none !important;
}
body.embedded .window-shell,
body.embedded .blog-shell,
body.embedded .editor-shell,
body.embedded .container,
body.embedded .desktop-shell {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.embedded .inside-window { min-height: auto !important; }



/* embedded-app cleanup */
body.embedded,
body[data-app] {
  background: #c0c0c0 !important;
}

body.embedded {
  padding-bottom: 0 !important;
}

body.embedded .desktop-icons,
body.embedded .taskbar,
body.embedded .start-menu,
body.embedded .shell-status {
  display: none !important;
}

body.embedded .title-bar,
body.embedded .win-titlebar,
body.embedded .game-titlebar,
body.embedded .title-buttons,
body.embedded .title-btn,
body.embedded .win-btn {
  display: none !important;
}

body.embedded .window,
body.embedded .window-shell,
body.embedded .blog-shell,
body.embedded .editor-shell,
body.embedded .container,
body.embedded .desktop-shell,
body.embedded .inside-window {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #c0c0c0 !important;
}

body.embedded .window-body,
body.embedded .inside-window {
  padding: 14px !important;
  background: #c0c0c0 !important;
  min-height: auto !important;
}



/* stronger embedded app viewport fix */
html.embedded-shell-app,
html.embedded-shell-app body,
html.embedded-shell-app body.embedded {
  background: #c0c0c0 !important;
  background-image: none !important;
}

html.embedded-shell-app body.embedded {
  min-height: 100vh !important;
}

html.embedded-shell-app body.embedded .inside-window,
html.embedded-shell-app body.embedded .window-body,
html.embedded-shell-app body.embedded .blog-layout,
html.embedded-shell-app body.embedded .editor-layout,
html.embedded-shell-app body.embedded .grid,
html.embedded-shell-app body.embedded .quick-panel {
  background-image: none !important;
}



/* embedded internal scroll fix */
html.embedded-shell-app,
html.embedded-shell-app body,
html.embedded-shell-app body.embedded {
  background: #c0c0c0 !important;
  background-image: none !important;
  overflow: auto !important;
  height: auto !important;
  min-height: 100% !important;
}

html.embedded-shell-app body.embedded .desktop-icons,
html.embedded-shell-app body.embedded .taskbar,
html.embedded-shell-app body.embedded .start-menu,
html.embedded-shell-app body.embedded .shell-status,
html.embedded-shell-app body.embedded .title-bar,
html.embedded-shell-app body.embedded .win-titlebar,
html.embedded-shell-app body.embedded .game-titlebar,
html.embedded-shell-app body.embedded .title-buttons,
html.embedded-shell-app body.embedded .title-btn,
html.embedded-shell-app body.embedded .win-btn {
  display: none !important;
}