:root{
  --bg:#0c0c0c;
  --surface:#0a0a0a;
  --surface-2:#0f0f0f;
  --title-top:#1f1f1f;
  --title-bottom:#181818;
  --border:#2a2a2a;
  --text:#e6e6e6;
  --muted:#9aa0a6;
  --accent:#3ea6ff;
  --danger:#e81123;
  --hover:rgba(255,255,255,.06);
  --scroll-thumb:rgba(255,255,255,.12);
  --radius:10px;
  --mono:Consolas,"Cascadia Mono","Courier New",ui-monospace,monospace;

  /* responsive spacing */
  --gap: clamp(12px, 4vw, 24px);
}

[data-theme="light"]{
  --bg:#f5f5f5;
  --surface:#ffffff;
  --surface-2:#f6f6f6;
  --title-top:#ececec;
  --title-bottom:#e2e2e2;
  --border:#d9d9d9;
  --text:#0c0c0c;
  --muted:#4a5560;
  --accent:#005fb8;
  --danger:#b00020;
  --hover:rgba(0,0,0,.06);
  --scroll-thumb:rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--mono)}

/* centers the window and respects notches via safe-area insets */
.desktop{
  position:relative;
  z-index:10;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:
    calc(var(--gap) + env(safe-area-inset-top))
    calc(var(--gap) + env(safe-area-inset-right))
    calc(var(--gap) + env(safe-area-inset-bottom))
    calc(var(--gap) + env(safe-area-inset-left));
}

/* responsive window: clamps to viewport on mobile, fixed max on desktop */
.window{
  width:min(920px, calc(100svw - 2*var(--gap)));
  height:min(520px, calc(100svh - 2*var(--gap)));
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 10px 36px rgba(0,0,0,.55);
  display:grid;
  grid-template-rows:38px minmax(0,1fr);
  overflow:hidden;
}

.window.closed{display:none}

/* matrix background canvas behind everything */
.matrix-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.65;
}

/* titlebar stays visually aligned with #output content padding */
.titlebar{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  background:linear-gradient(180deg,var(--title-top),var(--title-bottom));
  border-bottom:1px solid var(--border);
  padding:0 16px;
  user-select:none;
}

.title-left{display:flex;align-items:center;gap:8px}
.app-icon{width:16px;height:16px;border-radius:3px;background:var(--accent)}
.caption{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption-controls{display:grid;grid-auto-flow:column;gap:2px}
.caption-controls button{width:46px;height:30px;border:0;background:transparent;color:var(--text);font:16px/1 var(--mono);border-radius:6px}
.caption-controls button:hover{background:var(--hover)}
.caption-controls button:last-child:hover{background:var(--danger);color:#fff}

/* terminal area keeps scroll inside output */
#terminal{
  display:grid;
  grid-template-rows:minmax(0,1fr);
  min-height:0;
}

#output{
  min-height:0;
  height:100%;
  padding:14px 16px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:clamp(12px, 1.6vw, 14px);
  line-height:1.35;
}

/* post-close panel matches window sizing responsively */
.post-close{
  width:min(920px, calc(100svw - 2*var(--gap)));
  height:min(520px, calc(100svh - 2*var(--gap)));
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:0 10px 36px rgba(0,0,0,.55);
  display:grid;
  place-items:center;
  padding:24px;
}
.post-close .inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.post-close .line1{font-size:28px;opacity:0;animation:fadeUp .5s ease forwards .0s}
.post-close .line2{font-size:22px;opacity:0;animation:fadeUp .5s ease forwards .6s}
.post-close .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;opacity:0;animation:fadeUp .5s ease forwards 1.2s}

/* controls and banner */
.btn{padding:10px 16px;border:1px solid var(--border);border-radius:8px;font:14px/1 var(--mono);cursor:pointer}
.btn-red{background:var(--danger);color:#fff;border-color:transparent}
.btn-blue{background:var(--accent);color:#fff;border-color:transparent}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}

.line{margin:0 0 6px 0}
.line .muted{color:var(--muted)}
.line .danger{color:var(--danger)}

pre.block{
  margin:8px 0 10px;
  padding:10px 12px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  overflow-x:auto;
}

.banner-anim{
  margin:8px 0 10px;
  padding:10px 12px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  overflow-x:auto;
  white-space:pre;
  font-family:var(--mono);
  line-height:1.15;
  font-size:clamp(11px, 1.5vw, 13px);
}

.flame{text-shadow:0 0 8px currentColor,0 0 14px currentColor}
.heat0{color:#ffe08a}
.heat1{color:#ff9f43}
.heat2{color:#ef5350}

.input-line{display:block}
.prompt{white-space:pre}
.typed{white-space:pre}
.caret{display:inline;animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

#ghost{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
  font-size:16px; /* prevents iOS zoom */
}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px}

/* maximize still respects mobile viewports */
.window.maximized{
  width:calc(100svw - 2*var(--gap));
  height:calc(100svh - 2*var(--gap));
}

/* mobile touch-ups */
@media (max-width: 640px){
  .caption{font-size:12px}
  .caption-controls button{width:40px;height:32px}
  .post-close .line1{font-size:24px}
  .post-close .line2{font-size:18px}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}