:root{
    --bg-0:#070A0F;
    --bg-1:#0A1020;
    --surface:rgba(255,255,255,.06);
    --surface-2:rgba(255,255,255,.08);
    --stroke:rgba(255,255,255,.14);
    --stroke-2:rgba(255,255,255,.22);

    --text:#EAF0FF;
    --muted:rgba(234,240,255,.70);

    --ring:#7AE7FF;
    --ring-glow:rgba(122,231,255,.28);
    --focus:#7AE7FF;
    --focus-glow:rgba(122,231,255,.25);

    --sugar:#AEEBFF;
    --sugar-fill:rgba(174,235,255,.10);

    --phos:#D57BFF;
    --warn:#FF4D6D;

    --num-normal:rgba(234,240,255,.45);
    --highlight:#FFF1B8;

    --r-lg:18px;
    --r-md:14px;
    --r-sm:12px;

    --ease:cubic-bezier(.2,.8,.2,1);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-0);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans TC",Arial,sans-serif;
}

html {
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

html, body {
    min-height: 100%;
}

body{
    min-height:100dvh;
    overflow:hidden;
    color:var(--text);
    background:
        radial-gradient(900px 600px at 20% 20%, rgba(122,231,255,.10), transparent 60%),
        radial-gradient(800px 500px at 80% 30%, rgba(213,123,255,.10), transparent 60%),
        radial-gradient(900px 600px at 50% 80%, rgba(255,197,90,.08), transparent 60%),
        linear-gradient(180deg, var(--bg-1), var(--bg-0));
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

body[data-ui-theme="light"]{
    --bg-0:#C8B8A0;
    --bg-1:#E8DCCD;
    --surface:rgba(15,24,40,.12);
    --surface-2:rgba(15,24,40,.18);
    --stroke:rgba(15,24,40,.18);
    --stroke-2:rgba(15,24,40,.28);
    --text:#101B2B;
    --muted:rgba(16,27,43,.72);
    --num-normal:rgba(16,27,43,.60);
    --highlight:#C98A1C;
    background:
        radial-gradient(1120px 740px at 16% 18%, rgba(95,164,186,.20), transparent 54%),
        radial-gradient(980px 720px at 82% 18%, rgba(184,132,171,.17), transparent 56%),
        radial-gradient(980px 780px at 50% 86%, rgba(204,160,64,.28), transparent 54%),
        linear-gradient(180deg, var(--bg-1), #D6C6B1 54%, var(--bg-0));
}

.floating-tools{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 16px);
    right:calc(env(safe-area-inset-right, 0px) + 16px);
    z-index:140;
    display:flex;
    align-items:center;
    gap:10px;
}

.page-dock{
    position:fixed;
    right:calc(env(safe-area-inset-right, 0px) + 16px);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index:140;
}

.language-switch{
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(18,24,40,.92), rgba(10,14,24,.82));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 14px 34px rgba(0,0,0,.32), 0 0 18px rgba(122,231,255,.16);
    backdrop-filter:blur(12px);
}

.page-switch{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
    min-width:170px;
    padding:6px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(15,18,24,.96), rgba(8,10,14,.90));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(16px) saturate(.55);
}

.language-btn{
    min-width:54px;
    height:38px;
    padding:0 14px;
    display:grid;
    place-items:center;
    border:none;
    border-radius:999px;
    background:transparent;
    color:rgba(234,240,255,.72);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    cursor:pointer;
    transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
    -webkit-tap-highlight-color:transparent;
}

.page-link{
    min-width:74px;
    height:40px;
    padding:0 16px;
    display:grid;
    place-items:center;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    color:rgba(255,255,255,.56);
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-decoration:none;
    text-transform:uppercase;
    transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
    -webkit-tap-highlight-color:transparent;
}

.page-link:hover{
    color:rgba(255,255,255,.88);
    border-color:rgba(255,255,255,.16);
    transform:translateY(-1px);
}

.language-btn:hover{
    color:rgba(255,255,255,.96);
    transform:translateY(-1px);
}

.page-link:focus-visible{
    outline:2px solid rgba(255,255,255,.68);
    outline-offset:3px;
}

.language-btn:focus-visible{
    outline:2px solid var(--highlight);
    outline-offset:3px;
}

.page-link.is-active{
    color:#0B0E12;
    border-color:rgba(255,255,255,.72);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(222,226,232,.88));
    box-shadow:0 10px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.72);
}

.language-btn.is-active{
    color:rgba(255,255,255,.98);
    background:linear-gradient(180deg, rgba(122,231,255,.24), rgba(122,231,255,.10));
    box-shadow:inset 0 0 0 1px rgba(122,231,255,.28), 0 8px 18px rgba(0,0,0,.18);
}

