/* Site skins. Decorative only: no content, links or layout around ad slots change, and the default "modern" look is what search engines see.
   Site skins. "modern" is the default and needs no rules here; the others override the existing CSS variables. */

.skin-extra { display: none; }

/* ---------- Slot-machine year reel (homepage hero). Its colors come from --s-* tokens, which each year overrides below. ---------- */
.slot {
  --row: 52px;
  --s-body: linear-gradient(135deg, #2f8783, #4a74b8); --s-trim: rgba(255,255,255,.55); --s-radius: 22px;
  --s-win: #ffffff; --s-fade: 255,255,255; --s-ink: #1e2a32; --s-dim: #8a96a0; --s-on: #2f8783; --s-line: rgba(47,135,131,.45);
  --s-btn: #ffffff; --s-btn-ink: #2f6f9a; --s-btn-edge: #1f4f6a; --s-font: Inter, system-ui, sans-serif; --s-yfont: ui-monospace, Menlo, Consolas, monospace;
  width: 100%; max-width: 380px; margin: 28px auto 0; display: grid; gap: 8px; font-family: var(--s-font); text-shadow: none;
}
.slot-label { font: 700 .78rem/1 var(--s-yfont); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #5c6b75); }
.slot-body { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--s-radius) !important; background: var(--s-body); box-shadow: inset 0 0 0 3px var(--s-trim), 0 14px 30px -12px rgba(0,0,0,.45); }
.slot-window { position: relative; flex: 1; min-width: 0; height: calc(var(--row) * 3); border-radius: 12px !important; overflow: hidden; background-color: var(--s-win);
  background-image: linear-gradient(transparent calc(var(--row) - 1px), var(--s-line) calc(var(--row) - 1px), var(--s-line) var(--row), transparent var(--row), transparent calc(var(--row) * 2), var(--s-line) calc(var(--row) * 2), var(--s-line) calc(var(--row) * 2 + 1px), transparent calc(var(--row) * 2 + 1px));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.slot-window::before, .slot-window::after { content: ""; position: absolute; left: 0; right: 0; height: var(--row); pointer-events: none; z-index: 1; }
.slot-window::before { top: 0; background: linear-gradient(rgba(var(--s-fade),1), rgba(var(--s-fade),.3)); }
.slot-window::after { bottom: 0; background: linear-gradient(rgba(var(--s-fade),.3), rgba(var(--s-fade),1)); }
.slot-reel { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; padding-block: var(--row); box-sizing: border-box; outline: none; }
.slot-reel::-webkit-scrollbar { display: none; }
.slot-reel:focus-visible { box-shadow: inset 0 0 0 3px var(--s-on); }
.slot-row { height: var(--row); scroll-snap-align: center; display: flex; align-items: baseline; justify-content: center; gap: 10px; cursor: pointer; color: var(--s-dim); white-space: nowrap; user-select: none; }
.slot-row b { font: 800 1.7rem/var(--row) var(--s-yfont); letter-spacing: .02em; color: var(--s-dim); }
.slot-row span { font-weight: 600; font-size: .98rem; }
.slot-row.on b { color: var(--s-on); }
.slot-row.on span { color: var(--s-ink); }
.slot-spin { flex: none; width: 72px; height: 72px; border-radius: 50% !important; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--s-btn-ink); font: 800 .9rem/1 var(--s-font); letter-spacing: .08em; background: var(--s-btn); box-shadow: 0 5px 0 var(--s-btn-edge), 0 9px 16px rgba(0,0,0,.3); transition: transform .08s, box-shadow .08s; }
.slot-spin:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--s-btn-edge), 0 3px 8px rgba(0,0,0,.3); }
.slot-spin:focus-visible { outline: 3px solid var(--s-on); outline-offset: 3px; }
.slot.spinning .slot-row { filter: blur(1.2px); }
.slot.landed .slot-row.on b { animation: slot-pop .5s ease-out; display: inline-block; }
.slot-status { font-size: .85rem; color: var(--muted, #5c6b75); min-height: 1.3em; }
@keyframes slot-pop { 40% { transform: scale(1.18); } }
@media (max-width: 380px) { .slot { --row: 46px; } .slot-row b { font-size: 1.4rem; } .slot-row span { font-size: .88rem; } .slot-spin { width: 60px; height: 60px; font-size: .8rem; } .slot-body { gap: 8px; padding: 10px; } }

/* Slot reel per year */
html[data-skin="netscape"] .slot {
  --s-body: #c0c0c0; --s-trim: transparent; --s-radius: 0; --s-win: #ffffff; --s-fade: 255,255,255; --s-ink: #000; --s-dim: #808080; --s-on: #000080; --s-line: #808080;
  --s-btn: #c0c0c0; --s-btn-ink: #000; --s-btn-edge: transparent; --s-font: "MS Sans Serif", Tahoma, Verdana, sans-serif; --s-yfont: "Times New Roman", Times, serif;
}
html[data-skin="netscape"] .slot-body { border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; }
html[data-skin="netscape"] .slot-window { border: 2px solid; border-color: #808080 #fff #fff #808080; box-shadow: none; }
html[data-skin="netscape"] .slot-spin { width: 76px; height: 40px; border-radius: 0 !important; border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; font-weight: 700; letter-spacing: 0; }
html[data-skin="netscape"] .slot-spin:active { transform: none; border-color: #000 #fff #fff #000; box-shadow: inset 1px 1px 0 #808080; }

html[data-skin="geocities"] .slot {
  --s-body: #ff00ff; --s-trim: #ffff00; --s-radius: 0; --s-win: #000000; --s-fade: 0,0,0; --s-ink: #00ffff; --s-dim: #5555aa; --s-on: #ffff00; --s-line: #00ff00;
  --s-btn: radial-gradient(circle at 35% 30%, #ffffaa, #ffff00 55%, #ff8800); --s-btn-ink: #ff00ff; --s-btn-edge: #aa5500; --s-font: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive; --s-yfont: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
}
html[data-skin="geocities"] .slot-body { border: 6px outset #ff88ff; }
html[data-skin="geocities"] .slot-window { border: 4px ridge #00ff00; }
html[data-skin="geocities"] .slot-row.on b { text-shadow: 2px 2px 0 #ff00ff; }
html[data-skin="geocities"] .slot-spin { animation: skin-blink 1.2s steps(1) infinite; text-shadow: 1px 1px 0 #000; }
html[data-skin="geocities"] .slot-label { color: #ffff66; }

html[data-skin="terminal"] .slot {
  --s-body: #020502; --s-trim: #33ff66; --s-radius: 0; --s-win: #020502; --s-fade: 2,5,2; --s-ink: #33ff66; --s-dim: #1a6a33; --s-on: #33ff66; --s-line: #1a8a3a;
  --s-btn: #020502; --s-btn-ink: #33ff66; --s-btn-edge: transparent; --s-font: "VT323", "Courier New", monospace; --s-yfont: "VT323", "Courier New", monospace;
}
html[data-skin="terminal"] .slot-window { border: 1px dashed #1a8a3a; box-shadow: none; }
html[data-skin="terminal"] .slot-row b { font-weight: 400; font-size: 2.1rem; }
html[data-skin="terminal"] .slot-row span { font-size: 1.25rem; font-weight: 400; }
html[data-skin="terminal"] .slot-row.on b::before { content: "> "; }
html[data-skin="terminal"] .slot-row.on b, html[data-skin="terminal"] .slot-row.on span { text-shadow: 0 0 6px rgba(51,255,102,.7); }
html[data-skin="terminal"] .slot-spin { border-radius: 0 !important; width: 76px; height: 44px; border: 2px solid #33ff66; box-shadow: none; font-size: 1.3rem; font-weight: 400; }
html[data-skin="terminal"] .slot-spin:hover { background: #33ff66; color: #020502; }
html[data-skin="terminal"] .slot-spin:active { transform: none; }
html[data-skin="terminal"] .slot-label { color: #1fa84a; font-family: "VT323", monospace; font-size: 1.1rem; }

/* ---------- 1997 GeoCities ---------- */
:root[data-skin="geocities"][data-skin] {
  color-scheme: dark;
  --bg:#000044; --bg-soft:#000066; --card:#000033; --fg:#ffff66; --muted:#00ffff; --line:#ff00ff; --chip:#330077;
  --a1:#ff00ff; --a2:#ff8800; --accent:#00ff00; --ring:#00ffff; --glow:#ff00ff; --canvas-bg:#000022; --ac:#00ffff; --mut:#00ffff;
  --shadow:6px 6px 0 #ff00ff;
}
html[data-skin="geocities"] body {
  font-family: "Comic Sans MS","Chalkboard SE","Comic Neue",cursive;
  background-image: radial-gradient(1.5px 1.5px at 10px 14px,#fff 50%,transparent 51%), radial-gradient(1px 1px at 38px 40px,#fff 50%,transparent 51%), radial-gradient(1px 1px at 52px 8px,#0ff 50%,transparent 51%), radial-gradient(4px 4px at 26px 28px,#2a2a88 60%,transparent 61%);
  background-size: 64px 64px;
}
html[data-skin="geocities"] h1 { color:#ff00ff; letter-spacing:0; text-shadow:3px 3px 0 #ffff00, 6px 6px 0 #00ffff; }
html[data-skin="geocities"] .nav { border-bottom:8px solid transparent; border-image:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,magenta,red) 1; background:#000044; }
html[data-skin="geocities"] .cta, html[data-skin="geocities"] .btn.primary, html[data-skin="geocities"] .btn-sm { background:#ff00ff; border:5px outset #ff88ff; color:#ffff00; text-shadow:2px 2px 0 #000; animation:skin-blink 1.2s steps(1) infinite; }
html[data-skin="geocities"] .editor, html[data-skin="geocities"] .steps li, html[data-skin="geocities"] .thumb { border:4px ridge #00ff00; }
html[data-skin="geocities"] a { color:#00ffff; }
html[data-skin="geocities"] a:visited { color:#ff66ff; }
html[data-skin="geocities"] .skin-geocities { display:block; }
.skin-geocities { text-align:center; }
.skin-geocities .marq { overflow:hidden; border:3px ridge #0f0; background:#000; color:#0f0; font-weight:700; padding:6px 0; }
.skin-geocities .marq span { display:inline-block; white-space:nowrap; padding-left:100%; animation:skin-scroll 18s linear infinite; }
.skin-geocities .uc { color:#000; font-weight:700; padding:6px; background:repeating-linear-gradient(45deg,#ff0 0 18px,#000 18px 36px); }
.skin-geocities .uc b { background:#ff0; padding:2px 8px; }
@keyframes skin-scroll { to { transform:translateX(-100%); } }
@keyframes skin-blink { 50% { filter:hue-rotate(120deg); } }

/* ---------- 1996 green-screen terminal ---------- */
:root[data-skin="terminal"][data-skin] {
  color-scheme: dark;
  --bg:#020502; --bg-soft:#04100a; --card:#020502; --fg:#33ff66; --muted:#1fa84a; --line:#1a8a3a; --chip:#0a2a14;
  --a1:#33ff66; --a2:#33ff66; --accent:#33ff66; --ring:#ffb000; --glow:#33ff66; --canvas-bg:#04100a; --ac:#33ff66; --mut:#1fa84a;
  --shadow:none;
}
html[data-skin="terminal"] body { font-family:"VT323","Courier New",monospace; font-size:1.25rem; text-shadow:0 0 4px rgba(51,255,102,.55); }
html[data-skin="terminal"] body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px); box-shadow:inset 0 0 120px rgba(0,0,0,.85); }
html[data-skin="terminal"] h1 { letter-spacing:.04em; text-transform:uppercase; font-weight:400; }
html[data-skin="terminal"] h1::before { content:"> "; }
html[data-skin="terminal"] h1::after { content:""; display:inline-block; width:.5em; height:.9em; margin-left:.1em; background:#33ff66; animation:skin-cursor 1s steps(1) infinite; }
html[data-skin="terminal"] .cta, html[data-skin="terminal"] .btn.primary, html[data-skin="terminal"] .btn-sm { background:#020502; color:#33ff66; border:2px solid #33ff66; text-shadow:inherit; box-shadow:none; }
html[data-skin="terminal"] .cta:hover, html[data-skin="terminal"] .btn.primary:hover, html[data-skin="terminal"] .btn-sm:hover { background:#33ff66; color:#020502; text-shadow:none; }
html[data-skin="terminal"] .btn.dark { background:#33ff66; color:#020502; text-shadow:none; }
html[data-skin="terminal"] .upl, html[data-skin="terminal"] .steps li::before, html[data-skin="terminal"] .cats button[aria-pressed="true"]::before { background:#33ff66; color:#020502; }
@keyframes skin-cursor { 50% { opacity:0; } }

/* ---------- 1998 Netscape-era grey ---------- */
:root[data-skin="netscape"][data-skin] {
  color-scheme: light;
  --bg:#c0c0c0; --bg-soft:#d4d0c8; --card:#c0c0c0; --fg:#000; --muted:#333; --line:#808080; --chip:#d4d0c8;
  --a1:#c0c0c0; --a2:#c0c0c0; --accent:#000080; --ring:#000080; --glow:transparent; --canvas-bg:#e8f4ff; --ac:#0000ee; --mut:#333;
  --shadow:none;
}
html[data-skin="netscape"] body { font-family:"Times New Roman",Times,serif; }
html[data-skin="netscape"] h1 { letter-spacing:0; font-weight:700; }
html[data-skin="netscape"] .nav { background:#000080; border-bottom:2px solid #000; }
html[data-skin="netscape"] .nav a, html[data-skin="netscape"] .nav .logo { color:#fff; }
html[data-skin="netscape"] .editor, html[data-skin="netscape"] .icon-btn, html[data-skin="netscape"] .btn, html[data-skin="netscape"] .cta, html[data-skin="netscape"] .btn-sm {
  border:2px solid; border-color:#fff #000 #000 #fff; box-shadow:inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; background:#c0c0c0; color:#000;
}
html[data-skin="netscape"] .cta, html[data-skin="netscape"] .btn.primary, html[data-skin="netscape"] .btn-sm { color:#000; font-family:"MS Sans Serif",Tahoma,Verdana,sans-serif; font-weight:700; }
html[data-skin="netscape"] .btn.primary { background:#c0c0c0; }
html[data-skin="netscape"] .btn.dark { background:#c0c0c0; color:#000; border:2px solid; border-color:#fff #000 #000 #fff; }
html[data-skin="netscape"] .cta:active, html[data-skin="netscape"] .btn:active { border-color:#000 #fff #fff #000; }
html[data-skin="netscape"] textarea, html[data-skin="netscape"] .search input, html[data-skin="netscape"] .drop { background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080; }
html[data-skin="netscape"] .upl, html[data-skin="netscape"] .steps li::before, html[data-skin="netscape"] .cats button[aria-pressed="true"]::before { background:#000080; color:#fff; }
html[data-skin="netscape"] .skin-netscape { display:block; }
.skin-netscape { width:fit-content; max-width:calc(100% - 32px); margin:10px auto 0; text-align:center; font:700 12px "MS Sans Serif",Tahoma,sans-serif; color:#000; padding:6px 10px; background:#c0c0c0; border:2px solid; border-color:#fff #000 #000 #fff; }
.skin-netscape em { font-style:normal; color:#000080; }

/* ---------- 1975 IBM mainframe (3270 terminal) ---------- */
:root[data-skin="mainframe"][data-skin] {
  color-scheme: dark;
  --bg:#000000; --bg-soft:#050b18; --card:#000000; --fg:#33dd55; --muted:#40d0e0; --line:#2a4aa0; --chip:#0a1430;
  --a1:#5b8cff; --a2:#5b8cff; --accent:#ffffff; --ring:#ffff55; --glow:transparent; --canvas-bg:#050b18; --ac:#40d0e0; --mut:#40d0e0;
  --shadow:none;
}
html[data-skin="mainframe"] body { font-family:"IBM Plex Mono","Courier New",monospace; }
html[data-skin="mainframe"] h1, html[data-skin="mainframe"] h2, html[data-skin="mainframe"] h3, html[data-skin="mainframe"] .logo, html[data-skin="mainframe"] .links a, html[data-skin="mainframe"] .btn, html[data-skin="mainframe"] .cta, html[data-skin="mainframe"] .btn-sm, html[data-skin="mainframe"] label, html[data-skin="mainframe"] summary { text-transform:uppercase; letter-spacing:.04em; }
html[data-skin="mainframe"] h1 { color:#ffffff; font-weight:600; }
html[data-skin="mainframe"] .lead { color:#40d0e0; }
html[data-skin="mainframe"] .cta, html[data-skin="mainframe"] .btn.primary, html[data-skin="mainframe"] .btn-sm, html[data-skin="mainframe"] .btn.dark { background:#000; color:#ffffff; border:1px solid #5b8cff; box-shadow:none; }
html[data-skin="mainframe"] .cta::before { content:"PF5 "; color:#ffff55; }
html[data-skin="mainframe"] .upl, html[data-skin="mainframe"] .steps li::before { background:#5b8cff; color:#000; }
.skin-mainframe { padding:4px max(16px, env(safe-area-inset-left, 0px)); font:600 12px/1.6 "IBM Plex Mono","Courier New",monospace; color:#40d0e0; background:#000; border-bottom:1px solid #2a4aa0; display:none; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; }
html[data-skin="mainframe"] .skin-mainframe { display:flex; }
.skin-mainframe span:nth-child(2) { color:#33dd55; }
html[data-skin="mainframe"] .slot { --s-body:#000; --s-trim:#5b8cff; --s-radius:0; --s-win:#000; --s-fade:0,0,0; --s-ink:#ffffff; --s-dim:#1f6a35; --s-on:#33dd55; --s-line:#2a4aa0; --s-btn:#000; --s-btn-ink:#ffff55; --s-btn-edge:transparent; --s-font:"IBM Plex Mono","Courier New",monospace; --s-yfont:"IBM Plex Mono","Courier New",monospace; }
html[data-skin="mainframe"] .slot-spin { border:1px solid #ffff55; box-shadow:none; border-radius:0 !important; width:76px; height:44px; }
html[data-skin="mainframe"] .slot-spin:active { transform:none; background:#ffff55; color:#000; }
html[data-skin="mainframe"] .slot-row span { text-transform:uppercase; }

/* ---------- 1964 punch card ---------- */
:root[data-skin="punchcard"][data-skin] {
  color-scheme: light;
  --bg:#efe2bf; --bg-soft:#f6ecd0; --card:#f8efd5; --fg:#3b2a1a; --muted:#7a6040; --line:#c9b58a; --chip:#eadbb2;
  --a1:#3b2a1a; --a2:#3b2a1a; --accent:#2b4a8a; --ring:#2b4a8a; --glow:transparent; --canvas-bg:#e6d6ac; --ac:#2b4a8a; --mut:#7a6040;
  --shadow:0 1px 0 #c9b58a;
}
html[data-skin="punchcard"] body { font-family:"Courier Prime","Courier New",Courier,monospace; background-image:repeating-linear-gradient(90deg, transparent 0 13px, rgba(59,42,26,.05) 13px 14px); }
html[data-skin="punchcard"] h1, html[data-skin="punchcard"] .logo, html[data-skin="punchcard"] .cta, html[data-skin="punchcard"] .btn, html[data-skin="punchcard"] .btn-sm { text-transform:uppercase; letter-spacing:.06em; }
html[data-skin="punchcard"] h1 { font-weight:700; }
html[data-skin="punchcard"] .editor, html[data-skin="punchcard"] .steps li { clip-path:polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); border:1px solid #c9b58a; }
html[data-skin="punchcard"] .cta, html[data-skin="punchcard"] .btn.primary, html[data-skin="punchcard"] .btn-sm, html[data-skin="punchcard"] .btn.dark { background:#3b2a1a; color:#f6ecd0; box-shadow:none; }
html[data-skin="punchcard"] .upl, html[data-skin="punchcard"] .steps li::before { background:#3b2a1a; color:#f6ecd0; }
.skin-punchcard { display:none; text-align:center; font:700 12px/1 "Courier Prime","Courier New",monospace; letter-spacing:.12em; color:#7a6040; padding:10px 16px 0; }
html[data-skin="punchcard"] .skin-punchcard { display:block; }
html[data-skin="punchcard"] .slot { --s-body:#d9c79a; --s-trim:#3b2a1a; --s-radius:0; --s-win:#f8efd5; --s-fade:248,239,213; --s-ink:#3b2a1a; --s-dim:#b9a57a; --s-on:#2b4a8a; --s-line:rgba(59,42,26,.3); --s-btn:#3b2a1a; --s-btn-ink:#f6ecd0; --s-btn-edge:#1e140c; --s-font:"Courier Prime","Courier New",monospace; --s-yfont:"Courier Prime","Courier New",monospace; }
html[data-skin="punchcard"] .slot-body { clip-path:polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }
html[data-skin="punchcard"] .slot-spin { border-radius:0 !important; width:76px; height:44px; text-transform:uppercase; }
/* punched holes down the left of the reel window */
html[data-skin="punchcard"] .slot-window { background-image:radial-gradient(ellipse 3px 6px at 8px 50%, #3b2a1a 98%, transparent), linear-gradient(transparent calc(var(--row) - 1px), var(--s-line) calc(var(--row) - 1px), var(--s-line) var(--row), transparent var(--row), transparent calc(var(--row) * 2), var(--s-line) calc(var(--row) * 2), var(--s-line) calc(var(--row) * 2 + 1px), transparent calc(var(--row) * 2 + 1px)); background-size:16px 18px, auto; background-repeat:repeat-y, no-repeat; }

/* ---------- 2005 MySpace ---------- */
:root[data-skin="myspace"][data-skin] {
  color-scheme: dark;
  --bg:#0d0016; --bg-soft:#1a0030; --card:#1a0030; --fg:#ffe0f4; --muted:#ff9ad8; --line:#ff3fb4; --chip:#33004d;
  --a1:#ff3fb4; --a2:#9b30ff; --accent:#ff3fb4; --ring:#ff9ad8; --glow:rgba(255,63,180,.5); --canvas-bg:#220033; --ac:#ff9ad8; --mut:#ff9ad8;
  --shadow:0 0 0 1px #ff3fb4, 0 0 18px rgba(255,63,180,.35);
}
html[data-skin="myspace"] body { font-family:Verdana,Tahoma,Arial,sans-serif; background-image:radial-gradient(1px 1px at 6px 8px,#fff 50%,transparent 51%), radial-gradient(1.5px 1.5px at 22px 30px,#ff9ad8 50%,transparent 51%), radial-gradient(1px 1px at 34px 14px,#c9a0ff 50%,transparent 51%); background-size:40px 40px; }
html[data-skin="myspace"] h1 { letter-spacing:-.02em; background:linear-gradient(90deg,#ff3fb4,#ffffff,#c9a0ff,#ff3fb4); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:skin-glitter 3s linear infinite; }
html[data-skin="myspace"] .nav { background:#003399; }
html[data-skin="myspace"] .nav a, html[data-skin="myspace"] .nav .logo { color:#fff; }
html[data-skin="myspace"] .cta, html[data-skin="myspace"] .btn.primary, html[data-skin="myspace"] .btn-sm { background:linear-gradient(90deg,#ff3fb4,#9b30ff); }
.skin-myspace { display:none; background:#6699cc; color:#fff; font:700 11px/1.5 Verdana,Tahoma,sans-serif; padding:5px max(16px, env(safe-area-inset-left, 0px)); text-align:center; }
.skin-myspace i { display:block; font-style:normal; color:#ffe0f4; background:#0d0016; margin:6px -16px -5px; padding:4px; }
html[data-skin="myspace"] .skin-myspace { display:block; }
html[data-skin="myspace"] .slot { --s-body:linear-gradient(135deg,#ff3fb4,#9b30ff); --s-trim:#ffffff; --s-radius:10px; --s-win:#ffffff; --s-fade:255,255,255; --s-ink:#333; --s-dim:#c8a8c8; --s-on:#ff3fb4; --s-line:rgba(255,63,180,.4); --s-btn:linear-gradient(#ffffff,#d0d8ff); --s-btn-ink:#003399; --s-btn-edge:#6677aa; --s-font:Verdana,Tahoma,sans-serif; --s-yfont:Verdana,Tahoma,sans-serif; }
@keyframes skin-glitter { to { background-position:200% 0; } }

/* ---------- 2007 Web 2.0 ---------- */
:root[data-skin="web2"][data-skin] {
  color-scheme: light;
  --bg:#ffffff; --bg-soft:#f4f9ec; --card:#ffffff; --fg:#333333; --muted:#777777; --line:#d6e4c4; --chip:#eef6e2;
  --a1:#8bd14a; --a2:#4f9a23; --accent:#ff7f00; --ring:rgba(255,127,0,.35); --glow:rgba(122,193,66,.45); --canvas-bg:#eef6e2; --ac:#3d8b1e; --mut:#777777;
  --shadow:0 1px 3px rgba(0,0,0,.15);
}
html[data-skin="web2"] body { font-family:"Lucida Grande","Trebuchet MS",Verdana,sans-serif; background-image:linear-gradient(#e9f5d8, #ffffff 340px); background-repeat:no-repeat; }
html[data-skin="web2"] h1 { margin-bottom:34px; letter-spacing:-.04em; color:#3a3a3a; text-shadow:0 1px 0 #fff; -webkit-box-reflect:below -6px linear-gradient(transparent 55%, rgba(255,255,255,.25)); }
html[data-skin="web2"] .cta, html[data-skin="web2"] .btn.primary, html[data-skin="web2"] .btn-sm { background:linear-gradient(#a8e06a, #7ac142 50%, #5fa82b 51%, #7ac142); border:1px solid #4a8a1e; color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.2); }
html[data-skin="web2"] .editor { border-radius:12px; background:linear-gradient(#ffffff, #f7fbf2); }
.skin-web2 { display:none; width:86px; height:86px; margin:14px auto -40px; border-radius:50%; background:#ff7f00; color:#fff; font:700 12px/1.1 "Trebuchet MS",sans-serif; text-align:center; place-content:center; transform:rotate(-12deg); box-shadow:0 0 0 4px #ffb366; clip-path:polygon(50% 0,61% 12%,75% 4%,79% 20%,95% 21%,90% 36%,100% 50%,90% 64%,95% 79%,79% 80%,75% 96%,61% 88%,50% 100%,39% 88%,25% 96%,21% 80%,5% 79%,10% 64%,0 50%,10% 36%,5% 21%,21% 20%,25% 4%,39% 12%); position:relative; z-index:1; }
.skin-web2 b { display:block; font-size:18px; }
html[data-skin="web2"] .skin-web2 { display:grid; }
html[data-skin="web2"] .slot { --s-body:linear-gradient(#fdfdfd,#d9d9d9); --s-trim:#b0b0b0; --s-radius:16px; --s-win:#ffffff; --s-fade:255,255,255; --s-ink:#333; --s-dim:#bbbbbb; --s-on:#4f9a23; --s-line:rgba(122,193,66,.45); --s-btn:linear-gradient(#ffb04d,#ff7f00 50%,#f06d00 51%,#ff8c1a); --s-btn-ink:#fff; --s-btn-edge:#c45a00; --s-font:"Lucida Grande","Trebuchet MS",sans-serif; --s-yfont:"Lucida Grande","Trebuchet MS",sans-serif; }
html[data-skin="web2"] .slot-spin { text-shadow:0 -1px 0 rgba(0,0,0,.3); }

/* ---------- 2010 skeuomorphic (iOS 4 era) ---------- */
:root[data-skin="skeuo"][data-skin] {
  color-scheme: light;
  --bg:#d9d5cc; --bg-soft:#ece8df; --card:#f6f3ec; --fg:#3a3a3a; --muted:#6b6560; --line:#b9b2a6; --chip:#e4dfd4;
  --a1:#7d9bc5; --a2:#4a6fa5; --accent:#4a6fa5; --ring:rgba(74,111,165,.4); --glow:rgba(0,0,0,.25); --canvas-bg:#e4dfd4; --ac:#3f5f8f; --mut:#6b6560;
  --shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px rgba(0,0,0,.25);
}
html[data-skin="skeuo"] body { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; text-shadow:0 1px 0 rgba(255,255,255,.6); background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.035) 0 2px, transparent 2px 4px); }
html[data-skin="skeuo"] .nav { background:linear-gradient(#b0bccd, #6d84a2); border-bottom:1px solid #2d3642; }
html[data-skin="skeuo"] .nav a, html[data-skin="skeuo"] .nav .logo { color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.45); }
html[data-skin="skeuo"] h1 { letter-spacing:-.02em; color:#4a4a4a; }
html[data-skin="skeuo"] .editor { outline:2px dashed rgba(0,0,0,.18); outline-offset:-9px; }
html[data-skin="skeuo"] .cta, html[data-skin="skeuo"] .btn.primary, html[data-skin="skeuo"] .btn-sm { border-radius:10px; background:linear-gradient(#8eaad3, #5679ac 50%, #4a6fa5 51%, #5b7fb3); border:1px solid #2f4a70; text-shadow:0 -1px 0 rgba(0,0,0,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.3); }
html[data-skin="skeuo"] .slot { --s-body:repeating-linear-gradient(90deg,#e6e6e6 0 2px,#d0d0d0 2px 3px,#dcdcdc 3px 5px); --s-trim:#9a9a9a; --s-radius:14px; --s-win:#fbf7ee; --s-fade:251,247,238; --s-ink:#3a3a3a; --s-dim:#b5aea0; --s-on:#4a6fa5; --s-line:rgba(0,0,0,.15); --s-btn:linear-gradient(#8eaad3,#4a6fa5); --s-btn-ink:#fff; --s-btn-edge:#2f4a70; --s-font:"Helvetica Neue",Helvetica,Arial,sans-serif; --s-yfont:"Helvetica Neue",Helvetica,Arial,sans-serif; }
html[data-skin="skeuo"] .slot-spin { text-shadow:0 -1px 0 rgba(0,0,0,.4); }

/* ---------- 2013 flat design ---------- */
:root[data-skin="flat"][data-skin] {
  color-scheme: light;
  --bg:#ecf0f1; --bg-soft:#f5f7f8; --card:#ffffff; --fg:#2c3e50; --muted:#7f8c8d; --line:#dfe6e9; --chip:#e3e9eb;
  --a1:#1abc9c; --a2:#1abc9c; --accent:#3498db; --ring:rgba(52,152,219,.35); --glow:transparent; --canvas-bg:#dfe6e9; --ac:#2980b9; --mut:#7f8c8d;
  --shadow:none;
}
html[data-skin="flat"] body { font-family:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif; }
html[data-skin="flat"] h1 { font-weight:300; letter-spacing:-.02em; }
html[data-skin="flat"] .nav { background:#2c3e50; }
html[data-skin="flat"] .nav a, html[data-skin="flat"] .nav .logo { color:#fff; }
html[data-skin="flat"] .cta, html[data-skin="flat"] .btn.primary, html[data-skin="flat"] .btn-sm { border-radius:3px; box-shadow:0 3px 0 #16a085; }
html[data-skin="flat"] .editor, html[data-skin="flat"] .thumb, html[data-skin="flat"] .steps li { border-radius:3px; }
html[data-skin="flat"] .slot { --s-body:#34495e; --s-trim:transparent; --s-radius:4px; --s-win:#ffffff; --s-fade:255,255,255; --s-ink:#2c3e50; --s-dim:#bdc3c7; --s-on:#1abc9c; --s-line:#ecf0f1; --s-btn:#e67e22; --s-btn-ink:#fff; --s-btn-edge:#d35400; --s-font:"Open Sans","Segoe UI",sans-serif; --s-yfont:"Open Sans","Segoe UI",sans-serif; }
html[data-skin="flat"] .slot-window { box-shadow:none; }

/* ---------- 2016 Material Design ---------- */
:root[data-skin="material"][data-skin] {
  color-scheme: light;
  --bg:#fafafa; --bg-soft:#f5f5f5; --card:#ffffff; --fg:#212121; --muted:#757575; --line:#e0e0e0; --chip:#eeeeee;
  --a1:#3f51b5; --a2:#3f51b5; --accent:#ff4081; --ring:rgba(63,81,181,.35); --glow:rgba(0,0,0,.3); --canvas-bg:#eeeeee; --ac:#3f51b5; --mut:#757575;
  --shadow:0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px rgba(0,0,0,.2);
}
html[data-skin="material"] body { font-family:Roboto,"Helvetica Neue",Arial,sans-serif; }
html[data-skin="material"] h1 { font-weight:400; letter-spacing:-.01em; }
html[data-skin="material"] .nav { background:#3f51b5; box-shadow:0 2px 4px rgba(0,0,0,.25); }
html[data-skin="material"] .nav a, html[data-skin="material"] .nav .logo { color:#fff; }
html[data-skin="material"] .cta, html[data-skin="material"] .btn.primary, html[data-skin="material"] .btn-sm { border-radius:2px; text-transform:uppercase; letter-spacing:.06em; font-weight:500; background:#ff4081; box-shadow:0 3px 5px rgba(0,0,0,.25); }
html[data-skin="material"] .editor, html[data-skin="material"] .thumb { border-radius:2px; border-color:transparent; }
html[data-skin="material"] .slot { --s-body:#3f51b5; --s-trim:transparent; --s-radius:4px; --s-win:#ffffff; --s-fade:255,255,255; --s-ink:#212121; --s-dim:#bdbdbd; --s-on:#3f51b5; --s-line:#e0e0e0; --s-btn:#ff4081; --s-btn-ink:#fff; --s-btn-edge:transparent; --s-font:Roboto,Arial,sans-serif; --s-yfont:Roboto,Arial,sans-serif; }
html[data-skin="material"] .slot-spin { box-shadow:0 6px 10px rgba(0,0,0,.3); }
html[data-skin="material"] .slot-spin:active { box-shadow:0 2px 4px rgba(0,0,0,.3); }

/* ---------- 2021 glassmorphism ---------- */
:root[data-skin="glass"][data-skin] {
  color-scheme: dark;
  --bg:#1b1340; --bg-soft:rgba(255,255,255,.08); --card:rgba(255,255,255,.1); --fg:#ffffff; --muted:rgba(255,255,255,.72); --line:rgba(255,255,255,.22); --chip:rgba(255,255,255,.12);
  --a1:#a78bfa; --a2:#60a5fa; --accent:#c4b5fd; --ring:rgba(196,181,253,.45); --glow:rgba(167,139,250,.5); --canvas-bg:rgba(255,255,255,.06); --ac:#c4b5fd; --mut:rgba(255,255,255,.72);
  --shadow:0 8px 32px rgba(10,5,40,.35);
}
html[data-skin="glass"] body { background-color:#1b1340; background-image:radial-gradient(40vmax 40vmax at 10% 10%, rgba(167,139,250,.55), transparent 60%), radial-gradient(35vmax 35vmax at 90% 30%, rgba(96,165,250,.5), transparent 60%), radial-gradient(40vmax 40vmax at 50% 95%, rgba(244,114,182,.4), transparent 60%); background-attachment:fixed; }
html[data-skin="glass"] .editor, html[data-skin="glass"] .steps li { -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.25); }
html[data-skin="glass"] .cta, html[data-skin="glass"] .btn-sm { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
html[data-skin="glass"] .slot { --s-body:rgba(255,255,255,.14); --s-trim:rgba(255,255,255,.4); --s-radius:24px; --s-win:#2a2160; --s-fade:42,33,96; --s-ink:#ffffff; --s-dim:rgba(255,255,255,.35); --s-on:#c4b5fd; --s-line:rgba(255,255,255,.18); --s-btn:linear-gradient(135deg,#a78bfa,#60a5fa); --s-btn-ink:#fff; --s-btn-edge:rgba(40,20,110,.6); }
html[data-skin="glass"] .slot-body { -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }

/* ---------- shared rules for every year except the default ---------- */
html[data-skin] #theme { display:none; }
/* Wider year fonts must not push the editor panel past a small phone's edge. */
html[data-skin] .panel, html[data-skin] .seg button, html[data-skin] .three .btn { min-width:0; }
html[data-skin] .seg button, html[data-skin] .three .btn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-skin="mainframe"] .seg button, html[data-skin="punchcard"] .seg button, html[data-skin="terminal"] .seg button, html[data-skin="mainframe"] .three .btn, html[data-skin="punchcard"] .three .btn { letter-spacing:0; font-size:.78rem; }
html[data-skin="geocities"] *:not(canvas):not(.upl):not(.icon-btn):not(.slot-spin), html[data-skin="terminal"] *:not(canvas):not(.upl):not(.icon-btn):not(.slot-spin), html[data-skin="netscape"] *:not(canvas):not(.upl):not(.icon-btn):not(.slot-spin), html[data-skin="mainframe"] *:not(canvas):not(.upl):not(.icon-btn):not(.slot-spin), html[data-skin="punchcard"] *:not(canvas):not(.upl):not(.icon-btn):not(.slot-spin) { border-radius:0 !important; }
html[data-skin]:not([data-skin="glass"]) .nav { backdrop-filter:none; -webkit-backdrop-filter:none; }
@media (prefers-reduced-motion: reduce) { html[data-skin] * { animation:none !important; } }