STYLE

style.css

@@ -1,28 +1,486 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+
+
+      /* Color-blind–safe palette */
+      :root {
+        --bg: #0b1020;
+        --ink: #eaf0ff;
+        --muted: #a6b0d4;
+        --card: #121933;
+        --accent: #0072b2; /* blue */
+        --accent2: #56b4e9; /* sky blue */
+
+        /* Status colors */
+        --ok: #009e73; /* bluish green */
+        --warn: #f0e442; /* yellow */
+        --no: #d55e00; /* vermillion */
+
+        --br: 14px;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial,
+          sans-serif;
+        color: var(--ink);
+        background: radial-gradient(
+              900px 500px at 20% -10%,
+              #1b2656,
+              transparent 60%
+            )
+            no-repeat,
+          var(--bg);
+      }
+      header {
+        padding: 22px 16px 8px;
+        text-align: center;
+      }
+      h1 {
+        margin: 0 0 4px;
+        font-size: clamp(20px, 2.2vw, 30px);
+        font-weight: 800;
+      }
+      header p {
+        margin: 0;
+        color: var(--muted);
+      }
+      .wrap {
+        max-width: 980px;
+        margin: 14px auto 80px;
+        padding: 0 14px;
+      }
+      .card {
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.04),
+          rgba(255, 255, 255, 0.02)
+        );
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: var(--br);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+      }
+      .section {
+        padding: 16px;
+        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
+        transition: background 0.2s ease, border-color 0.2s ease,
+          box-shadow 0.2s ease, transform 0.2s ease;
+        will-change: transform, box-shadow;
+      }
+      .section:last-child {
+        border-bottom: 0;
+      }
+      /* Hover highlight for any top-level section */
+      .card .section:hover,
+      .card .section:focus-within {
+        background: linear-gradient(
+          180deg,
+          rgba(22, 30, 60, 0.92),
+          rgba(18, 26, 52, 0.92)
+        );
+        border-color: rgba(86, 180, 233, 0.35);
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+        transform: translateY(-1px);
+      }
+
+      /* sticky nav */
+      .topnav {
+        position: sticky;
+        top: 0;
+        z-index: 5;
+        background: rgba(11, 16, 32, 0.7);
+        backdrop-filter: blur(8px);
+        padding: 10px 14px;
+      }
+      .toprow {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .progress {
+        height: 10px;
+        border-radius: 999px;
+        background: #17224a;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        flex: 1;
+      }
+      .progress > span {
+        display: block;
+        height: 100%;
+        width: 0;
+        background: linear-gradient(90deg, var(--ok));
+        transition: width 0.6s ease;
+      }
+      .clear {
+        margin-left: auto;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        background: rgba(255, 255, 255, 0.06);
+        color: #fff;
+        border-radius: 10px;
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: transform 0.15s ease, background 0.15s ease;
+      }
+      .clear:hover {
+        background: rgba(255, 255, 255, 0.12);
+        transform: translateY(-1px);
+      }
+      .graph {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+        margin-top: 10px;
+        flex-wrap: wrap;
+      }
+      .dot {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: #101a3f;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        color: #cfe0ff;
+        font-weight: 800;
+        opacity: 0.45;
+        transition: 0.2s;
+        will-change: transform, box-shadow;
+      }
+      .dot.unlocked {
+        opacity: 1;
+        cursor: pointer;
+      }
+      .dot.active {
+        outline: 2px solid var(--accent);
+      }
+      .dot.unlocked:hover {
+        transform: translateY(-2px) scale(1.05);
+        border-color: var(--accent2);
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+      }
+      .dot.done {
+        background: var(--ok);
+        color: #ffffff;
+        border-color: transparent;
+      }
+      .dot.done::after {
+        content: "✓";
+        position: absolute;
+        right: -4px;
+        bottom: -6px;
+        font-size: 12px;
+        background: var(--ok);
+        color: #fff;
+        border-radius: 6px;
+        padding: 0 3px;
+      }
+
+      /* purpose */
+      .purpose {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        gap: 10px;
+      }
+      .option {
+        padding: 14px;
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        background: rgba(255, 255, 255, 0.02);
+        cursor: pointer;
+        user-select: none;
+        transition: 0.2s transform, 0.2s border-color, 0.2s background,
+          box-shadow 0.2s ease;
+      }
+      .option:hover {
+        transform: translateY(-2px);
+        border-color: rgba(255, 255, 255, 0.22);
+        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
+      }
+      .option.active {
+        outline: 2px solid var(--accent);
+        background: rgba(86, 180, 233, 0.12);
+      }
+      .option input {
+        display: none;
+      }
+      .tag {
+        font-size: 0.75rem;
+        padding: 2px 8px;
+        color: var(--muted);
+      }
+      .gdpr {
+        color: #c6ede2;
+      }
+
+      /* steps */
+      .timeline {
+        padding: 10px;
+      }
+      .step {
+        margin: 12px 6px;
+        border-radius: 14px;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        background: linear-gradient(
+          180deg,
+          rgba(16, 22, 44, 0.86),
+          rgba(14, 20, 38, 0.86)
+        );
+        overflow: hidden;
+        animation: pop 0.35s ease both;
+        transition: background 0.2s ease, border-color 0.2s ease,
+          box-shadow 0.2s ease, transform 0.2s ease;
+        will-change: transform, box-shadow;
+      }
+      @keyframes pop {
+        from {
+          opacity: 0;
+          transform: translateY(8px) scale(0.98);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+      /* Hover highlight for each step block */
+      .step:hover,
+      .step:focus-within {
+        transform: translateY(-2px);
+        border-color: rgba(86, 180, 233, 0.35);
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+        background: linear-gradient(
+          180deg,
+          rgba(20, 28, 56, 0.92),
+          rgba(18, 26, 52, 0.92)
+        );
+      }
+
+      .head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 16px;
+      }
+      .title {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .num {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(180deg, #27336a, #202a56);
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        font-weight: 800;
+        color: #ffffff;
+        transition: background 0.2s ease, border-color 0.2s ease;
+      }
+      .badge {
+        font-size: 0.85rem;
+        padding: 4px 8px;
+        border-radius: 999px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        color: #cde6ff;
+        background: transparent;
+        transition: background 0.2s ease, color 0.2s ease,
+          border-color 0.2s ease;
+      }
+      .step.done {
+        border-color: rgba(0, 158, 115, 0.55);
+        box-shadow: 0 0 0 1px rgba(0, 158, 115, 0.25) inset;
+      }
+      .step.done .num {
+        background: var(--ok);
+        border-color: transparent;
+        color: #ffffff;
+      }
+      .step.done .badge {
+        background: var(--ok);
+        color: #ffffff;
+        border-color: transparent;
+      }
+      .body {
+        padding: 0 16px 14px;
+      }
+      .list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      .li {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 10px;
+        align-items: flex-start;
+        padding: 10px;
+        border: 1px dashed rgba(255, 255, 255, 0.14);
+        border-radius: 10px;
+        margin: 8px 0;
+        background: rgba(255, 255, 255, 0.02);
+        transition: background 0.15s ease, border-color 0.15s ease,
+          transform 0.15s ease;
+      }
+      .li:hover {
+        background: rgba(86, 180, 233, 0.08);
+        border-color: rgba(86, 180, 233, 0.35);
+        transform: translateY(-1px);
+      }
+      .letters {
+        font-weight: 700;
+        color: #cbe0ff;
+        width: 24px;
+      }
+      .li a {
+        color: var(--accent2);
+        text-decoration: none;
+      }
+      .li a:hover {
+        text-decoration: underline;
+      }
+      .req {
+        color: var(--no);
+        margin-left: 6px;
+      }
+      .opt {
+        color: #a9b6e6;
+        font-size: 0.85rem;
+      }
+      .fold {
+        display: none;
+      }
+      .toggle {
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        color: #dfe7ff;
+        border-radius: 10px;
+        padding: 6px 10px;
+        cursor: pointer;
+        transition: background 0.15s ease, transform 0.15s ease,
+          border-color 0.15s ease;
+      }
+      .toggle:hover {
+        background: rgba(86, 180, 233, 0.12);
+        transform: translateY(-1px);
+        border-color: rgba(86, 180, 233, 0.35);
+      }
+
+      /* animated checkbox */
+      .chk {
+        position: absolute;
+        opacity: 0;
+      }
+      .box {
+        width: 22px;
+        height: 22px;
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.22);
+        background: #0f1533;
+      }
+      .tick {
+        stroke: #cfe0ff;
+        stroke-width: 3;
+        fill: none;
+        stroke-dasharray: 30;
+        stroke-dashoffset: 30;
+        transition: stroke-dashoffset 0.32s ease;
+      }
+      .chk:checked + .box {
+        background: #1e396e;
+        border-color: var(--accent);
+      }
+      .chk:checked + .box .tick {
+        stroke-dashoffset: 0;
+      }
+
+      .tiny {
+        font-size: 0.82rem;
+        color: var(--muted);
+      }
+      .center {
+        display: grid;
+        place-items: center;
+      }
+      .hidden {
+        display: none !important;
+      }
+
+      /* flow buttons */
+      .flow {
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 16px;
+        width: min(960px, 92vw);
+        background: #0f1533;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 14px;
+        padding: 10px 12px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+      }
+      .q {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .q strong {
+        font-size: 1rem;
+      }
+      .btns {
+        display: flex;
+        gap: 10px;
+      }
+      .cta {
+        font-weight: 800;
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        padding: 12px 16px;
+        cursor: pointer;
+        transition: transform 0.15s ease, filter 0.15s ease;
+      }
+      .cta:hover {
+        transform: translateY(-1px);
+        filter: brightness(1.05);
+      }
+      .cta.y {
+        background: linear-gradient(180deg, var(--ok));
+      }
+      .cta.n {
+        background: linear-gradient(180deg, var(--no));
+      }
+
+      /* finish */
+      .finish {
+        display: none;
+        text-align: center;
+        padding: 18px;
+      }
+      .finish.show {
+        display: block;
+        animation: pop 0.35s ease both;
+      }
+      .confetti {
+        position: relative;
+        height: 0;
+      }
+      .confetti i {
+        position: absolute;
+        width: 8px;
+        height: 14px;
+        background: var(--accent);
+        top: -10px;
+        left: 50%;
+        animation: drop 1.2s ease-out forwards;
+        transform: translateX(-50%);
+      }
+      @keyframes drop {
+        to {
+          top: -90px;
+          transform: translateX(calc(-50% + var(--dx))) rotate(120deg);
+        }
+      }