:root{
  --bg:#05070b;
  --panel:#0d1117;
  --panel2:#111827;
  --line:#263244;
  --txt:#dbeafe;
  --muted:#8ea2bd;
  --cyan:#22d3ee;
  --green:#22c55e;
  --red:#ef4444;
  --yellow:#f59e0b;
}
*{box-sizing:border-box}

/* Reset predvoleného štýlovania pre nadpisy (zrušenie default veľkostí, hrúbky a okrajov) */
h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Skrytie dátových zdrojov pre používateľov so zapnutým CSS */
.seo-source {
  display: none;
}

html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--txt);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:
    radial-gradient(circle at 70% 10%,rgba(34,211,238,.17),transparent 32%),
    radial-gradient(circle at 20% 80%,rgba(34,197,94,.10),transparent 35%),
    linear-gradient(135deg,#05070b,#08111f 55%,#03141a);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.boot{
  position:fixed;
  inset:0;
  z-index:999;
  background:#020617;
  display:grid;
  place-items:center;
  padding:24px;
}
.boot pre{
  width:min(760px,100%);
  color:#b6c7df;
  font-size:15px;
  line-height:1.8;
  margin:0;
}
.ok{color:var(--green)}
.desktop{
  width:min(1180px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:32px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:28px;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  color:var(--cyan);
  font-size:clamp(18px,3vw,26px);
  letter-spacing:.18em;
  font-weight:900;
}
.status{
  color:var(--muted);
  font-size:13px;
}
.workspace{
  display:grid;
  grid-template-columns:minmax(220px,340px) 1fr;
  gap:32px;
  align-items:center;
}
.icons{
  display:grid;
  grid-template-columns:repeat(2,minmax(100px,1fr));
  gap:18px;
}
.icon{
  min-height:122px;
  padding:16px 12px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:22px;
  background:rgba(15,23,42,.46);
  display:grid;
  place-items:center;
  text-align:center;
  color:#dbeafe;
  transition:.2s ease;
}
.icon:hover,.icon:focus-visible{
  border-color:var(--cyan);
  transform:translateY(-3px);
  background:rgba(15,23,42,.72);
  outline:none;
}
.icon .box{
  width:70px;
  height:70px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(15,23,42,.8);
  display:grid;
  place-items:center;
  font-size:34px;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
}
.stage{
  min-height:430px;
  position:relative;
  border:1px solid rgba(148,163,184,.12);
  border-radius:28px;
  background:rgba(2,6,23,.28);
  box-shadow:inset 0 0 80px rgba(34,211,238,.04);
  overflow:hidden;
}
.window{
  position:absolute;
  left:24px;
  top:24px;
  width:min(640px,calc(100% - 48px));
  background:rgba(13,17,23,.95);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 100px rgba(0,0,0,.55);
}
.winbar{
  height:44px;
  background:#111827;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  user-select:none;
  cursor:grab;
}
.dot{width:11px;height:11px;border-radius:50%;background:var(--red)}
.dot:nth-child(2){background:var(--yellow)}
.dot:nth-child(3){background:var(--green)}
.title{
  margin-left:10px;
  color:var(--muted);
  font-size:13px;
}
.close{
  margin-left:auto;
  color:var(--muted);
  border:0;
  background:transparent;
  font:inherit;
  font-size:20px;
  cursor:pointer;
}
.content{
  padding:24px;
  line-height:1.7;
}
.content h2{
  margin:0 0 12px;
  font-size:clamp(22px,3vw,30px);
  color:#fff;
  font-weight:700; /* explicitne definovaná hrúbka pre nadpisy okien */
}
.content a{
  color:var(--cyan);
}
.row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
  border-bottom:1px solid rgba(148,163,184,.13);
}
.cmd{color:var(--cyan)}
.taskbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  min-height:64px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(15px);
}
.launch{
  width:44px;
  height:44px;
  border-radius:13px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--cyan);
  font-weight:900;
  background:rgba(2,6,23,.65);
}
.terminal{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#020617;
  box-shadow:inset 0 0 24px rgba(34,197,94,.05);
}
.prompt{
  color:var(--green);
  white-space:nowrap;
}
.path{
  color:var(--cyan);
  white-space:nowrap;
}
.terminal input{
  width:100%;
  min-width:80px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--txt);
  font:inherit;
  caret-color:var(--green);
}
.terminal input::placeholder{color:#64748b}
.clock{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}
.notice{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:50;
  width:min(330px,calc(100vw - 32px));
  background:rgba(13,17,23,.96);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  transform:translateY(30px);
  opacity:0;
  transition:.35s;
  pointer-events:none;
}
.notice.show{
  transform:translateY(0);
  opacity:1;
}
@media(max-width:900px){
  .desktop{ padding:22px; gap:22px; }
  .workspace{ grid-template-columns:1fr; align-items:start; }
  .icons{ grid-template-columns:repeat(3,1fr); }
  .stage{ min-height:auto; display:flex; flex-direction:column; gap:16px; padding:16px; overflow:visible; }
  .window{ position:static; width:100%; max-width:none; }
  .winbar{ cursor:default; }
}
@media(max-width:640px){
  .desktop{ min-height:100vh; padding:16px; gap:18px; }
  .topbar{ align-items:flex-start; flex-direction:column; gap:8px; }
  .icons{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .icon{ min-height:112px; border-radius:18px; }
  .icon .box{ width:58px; height:58px; font-size:28px; border-radius:15px; }
  .stage{ border-radius:22px; padding:12px; gap:14px; }
  .content{ padding:18px; }
  .row{ flex-direction:column; gap:4px; }
  .taskbar{ grid-template-columns:1fr; gap:10px; }
  .launch{ display:none; }
  .terminal{ width:100%; overflow-x:auto; }
  .prompt, .path{ font-size:13px; }
  .clock{ text-align:center; }
  .notice{ display:none; }
}
@media(max-width:420px){
  .icons{ grid-template-columns:1fr 1fr; }
  .icon{ padding:14px 8px; }
  .terminal{ align-items:flex-start; flex-wrap:wrap; padding:10px 12px; }
  .terminal input{ flex-basis:100%; }
}