:root {
    --ink: #29262f;
    --muted: #85808d;
    --line: #e9e5eb;
    --paper: #fbfaf8;
    --card: #fff;
    --violet: #8756c7;
    --violet-deep: #60359b;
    --lavender: #c5a4ee;
    --gold: #e8bd54;
    --green: #319465;
    --shadow: 0 10px 30px rgba(44, 28, 63, 0.08);
  }

  * { box-sizing: border-box; }

  html, body { height: 100%; margin: 0; }

  body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--paper);
    color: var(--ink);
    overflow: hidden;
  }

  button, select, input { font: inherit; }
  button { cursor: pointer; }
  button:focus-visible, select:focus-visible, input:focus-visible {
    outline: 2px solid #8a5dc5;
    outline-offset: 2px;
  }

  .app {
    height: 100dvh;
    min-height: 550px;
    display: flex;
    flex-direction: column;
  }

  .topbar {
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    gap: 18px;
  }

  .music-player {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
  }

  .music-player summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid #e8def2;
    border-radius: 10px;
    background: #f6f0fb;
    color: #7045a6;
    font-size: 11px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
  }

  .music-player summary::-webkit-details-marker {
    display: none;
  }

  .music-player summary:focus-visible {
    outline: 2px solid #8a5dc5;
    outline-offset: 2px;
  }

  .music-player summary:hover,
  .music-player[open] summary {
    border-color: #cdb8e4;
    background: #eee4f8;
  }

  .music-player-popover {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    right: 0;
    width: min(370px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid #e8def2;
    border-radius: 13px;
    background: rgba(255, 255, 255, .98);
    box-shadow: var(--shadow);
  }

  .music-player-popover iframe {
    display: block;
    width: 100%;
    height: 42px;
    border: 0;
  }

  .music-player-popover p {
    margin: 8px 1px 0;
    color: #81758b;
    font-size: 10px;
    line-height: 1.45;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 230px;
  }

  .brand-mark {
    height: 34px;
    width: 34px;
    border-radius: 11px;
    background: linear-gradient(145deg, #a985dd, #7650b6);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 5px 12px #825ab533;
    font-size: 20px;
  }

  .brand h1 {
    font-size: 14px;
    margin: 0;
    font-weight: 750;
    letter-spacing: -0.025em;
  }

  .brand p {
    font-size: 10px;
    color: var(--muted);
    margin: 3px 0 0;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .top-note {
    font-size: 12px;
    color: #827b8a;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .top-note .dot {
    height: 7px;
    width: 7px;
    background: #9b7bd0;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #f0e9fb;
  }

  .workspace {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
    transition: grid-template-columns 0.22s ease;
  }

  .sidebar {
    min-height: 0;
    overflow: auto;
    border-right: 1px solid var(--line);
    background: #fff;
    padding: 18px 15px;
    display: flex;
    flex-direction: column;
  }

  .sidebar-toggle {
    align-self: flex-end;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: -7px -7px 9px 0;
    border: 1px solid #e4d5f3;
    border-radius: 8px;
    background: #f2e9fb;
    color: #7045a6;
    line-height: 1;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  }

  .sidebar-toggle-icon {
    font-size: 20px;
    line-height: 1;
  }

  .sidebar-toggle:hover {
    border-color: #cdb9e6;
    background: #faf7fd;
    color: var(--violet-deep);
  }

  .sidebar-content {
    min-width: 0;
  }

  .workspace.sidebar-collapsed {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .workspace.sidebar-collapsed .sidebar {
    align-items: center;
    overflow: hidden;
    padding: 12px 6px;
  }

  .workspace.sidebar-collapsed .sidebar-toggle {
    align-self: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
    border-color: #e4d5f3;
    border-radius: 8px;
    background: #f2e9fb;
    color: #7045a6;
    box-shadow: 0 2px 6px #7650b31f;
  }

  .workspace.sidebar-collapsed .sidebar-toggle:hover {
    border-color: #c7a9e4;
    background: #e9dcf7;
    color: #60359b;
  }

  .workspace.sidebar-collapsed .sidebar-toggle-icon {
    font-size: 20px;
  }

  .workspace.sidebar-collapsed .sidebar-content {
    display: none;
  }

  .preset-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    background: #f5f2f8;
    border: 1px solid #eee9f2;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 17px;
  }

  .preset,
  .mini-btn,
  .control-btn,
  .graph-actions button,
  .romance-btn,
  .letter-close {
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  }

  .preset {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 10px 5px;
    color: #6d6675;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
  }

  .preset.active {
    background: #fff;
    color: var(--violet-deep);
    box-shadow: 0 2px 8px #30214412;
  }

  .subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 11px;
  }

  .subhead h2 {
    font-size: 12px;
    margin: 0;
    letter-spacing: 0.01em;
  }

  .equation-count {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: #a09aa6;
  }

  .bulk-actions {
    display: flex;
    gap: 7px;
    margin-bottom: 12px;
  }

  .mini-btn {
    border: 1px solid #eae5ee;
    background: #faf9fb;
    color: #6d6577;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 650;
  }

  .mini-btn:hover {
    border-color: #cdb9e6;
    color: var(--violet-deep);
  }

  .equation-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .eq-card {
    --mark: #8c61c6;
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 12px 12px 13px;
    border: 1px solid #eae7ed;
    border-radius: 13px;
    background: #fff;
    text-align: left;
    box-shadow: 0 2px 7px #33243e05;
  }

  .eq-card--petals { --mark: #8d60c9; }
  .eq-card--inner { --mark: #b38ade; }
  .eq-card--veins { --mark: #65409a; }
  .eq-card--pollen { --mark: #e6ba4f; }
  .eq-card--stem { --mark: #319465; }
  .eq-card--left-leaf { --mark: #68b987; }
  .eq-card--right-leaf { --mark: #4a9e70; }

  .eq-card:hover {
    border-color: #d0c0e4;
    transform: translateY(-1px);
  }

  .eq-card.off {
    background: #faf9fb;
    opacity: 0.58;
  }

  .eq-card.off .eq-math {
    text-decoration: line-through;
    text-decoration-color: #cec6d8;
  }

  .eq-mark {
    height: 22px;
    width: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-top: 1px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    background: var(--mark, #8c61c6);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--mark, #8c61c6) 28%, transparent);
  }

  .eq-card.off .eq-mark {
    background: #c7c1cc;
  }

  .eq-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 680;
    color: #5c5664;
    margin: 0 0 8px;
  }

  .eq-num {
    font-size: 9px;
    color: #aaa3b0;
    font-weight: 600;
  }

  .eq-math {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    text-align: center;
    line-height: 1.55;
    color: #37313f;
    letter-spacing: 0.005em;
    overflow-wrap: anywhere;
  }

  .eq-math small { font-size: 12px; }

  .eq-foot {
    display: block;
    color: #a09aa5;
    font-size: 10px;
    line-height: 1.4;
    margin-top: 9px;
  }
  .sidebar-footer{margin-top:16px;padding:13px 14px;border:1px dashed #ddd2e9;border-radius:12px;background:linear-gradient(120deg,#fcf9ff,#fff);font-size:11px;color:#786d83;line-height:1.55}
  .sidebar-footer strong{color:#69469a}
  .stage{position:relative;min-width:0;min-height:0;background-color:#fff;background-image:linear-gradient(#f1eff4 1px,transparent 1px),linear-gradient(90deg,#f1eff4 1px,transparent 1px);background-size:39px 39px;overflow:hidden}
  #plot{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
  .plot-top-controls{position:absolute;right:19px;top:17px;display:flex;align-items:center;gap:7px;padding:8px;border:1px solid #efebf2;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
  .control-btn{height:38px;min-width:38px;border-radius:11px;border:1px solid #e9e4ed;background:#fff;color:#746b7f;display:grid;place-items:center;font-size:15px;transition:.15s}
  .control-btn:hover{border-color:#c6b0e1;color:#69429d}
  .control-btn.primary{background:#8756c7;border-color:#8756c7;color:white;box-shadow:0 3px 8px #8756c733}
  .control-btn svg{height:16px;width:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .control-divider{width:1px;height:26px;background:#ede8f1;margin:0 2px}
  .speed-box{padding:0 8px;min-width:108px}
  .speed-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#a19aa8;margin-bottom:3px}
  .speed-select{width:100%;border:0;background:transparent;outline:none;color:#625b6b;font-size:11px;font-weight:700;cursor:pointer}
  .graph-actions{position:absolute;right:20px;bottom:20px;display:flex;flex-direction:column;gap:6px;padding:6px;background:rgba(255,255,255,.93);border:1px solid #ece7f0;border-radius:13px;box-shadow:var(--shadow)}
  .graph-actions button{height:34px;width:34px;border:0;background:transparent;border-radius:8px;color:#867e90;font-size:18px}
  .graph-actions button:hover{background:#f5effb;color:#7952b0}
  .graph-actions .home{border-top:1px solid #eee8f1;border-radius:0 0 8px 8px;font-size:15px}
  .legend{position:absolute;left:18px;top:18px;background:rgba(255,255,255,.9);border:1px solid #efebf2;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:10px;color:#8b8492;box-shadow:0 3px 12px #2f1d3a08;max-width:min(390px,calc(100% - 36px))}
  .legend-title{display:flex;align-items:center;gap:7px}
  .legend-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#9a78d2}
  .frame-equation{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:-.025em;color:#7953a6;white-space:normal;line-height:1.35}
  .control-btn.math-on{background:#f4edfc;border-color:#cdb8e7;color:#7145a8}
  .control-btn.math-on:hover{background:#eee2fb}
  .timebar{position:absolute;bottom:0;left:0;right:0;min-height:59px;border-top:1px solid #eeeaf1;background:rgba(255,255,255,.94);display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:14px;padding:10px 17px;backdrop-filter:blur(10px)}
  .time-title{font-size:11px;font-weight:700;color:#736b7c;white-space:nowrap}
  .time-value{font-size:11px;color:#8e60c3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
  input[type=range]{width:100%;accent-color:#8a5dc5;cursor:pointer}
  .hint{position:absolute;left:18px;bottom:76px;color:#aaa3af;font-size:10px;pointer-events:none}
  .mobile-title{display:none}
  @media(max-width:850px){body{overflow:auto}.app{height:auto;min-height:100dvh}.topbar{padding:0 14px}.top-note{display:none}.workspace{display:flex;flex-direction:column;overflow:visible}.sidebar{order:2;border-right:0;border-top:1px solid var(--line);overflow:visible;padding:14px}.workspace.sidebar-collapsed .sidebar{order:0;align-items:stretch;overflow:hidden;padding:6px 10px}.workspace.sidebar-collapsed .sidebar-toggle{align-self:flex-start;margin:0}.stage{order:1;height:64vh;min-height:430px}.legend{left:10px;top:10px}.plot-top-controls{top:10px;right:10px}.graph-actions{right:10px;bottom:72px}.timebar{padding:9px 12px;gap:9px}.time-title{font-size:10px}.hint{display:none}.eq-card{padding:12px}.sidebar-footer{margin-bottom:10px}}
  @media(max-width:450px){.brand h1{font-size:12px}.brand p{font-size:9px}.brand{min-width:0}.stage{height:58vh;min-height:380px}.plot-top-controls{gap:4px;padding:5px}.control-btn{height:34px;min-width:34px}.speed-box{min-width:78px;padding:0 4px}.speed-select{font-size:10px}.timebar{grid-template-columns:1fr auto;row-gap:4px}.time-title{grid-column:1}.timebar input{grid-column:1/-1;grid-row:2}.time-value{grid-column:2;grid-row:1}}

  /* Romantic ending */
  .finale-screen[hidden]{display:none!important}
  .finale-screen{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:22px;background:linear-gradient(145deg,rgba(47,24,67,.16),rgba(108,72,145,.27));backdrop-filter:blur(5px);animation:curtainIn .9s ease both}
  .finale-card{position:relative;max-width:430px;width:min(100%,430px);padding:clamp(24px,4vw,38px);text-align:center;border:1px solid rgba(255,255,255,.82);border-radius:26px;background:rgba(255,252,255,.94);box-shadow:0 22px 80px rgba(41,20,59,.22);overflow:hidden}
  .finale-card:before,.finale-card:after{content:'✧';position:absolute;color:#bfa0e7;font-size:22px;opacity:.8}
  .finale-card:before{left:19px;top:15px}.finale-card:after{right:21px;bottom:18px}
  .finale-flower{width:88px;height:88px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 12%,#f3e9ff 72%);animation:flowerFloat 3.8s ease-in-out infinite}
  .bouquet-mark{width:57px;height:57px;overflow:visible}
  .finale-eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:#9679b6;font-weight:800}
  .finale-card h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(27px,4vw,38px);line-height:1.12;letter-spacing:-.03em;color:#52366f;margin:0 0 11px;font-weight:500}
  .finale-card p{font-size:13px;line-height:1.75;color:#7c7086;margin:0 auto 22px;max-width:310px}
  .finale-card .finale-quote{margin:0 auto 22px;max-width:340px}
  .finale-quote p{font-family:Georgia,'Times New Roman',serif;font-size:15px;line-height:1.8;color:#6f5a7e;margin:0 auto}
  .finale-quote footer{display:flex;flex-direction:column;gap:5px;margin-top:30px;color:#9679a8;font-size:11px;letter-spacing:.06em}
  .finale-quote cite{font-family:Georgia,'Times New Roman',serif;font-size:14px;font-style:italic;color:#674489;letter-spacing:0}
  .finale-quote footer span{font-size:10px}
  .romance-btn{border:0;border-radius:999px;padding:13px 21px;color:#fff;background:linear-gradient(135deg,#9b71cc,#7146a6);box-shadow:0 7px 18px #8251b533;font-size:12px;font-weight:750;letter-spacing:.015em;transition:transform .18s,box-shadow .18s}
  .romance-btn:hover{transform:translateY(-2px);box-shadow:0 10px 23px #8251b544}
  .romance-btn.secondary{background:#f5effa;color:#76529c;box-shadow:none;border:1px solid #e6d9f2}
  .finale-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
  @keyframes curtainIn{from{opacity:0}to{opacity:1}}
  @keyframes flowerFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
  @media(max-width:600px){.finale-screen{padding:13px}.finale-card{padding:28px 21px;border-radius:22px}.finale-flower{width:72px;height:72px}.bouquet-mark{width:48px;height:48px}}
  @media(prefers-reduced-motion:reduce){.finale-screen,.finale-flower{animation:none!important}.romance-btn{transition:none}}