body[data-ui-theme="light"] .language-switch{
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,238,229,.88));
    border-color:rgba(20,34,51,.12);
    box-shadow:0 14px 32px rgba(148,111,48,.18), 0 0 20px rgba(255,209,102,.14);
}

body[data-ui-theme="light"] .language-btn{
    color:rgba(24,36,55,.72);
}

body[data-ui-theme="light"] .language-btn:hover{
    color:#0F1B2A;
}

body[data-ui-theme="light"] .language-btn.is-active{
    color:#0F1B2A;
    background:linear-gradient(180deg, rgba(122,231,255,.28), rgba(122,231,255,.12));
    box-shadow:inset 0 0 0 1px rgba(28,39,58,.10), 0 8px 18px rgba(148,111,48,.14);
}

body[data-ui-theme="light"] .page-switch{
    background:linear-gradient(180deg, rgba(17,20,27,.92), rgba(7,9,13,.88));
    border-color:rgba(255,255,255,.20);
    box-shadow:0 18px 36px rgba(95,74,34,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

body[data-ui-theme="light"] .page-link{
    color:rgba(255,255,255,.60);
}

body[data-ui-theme="light"] .page-link:hover{
    color:rgba(255,255,255,.90);
}

body[data-ui-theme="light"] .page-link.is-active{
    color:#0B0E12;
    border-color:rgba(255,255,255,.76);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(228,232,237,.90));
    box-shadow:0 10px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.72);
}

.theme-toggle{
    position:relative;
    width:46px;
    height:46px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:none;
    border-radius:999px;
    cursor:pointer;
    color:rgba(255,244,194,.96);
    background:linear-gradient(180deg, rgba(18,24,40,.92), rgba(10,14,24,.82));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 14px 34px rgba(0,0,0,.32), 0 0 22px rgba(255,209,102,.22);
    backdrop-filter:blur(12px);
    transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
    -webkit-tap-highlight-color:transparent;
}

.theme-toggle:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 16px 38px rgba(0,0,0,.36), 0 0 28px rgba(255,209,102,.28);
}

.theme-toggle:focus-visible{
    outline:2px solid var(--highlight);
    outline-offset:3px;
}

.theme-toggle svg{
    width:22px;
    height:22px;
}

.theme-toggle[data-theme="light"]{
    color:#D78A00;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,238,229,.88));
    border:1px solid rgba(20,34,51,.12);
    box-shadow:0 14px 32px rgba(148,111,48,.18), 0 0 20px rgba(255,209,102,.34);
}

body[data-ui-theme="light"] .theme-toggle{
    color:#D78A00;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,238,229,.88));
    border:1px solid rgba(20,34,51,.12);
    box-shadow:0 14px 32px rgba(148,111,48,.18), 0 0 20px rgba(255,209,102,.30);
}

#app-shell{
    position:relative;
    width:100%;
    display:flex;
    align-items:inherit;
    justify-content:inherit;
}

#particle-canvas{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:30;
}

.container{
    position:relative;
    z-index:2;
    width:min(1200px,94vw);
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(340px, 430px);
    grid-template-areas:"stage controls";
    gap:24px;
    align-items:start;
    margin:0 auto;
}

.stage-wrapper{
    grid-area:stage;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    min-width:0;
}

.stage{
    position:relative;
    width:520px;
    height:520px;
    display:grid;
    place-items:center;
    overflow:visible;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
    box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
    transition:transform .35s var(--ease);
}

body[data-ui-theme="light"] .stage{
    background:
        radial-gradient(circle at 30% 18%, rgba(255,247,236,.40), transparent 32%),
        radial-gradient(circle at 48% 44%, rgba(244,230,210,.24), transparent 46%),
        radial-gradient(circle at 50% 58%, rgba(208,193,174,.34), transparent 66%),
        linear-gradient(180deg, rgba(232,222,208,.98), rgba(205,191,173,.98));
    border-color:rgba(28,39,58,.22);
    box-shadow:
        0 34px 84px rgba(96,72,36,.30),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -42px 88px rgba(108,84,56,.24),
        inset 0 0 140px rgba(255,255,255,.08);
}

.stage:hover{
    transform:translateY(-2px);
}

.stage::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:999px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 35%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border:2px solid color-mix(in srgb, var(--ring) 85%, rgba(255,255,255,.25) 15%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 24px var(--ring-glow),
        0 0 60px color-mix(in srgb, var(--ring-glow) 75%, transparent);
    filter:saturate(1.05);
    pointer-events:none;
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}

