/* System – a retro 90s desktop OS on a deep indigo desktop.
   Bevels are pure borders/box-shadows; every section is a window. */

:root {
  --bg: #221f63;
  --ink: #000000;
  --ink-2: #2b2b2b;
  --line: #808080;
  --accent: #000080;
  --font-body: "Figtree", Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-pixel: "Silkscreen", "Courier New", monospace;
  --font-mono: "VT323", "Courier New", monospace;
  --gutter: clamp(16px, 3vw, 40px);
  --face: #c0c0c0;
  --hi: #ffffff;
  --lo: #808080;
  --dk: #0a0a0a;
  --lt: #dfdfdf;
  --title: linear-gradient(90deg, #000080, #1084d0);
  --raised: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--lt);
  --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--lo), inset -2px -2px var(--lt), inset 2px 2px var(--dk);
  --pressed: inset -1px -1px var(--hi), inset 1px 1px var(--dk), inset -2px -2px var(--lt), inset 2px 2px var(--lo);
  --groove: inset 1px 1px var(--lo), 1px 1px var(--hi);
}

html { background: var(--bg); }
body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background-color: #221f63;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgb(84 76 190 / .45), transparent 60%),
    repeating-conic-gradient(#25226a 0 25%, #1f1c5c 0 50%);
  background-size: auto, 4px 4px;
  -webkit-font-smoothing: auto;
}
:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.sy-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { shape-rendering: crispEdges; }

