sri-yantra 1.0.0

package/.github/FUNDING.yml

@@ -0,0 +1 @@
+github: evoluteur

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Olivier Giulieri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# Sri-Yantra
+
+Draw a Sri Yantra right in your browser: nine interlocking triangles around a central point, ringed by lotus petals, circles and a gated square. Change the colors, build it up one triangle at a time, and save it as an SVG or a PNG. No sign-up and no libraries.
+
+- [Draw the Sri Yantra](https://evoluteur.github.io/sri-yantra/)
+
+![Sri Yantra](sri-yantra.png)
+
+## What it does
+
+The Sri Yantra is the best known of the sacred diagrams of the Indian tantric traditions. Four triangles point up and five point down. The upward ones are usually read as Shiva and the downward ones as Shakti, and together they meet at the bindu, the central point.
+
+- **Build it up**: a slider draws the triangles from the smallest to the largest, and a button plays it as an animation. Show only the upward or only the downward triangles if you like.
+- **Layers**: the bindu, the nine triangles, the eight-petal lotus, the sixteen-petal lotus, the circles and the square with four gates can each be switched on and off.
+- **Look**: nine color palettes (gold, temple, night, ink, saffron, emerald, slate, parchment, rose), filled or in outline, and a line weight slider.
+- **Save**: **Download PNG** (2000 pixels square) or **Download SVG**.
+
+The page also lists the nine enclosures (avaranas) from the outside in, with their Sanskrit names and their usual glosses.
+
+## About the drawing
+
+The triangle coordinates come from the [Sri Yantra example on TeXample.net](https://texample.net/tikz/examples/sri-yantra/) (CC BY-SA 4.0). The two largest triangles have their corners on the circle and every triangle is symmetric left to right. The lotus petals follow the same example. Practitioners may prefer other proportions, and there are several schools of drawing. A hand-drawn yantra is a matter of practice and not just geometry.
+
+## How it is built
+
+The pages are plain HTML, CSS and JavaScript, with no dependencies and no build step. Just open `index.html`. It is also a small installable web app: add it to your home screen or desktop and it works offline.
+
+- The whole yantra is one SVG built from the triangle data in [js/yantra-data.js](https://github.com/evoluteur/sri-yantra/blob/main/js/yantra-data.js), and the app logic is in [js/yantra.js](https://github.com/evoluteur/sri-yantra/blob/main/js/yantra.js).
+- Three color themes (dark, light and blue) are shared with my other projects.
+- Your settings are kept in the browser's local storage.
+
+Sri-Yantra is open source at [GitHub](https://github.com/evoluteur/sri-yantra) with MIT license.
+
+Had fun browsing the app? [Buy me a coffee by becoming a sponsor](https://github.com/sponsors/evoluteur).
+
+You may also be interested in my other sacred geometry projects [Mandala-Maker](https://github.com/evoluteur/mandala-maker) ([demo](https://evoluteur.github.io/mandala-maker/)) and [Sacred-Geometry](https://github.com/evoluteur/sacred-geometry) ([demo](https://evoluteur.github.io/sacred-geometry/)). For more mystic arts as small web apps, see [Esoterica](https://evoluteur.github.io/projects/esoterica.html).
+
+Copyright (c) 2026 [Olivier Giulieri](https://evoluteur.github.io/).

package/about.html

@@ -0,0 +1,175 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>What Is the Sri Yantra? Meaning and Origins - Sri Yantra</title>
+    <meta
+      name="description"
+      content="What the Sri Yantra is, its nine interlocking triangles and nine enclosures, and where the diagram comes from."
+    />
+    <meta
+      name="keywords"
+      content="what is a Sri Yantra, Sri Yantra meaning, Sri Yantra history, Sri Chakra, Shri Yantra, Sri Vidya, nine enclosures, avaranas, Shiva Shakti triangles, bindu, tantra"
+    />
+    <meta name="robots" content="index, follow, max-image-preview:large" />
+    <meta name="author" content="Olivier Giulieri" />
+    <link rel="canonical" href="https://evoluteur.github.io/sri-yantra/about.html" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="apple-touch-icon" href="icon-192.png" />
+    <meta name="theme-color" content="#1a212d" />
+
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Overpass"
+    />
+    <link id="omg-core-css" rel="stylesheet" href="css/core.css" />
+    <link id="omg-theme-css" rel="stylesheet" href="css/themes/dark/dark.css" />
+    <link id="omg-density-css" rel="stylesheet" href="css/densities.css" />
+    <link rel="stylesheet" href="css/common.css" />
+    <link rel="stylesheet" href="css/about.css" />
+
+    <script src="js/omg.js"></script>
+    <script>
+      if ("serviceWorker" in navigator) {
+        addEventListener("load", () => navigator.serviceWorker.register("sw.js"));
+      }
+    </script>
+    <meta property="og:type" content="article" />
+    <meta property="og:site_name" content="Evoluteur" />
+    <meta property="og:title" content="What Is the Sri Yantra? Meaning and Origins" />
+    <meta property="og:description" content="What the Sri Yantra is, its nine interlocking triangles and nine enclosures, and where the diagram comes from." />
+    <meta property="og:url" content="https://evoluteur.github.io/sri-yantra/about.html" />
+    <meta property="og:image" content="https://raw.githubusercontent.com/evoluteur/sri-yantra/main/sri-yantra.png" />
+    <meta property="og:image:alt" content="Sri Yantra: nine interlocking triangles, lotus petals, circles and a gated square" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="What Is the Sri Yantra? Meaning and Origins" />
+    <meta name="twitter:description" content="What the Sri Yantra is, its nine interlocking triangles and nine enclosures, and where the diagram comes from." />
+    <meta name="twitter:image" content="https://raw.githubusercontent.com/evoluteur/sri-yantra/main/sri-yantra.png" />
+    <script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "Article",
+      "headline": "What Is the Sri Yantra? Meaning and Origins",
+      "description": "What the Sri Yantra is, its nine interlocking triangles and nine enclosures, and where the diagram comes from.",
+      "mainEntityOfPage": "https://evoluteur.github.io/sri-yantra/about.html",
+      "image": "https://raw.githubusercontent.com/evoluteur/sri-yantra/main/sri-yantra.png",
+      "author": {
+        "@type": "Person",
+        "name": "Olivier Giulieri",
+        "url": "https://evoluteur.github.io/"
+      },
+      "publisher": {
+        "@type": "Person",
+        "name": "Olivier Giulieri",
+        "url": "https://evoluteur.github.io/"
+      },
+      "isPartOf": {
+        "@type": "WebApplication",
+        "name": "Sri Yantra",
+        "url": "https://evoluteur.github.io/sri-yantra/"
+      }
+    },
+    {
+      "@type": "BreadcrumbList",
+      "itemListElement": [
+        {
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Sri Yantra",
+          "item": "https://evoluteur.github.io/sri-yantra/"
+        },
+        {
+          "@type": "ListItem",
+          "position": 2,
+          "name": "About the Sri Yantra",
+          "item": "https://evoluteur.github.io/sri-yantra/about.html"
+        }
+      ]
+    }
+  ]
+}
+    </script>
+  </head>
+
+  <body onload="setupPage('about');" id="omg-body">
+    <div id="omg-header">
+      <h1><a href="index.html">Sri Yantra</a></h1>
+      <div id="omg-header-tools">
+        <div id="omg-theme-picker"></div>
+        <a id="omg-github" href="https://github.com/evoluteur/sri-yantra" target="_blank" rel="noopener" title="Sri Yantra on GitHub" aria-label="Sri Yantra on GitHub"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></a>
+      </div>
+    </div>
+    <h2>About the Sri Yantra</h2>
+    <div class="content about primer">
+      <p class="tagline">
+        What the Sri Yantra is, and where it comes from.
+        <button type="button" class="btn-go" onclick="location.href='index.html'">Draw one now</button>
+      </p>
+
+      <img class="plate" src="sri-yantra.png" alt="Sri Yantra: nine interlocking triangles, lotus petals, circles and a gated square" width="220" height="220" loading="lazy" />
+
+      <h3>What is the Sri Yantra?</h3>
+      <p class="lede">The Sri Yantra, also called the Sri Chakra, is a geometric diagram from the Hindu tantric traditions, built from nine interlocking triangles arranged around a single point.</p>
+      <p><em class="sanskrit">Sri</em> means auspicious or venerable, and a <em class="sanskrit">yantra</em> is an instrument or diagram used as a support for worship and meditation, so the name means roughly "venerable instrument." It is the central diagram of Sri Vidya, a tradition of goddess (Devi or Shakti) worship within Shaktism. Practitioners meditate on it, trace it in ritual (<em class="sanskrit">puja</em>), and sometimes install it as a three-dimensional pyramid (<em class="sanskrit">Meru</em>) in temples. It is read on two levels at once: as a map of the outer cosmos and as a map of the subtle body, so that worshipping it outwardly and looking inward are treated as the same act.</p>
+      <p>However it is read, the figure is built from a small set of parts:</p>
+      <dl class="anatomy">
+    <dt>Bindu</dt><dd>The central point, where Shiva and Shakti are said to unite as one.</dd>
+    <dt>Nine triangles</dt><dd>Four pointing up and five pointing down, overlapping to form 43 smaller triangles in all.</dd>
+    <dt>Lotus rings</dt><dd>An eight-petal ring and a sixteen-petal ring, read as agitation and the fulfillment of desires.</dd>
+    <dt>Circles</dt><dd>Three concentric rings enclosing the lotuses and triangles.</dd>
+    <dt>Bhupura</dt><dd>The outer square with a T-shaped gate on each side, marking the diagram as sacred ground with an entrance facing each direction.</dd>
+  </dl>
+
+      <h3>Shiva and Shakti</h3>
+      <p>The four upward-pointing triangles are read as Shiva, the masculine or consciousness principle, and the five downward-pointing ones as Shakti, feminine and active energy. Together they meet at the bindu, where the two are said to become one. This is the same union celebrated across Shakta and tantric thought more broadly: static awareness and dynamic energy as two aspects of a single reality, rather than opposites.</p>
+
+      <h3>The nine enclosures</h3>
+      <p>Tradition reads the completed yantra as nine enclosures, called <em class="sanskrit">avaranas</em>, counted from the outside in. Each is named for what it is said to grant a worshipper who reaches it in meditation.</p>
+      <ol class="enclosures">
+        <li><span class="sa">Trailokya Mohana</span> <span class="en">&ndash; the square with four gates: enchanter of the three worlds</span></li>
+        <li><span class="sa">Sarva Asha Paripuraka</span> <span class="en">&ndash; the sixteen petals: fulfiller of all hopes</span></li>
+        <li><span class="sa">Sarva Sankshobhana</span> <span class="en">&ndash; the eight petals: agitator of all</span></li>
+        <li><span class="sa">Sarva Saubhagyadayaka</span> <span class="en">&ndash; the fourteen triangles: giver of all good fortune</span></li>
+        <li><span class="sa">Sarvartha Sadhaka</span> <span class="en">&ndash; the outer ten triangles: accomplisher of all aims</span></li>
+        <li><span class="sa">Sarva Rakshakara</span> <span class="en">&ndash; the inner ten triangles: protector of all</span></li>
+        <li><span class="sa">Sarva Rogahara</span> <span class="en">&ndash; the eight triangles: remover of all disease</span></li>
+        <li><span class="sa">Sarva Siddhiprada</span> <span class="en">&ndash; the central triangle: bestower of all powers</span></li>
+        <li><span class="sa">Sarva Anandamaya</span> <span class="en">&ndash; the bindu: full of all bliss</span></li>
+      </ol>
+      <p>In the Sri Vidya tradition each enclosure is also linked to its own form of the Goddess and its own group of attendant deities, with the details, and even the exact count and arrangement of triangles, varying somewhat between lineages and texts.</p>
+
+      <h3>Where the Sri Yantra comes from</h3>
+      <p class="lede">The Sri Yantra belongs to a tantric current that took shape over roughly a thousand years, and scholars continue to debate the precise dating of its early sources.</p>
+      <p>Diagrams and mantras for goddess worship appear in tantric texts from the early medieval period, and the Sri Yantra in something close to its familiar form is described and prescribed for worship in later Sri Vidya literature. It became especially associated with the <em class="sanskrit">Saundarya Lahari</em> ("Wave of Beauty"), a devotional poem to the goddess traditionally attributed to the philosopher Adi Shankaracharya, though many scholars think at least part of it is a later composition. From South India, Sri Vidya worship of the yantra spread through monastic centers such as the Shankaracharya mathas, where large stone or metal Meru-shaped Sri Yantras are still installed and worshipped today.</p>
+
+      <ul class="timeline">
+    <li><span class="when">First millennium CE</span><span>Tantric traditions of goddess (Shakta) worship develop across the Indian subcontinent, with yantras used as supports for mantra and meditation.</span></li>
+    <li><span class="when">Medieval period</span><span>Sri Vidya crystallizes as a distinct tradition centered on the Sri Yantra and the goddess Tripura Sundari; exact dating of its foundational texts is debated.</span></li>
+    <li><span class="when">Traditionally, 8th c.</span><span>The <em>Saundarya Lahari</em>, closely associated with the Sri Yantra, is traditionally attributed to Adi Shankaracharya; scholars debate how much of it is his.</span></li>
+    <li><span class="when">Ongoing</span><span>Sri Vidya worship of the Sri Yantra continues in South Indian monastic centers and temples, including large three-dimensional Meru installations, and among practitioners worldwide.</span></li>
+  </ul>
+
+      <h3>About this drawing</h3>
+      <p>This app takes its triangle coordinates from a published construction shared on <a href="https://texample.net/tikz/examples/sri-yantra/" target="_blank" rel="noopener">TeXample.net</a> (CC BY-SA 4.0). In it, the two largest triangles have every corner on the outer circle, and the whole figure is symmetric left to right. Other constructions exist and give slightly different proportions; drawing a Sri Yantra by hand is traditionally treated as a discipline in its own right, not just a matter of geometry.</p>
+
+      <div class="footer">
+        <p><a href="about.html">About the Sri Yantra</a></p>
+        <p>The code of this page is <a href="https://github.com/evoluteur/sri-yantra">Open source</a> with MIT license.</p>
+        <p>Had fun browsing the app? <a href="https://github.com/sponsors/evoluteur">Buy me a coffee by becoming a sponsor</a>.</p>
+        <p>
+          You may also like
+          <a href="https://evoluteur.github.io/mandala-maker/" target="_blank" rel="noopener">Mandala Maker</a>,
+          <a href="https://evoluteur.github.io/sacred-geometry/" target="_blank" rel="noopener">Sacred Geometry</a>,
+          <a href="https://evoluteur.github.io/platonic-solids/" target="_blank" rel="noopener">Platonic Solids</a>,
+          and <a href="https://evoluteur.github.io/archimedean-solids/" target="_blank" rel="noopener">Archimedean Solids</a>.
+          See them all on <a href="https://evoluteur.github.io/esoterica.html" target="_blank" rel="noopener">Esoterica</a>.
+        </p>
+        <p class="copyright">&#169; 2026 <a href="https://evoluteur.github.io/">Olivier Giulieri</a></p>
+      </div>
+    </div>
+  </body>
+</html>

package/css/about.css

@@ -0,0 +1,132 @@
+/* "About the Sri Yantra" page */
+.about {
+  max-width: 720px;
+}
+.about h3 {
+  margin: 34px 0 10px;
+}
+.about p,
+.about li {
+  line-height: 1.6;
+}
+.about ul,
+.about ol {
+  padding-left: 22px;
+  margin: 8px 0 16px;
+}
+.about li {
+  margin-bottom: 8px;
+}
+#omg-header h1 a {
+  color: inherit;
+  text-decoration: none;
+}
+/* the dark theme renders <strong> at normal weight */
+.about strong {
+  font-weight: bold;
+}
+
+/* primer: "What is the Sri Yantra?" + origins content, themed via the site's variables */
+.primer .lede {
+  font-size: 1.15em;
+  opacity: 0.9;
+}
+.primer .sanskrit {
+  font-style: italic;
+  color: var(--accent, #ffa500);
+}
+.primer .anatomy {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 18px;
+  margin: 0 0 20px;
+  padding: 14px 0;
+  border-block: 1px solid var(--card-border);
+}
+.primer .anatomy dt {
+  font-weight: bold;
+  color: var(--card-strong); /* black in the light theme, white in the dark ones */
+}
+.primer .anatomy dd {
+  margin: 0 0 10px;
+  opacity: 0.85;
+}
+
+.primer .enclosures {
+  padding-left: 0;
+  list-style: none;
+  counter-reset: enc;
+}
+.primer .enclosures li {
+  counter-increment: enc;
+  padding: 10px 0 10px 2.4em;
+  position: relative;
+  border-top: 1px solid var(--card-border);
+}
+.primer .enclosures li:last-child {
+  border-bottom: 1px solid var(--card-border);
+}
+.primer .enclosures li::before {
+  content: counter(enc);
+  position: absolute;
+  left: 0;
+  top: 10px;
+  width: 1.7em;
+  height: 1.7em;
+  line-height: 1.7em;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid var(--card-border);
+  font-size: 0.8em;
+  font-weight: bold;
+}
+.primer .enclosures .sa {
+  font-weight: bold;
+  color: var(--card-strong);
+}
+.primer .enclosures .en {
+  opacity: 0.85;
+}
+
+.primer .timeline {
+  list-style: none;
+  margin: 0 0 22px;
+  padding: 0;
+}
+.primer .timeline li {
+  display: grid;
+  grid-template-columns: 11rem 1fr;
+  gap: 14px;
+  margin: 0;
+  padding: 12px 0;
+  border-top: 1px solid var(--card-border);
+  font-size: 0.95em;
+  line-height: 1.55;
+}
+.primer .timeline li:last-child {
+  border-bottom: 1px solid var(--card-border);
+}
+.primer .timeline .when {
+  font-weight: bold;
+  color: var(--card-strong);
+  font-variant-numeric: tabular-nums;
+}
+@media only screen and (max-width: 480px) {
+  .primer .timeline li {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+}
+
+/* "Draw one now": a real theme button, without the default top margin so it lines up with the tagline */
+.tagline .btn-go {
+  margin: 0 0 0 8px;
+  white-space: nowrap;
+}
+
+.about .plate {
+  display: block;
+  max-width: 220px;
+  margin: 0 auto 28px;
+  border-radius: 8px;
+}

package/css/common.css

@@ -0,0 +1,305 @@
+/* Shared styles for the omg-themed apps: header, theme picker, panels,
+   controls, buttons, tabs. Each app adds its own stylesheet on top. */
+
+#omg-header {
+  z-index: 450;
+}
+
+/* Theme toggle + GitHub link as one row, anchored top right (core.css
+   normally anchors #omg-theme-picker there directly; "static" here lets it
+   sit inline instead, with the 20px gap coming from the flex row). */
+#omg-header-tools {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+#omg-header-tools #omg-theme-picker {
+  position: static;
+}
+
+/* GitHub link, same look as the theme toggle's icons */
+#omg-github {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  opacity: 0.75;
+}
+#omg-github svg {
+  width: 28px; /* same size in every theme (the themes' generic svg rule differs) */
+  height: 28px;
+}
+html[data-theme="evol-blue"] #omg-github svg {
+  fill: white; /* like the theme toggle icons on the blue background */
+}
+#omg-github:hover,
+#omg-github:focus-visible {
+  opacity: 1;
+}
+
+/* core.css is shared across other projects, so the theme-picker's swatch
+   styling stays untouched there -- this overrides it to render icons
+   (sun/moon/spiral, same set as react-morph-charts' ThemeToggle) instead of
+   plain colored circles, without needing to edit the shared file. */
+#omg-theme-picker {
+  gap: 2px;
+}
+#omg-theme-picker > a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  width: 28px;
+  border-radius: 50%;
+  border: 1px solid transparent;
+  background: none;
+  color: currentColor;
+  opacity: 0.75;
+}
+#omg-theme-picker > a:hover,
+#omg-theme-picker > a.selected {
+  opacity: 1;
+}
+
+h1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tagline {
+  opacity: 0.85;
+  margin: 0 0 20px;
+  max-width: 680px;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* The themes ship a generic svg rule (22px, tan fill, orange on hover) meant
+   for icons; drawings opt out of it with the "plain" class. */
+svg.plain {
+  display: block;
+  width: 100%;
+  height: auto;
+  fill: none;
+  cursor: inherit;
+}
+svg.plain:hover {
+  fill: none;
+}
+
+/* Layout: a stage next to a panel of controls, stacked on narrow screens */
+.layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 24px;
+  margin: 10px 0 20px;
+}
+.stage {
+  flex: 1 1 420px;
+  min-width: 0;
+  max-width: 720px;
+}
+.side {
+  flex: 1 1 280px;
+  min-width: 0;
+  max-width: 420px;
+}
+.panel {
+  box-sizing: border-box;
+  background-color: var(--card-bg);
+  border: 3px solid var(--card-border);
+  border-radius: 10px;
+  padding: 14px 18px 16px;
+  margin: 0 0 16px;
+}
+.panel h3 {
+  margin: 0 0 10px;
+  font-size: 0.8em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.8;
+  font-weight: normal;
+}
+
+/* Controls */
+.ctl {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 2px 10px;
+  margin: 0 0 12px;
+  font-size: 0.9em;
+}
+.ctl label {
+  opacity: 0.9;
+}
+.ctl .val {
+  font-variant-numeric: tabular-nums;
+  opacity: 0.85;
+}
+.ctl input[type="range"] {
+  grid-column: 1 / -1;
+  width: 100%;
+  padding: 0;
+  margin: 4px 0 0;
+  accent-color: #ffa500;
+  background: none;
+  border: none;
+}
+.ctl select,
+.ctl input[type="number"],
+.ctl input[type="text"],
+.ctl input[type="date"] {
+  grid-column: 1 / -1;
+  width: 100%;
+  box-sizing: border-box;
+}
+.opt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+  font-size: 0.9em;
+  cursor: pointer;
+}
+.opt input {
+  width: 1.1em;
+  height: 1.1em;
+  padding: 0;
+  accent-color: #ffa500;
+}
+
+.btns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.btns button,
+.chips button {
+  margin: 0;
+}
+button.ghost,
+.chips button {
+  background-color: transparent;
+  color: inherit;
+  border: 2px solid var(--card-border);
+}
+button.ghost:hover,
+button.ghost:focus,
+.chips button:hover,
+.chips button:focus {
+  background-color: var(--card-bg);
+  border-color: color-mix(in srgb, var(--card-border), white 40%);
+}
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 12px;
+}
+.chips button {
+  line-height: 1.2;
+  padding: 6px 12px;
+}
+.chips button.selected,
+.chips button[aria-pressed="true"] {
+  background-color: var(--card-bg);
+  border-color: #ffa500;
+}
+button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.btns.tight {
+  gap: 6px;
+}
+
+/* Tabs */
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 16px;
+}
+.tabs button {
+  margin: 0;
+  background-color: transparent;
+  color: inherit;
+  border: 2px solid var(--card-border);
+  border-radius: 10px;
+}
+.tabs button:hover,
+.tabs button:focus {
+  background-color: var(--card-bg);
+}
+.tabs button.selected {
+  background-color: var(--card-bg);
+  border-color: #ffa500;
+}
+
+/* Small stat tiles */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 10px;
+  margin: 0 0 16px;
+}
+.stat {
+  border: 2px solid var(--card-border);
+  border-radius: 10px;
+  padding: 8px 12px;
+}
+.stat .k {
+  font-size: 0.7em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.75;
+}
+.stat .v {
+  font-size: 1.15em;
+  font-weight: bold;
+  color: var(--card-strong);
+  font-variant-numeric: tabular-nums;
+  word-break: break-all;
+}
+.note {
+  font-size: 0.85em;
+  opacity: 0.8;
+  max-width: 680px;
+  line-height: 1.45;
+}
+.footer {
+  margin-top: 40px;
+}
+.footer p {
+  margin: 0 0 6px;
+  line-height: 1.5;
+}
+.footer p.copyright {
+  margin-top: 20px;
+}
+
+@media only screen and (max-width: 560px) {
+  h1 {
+    font-size: 1.6rem;
+    padding-right: 125px;
+    white-space: normal;
+    overflow: visible;
+  }
+  .panel {
+    padding: 12px 14px 14px;
+  }
+}