body[data-ui-theme="light"] .stage::before{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.42), transparent 35%),
        linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
    border-color:color-mix(in srgb, var(--ring) 64%, rgba(28,39,58,.22) 36%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.48),
        0 0 24px color-mix(in srgb, var(--ring-glow) 76%, transparent),
        0 0 58px color-mix(in srgb, var(--ring-glow) 74%, transparent);
}

.stage::after{
    content:"";
    position:absolute;
    inset:12px;
    border-radius:999px;
    border:1px dashed rgba(255,255,255,.14);
    opacity:.55;
    pointer-events:none;
}

body[data-ui-theme="light"] .stage::after{
    border-color:rgba(28,39,58,.18);
}

#molecule-svg{
    width:92%;
    height:92%;
    filter:drop-shadow(0 0 14px color-mix(in srgb, var(--focus) 55%, transparent));
    overflow:visible;
    position:relative;
    z-index:2;
    touch-action:manipulation;
}

body[data-ui-theme="light"] #molecule-svg{
    filter:drop-shadow(0 16px 28px rgba(28,39,58,.24)) saturate(1.34) contrast(1.22) brightness(.86);
}

.interactive-hotspot{
    cursor:pointer;
}

.interactive-hotspot .hit-area{
    fill:rgba(255,255,255,.001);
    stroke:transparent;
    stroke-width:22;
    pointer-events:all;
}

.pair-bond{
    stroke-linecap:round;
    filter:drop-shadow(0 0 10px color-mix(in srgb, var(--focus) 32%, transparent));
}

.pair-zone-beacon{
    transform-box:fill-box;
    transform-origin:center center;
    animation:pairPulse 2.2s ease-in-out infinite;
}

.pair-partner-letter{
    font-weight:900;
    letter-spacing:.04em;
    text-anchor:middle;
    dominant-baseline:central;
    paint-order:stroke fill;
    stroke:color-mix(in srgb, var(--accent-tone, var(--focus)) 44%, black);
    stroke-width:2.4px;
}

.pair-reveal-zone,
.pair-reveal-letter,
.pair-reveal-bond{
    transform-box:fill-box;
    transform-origin:left center;
    animation-fill-mode:both;
}

.pair-reveal-zone{
    transform-origin:center center;
    animation:pairZoneReveal .42s cubic-bezier(.2,.8,.2,1) both;
}

.pair-reveal-letter{
    transform-origin:center center;
    animation:pairLetterReveal .44s cubic-bezier(.18,.88,.28,1) both;
}

.pair-reveal-bond{
    animation:pairBondReveal .42s cubic-bezier(.18,.88,.28,1) both;
}

@keyframes pairPulse{
    0%,100%{opacity:.34;transform:scale(.98);}
    50%{opacity:.72;transform:scale(1.03);}
}

@keyframes pairZoneReveal{
    0%{opacity:0;transform:scale(.84);}
    100%{opacity:1;transform:scale(1);}
}

@keyframes pairBondReveal{
    0%{opacity:0;transform:scaleX(.08);}
    100%{opacity:1;transform:scaleX(1);}
}

@keyframes pairLetterReveal{
    0%{opacity:0;transform:translateX(12px) scale(.94);}
    100%{opacity:1;transform:translateX(0) scale(1);}
}

.stage-tooltip{
    position:absolute;
    left:0;
    top:0;
    z-index:6;
    width:min(286px, calc(100% - 32px));
    padding:14px 16px 15px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(8,14,26,.92), rgba(8,12,22,.80));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 55px rgba(0,0,0,.45), 0 0 28px color-mix(in srgb, var(--focus) 16%, transparent);
    backdrop-filter:blur(18px);
    pointer-events:none;
    opacity:0;
    transform:translate(-50%, calc(-100% - 18px)) scale(.96);
    transition:opacity .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}

body[data-ui-theme="light"] .stage-tooltip{
    background:linear-gradient(180deg, rgba(246,238,228,.98), rgba(224,213,198,.96));
    border-color:rgba(28,39,58,.14);
    box-shadow:0 24px 48px rgba(110,80,40,.22), 0 0 26px color-mix(in srgb, var(--focus) 16%, transparent);
}

.stage-tooltip.is-visible{
    opacity:1;
    transform:translate(-50%, calc(-100% - 18px)) scale(1);
}

.stage-tooltip.is-below{
    transform:translate(-50%, 18px) scale(.96);
}

.stage-tooltip.is-below.is-visible{
    transform:translate(-50%, 18px) scale(1);
}

.stage-tooltip-kicker{
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(234,240,255,.56);
}

body[data-ui-theme="light"] .stage-tooltip-kicker{
    color:rgba(16,27,43,.58);
}