/* ---------- primitives ---------- */
.sy-win {
  background: var(--face);
  box-shadow: var(--raised);
  padding: 3px;
}
.sy-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2rem;
  padding: .2rem .25rem .2rem .45rem;
  background: var(--title);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .01em;
}
.sy-title__icon { width: 20px; height: 20px; flex: none; }
.sy-title__text, .sy-title__h { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 700; line-height: 1.25; letter-spacing: .01em; font-family: var(--font-body); text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-ctrls { display: flex; gap: 2px; flex: none; margin-left: auto; }
.sy-c {
  position: relative; display: block;
  width: 22px; height: 20px;
  background: var(--face); box-shadow: var(--raised);
}
.sy-c--x { margin-left: 2px; }
.sy-c::before, .sy-c::after { content: ""; position: absolute; background: #000; }
.sy-c--min::before { left: 6px; bottom: 5px; width: 8px; height: 2px; }
.sy-c--min::after { display: none; }
.sy-c--max::before { left: 5px; top: 4px; width: 10px; height: 9px; background: transparent; border: 1px solid #000; border-top-width: 2px; }
.sy-c--max::after { display: none; }
.sy-c--x::before, .sy-c--x::after { left: 50%; top: 50%; width: 11px; height: 2px; translate: -50% -50%; rotate: 45deg; }
.sy-c--x::after { rotate: -45deg; }
.sy-c--help::before { content: "?"; background: none; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 13px; line-height: 1; color: #000; }
.sy-c--help::after { display: none; }

.sy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 6.5rem; min-height: 2.5rem;
  padding: .45rem 1.1rem;
  background: var(--face); color: #000;
  box-shadow: var(--raised);
  text-decoration: none; font-weight: 500; font-size: .9375rem; line-height: 1.2; text-align: center;
  cursor: pointer; user-select: none;
}
.sy-btn:hover { background: #c8c8c8; }
.sy-btn:active { box-shadow: var(--pressed); padding: calc(.45rem + 1px) calc(1.1rem - 1px) calc(.45rem - 1px) calc(1.1rem + 1px); }
.sy-btn:focus-visible { outline: 1px dotted #000; outline-offset: -6px; }
.sy-btn--default { box-shadow: 0 0 0 1px #000, var(--raised); font-weight: 700; }
.sy-btn--default:active { box-shadow: 0 0 0 1px #000, var(--pressed); }
.sy-btn--sm { min-width: 0; min-height: 2rem; padding: .25rem .7rem; font-size: .875rem; }
.sy-btn--off { color: var(--lo); text-shadow: 1px 1px #fff; cursor: default; }
.sy-btn--off:hover { background: var(--face); }
.sy-btn--off:active { box-shadow: var(--raised); padding: .45rem 1.1rem; }
.sy-field { background: #fff; box-shadow: var(--sunken); padding: .4rem .6rem; }

.sy-menubar { display: flex; align-items: center; gap: .25rem; padding: .25rem .15rem; flex-wrap: wrap; }
.sy-menubar--fake { font-size: .9375rem; padding: .15rem .15rem .3rem; }
.sy-menubar--fake span { padding: .15rem .55rem; }
.sy-menubar--fake span::first-letter { text-decoration: underline; }

/* ---------- header (application window) ---------- */
.sy-top { padding: var(--gutter) var(--gutter) 0; max-width: 84rem; margin-inline: auto; }
.sy-brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; flex: 1; min-width: 0; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-brand span { font-weight: 500; opacity: .92; }
.sy-brand:focus-visible { outline-color: #fff; }
.sy-nav { display: flex; flex-wrap: wrap; gap: .15rem; margin-right: auto; }
.sy-nav a { display: inline-block; padding: .3rem .75rem; text-decoration: none; font-size: .9688rem; border: 1px solid transparent; }
.sy-nav a::first-letter { text-decoration: underline; }
.sy-nav a:hover { box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--hi); }
.sy-nav a:active { box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); }
.sy-lang { font-family: var(--font-pixel); font-size: .8125rem; min-width: 3rem; }

/* ---------- desktop / layout ---------- */
.sy-desk {
  max-width: 84rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) clamp(5rem, 9vw, 8rem);
  display: grid;
  gap: clamp(4rem, 9vw, 7.5rem);
}

/* hero */
.sy-hero { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 4vw, 4rem); align-items: start; }
.sy-icons { display: grid; gap: 1.25rem; padding-top: .5rem; }
.sy-icons a { display: grid; justify-items: center; gap: .35rem; color: #fff; text-decoration: none; font-size: .875rem; text-align: center; }
.sy-icons svg { width: 48px; height: 48px; }
.sy-icons span { padding: 1px 4px; line-height: 1.3; }
.sy-icons a:hover span, .sy-icons a:focus-visible span { background: #000080; outline: 1px dotted #fff; }
.sy-icons a:focus-visible { outline: none; }
.sy-icons a:hover svg { filter: brightness(.8) sepia(1) hue-rotate(200deg) saturate(4); }

.sy-welcome { max-width: 62rem; }
.sy-welcome__body { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.5rem 2rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.sy-welcome__kicker { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 400; margin-bottom: .5rem; }
.sy-welcome__kicker b { font-weight: 800; margin-left: .3rem; }
.sy-welcome__kicker span { font-family: var(--font-pixel); font-size: .55em; color: #000080; margin-left: .4rem; vertical-align: super; }
.sy-welcome__h1 { font-size: clamp(2.3rem, 4.6vw, 4.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; max-width: 15ch; }
.sy-welcome__lead { margin-top: 1.25rem; font-size: clamp(1rem, 1.25vw, 1.125rem); max-width: 56ch; }
.sy-tip { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .9rem; align-items: start; margin-top: 1.5rem; padding: .9rem 1rem; background: #ffffe1; box-shadow: var(--sunken); font-size: .9375rem; max-width: 40rem; }
.sy-tip svg { width: 36px; height: 36px; }
.sy-welcome__btns { display: grid; align-content: start; gap: .7rem; padding-left: 1.5rem; border-left: 1px solid var(--lo); box-shadow: inset 1px 0 var(--hi); }
.sy-welcome__btns .sy-btn { width: 100%; }
.sy-welcome__check { display: flex; gap: .55rem; align-items: center; margin-top: auto; padding-top: 1rem; font-size: .8125rem; }
.sy-check { width: 15px; height: 15px; flex: none; background: #fff; box-shadow: var(--sunken); position: relative; }
.sy-check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #000; border-width: 0 2px 2px 0; rotate: 40deg; }

/* explorer */
.sy-explorer { width: min(100%, 76rem); }
.sy-address { display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem .45rem; font-size: .9375rem; box-shadow: 0 -1px var(--hi) inset; }
.sy-address .sy-field { flex: 1; padding: .2rem .5rem; font-size: .9375rem; }
.sy-explorer__panes { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3px; }
.sy-tree { background: #fff; box-shadow: var(--sunken); padding: .9rem .75rem; font-size: .9063rem; }
.sy-tree p { display: flex; align-items: center; gap: .45rem; padding: .2rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-tree svg { width: 18px; height: 18px; flex: none; }
.sy-tree__open { padding-left: .9rem !important; }
.sy-tree__open, .sy-tree__sub { position: relative; }
.sy-tree__sub { padding-left: 2.1rem !important; }
.sy-tree__sub:nth-child(3) { color: #fff; }
.sy-tree__sub:nth-child(3)::before { content: ""; position: absolute; inset: .1rem auto .1rem 3.3rem; right: 0; background: #000080; z-index: -1; }
.sy-tree p { isolation: isolate; }
.sy-pane { background: #fff; box-shadow: var(--sunken); padding: clamp(1.25rem, 3vw, 2.5rem); display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.sy-pane__intro { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.4; max-width: 46rem; }
.sy-folder { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.25rem; padding-top: clamp(1.75rem, 3vw, 2.5rem); box-shadow: 0 -1px #c9c9c9 inset; box-shadow: none; border-top: 1px dotted #808080; }
.sy-folder__icon { width: 64px; height: 64px; }
.sy-folder h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: .5rem; }
.sy-folder p { max-width: 62ch; }
.sy-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.sy-files li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .7rem; padding: .85rem; background: #f3f3f3; outline: 1px dotted transparent; }
.sy-files li:hover { background: #000080; color: #fff; }
.sy-files svg { width: 36px; height: 36px; }
.sy-files strong { display: block; font-weight: 700; margin-bottom: .2rem; hyphens: manual; }
.sy-files span { font-size: .9375rem; hyphens: auto; }
.sy-bul { margin-top: .9rem; display: grid; gap: .35rem; }
.sy-bul li { position: relative; padding-left: 1.4rem; }
.sy-bul li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: 7px; height: 7px; background: #000080; }
.sy-status { display: flex; gap: 3px; margin-top: 3px; font-size: .875rem; }
.sy-status__cell { padding: .3rem .6rem; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); white-space: nowrap; }
.sy-status__grow { flex: 1; white-space: normal; }

/* approach: wizard + notepad + dialogs */
.sy-approach { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.sy-wizard { width: min(100%, 64rem); margin-left: auto; }
.sy-wiz { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0; }
.sy-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sy-wiz__side {
  grid-row: 1; grid-column: 1;
  background: linear-gradient(180deg, #000080 0%, #1f4fd8 70%, #3d8bff 100%);
  color: #fff; padding: 1.5rem 1.25rem; margin: .75rem 0 .75rem .75rem;
  box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi);
  display: grid; align-content: start; gap: 1.5rem;
}
.sy-wiz__art { display: grid; place-items: center; height: 8.5rem; }
.sy-wiz__art svg { width: 112px; height: 112px; filter: drop-shadow(6px 6px 0 rgb(0 0 0 / .35)); }
.sy-wiz__list { display: grid; gap: .35rem; counter-reset: wz; }
.sy-wiz__list li { counter-increment: wz; }
.sy-wiz__list label { display: flex; gap: .65rem; align-items: center; padding: .35rem .5rem; cursor: pointer; font-weight: 500; }
.sy-wiz__list label::before { content: counter(wz); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; font-family: var(--font-pixel); font-size: .75rem; background: var(--face); color: #000; box-shadow: var(--raised); }
.sy-wiz__list label:hover { background: rgb(255 255 255 / .12); }
.sy-wiz__main { grid-row: 1; grid-column: 2; padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; align-content: start; gap: 1.25rem; }
.sy-wiz__intro { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 50ch; padding-bottom: 1.25rem; box-shadow: 0 1px var(--hi), 0 0 0 0 transparent; border-bottom: 1px solid var(--lo); }
.sy-page { display: none; }
.sy-page__count { font-family: var(--font-pixel); font-size: .8125rem; color: #000080; }
.sy-page h3 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; margin: .25rem 0 .6rem; }
.sy-page p:not([class]) { font-size: 1.0625rem; max-width: 48ch; min-height: 3.2em; }
.sy-progress { margin-top: 1.5rem; height: 1.5rem; padding: 3px; background: #fff; box-shadow: var(--sunken); }
.sy-progress span { display: block; height: 100%; width: 25%; background: repeating-linear-gradient(90deg, #000080 0 12px, transparent 12px 15px); }
.sy-page--2 .sy-progress span { width: 50%; }
.sy-page--3 .sy-progress span { width: 75%; }
.sy-page--4 .sy-progress span { width: 100%; }
.sy-page__nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--lo); box-shadow: inset 0 1px var(--hi); }
#sy-s1:checked ~ .sy-wiz__main .sy-page--1,
#sy-s2:checked ~ .sy-wiz__main .sy-page--2,
#sy-s3:checked ~ .sy-wiz__main .sy-page--3,
#sy-s4:checked ~ .sy-wiz__main .sy-page--4 { display: block; }
#sy-s1:checked ~ .sy-wiz__side label[for="sy-s1"],
#sy-s2:checked ~ .sy-wiz__side label[for="sy-s2"],
#sy-s3:checked ~ .sy-wiz__side label[for="sy-s3"],
#sy-s4:checked ~ .sy-wiz__side label[for="sy-s4"] { background: #fff; color: #000080; font-weight: 700; }
#sy-s1:focus-visible ~ .sy-wiz__side label[for="sy-s1"],
#sy-s2:focus-visible ~ .sy-wiz__side label[for="sy-s2"],
#sy-s3:focus-visible ~ .sy-wiz__side label[for="sy-s3"],
#sy-s4:focus-visible ~ .sy-wiz__side label[for="sy-s4"] { outline: 2px dotted #fff; outline-offset: 2px; }

.sy-approach__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.sy-notepad__text { background: #fff; box-shadow: var(--sunken); padding: 1.25rem 1.4rem 1.75rem; font-family: var(--font-mono); font-size: 1.4rem; line-height: 1.3; color: #000; }
.sy-notepad__text h3 { font-family: var(--font-mono); font-weight: 400; font-size: 1.75rem; margin-bottom: .75rem; }
.sy-notepad__text h3::after { content: ""; display: block; width: 10ch; border-bottom: 2px dashed #000; margin-top: .25rem; }
.sy-notepad__text p + p { margin-top: 1rem; }
.sy-notepad__text p { max-width: 60ch; }
.sy-notepad__text p:last-child::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: .2em; vertical-align: -0.12em; background: #000; }
@media (prefers-reduced-motion: no-preference) {
  .sy-notepad__text p:last-child::after { animation: sy-blink 1.1s steps(1) infinite; }
}
@keyframes sy-blink { 50% { opacity: 0; } }

.sy-dialogs { display: grid; gap: 1.25rem; padding-top: .25rem; }
.sy-dialogs__title { color: #fff; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.sy-dialogs__title::before { content: ""; width: 10px; height: 10px; background: #ffd75e; box-shadow: 2px 2px #000; }
.sy-dlg:nth-child(3) { margin-left: clamp(0rem, 3vw, 2.5rem); }
.sy-dlg:nth-child(4) { margin-left: clamp(0rem, 1.5vw, 1.25rem); }
.sy-title--small { min-height: 1.75rem; }
.sy-dlg__d summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .9rem; align-items: center;
  padding: 1rem 1rem 1rem .9rem; font-weight: 600; line-height: 1.35;
}
.sy-dlg__d summary::-webkit-details-marker { display: none; }
.sy-dlg__d summary svg { width: 36px; height: 36px; }
.sy-dlg__btn { min-width: 4.5rem; pointer-events: none; }
.sy-dlg__d summary:hover .sy-dlg__btn { background: #c8c8c8; }
.sy-dlg__d[open] .sy-dlg__btn { box-shadow: var(--pressed); }
.sy-dlg__d p { margin: 0 1rem 1rem; padding: .85rem 1rem; background: #fff; box-shadow: var(--sunken); }
.sy-dlg__d summary:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* programs */
.sy-programs { width: min(100%, 76rem); justify-self: center; }
.sy-programs__body { background: #fff; box-shadow: var(--sunken); margin-top: 3px; padding: clamp(1.25rem, 3vw, 2.5rem); }
.sy-programs__intro { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sy-progs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.sy-prog { display: grid; grid-template-rows: auto auto 1fr auto auto; justify-items: start; gap: .6rem; }
.sy-prog__icon { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: .5rem; }
.sy-prog__icon svg { width: 80px; height: 80px; }
.sy-prog__icon::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 26px; background: #fff;
  box-shadow: inset 0 0 0 1px #000;
  background-image: linear-gradient(45deg, transparent 44%, #000 44% 58%, transparent 58%), linear-gradient(#000, #000), linear-gradient(#000, #000);
  background-size: 100% 100%, 9px 3px, 3px 9px;
  background-position: center, 13px 6px, 19px 6px;
  background-repeat: no-repeat;
}
.sy-prog h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.015em; hyphens: manual; }
.sy-prog:hover h3 { background: #000080; color: #fff; box-shadow: 0 0 0 3px #000080; }
.sy-prog p { hyphens: auto; }
.sy-prog__meta { font-size: .875rem; color: #3a3a3a; padding: .35rem .6rem; background: #f0f0f0; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); }
.sy-prog .sy-btn { margin-top: .5rem; }

/* properties dialog */
.sy-props { width: min(100%, 50rem); justify-self: end; margin-right: clamp(0rem, 4vw, 4rem); }
.sy-props__body { padding: 1rem clamp(.75rem, 2vw, 1.25rem) 1.1rem; }
.sy-tabs { display: flex; gap: 0; padding-left: .25rem; position: relative; z-index: 1; }
.sy-tab { padding: .35rem 1rem .3rem; font-size: .9375rem; box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset -2px 0 var(--lo); margin-top: .2rem; }
.sy-tab--on { margin-top: 0; padding-bottom: .5rem; margin-bottom: -2px; background: var(--face); }
.sy-sheet { box-shadow: var(--raised); padding: clamp(1.25rem, 3vw, 2rem); }
.sy-sheet__head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.25rem; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--lo); box-shadow: 0 1px var(--hi); }
.sy-sheet__head svg { width: 56px; height: 56px; }
.sy-sheet__head h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.sy-sheet__lead { margin: 1.25rem 0 1.5rem; max-width: 56ch; font-size: 1.0625rem; }
.sy-fields { display: grid; gap: .75rem; }
.sy-fields > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.sy-fields dt { padding-top: .45rem; font-size: .9375rem; }
.sy-fields dt::first-letter { text-decoration: underline; }
.sy-fields a { color: #000080; font-weight: 600; text-underline-offset: .15em; }
.sy-props__btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- taskbar footer ---------- */
.sy-task {
  position: relative;
  z-index: 20;
  display: flex; align-items: center; gap: .35rem;
  padding: 4px 4px 3px;
  background: var(--face);
  box-shadow: inset 0 1px var(--lt), inset 0 2px var(--hi);
  font-size: .9375rem;
}
.sy-start { position: relative; flex: none; }
.sy-start__btn { list-style: none; min-width: 0; min-height: 2.35rem; padding: .25rem .65rem; font-weight: 800; gap: .4rem; }
.sy-start__btn::-webkit-details-marker { display: none; }
.sy-start__btn svg { width: 22px; height: 22px; }
.sy-start[open] .sy-start__btn { box-shadow: var(--pressed); }
.sy-startmenu {
  position: absolute; left: 0; bottom: calc(100% + 4px);
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr);
  min-width: 17rem; background: var(--face); box-shadow: var(--raised); padding: 3px;
}
.sy-startmenu__band {
  writing-mode: vertical-rl; rotate: 180deg;
  background: linear-gradient(0deg, #000080, #1084d0);
  color: #c0c0c0; padding: .6rem .35rem; font-size: .8125rem; white-space: nowrap;
}
.sy-startmenu__band b { color: #fff; font-size: 1.15rem; font-weight: 800; }
.sy-startmenu__list { padding: .2rem 0; }
.sy-startmenu__list a { display: flex; align-items: center; gap: .75rem; padding: .45rem .9rem .45rem .6rem; text-decoration: none; }
.sy-startmenu__list a:hover, .sy-startmenu__list a:focus-visible { background: #000080; color: #fff; outline: none; }
.sy-startmenu__list svg { width: 26px; height: 26px; flex: none; }
.sy-startmenu__sep { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--lo); box-shadow: inset 0 1px var(--hi); }
.sy-task__app { justify-content: flex-start; min-height: 2.35rem; min-width: 0; max-width: 22rem; padding: .25rem .6rem; font-weight: 700; box-shadow: var(--pressed); background: repeating-conic-gradient(#d6d6d6 0 25%, #fff 0 50%) 0 0 / 2px 2px; overflow: hidden; }
.sy-task__app span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-task__app svg { width: 20px; height: 20px; flex: none; }
.sy-task__links { display: flex; gap: .35rem; min-width: 0; }
.sy-task__links .sy-btn { min-height: 2.35rem; min-width: 0; padding: .25rem .8rem; justify-content: flex-start; }
.sy-tray { margin-left: auto; display: flex; align-items: center; gap: 1rem; padding: .3rem .75rem; min-height: 2.35rem; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); white-space: nowrap; font-size: .875rem; }
.sy-tray__clock { font-family: var(--font-pixel); font-size: .8125rem; }

/* ---------- legal pages ---------- */
.page-imprint .sy-desk, .page-privacy .sy-desk { display: block; }
.legal {
  max-width: 52rem; margin-inline: auto;
  padding: 0;
  background: var(--face); box-shadow: var(--raised);
}
.legal::before {
  content: "Impressum.txt";
  display: block; padding: .35rem .6rem; margin: 3px 3px 0;
  background: var(--title); color: #fff; font-weight: 700; font-size: .9375rem;
}
.page-privacy .legal::before { content: "Datenschutz.txt"; }
html[lang="en"] .page-imprint .legal::before { content: "Imprint.txt"; }
html[lang="en"] .page-privacy .legal::before { content: "Privacy.txt"; }
.legal__inner { margin: 3px; background: #fff; box-shadow: var(--sunken); padding: clamp(1.25rem, 4vw, 3rem); max-width: none; }
.legal h1 { font-weight: 600; letter-spacing: -0.03em; }
.legal h2 { font-weight: 700; color: #000080; }
.legal p, .legal li { color: #222; }
.legal a { color: #000080; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .sy-files { grid-template-columns: minmax(0, 1fr); }
  .sy-approach__row { grid-template-columns: minmax(0, 1fr); }
  .sy-task { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .sy-hero { grid-template-columns: minmax(0, 1fr); }
  .sy-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); order: 2; gap: .5rem; }
  .sy-welcome__body { grid-template-columns: minmax(0, 1fr); }
  .sy-welcome__btns { padding-left: 0; box-shadow: none; }
  .sy-welcome__check { display: none; }
  .sy-explorer__panes { grid-template-columns: minmax(0, 1fr); }
  .sy-tree { display: none; }
  .sy-wiz { grid-template-columns: minmax(0, 1fr); }
  .sy-wiz__side { grid-column: 1; grid-row: 1; margin: .5rem .5rem 0; padding: .9rem; }
  .sy-wiz__art { display: none; }
  .sy-wiz__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-wiz__main { grid-column: 1; grid-row: 2; }
  .sy-progs { grid-template-columns: minmax(0, 1fr); }
  .sy-prog { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: none; column-gap: 1.25rem; }
  .sy-prog > * { grid-column: 2; }
  .sy-prog__icon { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .sy-props { margin-right: 0; }
  .sy-dlg:nth-child(n) { margin-left: 0; }
}
@media (max-width: 600px) {
  .sy-top, .sy-desk { padding-inline: 10px; }
  .sy-brand span { display: none; }
  .sy-nav a { padding: .3rem .5rem; font-size: .9375rem; }
  .sy-address { display: none; }
  .sy-status { flex-direction: column; }
  .sy-status__cell { white-space: normal; }
  .sy-folder { grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; }
  .sy-folder__icon { width: 40px; height: 40px; }
  .sy-pane, .sy-programs__body { padding: 1rem; }
  .sy-wiz__main { padding: 1rem; }
  .sy-wiz__list label { padding: .3rem .35rem; font-size: .9375rem; }
  .sy-prog { grid-template-columns: 56px minmax(0, 1fr); column-gap: 1rem; }
  .sy-prog__icon { width: 56px; height: 56px; }
  .sy-prog__icon svg { width: 48px; height: 48px; }
  .sy-prog__icon::after { width: 18px; height: 18px; background-size: 100% 100%, 6px 2px, 2px 6px; background-position: center, 9px 4px, 13px 4px; }
  .sy-fields > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .sy-sheet__head { grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; }
  .sy-sheet__head svg { width: 40px; height: 40px; }
  .sy-notepad__text { font-size: 1.3rem; padding: 1rem; }
  .sy-dlg__d summary { grid-template-columns: 30px minmax(0, 1fr); padding: .9rem .75rem; }
  .sy-dlg__d summary svg { width: 30px; height: 30px; }
  .sy-dlg__btn { display: none; }
  .sy-dlg__d p { margin: 0 .6rem .75rem; }
  .sy-task { flex-wrap: wrap; }
  .sy-task__app { flex: 1; }
  .sy-task__links { flex-basis: 100%; }
  .sy-task__links .sy-btn { flex: 1; justify-content: center; padding-inline: .4rem; }
  .sy-tray { flex-basis: 100%; justify-content: space-between; margin-left: 0; }
  .sy-props__btns .sy-btn--off { display: none; }
  .sy-props__btns .sy-btn { flex: 1; }
}

.legal h1 { hyphens: auto; -webkit-hyphens: auto; }