@font-face{font-family:"Work Sans";font-weight:300;font-display:swap;src:url(../fonts/work-sans-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:600;font-display:swap;src:url(../fonts/work-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(../fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}
:root{
    --g1:#f2673a; --g2:#d43d3f; --g3:#8f1f36;
    --ink:#ffffff; --ink-2:rgba(255,255,255,.95); --ink-3:rgba(255,255,255,.88);
    --chip:rgba(18,8,10,.72); --chip-h:rgba(18,8,10,.92);
    --prompt:#ffe7a6; --ok:#cdf8c2; --err:#ffe4df; --wa:#7de08a;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --sans:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    color-scheme:dark;
  }
  html,body{height:100%}
  body{
    margin:0; min-height:100%;
    background:#be3539;
    color:var(--ink); font-family:var(--mono); font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  /* gradienti scuriti: testo bianco ≥5.5:1 e --ink-3 ≥4.5:1 su ogni colore (WCAG AA) */
  .bg{position:fixed; inset:0; z-index:0; pointer-events:none}
  .bg i{position:absolute; inset:0; opacity:0; animation:slides 18s linear infinite}
  .bg i:nth-child(1){background:linear-gradient(100deg,#9a5826 0%,#b83f34 60%,#c1313d 100%); animation-delay:0s}
  .bg i:nth-child(2){background:linear-gradient(100deg,#37716d 0%,#427250 55%,#49723a 100%); animation-delay:-12s}
  .bg i:nth-child(3){background:linear-gradient(100deg,#7a55a3 0%,#576890 55%,#406e83 100%); animation-delay:-6s}
  @keyframes slides{0%{opacity:0}8%{opacity:1}33.3%{opacity:1}41.6%{opacity:0}100%{opacity:0}}
  #particles{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
  @media (prefers-reduced-motion:reduce){ .bg i{animation:none} .bg i:nth-child(1){opacity:1} }
  .wrap{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding-block:36px 64px; padding-inline:clamp(16px,4vw,40px)}

  header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:34px}
  .logo{display:block; margin:0; line-height:0; color:var(--ink)}
  .logo svg{width:clamp(130px,18vw,170px); height:auto; color:var(--ink); display:block}
  .status{font-size:12px; color:var(--ink-3); text-align:right; line-height:1.6}
  .status .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:6px; box-shadow:0 0 8px var(--ok)}

  .term{display:flex; flex-direction:column; gap:22px}
  /* lo scroll automatico lascia spazio alla riga di comando fissa in basso */
  .term .out, .term .out p, .term .ask{scroll-margin-bottom:170px}
  .entry{display:grid; gap:10px}
  .cmdline{display:flex; gap:10px; flex-wrap:wrap; align-items:baseline}
  .ps1{color:var(--prompt); white-space:nowrap}
  .ps1 .path{color:var(--ink)}
  .typed{color:var(--ink); font-weight:600}
  .out{color:var(--ink-2)}
  .out p{margin:0 0 10px; max-width:64ch}
  .out p:last-child{margin-bottom:0}
  .out .k,.out a.k{color:var(--prompt)}
  .out h1,.out h2{font:inherit; margin:0 0 10px; max-width:64ch}
  .out .muted{color:var(--ink-3)}
  .out .err{color:var(--err)}
  .out .ok{color:var(--ok)}
  .out a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:3px}
  .out a:hover{text-decoration-color:var(--ink)}
  .out a.chip{text-decoration:none}
  .comment{color:var(--ink-3)}
  .comment::before{content:"# "}
  .claim{font-family:var(--sans); font-weight:300; font-size:clamp(20px,3vw,28px); line-height:1.25; letter-spacing:-.01em; color:var(--ink); max-width:26ch!important; text-wrap:balance}
  .claim b{font-weight:600}

  .chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
  .chip{display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:5px 12px; border-radius:3px;
        background:var(--chip); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:15.5px; letter-spacing:.005em;
        border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .15s,transform .15s}
  .chip:hover,.chip:focus-visible{background:var(--chip-h); transform:translateY(-1px); outline:none; border-color:var(--ink-3)}
  .chip .tag{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
  .chip.cmd{font-family:var(--mono); font-size:13.5px}
  .chip.cmd::before{content:"$"; color:var(--prompt)}
  .chip.wa{border-color:rgba(125,224,138,.45)}
  .chip.wa::before{content:"●"; color:var(--wa); font-size:10px}
  .chip.star::after{content:"★"; color:var(--prompt); font-size:11px}

  .svc{display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:6px 18px; margin:0}
  .svc dt{font-family:var(--sans); font-weight:600; color:var(--ink)}
  .svc dt::before{content:"├─ "; font-family:var(--mono); font-weight:400; color:var(--ink-3)}
  .svc div:last-child dt::before{content:"└─ "}
  .svc dd{margin:0; max-width:60ch; color:var(--ink-2)}
  .svc div{display:contents}
  @media (max-width:560px){ .svc{grid-template-columns:1fr; gap:2px 0} .svc dd{margin:0 0 10px 22px} }

  .work{display:grid; gap:10px; max-width:78ch; padding:14px 16px; border-left:2px solid var(--prompt); background:rgba(0,0,0,.18); border-radius:0 4px 4px 0}
  .work .meta{display:grid; gap:8px}
  .work .title{margin:0; line-height:1.3; font-family:var(--sans); font-weight:600; font-size:20px; color:var(--ink); letter-spacing:-.01em}
  .work .desc{max-width:70ch!important}
  .work ul{margin:0; padding-left:0; list-style:none; color:var(--ink-2)}
  .work li::before{content:"+ "; color:var(--ok)}
  .work .links{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}

  .form{display:grid; gap:10px; max-width:520px}
  .form label{display:grid; gap:4px; font-size:12px; color:var(--ink-3)}
  .form input,.form textarea{font:inherit; color:var(--ink); background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18); border-radius:3px; padding:8px 10px}
  .form input:focus,.form textarea:focus{outline:none; border-color:var(--prompt)}
  .form textarea{min-height:90px; resize:vertical}
  .form button{justify-self:start}

  .inputline{position:sticky; bottom:12px; z-index:2; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px; padding:10px 14px; background:rgba(12,6,8,.72); border:1px solid rgba(255,224,138,.45); border-radius:6px; box-shadow:0 0 0 4px rgba(255,224,138,.06), 0 10px 30px rgba(0,0,0,.25); transition:border-color .2s, box-shadow .2s}
  .inputline:focus-within{border-color:var(--prompt); box-shadow:0 0 0 4px rgba(255,224,138,.16), 0 10px 30px rgba(0,0,0,.3)}
  .inputline label{display:flex; gap:10px; flex:1; min-width:220px; align-items:center; cursor:text}
  #cmd{flex:1; min-width:120px; font:inherit; font-size:16px; font-weight:600; color:var(--ink); background:transparent; border:0; outline:none; caret-color:var(--prompt); padding:8px 0}
  .inputline .ps1{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
  .inputline .go{font-family:var(--mono); font-size:12px; color:var(--ink-3); white-space:nowrap}
  .inputline .go kbd{font:inherit; border:1px solid rgba(255,255,255,.3); border-radius:3px; padding:1px 6px; color:var(--ink)}
  #cmd::placeholder{color:var(--ink-3); font-weight:400}
  .hint{width:100%; font-size:12px; color:var(--ink-3); padding-top:2px}
  .hint kbd{font:inherit; border:1px solid rgba(255,255,255,.25); border-radius:3px; padding:0 5px}
  @media (max-width:560px){
    .inputline .go{display:none}
    .inputline label{min-width:0; flex-wrap:wrap; row-gap:0}
    .inputline .path{display:inline-block; max-width:12ch; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom}
  }
  .quick{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}

  /* comandi già nell'HTML: digitazione e comparsa dell'output solo in CSS (--n caratteri, --t inizio, --o output) */
  .entry.pre .typed{display:inline-block; overflow:hidden; white-space:pre; vertical-align:bottom; width:0; animation:type calc(var(--n)*55ms) steps(var(--n),end) var(--t) forwards}
  .entry.pre > .out{animation:fadein .35s ease-out var(--o) both}
  @keyframes type{to{width:calc(var(--n)*1ch)}}
  @keyframes fadein{from{opacity:0; transform:translateY(4px)}}

  .cursor{display:inline-block; width:.6em; height:1.1em; vertical-align:text-bottom; background:var(--prompt); margin-left:2px; animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  .sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

  /* comandi eseguibili dentro i testi (intendevi…?, preventivo) */
  .out button.k{font:inherit; color:var(--prompt); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:3px}
  .out button.k:hover,.out button.k:focus-visible{text-decoration-color:var(--prompt); outline:none}
  .chip:disabled{opacity:.45; cursor:default; transform:none; border-color:transparent}

  /* call kicall */
  .call p.say{display:flex; gap:12px; max-width:72ch}
  .call .who{flex:0 0 9ch; color:var(--ink-3)}
  .call .who.op{color:var(--prompt)}
  @media (max-width:560px){ .call p.say{flex-direction:column; gap:0} .call .who{flex-basis:auto} }

  /* rm -rf / */
  .out .bar{color:var(--err); white-space:pre; overflow:hidden}
  .term .entry{transition:opacity .5s, filter .5s}
  .term.wiping .entry:not(.live){opacity:.1; filter:blur(1.5px); transition-duration:1.5s}
  .wrap.shake{animation:shake .45s}
  @keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

  /* neofetch */
  .neo{display:flex; gap:12px 32px; flex-wrap:wrap; align-items:flex-start}
  .neo .ascii{margin:0; font:inherit; line-height:1.25; color:var(--prompt)}
  .neo .info p{margin:0; max-width:none}
  .neo .palette{display:flex; margin-top:10px}
  .neo .palette i{width:22px; height:14px}
  .neo .palette i:nth-child(1){background:#be3539} .neo .palette i:nth-child(2){background:#9a5826}
  .neo .palette i:nth-child(3){background:#49723a} .neo .palette i:nth-child(4){background:#37716d}
  .neo .palette i:nth-child(5){background:#406e83} .neo .palette i:nth-child(6){background:#7a55a3}
  .neo .palette i:nth-child(7){background:var(--prompt)} .neo .palette i:nth-child(8){background:var(--ink)}

  /* preventivo */
  .ask{display:grid; gap:8px; margin-top:14px}
  .ask p{margin:0}
  .ask .q{color:var(--ink); font-weight:600}
  .out .answer{color:var(--prompt)}

  /* open spaceinvaders: finestra nel terminale */
  .win{max-width:660px; border:1px solid rgba(255,255,255,.22); border-radius:8px; overflow:hidden; background:rgba(12,6,8,.94); box-shadow:0 14px 40px rgba(0,0,0,.35)}
  .win-bar{display:flex; align-items:center; gap:7px; padding:8px 12px; background:rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.12); font-size:12px; color:var(--ink-3)}
  .win-bar span{margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .win-dot{display:inline-block; width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.25); border:0; padding:0; flex:none}
  .win-close{background:#ff8a7a; cursor:pointer}
  .win-close:hover,.win-close:focus-visible{outline:2px solid var(--ink); outline-offset:1px}
  .win canvas{display:block; width:100%; aspect-ratio:4/3; outline:none; touch-action:none; cursor:crosshair}
  .win canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--prompt)}
  .win .comment{margin:0; padding:8px 12px; font-size:12px; border-top:1px solid rgba(255,255,255,.12)}
  .win-touch{display:none; gap:8px; padding:10px 12px 0}
  .win-touch button{flex:1; min-height:52px; font:inherit; font-size:18px; color:var(--ink); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:6px; touch-action:none; user-select:none; -webkit-user-select:none}
  .win-touch button:active{background:rgba(255,255,255,.22)}
  .win-touch [data-k="fire"]{flex:1.4; font-size:14px; color:var(--prompt)}
  @media (pointer:coarse){ .win-touch{display:flex} }

  footer{margin-top:56px; font-size:12px; color:var(--ink-3); display:flex; gap:18px; flex-wrap:wrap}
  footer a{color:var(--ink-3)}
  @media (prefers-reduced-motion:reduce){ .cursor{animation:none} .chip{transition:none} .entry.pre .typed{animation:none; width:auto} .entry.pre > .out{animation:none} }