.stage-tooltip-title{
    margin-top:6px;
    font-size:18px;
    font-weight:900;
    letter-spacing:.02em;
    color:rgba(255,255,255,.96);
}

body[data-ui-theme="light"] .stage-tooltip-title{
    color:#0F1B2A;
}

.stage-tooltip-body{
    margin-top:8px;
    font-size:13px;
    line-height:1.62;
    color:rgba(234,240,255,.82);
}

body[data-ui-theme="light"] .stage-tooltip-body{
    color:rgba(15,27,42,.84);
}

.helper-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 20px 7px 8px;
    white-space:nowrap;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.18));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    color:rgba(234,240,255,.9);
    cursor:pointer;
    transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
    -webkit-tap-highlight-color:transparent;
    flex:0 0 auto;
}

body[data-ui-theme="light"] .helper-toggle{
    color:rgba(15,27,42,.92);
    background:linear-gradient(180deg, rgba(244,236,225,.98), rgba(224,212,196,.92));
    border-color:rgba(28,39,58,.14);
    box-shadow:0 14px 26px rgba(110,80,40,.18);
}

.helper-toggle:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.16);
}

.helper-toggle:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:3px;
}

.helper-toggle[data-state="on"]{
    border-color:color-mix(in srgb, var(--focus) 30%, rgba(255,255,255,.16));
    box-shadow:0 12px 26px rgba(0,0,0,.22), 0 0 18px color-mix(in srgb, var(--focus) 14%, transparent);
    background:linear-gradient(180deg, color-mix(in srgb, var(--focus) 9%, rgba(0,0,0,.22)), rgba(0,0,0,.18));
}

body[data-ui-theme="light"] .helper-toggle[data-state="on"]{
    border-color:color-mix(in srgb, var(--focus) 34%, rgba(28,39,58,.12));
    box-shadow:0 14px 28px rgba(110,80,40,.20), 0 0 22px color-mix(in srgb, var(--focus) 18%, transparent);
    background:linear-gradient(180deg, color-mix(in srgb, var(--focus) 24%, white), rgba(228,215,199,.94));
}

