:root{
  --bg: #1e1e2e;
  --panel: #181825;
  --panel-2: #11111b;
  --muted: #a6adc8;
  --neon: #a6e3a1;
  --accent: #89b4fa;
  --glass:rgba(205,214,244,0.03);
  --radius:3px;
  --trans:160ms;
  --terminal-max-width:1400px;
  --terminal-min-width:320px;
  --terminal-height:80vh;
  --menu-width:220px;
  --menu-min-width:180px;
  --menu-max-width:280px;
  --site-h-padding:28px;
  font-family:ui-monospace, 'Courier New', monospace;
}
*{box-sizing:border-box}
html, body{height:100%;overflow:hidden}
body{margin:0;background:linear-gradient(180deg,#11111b,#0d0d15);color:#cdd6f4;-webkit-font-smoothing:antialiased}
.site{height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--site-h-padding)}
.terminal{width:calc(100vw - (var(--site-h-padding) * 2));max-width:var(--terminal-max-width);min-width:var(--terminal-min-width);height:var(--terminal-height);background:#11111b;border-radius:0;overflow:hidden;display:flex;flex-direction:column;margin:0 auto;box-sizing:border-box;box-shadow:0 0 40px rgba(137,180,250,0.08),0 20px 60px rgba(0,0,0,0.5)}
.term-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#181825;border-bottom:1px solid rgba(205,214,244,0.08)}
.dots{display:flex;gap:8px;align-items:center}
.dot{width:10px;height:10px;border-radius:10px;display:inline-block}
.dot.red{background:#cba6f7}.dot.yellow{background:#89b4fa}.dot.green{background:#fab387}
.path{color:var(--muted);font-size:13px;margin-left:auto;font-family:ui-monospace,monospace}
.menu-toggle{display:none;color:var(--neon);font-family:ui-monospace,monospace;background:linear-gradient(90deg,rgba(137,180,250,0.08),rgba(166,227,161,0.05));padding:6px 8px;border-radius:3px;border:1px solid rgba(205,214,244,0.05);font-size:14px;cursor:pointer;transition:all var(--trans);margin-right:8px}
.menu-toggle:hover{background:linear-gradient(90deg,rgba(137,180,250,0.12),rgba(166,227,161,0.08));border-color:rgba(205,214,244,0.1)}
.help{color:var(--neon);font-family:ui-monospace,monospace;background:linear-gradient(90deg,rgba(137,180,250,0.08),rgba(166,227,161,0.05));padding:6px 8px;border-radius:3px;border:1px solid rgba(205,214,244,0.05);font-size:12px;cursor:pointer;transition:all var(--trans)}
.help:hover{background:linear-gradient(90deg,rgba(137,180,250,0.12),rgba(166,227,161,0.08));border-color:rgba(205,214,244,0.1)}
.term-grid{display:flex;gap:18px;flex:1 1 auto;min-height:0;min-width:0}
.term-menu{flex:0 0 var(--menu-width);width:var(--menu-width);min-width:var(--menu-min-width);max-width:var(--menu-max-width);background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:0;padding:14px;border:1px solid rgba(255,255,255,0.02);box-shadow:inset 0 1px 0 rgba(255,255,255,0.012);overflow-y:auto;overflow-x:hidden;box-sizing:border-box}
.term-output{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0}
.term-body{display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding:20px 20px 0;overflow:hidden;background:linear-gradient(180deg, rgba(11,11,15,0.9), rgba(17,17,27,0.9));border-radius:0;border:1px solid rgba(137,180,250,0.08)}
.menu-header{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;margin:8px 0;font-family:ui-monospace,monospace;border-bottom:1px dashed rgba(137,180,250,0.2);padding-bottom:4px}
.menu-list{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}
.menu-section{display:flex;gap:6px;align-items:center;padding:6px 8px;border-radius:0;margin:2px 0;color:var(--muted);cursor:pointer;box-sizing:border-box;border:none;border-left:2px solid transparent;width:100%;font-family:ui-monospace,monospace;font-size:13px;transition:all var(--trans)}
.menu-section::before{content:'\251C\2500\2500 ' ;color:rgba(137,180,250,0.3);font-family:ui-monospace,monospace}
.menu-section:last-child::before{content:'\2514\2500\2500 '}
.menu-section .icon{width:16px;height:16px;border-radius:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.menu-section .label{font-family:ui-monospace,monospace;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.menu-section.active{background:rgba(137,180,250,0.05);border-left-color:var(--neon);color:#cdd6f4}
.menu-section.active .label{color:var(--neon)}
.menu-section:hover{background:rgba(137,180,250,0.03);border-left-color:rgba(137,180,250,0.4)}
.line{margin:0;padding:0;font-family:'Courier New',Courier,monospace;line-height:1.0;white-space:pre;font-size:13px}
.ascii-line{margin:0;padding:0;font-family:'Courier New',Courier,monospace;font-size:13px;line-height:1.0;font-weight:bold;color:var(--neon)}
.exit-code{color:var(--muted);font-size:11px;margin-left:6px}
.exit-code.success{color:var(--neon)}
.exit-code.error{color:#f38ba8}
.line.clickable{cursor:pointer;border-radius:0;padding:6px;border:1px solid transparent;transition:background var(--trans),border-color var(--trans)}
.line.clickable:hover{background:linear-gradient(90deg, rgba(166,227,161,0.06), rgba(137,180,250,0.04));border-color:rgba(166,227,161,0.1)}
.cmd{color:var(--neon);font-weight:600}
.hero-name{font-family:ui-monospace,monospace;font-size:44px;color:var(--accent);text-shadow:0 6px 18px rgba(137,180,250,0.15);margin-bottom:6px;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;flex:0 0 auto;line-height:1.2;min-height:53px}
.hero-sub{color:var(--muted);margin-bottom:18px;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;flex:0 0 auto;line-height:1.4;font-family:ui-monospace,monospace;font-size:14px;min-height:20px}
.content-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px;max-width:100%;box-sizing:border-box;width:100%;grid-auto-rows:min-content;align-items:start;justify-items:stretch}
.content-grid > .card{min-width:0}
.card{background:rgba(11,11,15,0.6);padding:0;border-radius:0;border:1px solid rgba(137,180,250,0.2);box-sizing:border-box;max-width:100%;overflow-wrap:break-word;font-family:ui-monospace,monospace;position:relative;height:fit-content}
.card-header{padding:4px 8px;background:rgba(24,24,37,0.8);border-bottom:1px solid rgba(137,180,250,0.2);color:var(--muted);font-size:11px;letter-spacing:0.05em;font-family:'Courier New',Courier,monospace}
.card h4{color:var(--neon);margin:32px 12px 8px;font-family:ui-monospace,monospace;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:0.05em}
.card p{margin:8px 12px 12px;font-size:13px;line-height:1.6;overflow-wrap:anywhere;word-break:break-word}
.card a{overflow-wrap:anywhere;word-break:break-word}
.card .tags{margin:8px 12px 12px}
.muted{color:var(--muted);font-family:ui-monospace,monospace}
.t-muted{color:var(--muted)}
.t-neon{color:var(--neon)}
.t-accent{color:var(--accent)}
.t-error{color:#f38ba8}
.t-xs{font-size:11px}
.project-link{margin-top:12px;padding:8px;background:rgba(137,180,250,0.05);border-left:2px solid var(--accent);font-family:'Courier New',Courier,monospace;cursor:pointer;user-select:none}
.project-link:hover{background:rgba(137,180,250,0.07)}
.project-link-dollar{color:var(--muted);margin-right:6px}
.project-link-cmd{color:var(--neon);margin-right:6px}
.project-link-anchor{color:var(--accent);text-decoration:none}
.project-link-anchor:hover{text-decoration:underline}
.tag{font-size:11px;padding:2px 6px;border-radius:0;background:transparent;color:var(--accent);margin-right:6px;border:1px solid rgba(137,180,250,0.3);font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:0.05em}
.tag::before{content:'[';color:var(--muted)}
.tag::after{content:']';color:var(--muted)}
#contentArea{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0;box-sizing:border-box;width:100%;display:flex;flex-direction:column;position:relative}
.terminal-toggle{display:none;width:100%;padding:8px;background:rgba(137,180,250,0.05);border:none;border-top:1px solid rgba(137,180,250,0.08);color:var(--accent);font-family:ui-monospace,monospace;font-size:12px;cursor:pointer;transition:all var(--trans);text-align:center;margin:0 -20px}
.terminal-toggle:hover{background:rgba(137,180,250,0.08)}
.terminal-toggle .toggle-icon{display:inline-block;margin-right:6px;transition:transform var(--trans)}
.terminal-toggle.collapsed .toggle-icon{transform:rotate(180deg)}
#cliLog{flex:0 0 240px;overflow:auto;border-top:1px solid rgba(137,180,250,0.08);padding:8px 10px;font-family:'Courier New',Courier,monospace;font-size:13px;color:var(--muted);background:transparent;line-height:1.0;margin:0 -20px}
.prompt{display:flex;gap:10px;align-items:center;padding:12px 20px;border-top:1px solid rgba(137,180,250,0.08);background:transparent;flex:0 0 auto;margin:0 -20px -0px}
.prompt-prefix{font-family:ui-monospace, monospace;color:var(--neon);font-size:13px;font-weight:600;text-shadow:0 0 8px rgba(166,227,161,0.3);letter-spacing:0.02em}
.cmd-input{flex:1;border:0;background:transparent;padding:0;font-family:ui-monospace, monospace;font-size:14px;color:#cdd6f4;outline:none;caret-color:var(--neon);transition:all 150ms}
.cmd-input::placeholder{color:rgba(166,227,161,0.25);font-style:italic}
.cmd-input:focus{background:transparent}
.cmd-input:focus::placeholder{color:rgba(166,227,161,0.15)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.terminal-cursor:focus{caret-color:var(--neon);animation:none}
.terminal-cursor:empty::after,.terminal-cursor:placeholder-shown::after{content:'\258a';color:var(--neon);animation:blink 1s infinite;margin-left:2px}

/* scrollbars */
.term-menu::-webkit-scrollbar, .term-body::-webkit-scrollbar, #contentArea::-webkit-scrollbar, #cliLog::-webkit-scrollbar{width:8px;height:8px}
.term-menu::-webkit-scrollbar-thumb, .term-body::-webkit-scrollbar-thumb, #contentArea::-webkit-scrollbar-thumb, #cliLog::-webkit-scrollbar-thumb{background:rgba(137,180,250,0.2);border-radius:0}

/* responsive layout */
@media (max-width:879px){
  .term-grid{flex-direction:column;overflow-y:auto}
  .term-menu{width:100%;flex:0 0 auto;max-height:30vh;transition:max-height 0.3s ease}
  .term-menu.collapsed{max-height:0;overflow:hidden;padding:0;border:none}
  .term-body{padding:12px 12px 0}
  .prompt{padding:12px;margin:0 -12px}
  #cliLog{margin:0 -12px}
  :root{--site-h-padding:12px}
  .menu-toggle{display:block}
}

@media (min-width:1100px){
  .content-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

@media (max-width:640px) and (orientation:portrait){
  .content-grid{grid-template-columns:1fr;gap:12px}
  .hero-name{font-size:28px;min-height:34px}
  .hero-sub{font-size:13px}
  .card{margin-bottom:8px}
  .term-body{padding:8px 8px 0;display:flex;flex-direction:column}
  #contentArea{padding-bottom:100px}
  .terminal-toggle{display:block;position:fixed;bottom:52px;left:0;right:0;margin:0;padding:6px;font-size:11px;z-index:102;background:rgba(24,24,37,0.95);backdrop-filter:blur(10px);border-top:1px solid rgba(137,180,250,0.15);border-bottom:1px solid rgba(137,180,250,0.15);transition:bottom 0.3s ease}
  .terminal-toggle.collapsed{bottom:52px}
  #cliLog{position:fixed;bottom:52px;left:0;right:0;flex:0 0 0;max-height:0;overflow:hidden;margin:0;font-size:11px;padding:0;border:none;transition:all 0.3s ease;z-index:99;background:rgba(11,11,15,0.95);backdrop-filter:blur(10px)}
  #cliLog.expanded{max-height:240px;padding:6px 8px;border-top:1px solid rgba(137,180,250,0.08)}
  .terminal-toggle:not(.collapsed){bottom:calc(52px + 240px)}
  .prompt{position:fixed;bottom:0;left:0;right:0;padding:8px;margin:0;z-index:101;background:rgba(24,24,37,0.95);backdrop-filter:blur(10px);border-top:1px solid rgba(137,180,250,0.15)}
  :root{--site-h-padding:8px;--terminal-height:90vh}
  .terminal{height:var(--terminal-height)}
  .term-bar{padding:6px 8px}
  .path{font-size:11px}
  .help{font-size:11px;padding:4px 6px}
  .menu-toggle{font-size:16px;padding:4px 8px}
  .card h4{margin:16px 8px 6px;font-size:13px}
  .card p{margin:6px 8px 8px;font-size:12px;line-height:1.5}
  .card-header{font-size:10px;padding:3px 6px}
  .tag{font-size:10px;padding:1px 4px}
  .cmd-input{font-size:13px}
  .prompt-prefix{font-size:12px}
}

/* landscape mode - horizontal split layout */
@media (max-width:900px) and (orientation:landscape){
  :root{--site-h-padding:4px;--terminal-height:96vh}
  
  /* Horizontal layout: menu left, content center, terminal right */
  .terminal{height:var(--terminal-height)}
  .term-bar{padding:4px 8px;gap:8px}
  .path{font-size:10px}
  .help{font-size:10px;padding:3px 5px}
  .menu-toggle{display:none} /* Always show menu in landscape */
  
  .term-grid{
    flex-direction:row;
    gap:8px;
    overflow:hidden;
  }
  
  /* Menu on left - compact */
  .term-menu{
    flex:0 0 160px;
    width:160px;
    max-width:160px;
    font-size:11px;
    padding:8px;
    max-height:none;
  }
  .term-menu.collapsed{
    max-height:none;
    padding:8px;
    border:1px solid rgba(255,255,255,0.02);
  }
  .menu-header{font-size:9px;margin:6px 0}
  .menu-section{font-size:11px;padding:4px 6px}
  
  /* Content in center - flex takes available space */
  .term-output{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  
  .term-body{
    padding:6px 8px 0;
    display:flex;
    flex-direction:column;
    flex:1 1 0;
    min-height:0;
  }
  
  #contentArea{
    flex:1 1 0;
    padding-bottom:0;
    overflow-y:auto;
  }
  
  /* Terminal on right - compact vertical stack, NO FIXED POSITIONING */
  .terminal-toggle{
    display:block; /* Show toggle in landscape */
    position:relative;
    margin:0 -8px;
    padding:4px;
    font-size:10px;
    background:rgba(137,180,250,0.05);
    border:none;
    border-top:1px solid rgba(137,180,250,0.08);
    border-bottom:1px solid rgba(137,180,250,0.08);
    transition:all 0.3s ease;
  }
  
  #cliLog{
    position:relative; /* CRITICAL: relative instead of fixed */
    flex:0 1 120px; /* Fixed compact height */
    max-height:120px;
    overflow-y:auto;
    margin:0 -8px;
    padding:4px 6px;
    font-size:10px;
    border-top:1px solid rgba(137,180,250,0.08);
    background:transparent;
    z-index:auto;
    transition:all 0.3s ease;
  }
  
  /* Hide terminal when collapsed */
  #cliLog:not(.expanded){
    flex:0 0 0;
    max-height:0;
    padding:0;
    overflow:hidden;
    border:none;
  }
  
  .prompt{
    position:relative; /* CRITICAL: relative instead of fixed */
    flex:0 0 auto;
    padding:6px 8px;
    margin:0 -8px;
    z-index:auto;
    background:transparent;
    border-top:1px solid rgba(137,180,250,0.08);
    transition:all 0.3s ease;
  }
  
  /* Hide prompt when terminal collapsed */
  .terminal-toggle.collapsed ~ .term-body .prompt{
    display:none;
  }
  
  /* Compact content */
  .content-grid{grid-template-columns:1fr;gap:8px}
  .hero-name{font-size:24px;min-height:29px}
  .hero-sub{font-size:11px}
  .card{margin-bottom:6px}
  .card h4{margin:12px 8px 4px;font-size:12px}
  .card p{margin:4px 8px 6px;font-size:11px;line-height:1.4}
  .card-header{font-size:9px;padding:2px 5px}
  .tag{font-size:9px;padding:1px 3px}
  .cmd-input{font-size:11px}
  .prompt-prefix{font-size:11px}
}

/* Print styles - ASCII art view */
@media print {
  @page { 
    size: A4 portrait; 
    margin: 0; /* Remove all margins to force header/footer off and fill page */
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Use same theme colors as screen */
  body {
    background: var(--bg) !important;
    color: var(--muted) !important;
    overflow: visible !important;
  }

  /* hide everything except the printView container (direct children) */
  body > * { display: none !important; }

  /* Show and style the print view to fill entire page with no margins */
  #printView {
    display: block !important;
    box-sizing: border-box;
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 8mm 6mm !important;
    background: linear-gradient(180deg,var(--panel),var(--panel-2));
    color: var(--muted) !important;
    font-family: ui-monospace, 'Courier New', monospace !important;
  }

  /* Terminal bar with dots */
  #printView .print-term-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3mm 4mm;
    background: #181825;
    border-bottom: 1px solid rgba(205,214,244,0.08);
    margin: -8mm -6mm 4mm -6mm;
  }

  #printView .print-path {
    color: var(--muted);
    font-size: 9pt;
    margin-left: auto;
  }

  /* Print header (full width) */
  #printView .print-header {
    text-align: center;
    margin-bottom: 6mm;
    border-bottom: 1px solid rgba(137,180,250,0.2);
    padding-bottom: 4mm;
  }

  #printView .hero-name {
    font-size: 20pt;
    color: var(--accent);
    margin-bottom: 2mm;
  }

  #printView .hero-sub {
    font-size: 10pt;
    color: var(--muted);
  }

  /* Section grouping */
  #printView .print-section {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    margin-bottom: 6mm;
  }

  #printView .print-section-header {
    font-family: ui-monospace, monospace;
    font-size: 10pt;
    font-weight: 600;
    margin: 0 0 3mm 0;
    padding-bottom: 1mm;
    border-bottom: 1px dashed rgba(137,180,250,0.2);
    break-after: avoid-column;
    page-break-after: avoid;
  }

  /* two columns to pack more content on A4 */
  #printView .print-columns {
    column-count: 2;
    column-gap: 8mm;
  }

  /* Cards/blocks shouldn't break across columns */
  #printView .print-card {
    display: inline-block;
    width: 100%;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 4mm;
  }

  /* Card styling matches main site */
  #printView .card {
    font-size: 9pt;
    line-height: 1.3;
  }

  #printView .card-header {
    font-size: 8pt;
  }

  #printView .card h4 {
    margin: 3mm 3mm 2mm;
    font-size: 10pt;
  }

  #printView .card p {
    margin: 2mm 3mm 3mm;
    font-size: 9pt;
  }

  #printView .tag {
    font-size: 7pt;
    margin-right: 2mm;
  }

  #printView .project-link-text {
    background: rgba(137,180,250,0.05);
    border-left: 2px solid var(--accent);
    padding: 2mm;
    margin: 2mm 3mm 3mm;
    font-size: 8pt;
  }

  /* Multi-page print handling */
  #printView .print-header {
    page-break-after: avoid;
  }

  #printView .print-section {
    page-break-inside: avoid;
  }

  #printView .print-card {
    orphans: 3;
    widows: 3;
  }

  /* Repeat terminal bar on each page */
  #printView .print-term-bar {
    position: running(header);
  }

  /* avoid printing page header/footer added by browser — user must disable in print dialog */
  /* Note: browser UI headers/footers cannot be reliably suppressed via CSS. */
}