/* ================= MazinisinOS ================= */
html,body{height:100%}
body.os{overflow:hidden;background:var(--night);color:var(--ink)}
.desk{position:fixed;inset:0 0 58px 0;overflow:hidden;background:radial-gradient(1200px 700px at 70% 30%,#1B2550,transparent 60%),var(--night)}
#wall{position:absolute;inset:0;width:100%;height:100%;display:block}
.wall-hint{position:absolute;right:22px;bottom:14px;color:#6E77A0;font-size:.75rem;pointer-events:none}

/* desktop icons */
.icons{position:absolute;left:14px;top:14px;bottom:14px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,98px);grid-auto-columns:96px;gap:6px 8px;z-index:2}
.ico-btn{width:96px;height:98px;border:0;background:transparent;color:#E8EBF5;font:inherit;font-size:.74rem;font-weight:700;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:8px 4px;border-radius:10px;cursor:pointer;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ico-btn:hover{background:rgba(255,255,255,.08)}
.ico-btn:focus-visible,.ico-btn.sel{background:rgba(184,100,47,.28);outline:2px solid var(--copper-hi)}
.ico-btn svg{width:44px;height:44px;flex:none;image-rendering:pixelated;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}

/* windows */
.win{position:absolute;display:flex;flex-direction:column;background:var(--cream);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25);min-width:300px;max-width:calc(100vw - 24px);max-height:calc(100% - 24px);overflow:hidden;z-index:10}
.win[hidden]{display:none}
.win.pop{animation:winpop .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes winpop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
.win-bar{display:flex;align-items:center;gap:10px;padding:0 8px 0 14px;height:46px;flex:none;background:var(--night);color:#fff;cursor:grab;user-select:none;touch-action:none}
.win.active .win-bar{background:linear-gradient(90deg,var(--night),var(--blue))}
.win-bar:active{cursor:grabbing}
.win-bar svg{width:20px;height:20px;flex:none}
.win-title{flex:1;min-width:0;font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-btn{width:34px;height:34px;border:0;border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.win-btn:hover{background:rgba(255,255,255,.22)}
.win-btn.x:hover{background:var(--copper)}
.win-body{overflow:auto;padding:26px 28px 30px;flex:1;overscroll-behavior:contain}
.win-body h2{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.025em;margin-bottom:12px}
.win-body h3{letter-spacing:-.01em}
.win-body .lede{margin-top:6px}

/* welcome */
.welcome h1{font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.035em;margin-bottom:14px}
.welcome h1 em{font-style:normal;color:var(--copper-ink)}
.welcome p{color:var(--muted);font-size:1.05rem;margin:0 0 22px;max-width:46ch}
.welcome .btns{gap:10px}
.welcome .btn{min-height:52px;padding:0 22px;font-size:.98rem}
.welcome .tip{margin-top:20px;font-size:.82rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.welcome .tip b{width:8px;height:8px;background:var(--copper);flex:none}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}

/* folder listing */
.files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.files button{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;text-align:left;border:0;background:#fff;border-radius:12px;padding:12px 14px;font:inherit;color:var(--ink);cursor:pointer;box-shadow:0 4px 12px rgba(16,22,43,.06)}
.files button:hover{box-shadow:0 0 0 2px var(--copper),0 6px 16px rgba(16,22,43,.1)}
.files svg{width:40px;height:40px;image-rendering:pixelated}
.files .fn{font-family:"Courier New",monospace;font-size:.78rem;color:var(--muted);display:block}
.files strong{display:block;font-family:var(--display);font-size:1.05rem}
.files .go{font-weight:700;color:var(--copper-ink);font-size:.85rem;white-space:nowrap}

/* problem window */
.pw .sol-tag{background:rgba(179,38,30,.1);color:#9C2318}
.pw h2{margin:12px 0 6px}
.pw .joke{color:var(--muted);margin:0 0 20px}
.pw .oneliner{margin-top:0;box-shadow:none;padding:22px 24px}
.pw .plain,.pw .ba,.pw .how,.pw .gains{margin-top:18px}
.pw .plain{grid-template-columns:1fr 1fr}
.pw .how,.pw .gains{grid-template-columns:repeat(3,1fr)}
.pw .how li,.pw .plain article{box-shadow:0 4px 12px rgba(16,22,43,.06);padding:22px}
.pw .ba .pane{min-height:180px;padding:20px}
.pw h4{font-family:var(--display);font-size:1.25rem;margin:30px 0 0;letter-spacing:-.015em}
.pw .faq{margin-top:12px}
.pw-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.pw-nav button,.pw-nav a{min-height:44px;border:0;border-radius:10px;padding:0 14px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;background:#fff;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;box-shadow:0 0 0 1px var(--line)}
.pw-nav button:hover,.pw-nav a:hover{box-shadow:0 0 0 2px var(--copper)}

/* services / steps / work inside windows */
.svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc3 article{background:var(--night);color:#fff;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px}
.svc3 .num{font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--copper-hi);line-height:1}
.svc3 h3{font-size:1.3rem}.svc3 p{margin:0;color:#C7CCE0;font-size:.92rem}
.svc3 ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.88rem}
.svc3 li{display:flex;gap:8px;align-items:baseline}.svc3 li::before{content:"";width:7px;height:7px;background:var(--copper);flex:none;transform:translateY(-2px)}
.steps-os{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;counter-reset:s}
.steps-os li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:16px;padding:16px 0;border-top:1px dashed var(--line)}
.steps-os li::before{content:counter(s);width:48px;height:48px;background:var(--copper);color:#fff;font-family:var(--display);font-weight:700;font-size:1.4rem;display:flex;align-items:center;justify-content:center;transform:rotate(45deg) scale(.8)}
.steps-os h3{font-size:1.2rem;margin-bottom:2px}.steps-os p{margin:0;color:var(--muted)}
.win .work{margin-top:0;grid-template-columns:1fr 1fr;gap:16px}
.win .proj{box-shadow:0 4px 12px rgba(16,22,43,.08)}
.win .proj:hover{transform:translateY(-3px)}

/* name, about, contact */
.name-os img{display:block;width:100%;max-width:360px;height:auto;margin:6px 0 18px}
.name-os p,.about-os p{color:var(--muted);font-size:1.02rem;margin:0 0 12px}
.name-os strong{color:var(--ink)}
.about-os{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.about-os .portrait{width:140px;height:140px}
.contact-os{background:var(--night);color:#fff;margin:-26px -28px -30px;padding:40px 34px}
.contact-os h2{font-size:clamp(2.2rem,5vw,3.6rem);color:#fff;letter-spacing:-.04em;line-height:.95}
.contact-os h2 span{color:var(--copper-hi)}
.contact-os p{color:#C7CCE0;margin:16px 0 24px}
.contact-os .mail{display:inline-block;margin-top:16px;font-family:var(--display);font-size:1.3rem;color:#fff}

/* painter inside window */
.win .painter{box-shadow:none;margin:-26px -28px -30px;border-radius:0;padding:22px}

/* trash */
.trash-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.trash-list button{width:100%;min-height:110px;border:2px dashed #D9CFBE;border-radius:12px;background:#fff;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;color:var(--ink)}
.trash-list button:hover{border-color:#B3261E}
.trash-list .fn{font-family:"Courier New",monospace;font-size:.78rem;word-break:break-all}
.trash-list small{color:var(--muted);font-size:.72rem}
.trash-list li.gone button{border-style:solid;border-color:#1E7A45;background:#EAF6EF}
.trash-msg{margin-top:16px;font-weight:700;color:#1E7A45;min-height:1.6em}

/* taskbar */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:58px;z-index:500;display:flex;align-items:center;gap:8px;padding:0 8px;background:rgba(10,14,30,.94);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.08);color:#fff}
.start{height:44px;border:0;border-radius:10px;background:var(--copper);color:#fff;font:inherit;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:10px;padding:0 14px 0 10px;cursor:pointer;flex:none}
.start:hover,.start[aria-expanded="true"]{background:var(--copper-hi)}
.start .beads3{display:flex;gap:3px}.start .beads3 b{width:7px;height:7px;background:#fff}
.tabs{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{height:42px;flex:0 0 auto;max-width:200px;border:0;border-radius:9px;background:rgba(255,255,255,.07);color:#D9DDEA;font:inherit;font-size:.8rem;font-weight:700;padding:0 12px;display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab svg{width:18px;height:18px;flex:none}
.tab.on{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 -3px 0 var(--copper)}
.tray{display:flex;align-items:center;gap:6px;flex:none}
.tray a,.tray button{height:42px;min-width:44px;border:0;border-radius:9px;background:transparent;color:#fff;font:inherit;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;padding:0 10px;text-decoration:none;cursor:pointer}
.tray a:hover,.tray button:hover{background:rgba(255,255,255,.1)}
.clock{font-variant-numeric:tabular-nums;font-size:.82rem;color:#C7CCE0;padding:0 8px;text-align:right;line-height:1.15}

/* start menu */
.startmenu{position:fixed;left:8px;bottom:66px;width:min(340px,calc(100vw - 16px));max-height:calc(100% - 80px);overflow:auto;z-index:600;background:#141B36;color:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.5);padding:14px}
.startmenu[hidden]{display:none}
.startmenu .head{display:flex;align-items:center;gap:12px;padding:6px 8px 14px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px}
.startmenu .head img{height:22px;width:auto}
.startmenu .head span{font-size:.75rem;color:#8E96B5}
.startmenu ul{list-style:none;margin:0;padding:0}
.startmenu li button{width:100%;min-height:44px;border:0;border-radius:10px;background:transparent;color:#fff;font:inherit;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:12px;padding:0 10px;cursor:pointer;text-align:left}
.startmenu li button:hover{background:rgba(255,255,255,.08)}
.startmenu li button svg{width:24px;height:24px;flex:none}
.startmenu hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:8px 0}

/* ---------- MODE 2005 for the OS ---------- */
body.os.y2k .desk{background:#3A6EA5 linear-gradient(180deg,#5A8FD0,#2E5E9E)}
body.os.y2k .taskbar{background:linear-gradient(180deg,#3168D5,#1D4FB8 40%,#2458C8);border-top:1px solid #6A95E8}
body.os.y2k .start{background:linear-gradient(180deg,#4FB04A,#2E8B2A);border-radius:0 14px 14px 0;font-style:italic;font-family:"Trebuchet MS",sans-serif}
body.os.y2k .win{border-radius:8px 8px 0 0;border:3px solid #0A3FB5}
body.os.y2k .win-bar{background:linear-gradient(180deg,#2B6CE8,#0A47C9 60%,#0B3FB2)!important;font-family:"Trebuchet MS",sans-serif}
body.os.y2k .win-btn{background:#fff;color:#000;border:1px solid #888;border-radius:3px;width:26px;height:26px}
body.os.y2k .win-btn.x{background:#D9522F;color:#fff}
body.os.y2k .win-body{background:#ECE9D8}
body.os.y2k .ico-btn{font-family:Tahoma,sans-serif;font-weight:400}
body.os.y2k .clock,body.os.y2k .tab{font-family:Tahoma,sans-serif}

/* ---------- phone: home screen + full-screen apps ---------- */
@media (max-width:820px){
  .icons{left:0;right:0;top:12px;bottom:auto;grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;gap:4px;padding:0 10px}
  .ico-btn{width:auto;height:92px;font-size:.7rem}
  .win{left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none;max-height:none;border-radius:0}
  .win-bar{cursor:default;height:52px}
  .win-btn.min{display:none}
  .win-body{padding:20px 18px 26px}
  .contact-os{margin:-20px -18px -26px;padding:34px 22px}
  .win .painter{margin:-20px -18px -26px}
  .pw .plain,.pw .how,.pw .gains,.svc3,.win .work{grid-template-columns:1fr}
  .about-os{grid-template-columns:1fr}
  .tabs{display:none}
  .start .lbl{display:none}
  .tray{margin-left:auto}
  .wall-hint{display:none}
}
@media (prefers-reduced-motion:reduce){.win.pop{animation:none}}

/* extras */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chips,.never{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:#fff;border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:700;box-shadow:0 0 0 1px var(--line)}
.never{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}
.never li{font-size:.8rem;font-weight:700;color:#9C2318;text-decoration:line-through;text-decoration-thickness:2px}
.files .sub{display:block;color:var(--muted);font-size:.85rem}
.files li.seen button{background:#EAF6EF}
.files li.seen .go{color:#1E7A45}
.startmenu .foot{font-size:.72rem;color:#8E96B5;margin:12px 8px 2px;line-height:1.4}
.off{position:fixed;inset:0;z-index:2000;background:#000;color:var(--copper-hi);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;cursor:pointer;font-family:var(--display)}
.off[hidden]{display:none}
.off p{font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:700;max-width:24ch;margin:0 0 14px}
.off small{color:#6E77A0}
body.os .y2k-only{bottom:58px}
body.os.y2k .win-body p,body.os.y2k .win-body li,body.os.y2k .files .sub{color:#000!important}
body.os.y2k .contact-os p,body.os.y2k .painter p{color:#00FF00!important}
body.os.y2k .win-body h2,body.os.y2k .win-body h1{text-shadow:2px 2px 0 #00FFFF}
@media (max-width:820px){.y2k-tray{display:none!important}}
.trash-list button svg{width:40px;height:40px;image-rendering:pixelated}