.helper-toggle-pill{
    position:relative;
    flex:0 0 40px;
    height:22px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

body[data-ui-theme="light"] .helper-toggle-pill{
    background:rgba(28,39,58,.12);
    border-color:rgba(28,39,58,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
}

.helper-toggle-knob{
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(214,221,235,.72));
    box-shadow:0 2px 10px rgba(0,0,0,.26);
    transition:transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}

.helper-toggle[data-state="on"] .helper-toggle-pill{
    background:color-mix(in srgb, var(--focus) 28%, rgba(255,255,255,.09));
    border-color:color-mix(in srgb, var(--focus) 44%, rgba(255,255,255,.18));
}

.helper-toggle[data-state="on"] .helper-toggle-knob{
    transform:translateX(18px);
    background:linear-gradient(180deg, color-mix(in srgb, var(--focus) 74%, white), color-mix(in srgb, var(--focus) 55%, #dfe9ff));
    box-shadow:0 2px 14px color-mix(in srgb, var(--focus) 26%, transparent);
}

.helper-toggle-copy{
    display:flex;
    align-items:center;
    text-align:left;
}

.helper-toggle-title{
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.94);
}

body[data-ui-theme="light"] .helper-toggle-title{
    color:rgba(15,27,42,.90);
}

.info-badge{
    pointer-events:none;
    transform-box:fill-box;
    transform-origin:center center;
    animation:infoBadgePulse 1.8s ease-in-out infinite;
}

.info-badge-shell{
    filter:drop-shadow(0 0 14px color-mix(in srgb, var(--focus) 24%, transparent));
}

.info-badge-text{
    font-size:16px;
    font-weight:900;
    text-anchor:middle;
    dominant-baseline:central;
    fill:#071018;
}

@keyframes infoBadgePulse{
    0%,100%{opacity:.76;transform:scale(.96);}
    50%{opacity:1;transform:scale(1.06);}
}

.phosphate-greek{
    font-family:ui-serif,Georgia,"Times New Roman",serif;
    font-style:italic;
    font-size:18px;
    font-weight:900;
    paint-order:stroke fill;
    stroke:color-mix(in srgb, var(--accent-tone, var(--phos)) 42%, black);
    stroke-width:2.4px;
    letter-spacing:.02em;
}

.bond-line{
    stroke-linecap:round;
    fill:none;
}

.bond-joint{
    stroke: var(--highlight) !important;
    opacity: 1;
}

.bond-main { stroke-width: 5; }
.bond-link { stroke-width: 4; }
.bond-branch { stroke-width: 5; }

.high-energy-bond{
    stroke-dasharray:6 6;
    animation:bondFlow 1s linear infinite;
}

@keyframes bondFlow{
    from{stroke-dashoffset:12;}
    to{stroke-dashoffset:0;}
}

.atom-text{
    font-weight:800;
    text-anchor:middle;
    dominant-baseline:central;
}

.accent-text{
    paint-order:stroke fill;
    stroke:color-mix(in srgb, var(--accent-tone, var(--focus)) 46%, black);
    stroke-width:1.9px;
    stroke-linejoin:round;
}

.ring-structure{
    stroke-width:4;
    stroke-linejoin:round;
    fill:rgba(255,255,255,.06);
}

.chem-number{
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    pointer-events:none;
    font-weight:800;
    paint-order:stroke fill;
    stroke:rgba(0,0,0,.35);
    stroke-width:2px;
}

.chem-num-normal{
    font-size:14px;
    fill:var(--num-normal);
}

.chem-num-important{
    font-size:20px;
    fill:var(--highlight);
    stroke:color-mix(in srgb, var(--highlight) 48%, black);
    stroke-width:2.4px;
    text-shadow:0 0 10px rgba(255,241,184,.45);
}

.highlight-bond{
    stroke:var(--highlight)!important;
    opacity:1;
}

.highlight-text{
    fill:var(--highlight)!important;
    paint-order:stroke fill;
    stroke:color-mix(in srgb, var(--accent-tone, var(--highlight)) 50%, black);
    stroke-width:1.8px;
    text-shadow:0 0 10px rgba(255,241,184,.55);
}

.bond-term{
    stroke: var(--highlight);
    opacity: 1;
}

.controls-deck{
    grid-area:controls;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    padding:16px;
    border-radius:28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
        radial-gradient(380px 200px at 15% 0%, rgba(122,231,255,.08), transparent 60%),
        radial-gradient(320px 220px at 100% 10%, rgba(213,123,255,.07), transparent 65%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 26px 70px rgba(0,0,0,.34);
    backdrop-filter:blur(16px);
}

body[data-ui-theme="light"] .controls-deck{
    background:
        linear-gradient(180deg, rgba(228,217,202,.94), rgba(206,191,173,.86)),
        radial-gradient(380px 200px at 15% 0%, rgba(122,231,255,.12), transparent 60%),
        radial-gradient(320px 220px at 100% 10%, rgba(213,123,255,.11), transparent 65%);
    border-color:rgba(28,39,58,.16);
    box-shadow:0 28px 68px rgba(96,72,36,.24), inset 0 1px 0 rgba(255,255,255,.42);
}

.panel-card{
    --panel-accent: var(--focus);
    position:relative;
    min-height:168px;
    background:linear-gradient(180deg, rgba(13,19,34,.92), rgba(10,14,24,.82));
    border:1px solid color-mix(in srgb, var(--panel-accent) 12%, rgba(255,255,255,.10));
    border-radius:22px;
    padding:14px 14px 13px;
    backdrop-filter:blur(14px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 14px 30px rgba(0,0,0,.22);
    overflow:hidden;
}

body[data-ui-theme="light"] .panel-card{
    background:linear-gradient(180deg, rgba(240,231,218,.98), rgba(218,205,188,.96));
    border-color:color-mix(in srgb, var(--panel-accent) 30%, rgba(28,39,58,.16));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.84), 0 18px 38px rgba(96,72,36,.20);
}

.panel-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(180px 120px at 10% 0%, color-mix(in srgb, var(--panel-accent) 16%, transparent), transparent 72%);
    pointer-events:none;
    opacity:.9;
}

.panel-card[data-panel="sugar"]{
    --panel-accent:var(--highlight);
}

.panel-card[data-panel="phosphate"]{
    --panel-accent:var(--phos);
}

.panel-card[data-panel="base"]{
    --panel-accent:var(--focus);
}

.panel-card[data-panel="three-prime"]{
    --panel-accent:var(--warn);
}

.control-group{
    display:flex;
    flex-direction:column;
    gap:10px;
    height:100%;
    position:relative;
    z-index:1;
}

.label{
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:10px;
}

.label::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--panel-accent, var(--focus));
    box-shadow:
        0 0 0 2px rgba(255,255,255,.10),
        0 0 18px color-mix(in srgb, var(--panel-accent, var(--focus)) 42%, transparent);
    opacity:.9;
}

.switcher{
    height:56px;
    display:grid;
    grid-template-columns:54px 1fr 54px;
    align-items:center;
    background:rgba(2,6,14,.55);
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--r-md);
    overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

