From 47072ef0b908854fa272a3e3c1206a52bd052056 Mon Sep 17 00:00:00 2001
From: samantha42 <zipfriis@gmail.com>
Date: Wed, 27 May 2026 09:15:53 +0200
Subject: [PATCH] remove bloat

---
 day_night_toggle_scoped.html | 184 -----------------------------------
 1 file changed, 184 deletions(-)
 delete mode 100644 day_night_toggle_scoped.html

diff --git a/day_night_toggle_scoped.html b/day_night_toggle_scoped.html
deleted file mode 100644
index b03bc14..0000000
--- a/day_night_toggle_scoped.html
+++ /dev/null
@@ -1,184 +0,0 @@
-<style>
-  .theme-root {
-    --bg: #1a1a3e;
-    --surface: #12122a;
-    --surface2: #1e1e40;
-    --border: #2e2e5e;
-    --border2: #3a3a6e;
-    --text: #e8e8ff;
-    --muted: #9090c0;
-    --dim: #5050a0;
-  }
-  .theme-root.day {
-    --bg: #f7f6f3;
-    --surface: #ffffff;
-    --surface2: #f0eeea;
-    --border: #e2ddd6;
-    --border2: #ccc7be;
-    --text: #1a1917;
-    --muted: #6b6560;
-    --dim: #b0aa9f;
-  }
-  .scene {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem 1rem;
-    gap: 1rem;
-    font-family: var(--font-sans);
-    background: var(--bg);
-    border-radius: var(--border-radius-lg);
-    transition: background 0.4s ease;
-  }
-  .demo-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--border-radius-lg);
-    padding: 1rem 1.5rem;
-    width: 100%;
-    max-width: 280px;
-    transition: background 0.4s ease, border-color 0.4s ease;
-  }
-  .demo-card p { margin: 0 0 4px; font-size: 14px; color: var(--text); transition: color 0.4s ease; }
-  .demo-card span { font-size: 12px; color: var(--muted); transition: color 0.4s ease; }
-  .demo-tag {
-    display: inline-block;
-    margin-top: 8px;
-    font-size: 11px;
-    padding: 2px 8px;
-    border-radius: 20px;
-    background: var(--surface2);
-    color: var(--dim);
-    border: 1px solid var(--border2);
-    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
-  }
-  .toggle-wrap {
-    position: relative;
-    width: 50px;
-    height: 25px;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .track {
-    position: absolute;
-    inset: 0;
-    border-radius: 12.5px;
-    transition: background 0.5s ease;
-    overflow: hidden;
-  }
-  .track.day { background: #87CEEB; }
-  .track.night { background: #1a1a3e; }
-  .stars { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; }
-  .night .stars { opacity: 1; }
-  .star { position: absolute; background: white; border-radius: 50%; animation: twinkle 2s infinite; }
-  .star:nth-child(1) { width:2px; height:2px; top:4px;  left:6px;  animation-delay:0s; }
-  .star:nth-child(2) { width:1px; height:1px; top:10px; left:14px; animation-delay:0.4s; }
-  .star:nth-child(3) { width:1px; height:1px; top:5px;  left:22px; animation-delay:0.8s; }
-  .star:nth-child(4) { width:2px; height:2px; top:14px; left:10px; animation-delay:1.2s; }
-  .star:nth-child(5) { width:1px; height:1px; top:8px;  left:30px; animation-delay:0.2s; }
-  @keyframes twinkle { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
-  .knob {
-    position: absolute;
-    top: 3px;
-    width: 19px;
-    height: 19px;
-    border-radius: 50%;
-    transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-  }
-  .knob.night {
-    left: 3px;
-    background: radial-gradient(circle at 35% 35%, #e8e8ff, #c8c8f8);
-    box-shadow: 0 0 0 2px rgba(180,180,255,0.18), 0 0 7px 4px rgba(140,140,255,0.35), 0 0 14px 6px rgba(100,100,220,0.18);
-  }
-  .knob.day {
-    left: 28px;
-    background: radial-gradient(circle at 40% 40%, #fff8c5, #FFD700);
-    box-shadow: 0 0 0 3px rgba(255,220,0,0.25), 0 0 8px 4px rgba(255,200,0,0.45), 0 0 16px 6px rgba(255,160,0,0.2);
-  }
-  .sun-rays { position: absolute; inset: -7px; opacity: 0; transition: opacity 0.3s ease 0.15s; pointer-events: none; }
-  .knob.day .sun-rays { opacity: 1; }
-  .ray { position: absolute; width: 1.5px; height: 4px; background: rgba(255,220,0,0.9); border-radius: 1px; left: 50%; transform-origin: 50% 16px; margin-left: -0.75px; }
-  .moon-crater { position: absolute; border-radius: 50%; background: rgba(140,140,200,0.4); transition: opacity 0.3s ease; }
-  .knob.day .moon-crater { opacity: 0; }
-  .knob.night .moon-crater { opacity: 1; }
-  .label { font-size: 13px; font-weight: 500; user-select: none; color: var(--muted); transition: color 0.4s ease; }
-  .state-label { font-size: 11px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.4s ease; }
-  .row { display: flex; align-items: center; gap: 12px; }
-</style>
-
-<div class="theme-root day" id="themeRoot">
-  <div class="scene">
-    <h2 class="sr-only">Day and night toggle with scoped theme tokens</h2>
-
-    <div class="demo-card">
-      <p>Sample card</p>
-      <span>Tokens update on toggle</span><br>
-      <span class="demo-tag">surface2 · dim · border2</span>
-    </div>
-
-    <div class="row">
-      <span class="label">Night</span>
-      <div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle" aria-label="Toggle day/night mode">
-        <div class="track day" id="track">
-          <div class="stars">
-            <div class="star"></div><div class="star"></div><div class="star"></div>
-            <div class="star"></div><div class="star"></div>
-          </div>
-        </div>
-        <div class="knob day" id="knob">
-          <div class="sun-rays" id="rays"></div>
-          <div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
-          <div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
-          <div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
-        </div>
-      </div>
-      <span class="label">Day</span>
-    </div>
-
-    <span class="state-label" id="stateLabel">Day mode</span>
-  </div>
-</div>
-
-<script>
-  const toggle     = document.getElementById('toggle');
-  const track      = document.getElementById('track');
-  const knob       = document.getElementById('knob');
-  const rays       = document.getElementById('rays');
-  const stateLabel = document.getElementById('stateLabel');
-  const themeRoot  = document.getElementById('themeRoot');
-
-  let isDay = true;
-
-  for (let i = 0; i < 8; i++) {
-    const r = document.createElement('div');
-    r.className = 'ray';
-    r.style.transform = `rotate(${i * 45}deg)`;
-    rays.appendChild(r);
-  }
-
-  function applyState() {
-    if (isDay) {
-      track.className      = 'track day';
-      knob.className       = 'knob day';
-      stateLabel.textContent = 'Day mode';
-      toggle.setAttribute('aria-checked', 'true');
-      themeRoot.classList.add('day');
-    } else {
-      track.className      = 'track night';
-      knob.className       = 'knob night';
-      stateLabel.textContent = 'Night mode';
-      toggle.setAttribute('aria-checked', 'false');
-      themeRoot.classList.remove('day');
-    }
-  }
-
-  toggle.addEventListener('click', () => { isDay = !isDay; applyState(); });
-  toggle.addEventListener('keydown', e => {
-    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); isDay = !isDay; applyState(); }
-  });
-</script>