/* Symbian Toys - restored. Palette and boxed-frame layout derived from the
   original mysheet.css: periwinkle #A5B6D6 chrome, slate #5E80A4, amber #f5b61e
   hover accent, grey frame on white, Arial-era sharp corners. */

:root{
  --st-slate:#4d6f93;
  --st-slate-dark:#33506e;
  --st-peri:#a5b6d6;
  --st-pale:#c2cddf;
  --st-amber:#f5b61e;
  --st-amber-dark:#b8850c;
  --st-ink:#1e2733;
  --st-body:#39424f;
  --st-muted:#6b7686;
  --st-bg:#eef1f6;
  --st-frame:#ffffff;
  --st-rule:#d7deea;
  --st-code-bg:#f2f5fa;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--st-bg);
  color:var(--st-body);
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* Safeguard: content is never hidden waiting on JS. Any reveal animation
   is progressive enhancement only. */
[data-aos]{opacity:1 !important;transform:none !important;}

img{max-width:100%;height:auto;display:block}

/* ---------- masthead ---------- */
.st-mast{
  background:linear-gradient(180deg,var(--st-slate-dark) 0%,var(--st-slate) 100%);
  border-bottom:3px solid var(--st-amber);
}
.st-mast-inner{
  max-width:1180px;margin:0 auto;padding:1.05rem 1.25rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.st-brand{
  display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:#fff;
}
.st-brand b{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:1.42rem;font-weight:600;letter-spacing:-.02em;
}
.st-brand span{
  color:var(--st-pale);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
}
.st-brand:hover b{color:var(--st-amber)}
.st-mast-note{
  margin-left:auto;color:var(--st-pale);font-size:.76rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;
}

/* ---------- frame + columns ---------- */
.st-frame{
  max-width:1180px;margin:0 auto;background:var(--st-frame);
  box-shadow:0 1px 0 rgba(30,39,51,.06),0 12px 34px -22px rgba(30,39,51,.4);
}
.st-cols{display:flex;align-items:flex-start}

/* ---------- sidebar (honours the original 148px left nav) ---------- */
.st-side{
  flex:0 0 226px;align-self:stretch;
  background:linear-gradient(180deg,#e4e9f3 0%,#d7deec 100%);
  border-right:1px solid var(--st-rule);
  padding:1.4rem 0 2.4rem;
}
.st-side nav{position:sticky;top:1.2rem}
.st-side .st-side-h{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--st-slate-dark);padding:0 1.1rem .6rem;
}
.st-side ul{list-style:none;margin:0;padding:0}
.st-side a{
  display:block;padding:.42rem 1.1rem;text-decoration:none;
  color:var(--st-slate-dark);font-weight:600;font-size:.9rem;
  border-left:3px solid transparent;
}
.st-side a:hover{background:var(--st-pale);color:var(--st-amber-dark);border-left-color:var(--st-slate)}
.st-side a[aria-current="page"]{
  background:var(--st-frame);color:var(--st-ink);border-left-color:var(--st-amber);
}
.st-side .st-sub a{
  padding-left:2.1rem;font-weight:400;font-size:.83rem;color:#54637a;
}

/* ---------- main ---------- */
.st-main{flex:1 1 auto;min-width:0;padding:2.1rem 2.4rem 3rem}
.st-main h1{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:2.05rem;font-weight:600;letter-spacing:-.025em;line-height:1.18;
  color:var(--st-ink);margin:0 0 1.1rem;
  padding-bottom:.7rem;border-bottom:2px solid var(--st-amber);
}
.st-main h2{
  font-size:1.32rem;font-weight:600;color:var(--st-slate-dark);
  margin:2.3rem 0 .8rem;padding-left:.7rem;border-left:4px solid var(--st-peri);
}
.st-main h3{font-size:1.05rem;font-weight:600;color:var(--st-ink);margin:1.5rem 0 .45rem}
.st-main p{margin:0 0 1.05rem}
.st-main ul,.st-main ol{margin:0 0 1.15rem;padding-left:1.3rem}
.st-main li{margin-bottom:.42rem}
.st-main a{color:var(--st-slate-dark);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--st-peri);text-decoration-thickness:1.5px}
.st-main a:hover{color:var(--st-amber-dark);text-decoration-color:var(--st-amber)}
.st-main code{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.88em;
  background:var(--st-code-bg);border:1px solid var(--st-rule);
  padding:.08em .35em;color:var(--st-slate-dark);
}
.st-main pre{
  background:var(--st-code-bg);border:1px solid var(--st-rule);
  border-left:4px solid var(--st-slate);padding:.9rem 1rem;overflow-x:auto;margin:0 0 1.2rem;
}
.st-main pre code{background:none;border:0;padding:0;font-size:.9rem}
.st-main blockquote{
  margin:0 0 1.2rem;padding:.85rem 1.1rem;background:#f6f8fc;
  border-left:4px solid var(--st-amber);color:var(--st-ink);
}
.st-main blockquote p:last-child{margin-bottom:0}

.notice{
  background:#f4f7fc;border:1px solid var(--st-rule);border-top:3px solid var(--st-slate);
  padding:.95rem 1.1rem;font-size:.9rem;color:#4a5567;
}

/* ---------- figures ---------- */
.st-fig{margin:0 0 1.6rem;border:1px solid var(--st-rule);background:#fbfcfe;padding:6px}
.st-fig img{width:100%}
.st-fig figcaption{
  font-size:.78rem;color:var(--st-muted);padding:.55rem .3rem .15rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.st-fig-lead{margin-bottom:1.9rem}

/* ---------- footer ---------- */
.st-foot{
  background:var(--st-slate-dark);color:var(--st-pale);
  border-top:3px solid var(--st-amber);margin-top:0;
}
.st-foot-inner{max-width:1180px;margin:0 auto;padding:1.8rem 1.5rem 2.1rem;font-size:.85rem}
.st-foot a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.st-foot a:hover{color:var(--st-amber)}
.st-foot .st-foot-cols{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;margin-bottom:1.3rem}
.st-foot h2{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--st-peri);
  margin:0 0 .5rem;font-weight:600;
}
.st-foot ul{list-style:none;margin:0;padding:0}
.st-foot li{margin-bottom:.22rem}
.st-foot-legal{
  border-top:1px solid rgba(255,255,255,.16);padding-top:1rem;
  font-size:.78rem;color:#c3cee0;line-height:1.6;
}

/* ---------- mobile nav ---------- */
.st-navbtn{
  display:none;width:100%;text-align:left;background:var(--st-pale);
  border:0;border-bottom:1px solid var(--st-rule);color:var(--st-slate-dark);
  font-weight:600;padding:.75rem 1.25rem;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
}

@media (max-width:900px){
  .st-cols{flex-direction:column}
  .st-side{flex:1 1 auto;width:100%;border-right:0;border-bottom:1px solid var(--st-rule);padding:0 0 .6rem}
  .st-side nav{position:static}
  .st-navbtn{display:block}
  .st-side .st-side-h{display:none}
  .st-side .st-navlist{display:none;padding-top:.5rem}
  .st-side .st-navlist.is-open{display:block}
  .st-main{padding:1.5rem 1.15rem 2.4rem}
  .st-main h1{font-size:1.62rem}
  .st-mast-note{display:none}
}
@media (min-width:901px){
  .st-side .st-navlist{display:block !important}
}

/* CSS-only entrance: ends visible, and never runs = still visible */
@keyframes stRise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
.st-main>h1{animation:stRise .45s ease both}