body[data-ui-theme="light"] .switcher{
    background:linear-gradient(180deg, rgba(231,221,207,.98), rgba(214,201,184,.98));
    border-color:rgba(28,39,58,.14);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.82), 0 2px 0 rgba(255,255,255,.38);
}

.switcher.is-disabled{
    background:rgba(2,6,14,.38);
    border-color:rgba(255,255,255,.07);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

body[data-ui-theme="light"] .switcher.is-disabled{
    background:rgba(206,195,180,.88);
    border-color:rgba(28,39,58,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.76);
}

.arrow-btn{
    height:56px;
    border:none;
    background:transparent;
    color:rgba(234,240,255,.78);
    cursor:pointer;
    font-size:20px;
    transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
    display:grid;
    place-items:center;
}

body[data-ui-theme="light"] .arrow-btn{
    color:rgba(24,36,55,.82);
}

.arrow-btn:hover{
    background:rgba(255,255,255,.06);
    color:var(--focus);
    transform:scale(1.08);
}

body[data-ui-theme="light"] .arrow-btn:hover{
    background:rgba(28,39,58,.10);
}

.arrow-btn:active{
    transform:scale(.98);
}

.arrow-btn:disabled{
    cursor:not-allowed;
    color:rgba(234,240,255,.28);
    background:transparent;
    transform:none;
}

body[data-ui-theme="light"] .arrow-btn:disabled{
    color:rgba(28,39,58,.32);
}

.switcher.is-disabled .control-display{
    color:rgba(234,240,255,.48);
    text-shadow:none;
}

body[data-ui-theme="light"] .switcher.is-disabled .control-display{
    color:rgba(28,39,58,.50);
}

.arrow-btn,
.switcher,
.panel-card button{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.control-display{
    text-align:center;
    font-weight:850;
    font-size:15px;
    letter-spacing:.02em;
    color:rgba(234,240,255,.92);
    text-shadow:0 0 18px rgba(0,0,0,.6);
    line-height:1.12;
    text-wrap:balance;
}

body[data-ui-theme="light"] .control-display{
    color:#0F1B2A;
    text-shadow:none;
}

.info-panel{
    width:min(720px,96%);
    border-radius:var(--r-lg);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(14px);
    box-shadow:0 20px 60px rgba(0,0,0,.42);
    overflow:hidden;
}

body[data-ui-theme="light"] .info-panel{
    background:linear-gradient(180deg, rgba(240,231,218,.98), rgba(216,203,186,.96));
    border-color:rgba(28,39,58,.14);
    box-shadow:0 24px 54px rgba(96,72,36,.22);
}

.info-accent{
    height:4px;
    background:linear-gradient(90deg, var(--focus), var(--ring));
    box-shadow:0 0 20px var(--focus-glow);
}

.info-body{
    position:relative;
    padding:16px 18px 18px;
}

.info-body .helper-toggle{
    position:absolute;
    top:14px;
    right:14px;
    z-index:2;
}

.molecule-title{
    font-size:28px;
    font-weight:900;
    letter-spacing:.02em;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    row-gap:8px;
    gap:10px;
    padding-right:100px;
}

.molecule-title .chip{
    font-size:12px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.22);
    color:rgba(234,240,255,.76);
}

body[data-ui-theme="light"] .molecule-title .chip{
    background:rgba(28,39,58,.08);
    border-color:rgba(28,39,58,.12);
    color:rgba(24,36,55,.78);
}

.molecule-title .helper-toggle{
    align-self:center;
}

.molecule-subtitle{
    margin-top:6px;
    font-size:14px;
    color:rgba(234,240,255,.75);
    letter-spacing:.03em;
}

body[data-ui-theme="light"] .molecule-subtitle{
    color:rgba(20,31,48,.74);
}

.molecule-desc{
    margin-top:12px;
    line-height:1.7;
    font-size:14px;
    color:rgba(234,240,255,.78);
}

body[data-ui-theme="light"] .molecule-desc{
    color:rgba(16,27,42,.86);
}

#toast-container{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:120;
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
}

.toast{
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.92);
    padding:12px 16px;
    border-radius:999px;
    box-shadow:0 18px 50px rgba(0,0,0,.45);
    backdrop-filter:blur(14px);
    display:flex;
    align-items:center;
    gap:10px;
    opacity:0;
    transform:translateY(-12px);
    animation:slideDown .35s var(--ease) forwards;
}

body[data-ui-theme="light"] .toast{
    background:rgba(244,236,225,.98);
    border-color:rgba(28,39,58,.14);
    color:#0F1B2A;
    box-shadow:0 18px 38px rgba(110,80,40,.18);
}

.toast::before{
    content:"⚠";
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:color-mix(in srgb, var(--warn) 40%, rgba(0,0,0,.2));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 0 22px rgba(255,77,109,.28);
}

.toast.hide{
    animation:fadeOut .35s var(--ease) forwards;
}

@keyframes slideDown{
    to{opacity:1;transform:translateY(0);}
}

@keyframes fadeOut{
    to{opacity:0;transform:translateY(-10px);}
}

.shake-hard{
    animation:shake-anim 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake-anim{
    10%,90%{transform:translate3d(-2px,1px,0) rotate(0.5deg);}
    20%,80%{transform:translate3d(3px,-2px,0) rotate(-0.5deg);}
    30%,50%,70%{transform:translate3d(-5px,3px,0) rotate(1deg);filter:hue-rotate(15deg);}
    40%,60%{transform:translate3d(5px,-3px,0) rotate(-1deg);filter:contrast(1.2);}
}

.aberration-impact{
    animation:aberration-anim 0.3s ease-out forwards;
}

@keyframes aberration-anim{
    0%{text-shadow:4px 0 0 rgba(255,0,0,0.8), -4px 0 0 rgba(0,255,255,0.8);filter:saturate(1.5) brightness(1.2);}
    100%{text-shadow:0 0 0 rgba(255,0,0,0), 0 0 0 rgba(0,255,255,0);filter:saturate(1) brightness(1);}
}

#app-shell.shake-hard{
    animation:shake-anim 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

#app-shell.aberration-impact{
    animation:aberration-anim 0.3s ease-out forwards;
}

.ui-thump{
    animation:ui-thump-anim 0.2s ease-out;
}

@keyframes ui-thump-anim{
    0%{transform:scale(1);}
    50%{transform:scale(1.02);}
    100%{transform:scale(1);}
}

.atom-pop{
    transform-box:fill-box;
    transform-origin:center center;
    animation:atom-pop-anim 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes atom-pop-anim{
    0%{transform:scale(0.95);filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));opacity:0.8;}
    40%{transform:scale(1.15);filter:brightness(1.5) drop-shadow(0 0 15px var(--focus));opacity:1;}
    100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));opacity:1;}
}

.control-help{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:auto;
    min-height:60px;
    padding:10px 12px;
    font-size:12px;
    line-height:1.55;
    color:rgba(234,240,255,.72);
    background:rgba(4,8,18,.48);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-sm);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
    text-align:center;
}

body[data-ui-theme="light"] .control-help{
    color:rgba(20,31,48,.80);
    background:rgba(228,217,201,.96);
    border-color:rgba(28,39,58,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
}

body[data-ui-theme="light"] .chem-number{
    stroke:rgba(248,242,232,.84);
}

body[data-ui-theme="light"] .chem-num-normal{
    fill:rgba(28,39,58,.70);
}

body[data-ui-theme="light"] .chem-num-important{
    fill:color-mix(in srgb, var(--highlight) 82%, #734800);
    stroke:color-mix(in srgb, var(--highlight) 62%, black);
    text-shadow:0 0 10px rgba(201,138,28,.28);
}

body[data-ui-theme="light"] .pair-partner-letter{
    stroke:color-mix(in srgb, var(--accent-tone, var(--focus)) 60%, black);
    stroke-width:2.6px;
}

body[data-ui-theme="light"] .highlight-text{
    stroke:color-mix(in srgb, var(--accent-tone, var(--highlight)) 60%, black);
    text-shadow:0 0 14px rgba(201,138,28,.30);
}

body[data-ui-theme="light"] .accent-text{
    stroke:color-mix(in srgb, var(--accent-tone, var(--focus)) 58%, black);
}

body[data-ui-theme="light"] .phosphate-greek{
    stroke:color-mix(in srgb, var(--accent-tone, var(--phos)) 58%, black);
}

.help-pop{
    animation:help-pop-anim 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
    transform-origin:center;
}

@keyframes help-pop-anim{
    0%{transform:scale(0.98);filter:brightness(1);opacity:0.86;}
    45%{transform:scale(1.05);filter:brightness(1.35);opacity:1;box-shadow:0 0 18px color-mix(in srgb, var(--focus) 26%, transparent);border-color:color-mix(in srgb, var(--focus) 26%, rgba(255,255,255,.10));}
    100%{transform:scale(1);filter:brightness(1);opacity:1;box-shadow:none;}
}

@media (min-width: 1101px){
    .container{
        grid-template-columns:260px minmax(0, 1fr) 260px;
        grid-template-areas:none;
        grid-template-rows:auto auto;
        gap:26px;
        align-items:center;
    }

    .controls-deck{
        display:contents;
    }

    .panel-card{
        min-height:0;
        padding:14px 14px;
        border-radius:var(--r-lg);
        background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
        border:1px solid rgba(255,255,255,.12);
        box-shadow:0 18px 50px rgba(0,0,0,.38);
        backdrop-filter:blur(14px);
    }

    .panel-card::before{
        display:none;
    }

    .panel-card[data-panel="sugar"]{
        grid-column:1;
        grid-row:1;
    }

    .panel-card[data-panel="phosphate"]{
        grid-column:1;
        grid-row:2;
    }

    .panel-card[data-panel="base"]{
        grid-column:3;
        grid-row:1;
    }

    .panel-card[data-panel="three-prime"]{
        grid-column:3;
        grid-row:2;
    }

    .stage-wrapper{
        grid-area:auto;
        grid-column:2;
        grid-row:1 / span 2;
        align-self:center;
    }

    .control-display{
        font-size:14px;
        text-wrap:pretty;
    }

    .control-help{
        min-height:0;
        margin-top:10px;
        background:rgba(0,0,0,.22);
        border:1px solid rgba(255,255,255,.10);
    }
}

@media (max-width: 1100px){
    body{
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-y:contain;
        align-items:flex-start;
        justify-content:center;
        padding:calc(18px + env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) calc(34px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
    }

    .container{
        grid-template-columns:1fr;
        grid-template-areas:
            "controls"
            "stage";
        gap:18px;
        align-items:start;
    }

    .controls-deck{
        width:min(760px,100%);
        justify-self:center;
        padding:14px;
        gap:12px;
    }

    .stage{
        width:360px;
        height:360px;
    }

    .stage-wrapper{
        gap:14px;
    }
}

@media (max-width: 576px){
    .floating-tools{
        top:calc(env(safe-area-inset-top, 0px) + 12px);
        right:calc(env(safe-area-inset-right, 0px) + 12px);
        gap:8px;
    }

    .page-dock{
        right:calc(env(safe-area-inset-right, 0px) + 12px);
        bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    }

    .language-switch{
        padding:3px;
    }

    .page-switch{
        min-width:152px;
        padding:5px;
        border-radius:18px;
    }

    .page-link{
        min-width:66px;
        height:36px;
        padding:0 12px;
        border-radius:12px;
        font-size:10px;
    }

    .language-btn{
        min-width:48px;
        height:36px;
        padding:0 12px;
        font-size:11px;
    }

    .theme-toggle{
        width:42px;
        height:42px;
    }

    .theme-toggle svg{
        width:20px;
        height:20px;
    }

    .container{
        width:min(100%, calc(100vw - 18px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
        gap:14px;
    }

    .controls-deck{
        padding:10px;
        gap:10px;
        border-radius:22px;
    }

    .panel-card{
        min-height:0;
        padding:10px 10px 9px;
        border-radius:16px;
    }

    .control-group{
        gap:8px;
    }

    .label{
        min-height:30px;
        font-size:10.5px;
        letter-spacing:.12em;
        margin-bottom:2px;
        gap:8px;
    }

    .switcher{
        height:42px;
        grid-template-columns:44px 1fr 44px;
        border-radius:12px;
        background:rgba(0,0,0,.26);
        border:1px solid rgba(255,255,255,.10);
    }

    .arrow-btn{
        height:42px;
        font-size:18px;
    }

    .control-display{
        font-size:12px;
        letter-spacing:.01em;
        line-height:1.1;
    }

    .control-help{
        min-height:52px;
        padding:7px 8px;
        font-size:10.5px;
        line-height:1.4;
        border-radius:12px;
    }

    .stage{
        width:min(300px, 82vw);
        height:min(300px, 82vw);
    }

    .info-panel{
        width:100%;
    }

    .stage-wrapper{
        gap:10px;
    }

    .stage-tooltip{
        width:calc(100% - 24px);
        padding:12px 13px 13px;
        border-radius:16px;
    }

    .info-body .helper-toggle{
        top:12px;
        right:12px;
    }

    .stage-tooltip-title{
        font-size:16px;
    }

    .stage-tooltip-body{
        font-size:12px;
        line-height:1.56;
    }

    .helper-toggle{
        padding:6px 44px 6px 7px;
        gap:8px;
    }

    .helper-toggle-pill{
        flex-basis:36px;
        height:20px;
    }

    .helper-toggle-knob{
        width:14px;
        height:14px;
    }

    .helper-toggle[data-state="on"] .helper-toggle-knob{
        transform:translateX(16px);
    }

    .helper-toggle-title{
        font-size:10px;
        letter-spacing:.1em;
    }

    .molecule-title{
        padding-right:84px;
    }
}