:root {
    color-scheme: dark;
    --draw-bg: #30363d;
    --draw-panel: #2a3036;
    --draw-panel-2: #252b31;
    --draw-panel-3: #353c44;
    --draw-border: rgba(154, 175, 195, 0.28);
    --draw-border-strong: rgba(166, 194, 220, 0.48);
    --draw-text: #edf2f7;
    --draw-muted: #aeb9c5;
    --draw-dim: #808c98;
    --draw-blue: #98bee8;
    --draw-blue-strong: #73a5db;
    --draw-mint: #8fd4b4;
    --draw-amber: #e7c58d;
    --draw-rose: #e7aaa9;
    --draw-lilac: #c2b5e5;
    --draw-shadow: 0 22px 54px rgba(8, 13, 18, 0.28);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

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

body {
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(169, 194, 216, 0.025), transparent 28%),
        var(--draw-bg);
    color: var(--draw-text);
}

body.draw-daily-goal-met::before,
body.draw-daily-goal-met::after {
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

body.draw-daily-goal-met::before {
    animation: draw-forest-drift 9s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 42rem 28rem at 96% 4%, rgba(132, 226, 150, 0.25), rgba(92, 190, 116, 0.08) 42%, transparent 76%),
        radial-gradient(ellipse 38rem 26rem at 4% 96%, rgba(70, 158, 98, 0.19), rgba(126, 214, 142, 0.07) 48%, transparent 78%),
        radial-gradient(ellipse 34rem 18rem at 72% 72%, rgba(164, 237, 165, 0.12), transparent 74%);
    mix-blend-mode: screen;
    opacity: 0.96;
}

body.draw-daily-goal-met::after {
    animation: draw-forest-mist 11s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 48rem 20rem at 84% 22%, rgba(168, 239, 172, 0.15), rgba(100, 190, 122, 0.06) 48%, transparent 76%),
        radial-gradient(ellipse 42rem 18rem at 18% 58%, rgba(93, 177, 112, 0.13), rgba(190, 241, 173, 0.06) 46%, transparent 78%),
        radial-gradient(ellipse 36rem 16rem at 68% 92%, rgba(154, 225, 158, 0.11), transparent 76%);
    filter: blur(14px);
    mix-blend-mode: screen;
    opacity: 0.86;
}

body.draw-daily-double-goal-met::before {
    animation: draw-double-forest-drift 6.4s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 46rem 30rem at 96% 4%, rgba(132, 226, 150, 0.24), rgba(92, 190, 116, 0.08) 42%, transparent 76%),
        radial-gradient(ellipse 42rem 27rem at 4% 96%, rgba(70, 158, 98, 0.18), rgba(126, 214, 142, 0.07) 48%, transparent 78%),
        radial-gradient(ellipse 38rem 24rem at 76% 74%, rgba(43, 227, 169, 0.20), rgba(43, 227, 169, 0.06) 46%, transparent 76%),
        radial-gradient(ellipse 34rem 22rem at 22% 28%, rgba(92, 190, 255, 0.13), transparent 74%);
    opacity: 1;
}

body.draw-daily-double-goal-met::after {
    animation: draw-double-forest-mist 7.2s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 52rem 22rem at 86% 18%, rgba(43, 227, 169, 0.20), rgba(43, 227, 169, 0.07) 48%, transparent 77%),
        radial-gradient(ellipse 48rem 21rem at 14% 54%, rgba(105, 201, 255, 0.17), rgba(74, 150, 223, 0.05) 48%, transparent 78%),
        radial-gradient(ellipse 42rem 18rem at 68% 94%, rgba(155, 239, 221, 0.15), transparent 76%),
        radial-gradient(ellipse 36rem 16rem at 38% 10%, rgba(190, 232, 255, 0.10), transparent 75%);
    filter: blur(18px);
    opacity: 0.94;
}

body.draw-daily-triple-goal-met::before {
    animation: draw-triple-forest-drift 5.6s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 54rem 34rem at 97% 3%, rgba(91, 238, 188, 0.27), rgba(43, 227, 169, 0.08) 43%, transparent 77%),
        radial-gradient(ellipse 48rem 31rem at 2% 98%, rgba(67, 173, 118, 0.22), rgba(122, 223, 159, 0.08) 48%, transparent 79%),
        radial-gradient(ellipse 46rem 26rem at 78% 72%, rgba(43, 227, 169, 0.24), rgba(43, 227, 169, 0.07) 46%, transparent 77%),
        radial-gradient(ellipse 42rem 26rem at 18% 26%, rgba(91, 202, 255, 0.18), rgba(70, 151, 225, 0.05) 48%, transparent 76%),
        radial-gradient(ellipse 36rem 21rem at 50% 52%, rgba(143, 218, 255, 0.13), transparent 74%);
    opacity: 1;
}

body.draw-daily-triple-goal-met::after {
    animation: draw-triple-forest-mist 6.2s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 60rem 27rem at 88% 15%, rgba(43, 227, 169, 0.24), rgba(43, 227, 169, 0.08) 48%, transparent 78%),
        radial-gradient(ellipse 55rem 25rem at 9% 54%, rgba(105, 201, 255, 0.22), rgba(74, 150, 223, 0.06) 48%, transparent 79%),
        radial-gradient(ellipse 49rem 22rem at 71% 96%, rgba(155, 239, 221, 0.19), transparent 77%),
        radial-gradient(ellipse 44rem 20rem at 36% 7%, rgba(196, 189, 255, 0.13), transparent 76%),
        radial-gradient(ellipse 38rem 20rem at 52% 65%, rgba(180, 245, 255, 0.11), transparent 75%);
    filter: blur(20px) drop-shadow(0 0 12px rgba(87, 225, 201, 0.12));
    opacity: 0.98;
}

body.draw-daily-quadruple-goal-met::before {
    animation: draw-quadruple-forest-drift 4.8s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 60rem 38rem at 98% 2%, rgba(96, 255, 208, 0.31), rgba(43, 227, 169, 0.10) 43%, transparent 78%),
        radial-gradient(ellipse 54rem 35rem at 1% 99%, rgba(66, 186, 124, 0.25), rgba(128, 231, 167, 0.09) 48%, transparent 79%),
        radial-gradient(ellipse 51rem 30rem at 80% 70%, rgba(43, 227, 169, 0.27), rgba(43, 227, 169, 0.08) 46%, transparent 78%),
        radial-gradient(ellipse 49rem 30rem at 16% 24%, rgba(86, 205, 255, 0.23), rgba(67, 145, 231, 0.07) 49%, transparent 77%),
        radial-gradient(ellipse 43rem 25rem at 52% 49%, rgba(173, 190, 255, 0.17), transparent 75%),
        radial-gradient(ellipse 38rem 23rem at 34% 79%, rgba(221, 183, 255, 0.12), transparent 76%);
    opacity: 1;
}

body.draw-daily-quadruple-goal-met::after {
    animation: draw-quadruple-forest-mist 5.25s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 68rem 31rem at 90% 13%, rgba(43, 227, 169, 0.28), rgba(43, 227, 169, 0.09) 48%, transparent 79%),
        radial-gradient(ellipse 62rem 29rem at 6% 55%, rgba(105, 201, 255, 0.26), rgba(74, 150, 223, 0.07) 48%, transparent 80%),
        radial-gradient(ellipse 56rem 26rem at 73% 97%, rgba(155, 239, 221, 0.23), transparent 78%),
        radial-gradient(ellipse 50rem 24rem at 34% 5%, rgba(204, 190, 255, 0.18), transparent 77%),
        radial-gradient(ellipse 46rem 22rem at 52% 64%, rgba(199, 245, 255, 0.15), transparent 76%),
        radial-gradient(ellipse 40rem 21rem at 20% 88%, rgba(246, 204, 255, 0.11), transparent 75%);
    filter: blur(22px) drop-shadow(0 0 17px rgba(92, 228, 207, 0.17)) drop-shadow(0 0 28px rgba(101, 190, 255, 0.08));
    opacity: 1;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

button:focus-visible,
input:focus-visible {
    outline: 2px solid rgba(151, 196, 239, 0.95);
    outline-offset: 3px;
}

button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.draw-shell {
    width: min(1920px, 100%);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 12px clamp(12px, 2vw, 34px) 28px;
    position: relative;
    z-index: 1;
}

.draw-controlbar {
    position: relative;
    z-index: 30;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--draw-border);
    border-radius: 8px;
    background: rgba(39, 45, 51, 0.88);
    box-shadow: 0 12px 28px rgba(9, 14, 19, 0.14);
    backdrop-filter: blur(18px) saturate(115%);
}

.draw-controlbar-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.draw-segment {
    height: 46px;
    display: inline-flex;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--draw-border);
    border-radius: 7px;
    background: rgba(29, 34, 39, 0.42);
}

.draw-segment button,
.draw-icon-button,
.draw-flag-button {
    position: relative;
    height: 46px;
    min-width: 52px;
    display: inline-grid;
    place-items: center;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid rgba(154, 175, 195, 0.2);
    background: transparent;
    color: #c4ced8;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.draw-segment button:last-child {
    border-right: 0;
}

.draw-segment button:hover,
.draw-icon-button:hover,
.draw-flag-button:hover {
    color: #f4f8fb;
    background: rgba(141, 177, 211, 0.12);
}

.draw-segment button:active,
.draw-icon-button:active,
.draw-flag-button:active {
    transform: scale(0.95);
}

.draw-segment button.is-active {
    color: #101a24;
    background: #87add5;
    box-shadow: inset 0 0 0 1px rgba(229, 242, 255, 0.22);
}

.draw-family-filter button {
    min-width: 88px;
    font-weight: 720;
    letter-spacing: 0;
}

.draw-family-filter button[data-family="Special"] {
    color: #f0abc5;
    background: rgba(225, 111, 157, 0.08);
}

.draw-family-filter button[data-family="Special"].is-active {
    color: #24141c;
    background: #e89ab8;
    box-shadow: inset 0 0 0 1px rgba(255, 235, 244, 0.28);
}

.draw-icon-button,
.draw-flag-button {
    flex: 0 0 auto;
    border: 1px solid var(--draw-border);
    border-radius: 7px;
}

.draw-daily-counter {
    --draw-daily-pct: 0%;
    align-items: stretch;
    background:
        radial-gradient(circle at 10% 0%, rgba(154, 199, 238, 0.13), transparent 8rem),
        linear-gradient(135deg, rgba(45, 53, 61, 0.96), rgba(36, 43, 50, 0.96));
    border: 1px solid rgba(137, 162, 186, 0.46);
    border-radius: 7px;
    color: var(--draw-text);
    cursor: pointer;
    display: grid;
    flex: 0 0 184px;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) 38px;
    height: 46px;
    padding: 5px 6px;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    width: 184px;
}

.draw-daily-counter:hover,
.draw-daily-counter:focus-visible {
    border-color: rgba(154, 199, 238, 0.74);
    box-shadow: 0 8px 24px rgba(8, 12, 16, 0.28), 0 0 0 3px rgba(143, 184, 232, 0.08);
    outline: none;
    transform: translateY(-1px);
}

.draw-daily-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.draw-daily-heading {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    min-width: 0;
}

.draw-daily-heading > span {
    color: #a8cae8;
    font-size: 0.62rem;
    font-weight: 780;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.draw-daily-heading strong {
    color: #edf4f9;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.draw-daily-heading strong i {
    color: #aebdcb;
    font-size: 0.7em;
    font-style: normal;
    margin-left: 2px;
}

.draw-daily-bar {
    align-self: end;
    background: rgba(22, 28, 34, 0.84);
    border: 1px solid rgba(135, 153, 172, 0.17);
    border-radius: 999px;
    display: block;
    height: 6px;
    overflow: hidden;
}

.draw-daily-bar i {
    background: linear-gradient(90deg, #7aaedf, #d7a765);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width 520ms cubic-bezier(0.2, 0.8, 0.2, 1), background 180ms ease;
    width: var(--draw-daily-pct);
}

.draw-daily-attempts {
    align-items: center;
    background: rgba(28, 34, 40, 0.52);
    border: 1px solid rgba(145, 164, 184, 0.2);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.draw-daily-attempts svg {
    color: #d5b57f;
    height: 12px;
    width: 12px;
}

.draw-daily-attempts b {
    color: #f0c98f;
    font-size: 0.69rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-top: 2px;
}

.draw-daily-counter.is-complete {
    background:
        radial-gradient(circle at 8% 0%, rgba(177, 232, 180, 0.22), transparent 9rem),
        linear-gradient(135deg, rgba(43, 67, 54, 0.98), rgba(34, 51, 42, 0.98));
    border-color: rgba(151, 218, 159, 0.68);
}

.draw-daily-counter.is-double-goal {
    background:
        radial-gradient(circle at 8% 0%, rgba(43, 227, 169, 0.23), transparent 9rem),
        radial-gradient(circle at 94% 100%, rgba(100, 194, 255, 0.16), transparent 8rem),
        linear-gradient(135deg, rgba(34, 65, 57, 0.98), rgba(33, 48, 59, 0.98));
    border-color: rgba(93, 231, 193, 0.72);
}

.draw-daily-counter.is-triple-goal {
    background:
        radial-gradient(circle at 7% 0%, rgba(43, 227, 169, 0.27), transparent 9rem),
        radial-gradient(circle at 95% 100%, rgba(104, 201, 255, 0.21), transparent 8rem),
        linear-gradient(135deg, rgba(30, 68, 59, 0.98), rgba(31, 47, 62, 0.98));
    border-color: rgba(111, 242, 207, 0.78);
}

.draw-daily-counter.is-quadruple-goal {
    background:
        radial-gradient(circle at 7% 0%, rgba(43, 227, 169, 0.31), transparent 9rem),
        radial-gradient(circle at 95% 100%, rgba(105, 201, 255, 0.25), transparent 8rem),
        radial-gradient(circle at 56% 106%, rgba(213, 181, 255, 0.14), transparent 7rem),
        linear-gradient(135deg, rgba(27, 70, 59, 0.99), rgba(29, 45, 63, 0.99));
    border-color: rgba(134, 255, 220, 0.86);
}

.draw-daily-counter.is-complete .draw-daily-bar i { background: linear-gradient(90deg, #7dc78d, #b9ecaf); }
.draw-daily-counter.is-double-goal .draw-daily-bar i { background: linear-gradient(90deg, #2be3a9, #7bdcff 58%, #c2f7ff); }
.draw-daily-counter.is-triple-goal .draw-daily-bar i { background: linear-gradient(90deg, #2be3a9, #72e4ff 50%, #b8bcff); }
.draw-daily-counter.is-quadruple-goal .draw-daily-bar i { background: linear-gradient(90deg, #2be3a9, #76f5de 32%, #6bd8ff 62%, #c8b8ff); }

.draw-daily-counter.is-loading #draw-daily-correct,
.draw-daily-counter.is-loading #draw-daily-attempted {
    color: transparent;
    position: relative;
}

.draw-daily-counter.is-loading #draw-daily-correct::after,
.draw-daily-counter.is-loading #draw-daily-attempted::after {
    animation: draw-daily-spin 900ms linear infinite;
    border: 2px solid rgba(242, 248, 255, 0.3);
    border-radius: 999px;
    border-right-color: rgba(154, 199, 238, 0.9);
    border-top-color: #f8fbff;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    width: 12px;
}

.draw-position {
    min-width: 76px;
    margin-left: auto;
    padding-right: 7px;
    color: #bdc8d3;
    font-size: 0.98rem;
    font-weight: 760;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.draw-progress {
    height: 3px;
    margin: 5px 10px 0;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(15, 20, 24, 0.35);
}

.draw-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--draw-blue-strong), var(--draw-mint));
    transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.draw-search {
    position: relative;
    flex: 0 0 auto;
}

.draw-search-panel {
    position: absolute;
    top: 0;
    left: 54px;
    z-index: 50;
    width: 0;
    height: 46px;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
    transition: width 260ms cubic-bezier(0.2, 0.85, 0.2, 1), opacity 170ms ease, transform 260ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

.draw-search.is-open .draw-search-panel {
    width: min(360px, 34vw);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.draw-search-panel input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(157, 190, 220, 0.46);
    border-radius: 7px;
    background: rgba(32, 38, 44, 0.97);
    color: var(--draw-text);
    box-shadow: 0 14px 32px rgba(6, 11, 16, 0.32);
}

.draw-search-results {
    position: absolute;
    top: 52px;
    left: 0;
    width: min(430px, 72vw);
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--draw-border-strong);
    border-radius: 7px;
    background: rgba(35, 41, 47, 0.98);
    box-shadow: var(--draw-shadow);
}

.draw-search-results button {
    width: 100%;
    min-height: 52px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--draw-text);
    text-align: left;
    cursor: pointer;
}

.draw-search-results button:hover,
.draw-search-results button[aria-selected="true"] {
    background: rgba(143, 182, 218, 0.13);
}

.draw-search-results button span:first-child {
    color: var(--draw-blue);
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.draw-search-results button span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.draw-prompt {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 18px clamp(8px, 1.3vw, 22px) 14px;
    animation: draw-enter 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.draw-prompt-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.draw-prompt-meta span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border: 1px solid rgba(163, 183, 202, 0.25);
    border-radius: 999px;
    color: #bec9d5;
    background: rgba(29, 35, 41, 0.25);
    font-size: 0.78rem;
    font-weight: 780;
}

#draw-family-pill {
    border-color: rgba(147, 190, 229, 0.36);
    color: #b8d7f2;
}

.is-special-drawing-card #draw-family-pill {
    border-color: rgba(232, 154, 184, 0.46);
    color: #f0abc5;
    background: rgba(225, 111, 157, 0.09);
}

#draw-topic-pill {
    border-color: rgba(226, 193, 139, 0.34);
    color: #e6c995;
}

.draw-prompt-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.draw-prompt h1 {
    min-width: 0;
    margin: 0;
    color: var(--draw-text);
    font-size: clamp(1.55rem, 2.55vw, 2.85rem);
    line-height: 1.08;
    font-weight: 730;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.draw-name-token--function { color: var(--draw-amber); }
.draw-name-token--halogen { color: var(--draw-mint); }
.draw-name-token--unsaturated { color: #a8cbed; }
.draw-name-token--nitrogen { color: var(--draw-lilac); }
.draw-name-token--special { color: #f0abc5; }

.draw-flag-button {
    margin-left: auto;
    background: rgba(35, 41, 47, 0.52);
}

.draw-flag-button.is-flagged {
    border-color: rgba(231, 170, 169, 0.5);
    color: var(--draw-rose);
    background: rgba(194, 107, 110, 0.12);
}

.draw-flag-button.is-flagged svg {
    fill: rgba(231, 170, 169, 0.24);
}

.draw-board {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--draw-border);
    border-radius: 8px;
    background: var(--draw-panel-2);
    box-shadow: var(--draw-shadow);
    animation: draw-enter 560ms 70ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.draw-toolbar-shell {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 15;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    pointer-events: none;
}

.draw-toolbar-shell::-webkit-scrollbar {
    display: none;
}

.draw-toolbar {
    width: max-content;
    max-width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(157, 180, 202, 0.34);
    border-radius: 8px;
    background: rgba(47, 54, 61, 0.9);
    box-shadow: 0 14px 32px rgba(7, 12, 17, 0.28);
    backdrop-filter: blur(18px) saturate(118%);
    pointer-events: auto;
}

.draw-tool-group {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-right: 7px;
    border-right: 1px solid rgba(166, 184, 201, 0.2);
}

.draw-tool-group:last-child {
    padding-right: 0;
    border-right: 0;
}

.draw-tool {
    position: relative;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #c2ccd6;
    cursor: pointer;
    transition: transform 150ms ease, color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.draw-tool:hover:not(:disabled) {
    z-index: 2;
    color: #f4f7fa;
    border-color: rgba(163, 194, 221, 0.3);
    background: rgba(143, 183, 219, 0.12);
    transform: translateY(-1px) scale(1.035);
}

.draw-tool:active:not(:disabled) {
    transform: scale(0.93);
}

.draw-tool.is-active {
    border-color: rgba(166, 207, 243, 0.65);
    background: #779fc7;
    color: #101a24;
    box-shadow: 0 5px 14px rgba(76, 125, 170, 0.24), inset 0 0 0 1px rgba(235, 246, 255, 0.2);
}

.draw-tool:disabled {
    opacity: 0.28;
    cursor: default;
}

.draw-atom {
    font-family: "Segoe UI", Inter, sans-serif;
    font-size: 1.02rem;
    font-weight: 780;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.draw-atom sub {
    margin-left: 1px;
    font-size: 0.62em;
    line-height: 1;
}

.draw-atom--wide {
    width: 54px;
    flex-basis: 54px;
}

.draw-atom--oxygen { color: #f0aaa7; }
.draw-atom--nitrogen { color: #b8b7ef; }
.draw-atom--sulfur { color: #e6c56f; }
.draw-atom--halogen { color: #91d7ad; }
.draw-atom--iodine { color: #d5b7e4; }
.draw-atom--nitro { color: #c6b6ed; }
.draw-atom--residue { color: #f0abc5; }
.draw-atom--residue > span { white-space: nowrap; }

.draw-special-tools { display: none; }
.is-special-drawing-card .draw-special-tools { display: flex; }
.draw-residue-extra { display: none; }
.is-tetrapeptide-drawing-card .draw-residue-extra { display: grid; }
.is-special-drawing-card .draw-ring-tools,
.is-special-drawing-card .draw-atom-group [data-tool="atom:N"],
.is-special-drawing-card .draw-atom-group [data-tool="atom:S"],
.is-special-drawing-card .draw-atom-group [data-tool="atom:SH"],
.is-special-drawing-card .draw-atom-group [data-tool="atom:Cl"],
.is-special-drawing-card .draw-atom-group [data-tool="atom:Br"],
.is-special-drawing-card .draw-atom-group [data-tool="atom:I"],
.is-special-drawing-card .draw-atom-group [data-tool="atom:NO2"] { display: none; }

.draw-bond-label i {
    width: 26px;
    height: 7px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 5px;
    background: var(--label-color);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--label-color) 32%, transparent);
    transform: rotate(-18deg);
    transition: width 150ms ease, transform 150ms ease;
}

.draw-bond-label:hover i,
.draw-bond-label.is-active i {
    width: 29px;
    transform: rotate(0deg);
}

.draw-ring5-tool,
.draw-atom--sulfur { display: none; }
.is-amino-acid-card .draw-ring5-tool,
.is-amino-acid-card .draw-atom--sulfur { display: grid; }
.is-amino-acid-card [data-tool="ring6"],
.is-amino-acid-card .draw-atom--halogen,
.is-amino-acid-card .draw-atom--iodine,
.is-amino-acid-card .draw-atom--nitro { display: none; }

.draw-atom.is-dragging {
    opacity: 0.34;
    transform: scale(0.88);
}

.draw-palette-ghost {
    position: fixed;
    z-index: 1000;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(181, 211, 237, 0.68);
    border-radius: 8px;
    background: rgba(45, 53, 61, 0.96);
    box-shadow: 0 16px 34px rgba(5, 10, 15, 0.36), inset 0 0 0 1px rgba(235, 246, 255, 0.08);
    font-family: "Segoe UI", Inter, sans-serif;
    font-size: 1.14rem;
    font-weight: 780;
    pointer-events: none;
    transform: translate(-50%, -58%) rotate(-3deg) scale(0.94);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms cubic-bezier(.2, .8, .2, 1);
    animation: draw-palette-lift 180ms cubic-bezier(.2, .8, .2, 1) both;
}

.draw-palette-ghost sub {
    margin-left: 1px;
    font-size: 0.62em;
}

.draw-palette-ghost.is-over-canvas {
    border-color: rgba(166, 211, 247, 0.92);
    box-shadow: 0 18px 38px rgba(4, 9, 14, 0.42), 0 0 20px rgba(108, 168, 217, 0.16);
    transform: translate(-50%, -58%) rotate(0) scale(1.04);
}

@keyframes draw-palette-lift {
    from { opacity: 0; transform: translate(-50%, -42%) rotate(-6deg) scale(0.78); }
    to { opacity: 1; }
}

.draw-stage {
    position: relative;
    min-height: 690px;
    height: clamp(690px, 70dvh, 940px);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(141, 174, 203, 0.055), transparent 56%),
        #252b31;
    touch-action: none;
}

.draw-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 11;
    border: 2px solid rgba(151, 201, 240, 0);
    box-shadow: inset 0 0 36px rgba(104, 165, 214, 0);
    opacity: 0;
    pointer-events: none;
    transition: border-color 170ms ease, box-shadow 170ms ease, opacity 170ms ease;
}

.draw-stage.is-palette-target::after {
    border-color: rgba(151, 201, 240, 0.42);
    box-shadow: inset 0 0 36px rgba(104, 165, 214, 0.08);
    opacity: 1;
}

.draw-stage.is-correct {
    animation: draw-correct-pulse 620ms cubic-bezier(.2, .85, .25, 1);
}

.draw-stage.is-wrong {
    animation: draw-wrong-pulse 520ms cubic-bezier(.25, .78, .3, 1);
}

@keyframes draw-correct-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
    38% { box-shadow: inset 0 0 0 2px rgba(111, 221, 170, .58), 0 0 32px rgba(83, 185, 140, .11); }
}

@keyframes draw-wrong-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
    30% { box-shadow: inset 0 0 0 2px rgba(239, 146, 138, .55), 0 0 28px rgba(207, 101, 95, .09); }
    52% { transform: translateX(-2px); }
    70% { transform: translateX(2px); }
}

#molecule-canvas {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

#molecule-canvas[data-cursor="move"] { cursor: grab; }
#molecule-canvas[data-cursor="moving"] { cursor: grabbing; }
#molecule-canvas[data-cursor="erase"] { cursor: not-allowed; }
#molecule-canvas[data-cursor="atom"] { cursor: cell; }
#molecule-canvas[data-cursor="label"] { cursor: crosshair; }

.draw-grid {
    fill: url(#draw-dot-grid);
    pointer-events: all;
}

#draw-dot-grid circle {
    fill: rgba(174, 193, 211, 0.12);
}

.molecule-bond-visible {
    stroke: #dce5ed;
    stroke-width: 4.4;
    stroke-linecap: round;
    pointer-events: none;
    transition: stroke 130ms ease, stroke-width 130ms ease, filter 130ms ease;
}

.molecule-bond-hit {
    stroke: transparent;
    stroke-width: 25;
    stroke-linecap: round;
    cursor: pointer;
}

.molecule-bond:hover .molecule-bond-visible,
.molecule-bond.is-selected .molecule-bond-visible {
    stroke: var(--draw-blue);
    stroke-width: 5.6;
    filter: url(#draw-soft-glow);
}

.molecule-bond.is-labeled .molecule-bond-visible,
.molecule-bond.is-labeled:hover .molecule-bond-visible,
.molecule-bond.is-labeled.is-selected .molecule-bond-visible {
    stroke: var(--bond-label-color);
    stroke-width: 6;
    filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--bond-label-color) 42%, transparent));
}

.molecule-atom-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1;
    cursor: pointer;
}

.molecule-atom-visible {
    pointer-events: none;
}

.molecule-atom-halo {
    fill: rgba(37, 43, 49, 0.96);
    stroke: transparent;
    stroke-width: 2;
    transition: fill 130ms ease, stroke 130ms ease, filter 130ms ease;
}

.molecule-atom:hover .molecule-atom-halo,
.molecule-atom.is-selected .molecule-atom-halo,
.molecule-atom.is-drop-target .molecule-atom-halo {
    fill: rgba(71, 89, 105, 0.95);
    stroke: rgba(154, 197, 234, 0.9);
    filter: url(#draw-soft-glow);
}

.molecule-carbon-dot {
    fill: transparent;
    stroke: transparent;
    transition: fill 130ms ease, stroke 130ms ease;
}

.molecule-atom:hover .molecule-carbon-dot,
.molecule-atom.is-selected .molecule-carbon-dot,
.molecule-atom.is-drop-target .molecule-carbon-dot {
    fill: rgba(144, 190, 229, 0.9);
    stroke: rgba(230, 243, 255, 0.92);
}

.molecule-atom-label {
    fill: #eef3f7;
    font-family: "Segoe UI", Inter, sans-serif;
    font-size: 28px;
    font-weight: 720;
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: 0;
}

.molecule-atom[data-element="O"] .molecule-atom-label,
.molecule-atom[data-element="OH"] .molecule-atom-label { fill: #f2aaa7; }
.molecule-atom[data-element="N"] .molecule-atom-label,
.molecule-atom[data-element="NH"] .molecule-atom-label,
.molecule-atom[data-element="NH2"] .molecule-atom-label,
.molecule-atom[data-element="NO2"] .molecule-atom-label { fill: #b9b8ef; }
.molecule-atom[data-element="S"] .molecule-atom-label,
.molecule-atom[data-element="SH"] .molecule-atom-label { fill: #e6c56f; }
.molecule-atom[data-element="Cl"] .molecule-atom-label,
.molecule-atom[data-element="Br"] .molecule-atom-label { fill: #91d7ad; }
.molecule-atom[data-element="I"] .molecule-atom-label { fill: #d4b6e4; }
.molecule-atom[data-element="R1"] .molecule-atom-label,
.molecule-atom[data-element="R2"] .molecule-atom-label,
.molecule-atom[data-element="R3"] .molecule-atom-label,
.molecule-atom[data-element="R4"] .molecule-atom-label { fill: #f0abc5; }

.molecule-guide-line {
    stroke: rgba(159, 202, 239, 0.92);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 8 8;
    animation: guide-flow 620ms linear infinite;
    pointer-events: none;
}

.molecule-guide-node {
    fill: rgba(144, 190, 232, 0.2);
    stroke: rgba(173, 215, 248, 0.9);
    stroke-width: 2;
    pointer-events: none;
}

.draw-view-tools {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 12;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--draw-border);
    border-radius: 7px;
    background: rgba(45, 52, 59, 0.86);
    backdrop-filter: blur(12px);
}

.draw-view-tools button,
.draw-result button,
.draw-answer button,
.draw-actions > button {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c6d0da;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.draw-view-tools button + button {
    border-left: 1px solid rgba(159, 180, 199, 0.2);
}

.draw-view-tools button:hover,
.draw-result button:hover,
.draw-answer button:hover,
.draw-actions > button:hover {
    color: white;
    background: rgba(139, 180, 216, 0.12);
}

.draw-view-tools button:active,
.draw-result button:active,
.draw-answer button:active,
.draw-actions > button:active {
    transform: scale(0.92);
}

.draw-result {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 18;
    width: min(620px, calc(100% - 210px));
    min-height: 66px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 48px 48px;
    align-items: center;
    gap: 9px;
    padding: 8px 9px 8px 12px;
    border: 1px solid rgba(168, 190, 210, 0.36);
    border-radius: 8px;
    background: rgba(48, 55, 62, 0.92);
    box-shadow: 0 18px 44px rgba(7, 12, 17, 0.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 18px) scale(0.97);
    transition: opacity 190ms ease, transform 360ms cubic-bezier(0.18, 0.86, 0.25, 1.18), border-color 190ms ease, visibility 0s linear 360ms;
    backdrop-filter: blur(18px) saturate(115%);
}

.draw-result[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
}

.draw-result[data-result="correct"] {
    border-color: rgba(126, 211, 171, 0.57);
}

.draw-result[data-result="wrong"] {
    border-color: rgba(228, 169, 156, 0.5);
}

.draw-result-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: var(--draw-amber);
}

.draw-result-mark::after {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1px) rotate(-45deg);
}

.draw-result[data-result="correct"] .draw-result-mark {
    color: var(--draw-mint);
    animation: result-pop 520ms cubic-bezier(0.18, 0.9, 0.24, 1.25);
}

.draw-result[data-result="wrong"] .draw-result-mark {
    color: var(--draw-rose);
}

.draw-result[data-result="wrong"] .draw-result-mark::after {
    width: 13px;
    height: 13px;
    border: 0;
    background: linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%);
    transform: none;
}

.draw-result-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.draw-result-copy strong {
    font-size: 1rem;
    font-weight: 780;
}

.draw-result-copy span {
    overflow: hidden;
    color: var(--draw-muted);
    font-size: 0.84rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draw-answer {
    position: absolute;
    top: 84px;
    right: 14px;
    bottom: 76px;
    z-index: 17;
    width: min(520px, calc(100% - 28px));
    overflow-y: auto;
    padding: 14px;
    border: 1px solid rgba(165, 191, 214, 0.4);
    border-radius: 8px;
    background: rgba(43, 50, 57, 0.96);
    box-shadow: -20px 22px 48px rgba(8, 13, 18, 0.32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(26px) scale(0.98);
    transition: opacity 210ms ease, transform 380ms cubic-bezier(0.2, 0.85, 0.2, 1), visibility 0s linear 380ms;
    backdrop-filter: blur(20px) saturate(115%);
}

.draw-answer[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

.draw-answer header {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(164, 183, 201, 0.2);
}

.draw-answer header span {
    color: var(--draw-blue);
    font-size: 0.8rem;
    font-weight: 800;
}

.draw-answer header button {
    margin-left: auto;
}

.draw-reference {
    min-height: 210px;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(157, 178, 198, 0.22);
    border-radius: 7px;
    background: rgba(30, 36, 41, 0.48);
}

.draw-reference svg {
    width: min(100%, 440px);
    height: auto;
    max-height: 300px;
}

.draw-condensed {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--draw-amber);
    background: rgba(221, 184, 127, 0.075);
    color: #ecdbbd;
    font-family: "Segoe UI", Inter, sans-serif;
    font-size: 1rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.draw-reasoning {
    display: grid;
    gap: 9px;
    margin: 14px 0 0;
    padding: 0 0 0 25px;
    color: #c4ced7;
    font-size: 0.94rem;
    line-height: 1.45;
}

.draw-reasoning li::marker {
    color: var(--draw-blue);
    font-weight: 800;
}

.draw-actions {
    position: relative;
    min-height: 74px;
    display: grid;
    grid-template-columns: 58px minmax(130px, 190px) 58px;
    place-content: center;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid rgba(156, 178, 198, 0.22);
    background: rgba(44, 51, 58, 0.94);
}

.draw-actions > button {
    width: 58px;
    height: 54px;
    border: 1px solid var(--draw-border);
    border-radius: 7px;
    background: rgba(32, 38, 44, 0.34);
}

.draw-actions .draw-check {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-color: rgba(151, 195, 232, 0.54);
    background: #7da6cf;
    color: #101a24;
    box-shadow: 0 10px 26px rgba(70, 119, 164, 0.2);
}

.draw-check:hover {
    background: #91b6da !important;
    color: #0d1720 !important;
}

.draw-check > svg {
    position: relative;
    z-index: 2;
    width: 29px;
    height: 29px;
    stroke-width: 2.2;
}

.draw-check-rings {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.draw-check.is-checking .draw-check-rings {
    opacity: 1;
}

.draw-check.is-checking > svg {
    opacity: 0;
}

.draw-check-rings i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27px;
    height: 27px;
    margin: -13.5px;
    border: 2px solid rgba(15, 28, 39, 0.22);
    border-top-color: #142535;
    border-radius: 50%;
    animation: draw-spin 680ms linear infinite;
}

.draw-check-rings i + i {
    width: 17px;
    height: 17px;
    margin: -8.5px;
    border-top-color: transparent;
    border-bottom-color: #142535;
    animation-direction: reverse;
    animation-duration: 520ms;
}

.written-stats-status {
    position: absolute;
    left: 18px;
    bottom: 50%;
    margin: 0;
    color: var(--draw-muted);
    font-size: 0.75rem;
    transform: translateY(50%);
}

.written-stats-status[data-state="error"] { color: var(--draw-rose); }

.draw-helper-dialog {
    background: transparent;
    border: 0;
    color: var(--draw-text);
    height: min(960px, calc(100dvh - 32px));
    margin: auto;
    max-height: none;
    max-width: none;
    overflow: hidden;
    padding: 0;
    width: min(1600px, calc(100vw - 32px));
}

.draw-helper-dialog::backdrop {
    background: rgba(13, 18, 23, 0.72);
    backdrop-filter: blur(6px);
}

.draw-helper-dialog[open] {
    animation: helper-open 300ms cubic-bezier(0.2, 0.86, 0.2, 1) both;
}

.draw-helper-shell {
    background: #282f36;
    border: 1px solid rgba(157, 181, 203, 0.4);
    border-radius: 8px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

.draw-helper-head {
    align-items: center;
    background: #30373e;
    border-bottom: 1px solid rgba(159, 180, 199, 0.24);
    display: flex;
    gap: 12px;
    min-width: 0;
    min-height: 66px;
    overflow: hidden;
    padding: 9px 12px;
    width: 100%;
}

.draw-helper-head > .draw-icon-button {
    flex: 0 0 auto;
    margin-left: auto;
}

.draw-helper-nav {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.draw-helper-nav::-webkit-scrollbar {
    display: none;
}

.draw-helper-nav button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #aeb9c4;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 740;
    height: 46px;
    padding: 0 18px;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.draw-helper-nav button:hover,
.draw-helper-nav button:focus-visible {
    background: rgba(144, 181, 216, 0.08);
    color: #edf3f8;
    outline: none;
}

.draw-helper-nav button.is-active {
    border-bottom-color: #93bce5;
    color: #c6e1f7;
}

.draw-helper-content {
    overflow-y: auto;
    scroll-behavior: smooth;
    scroll-padding-top: 16px;
    scrollbar-color: #66819b #232a30;
    scrollbar-width: thin;
}

.draw-helper-section {
    border-bottom: 1px solid rgba(157, 180, 201, 0.2);
    margin: 0 auto;
    max-width: 1540px;
    padding: clamp(24px, 3vw, 46px) clamp(18px, 3.2vw, 52px);
    scroll-margin-top: 12px;
}

.draw-helper-section:last-child {
    border-bottom: 0;
}

.draw-helper-section h2,
.draw-helper-section h3 {
    letter-spacing: 0;
    margin: 0;
}

.draw-helper-section h2 {
    color: #f0f5f9;
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
    font-weight: 720;
    line-height: 1.05;
    margin-bottom: 22px;
}

.draw-helper-section h3 {
    color: #b9d4ec;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.draw-helper-steps {
    counter-reset: none;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(7, minmax(125px, 1fr));
    list-style: none;
    margin: 0 0 30px;
    overflow-x: auto;
    padding: 0 0 4px;
}

.draw-helper-steps li {
    align-content: start;
    border-left: 1px solid rgba(161, 183, 203, 0.22);
    display: grid;
    gap: 11px;
    min-height: 104px;
    padding: 13px 16px;
}

.draw-helper-steps li:last-child {
    border-right: 1px solid rgba(161, 183, 203, 0.22);
}

.draw-helper-steps b,
.draw-helper-rules b {
    align-items: center;
    background: #3b4a58;
    border: 1px solid #576d81;
    border-radius: 50%;
    color: #c6def2;
    display: inline-flex;
    font-size: 0.72rem;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.draw-helper-steps span {
    color: #d9e0e7;
    font-size: 0.84rem;
    line-height: 1.4;
}

.draw-helper-steps strong,
.draw-helper-rules strong {
    font-weight: 760;
}

.draw-helper-columns,
.draw-helper-numbering {
    display: grid;
    gap: clamp(22px, 3vw, 44px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.draw-helper-block {
    min-width: 0;
}

.draw-helper-table-wrap {
    border: 1px solid rgba(157, 180, 201, 0.24);
    border-radius: 6px;
    overflow-x: auto;
    scrollbar-color: #66819b #232a30;
    scrollbar-width: thin;
}

.draw-helper-table {
    border-collapse: collapse;
    color: #d8e0e7;
    font-size: 0.85rem;
    line-height: 1.35;
    min-width: 820px;
    width: 100%;
}

.draw-helper-table--compact {
    min-width: 520px;
}

.draw-helper-table th,
.draw-helper-table td {
    border-bottom: 1px solid rgba(157, 180, 201, 0.16);
    padding: 11px 13px;
    text-align: left;
    vertical-align: middle;
}

.draw-helper-table tr:last-child td {
    border-bottom: 0;
}

.draw-helper-table th {
    background: #343d45;
    color: #a9bad0;
    font-size: 0.69rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 2;
}

.draw-helper-table tbody tr {
    background: #2b3239;
}

.draw-helper-table tbody tr:nth-child(even) {
    background: #2e353c;
}

.draw-helper-table tbody tr:hover {
    background: #35404a;
}

.draw-helper-priority-table {
    min-width: 1180px;
}

.draw-helper-priority-table th:nth-child(1),
.draw-helper-priority-table td:nth-child(1) {
    text-align: center;
    width: 46px;
}

.draw-helper-priority-table th:nth-child(2) { width: 145px; }
.draw-helper-priority-table th:nth-child(3) { width: 245px; }
.draw-helper-priority-table th:nth-child(4) { width: 145px; }
.draw-helper-priority-table th:nth-child(5) { width: 210px; }

.draw-helper-priority-table tr[data-rank="top"] td:first-child { border-left: 4px solid #e6aaad; color: #efbec1; }
.draw-helper-priority-table tr[data-rank="high"] td:first-child { border-left: 4px solid #e6c58f; color: #efd6aa; }
.draw-helper-priority-table tr[data-rank="mid"] td:first-child { border-left: 4px solid #c2b8e6; color: #d2c9ef; }
.draw-helper-priority-table tr[data-rank="bond"] td:first-child { border-left: 4px solid #91bce7; color: #b6d8f5; }
.draw-helper-priority-table tr[data-rank="base"] td:first-child { border-left: 4px solid #8fd4b4; color: #b2e5cc; }

.draw-helper-structure {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 112px;
    justify-content: center;
    min-width: 205px;
    overflow: hidden;
}

.draw-helper-structure svg {
    display: block;
    height: 84px;
    max-width: 210px;
    width: 100%;
}

.draw-helper-structure > span {
    font-size: 0.72rem;
    font-weight: 760;
    line-height: 1;
}

.draw-helper-checkline,
.draw-helper-examples article p {
    align-items: center;
    color: #cbd5de;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    gap: 8px;
    margin: 14px 0 0;
}

.draw-helper-checkline i,
.draw-helper-examples article p i {
    background: #607080;
    border-radius: 50%;
    display: inline-block;
    height: 3px;
    width: 3px;
}

.draw-helper-rules {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.draw-helper-rules li {
    align-items: start;
    border-bottom: 1px solid rgba(157, 180, 201, 0.17);
    color: #d5dde5;
    display: grid;
    font-size: 0.88rem;
    gap: 12px;
    grid-template-columns: 27px minmax(0, 1fr);
    line-height: 1.48;
    padding: 10px 2px;
}

.draw-helper-rules li:last-child {
    border-bottom: 0;
}

.draw-root-grid {
    border-left: 1px solid rgba(157, 180, 201, 0.22);
    border-top: 1px solid rgba(157, 180, 201, 0.22);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.draw-root-grid > span {
    border-bottom: 1px solid rgba(157, 180, 201, 0.22);
    border-right: 1px solid rgba(157, 180, 201, 0.22);
    display: grid;
    gap: 2px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 11px;
}

.draw-root-grid b {
    color: #8396a9;
    font-size: 0.74rem;
    grid-row: 1 / 3;
}

.draw-root-grid strong {
    color: #b7d7f2;
    font-size: 1rem;
}

.draw-root-grid small {
    color: #939fac;
    font-size: 0.72rem;
}

.draw-helper-examples {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.draw-helper-examples article {
    background: #2c343b;
    border: 1px solid rgba(157, 180, 201, 0.22);
    border-radius: 7px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    min-height: 142px;
    overflow: hidden;
    padding: 15px;
}

.draw-helper-examples article h3 {
    align-self: end;
    color: #edf3f8;
    font-size: 0.96rem;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}

.draw-helper-examples article p {
    align-self: start;
    grid-column: 1;
    margin-top: 8px;
}

.draw-helper-example-structure {
    align-self: stretch;
    border-left: 1px solid rgba(157, 180, 201, 0.18);
    display: grid;
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 110px;
    padding-left: 10px;
    place-items: center;
}

.draw-helper-example-structure svg {
    display: block;
    height: 112px;
    width: 100%;
}

.chem-suffix,
.chem-oxygen { color: #f0aaa6; }
.chem-carbon { color: #b8d9f4; }
.chem-locant,
.chem-repeat { color: #efca91; }
.chem-bond { color: #99c8ef; }
.chem-group,
.chem-nitrogen { color: #cbbcf1; }
.chem-halogen { color: #93dbb9; }
.chem-hydrogen { color: #d6dce2; }

.draw-daily-dialog {
    background: transparent;
    border: 0;
    color: var(--draw-text);
    margin: auto;
    max-height: min(88dvh, 680px);
    max-width: min(820px, calc(100vw - 30px));
    opacity: 0;
    overflow: hidden;
    padding: 0;
    transform: translateY(10px) scale(0.985);
    transition: opacity 160ms ease, transform 160ms ease;
    width: 820px;
}

.draw-daily-dialog::backdrop {
    background: rgba(12, 16, 20, 0.66);
    backdrop-filter: blur(3px);
}

.draw-daily-dialog[open] { display: block; }
.draw-daily-dialog.is-open { opacity: 1; transform: translateY(0) scale(1); }
.draw-daily-dialog:not([open]) { display: none; }

.draw-daily-dialog-shell {
    background:
        radial-gradient(circle at 14% 0%, rgba(147, 204, 158, 0.15), transparent 22rem),
        linear-gradient(135deg, rgba(49, 56, 64, 0.99), rgba(41, 48, 55, 0.99));
    border: 1px solid #536372;
    border-radius: 8px;
    box-shadow: 0 28px 90px rgba(7, 10, 14, 0.48);
    overflow: hidden;
    position: relative;
}

.draw-daily-dialog-head {
    align-items: center;
    border-bottom: 1px solid rgba(148, 166, 187, 0.22);
    display: flex;
    justify-content: space-between;
    min-height: 66px;
    padding: 9px 12px 9px 18px;
}

.draw-daily-dialog-key {
    display: flex;
    gap: 5px;
}

.draw-daily-dialog-key span,
.draw-daily-calendar-legend i {
    border: 1px solid rgba(146, 166, 186, 0.16);
    border-radius: 3px;
    display: inline-block;
    height: 12px;
    width: 12px;
}

.draw-daily-calendar-legend i {
    flex: 0 0 auto;
}

.draw-daily-dialog-content {
    display: grid;
    gap: 14px;
    padding: 18px 20px 20px;
}

.draw-daily-summary {
    background: rgba(38, 44, 51, 0.72);
    border: 1px solid rgba(148, 166, 187, 0.22);
    border-radius: 7px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px;
}

.draw-daily-stat {
    display: grid;
    gap: 5px;
}

.draw-daily-stat span {
    color: #9ac7ee;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.draw-daily-stat strong {
    color: #edf3f8;
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.draw-daily-calendar-wrap {
    background: rgba(47, 53, 60, 0.48);
    border: 1px solid rgba(148, 166, 187, 0.2);
    border-radius: 7px;
    overflow-x: auto;
    padding: 14px;
    scrollbar-color: #6e8fb4 #2f353c;
    scrollbar-width: thin;
}

.draw-daily-calendar-grid {
    display: grid;
    gap: 4px;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 13px);
    margin: 0 auto;
    width: max-content;
}

.draw-daily-calendar-day {
    border: 1px solid rgba(146, 166, 186, 0.16);
    border-radius: 3px;
    display: inline-block;
    height: 13px;
    transition: border-color 120ms ease, transform 120ms ease;
    width: 13px;
}

.draw-daily-calendar-day:hover {
    border-color: rgba(223, 239, 255, 0.82);
    transform: scale(1.22);
}

.draw-daily-dialog [data-level="0"] { background: rgba(70, 82, 94, 0.62); }
.draw-daily-dialog [data-level="1"] { background: rgba(74, 127, 86, 0.76); }
.draw-daily-dialog [data-level="2"] { background: rgba(91, 165, 102, 0.82); }
.draw-daily-dialog [data-level="3"] { background: rgba(120, 200, 128, 0.9); }
.draw-daily-dialog [data-level="4"] { background: #b9ecaf; }
.draw-daily-dialog [data-level="5"] { background: #2be3a9; }
.draw-daily-dialog [data-level="6"] { background: #72e4ff; }
.draw-daily-dialog [data-level="7"] { background: #c8b8ff; }

.draw-daily-calendar-legend {
    align-items: center;
    color: #aebac6;
    display: flex;
    font-size: 0.74rem;
    font-weight: 760;
    gap: 6px;
    justify-content: flex-end;
}

.draw-daily-tooltip {
    background: #20272e;
    border: 1px solid rgba(170, 204, 235, 0.42);
    border-radius: 6px;
    color: #e8eef5;
    display: grid;
    gap: 3px;
    left: 0;
    max-width: min(190px, calc(100vw - 48px));
    opacity: 0;
    padding: 9px 11px;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity 90ms ease, transform 90ms ease;
    white-space: nowrap;
    width: max-content;
    z-index: 9999;
}

.draw-daily-tooltip.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.draw-daily-tooltip span { color: #aacceb; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.draw-daily-tooltip strong { color: #f2f7fb; font-size: 0.95rem; line-height: 1.05; }
.draw-daily-tooltip em { color: #f0c88d; font-size: 0.78rem; font-style: normal; font-weight: 760; }

.draw-daily-dialog-spinner {
    animation: draw-spin 740ms linear infinite;
    border: 2px solid rgba(172, 196, 216, 0.18);
    border-radius: 50%;
    border-right-color: var(--draw-blue);
    border-top-color: #dcebf7;
    height: 38px;
    margin: 110px auto;
    width: 38px;
}

.draw-stats-dialog {
    width: min(1500px, calc(100vw - 40px));
    height: min(900px, calc(100dvh - 40px));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(163, 190, 214, 0.42);
    border-radius: 8px;
    background: #2b3239;
    color: var(--draw-text);
    box-shadow: 0 28px 80px rgba(5, 9, 13, 0.5);
}

.draw-stats-dialog::backdrop {
    background: rgba(15, 20, 25, 0.68);
    backdrop-filter: blur(7px);
}

.draw-stats-dialog[open] {
    animation: stats-open 340ms cubic-bezier(0.2, 0.86, 0.2, 1) both;
}

.draw-stats-shell {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.draw-stats-head {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(159, 180, 199, 0.22);
    background: rgba(39, 45, 51, 0.74);
}

.draw-stats-filter {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--draw-border);
    border-radius: 7px;
}

.draw-stats-filter button {
    min-width: 90px;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid rgba(156, 177, 196, 0.2);
    background: transparent;
    color: var(--draw-muted);
    font-weight: 740;
    cursor: pointer;
}

.draw-stats-filter button:last-child { border-right: 0; }
.draw-stats-filter button:hover { color: white; background: rgba(143, 182, 218, 0.1); }
.draw-stats-filter button.is-active { color: #101a24; background: #8cb2d8; }
.draw-stats-filter button[data-stats-family="Special"] { color: #f0abc5; background: rgba(225, 111, 157, 0.08); }
.draw-stats-filter button[data-stats-family="Special"].is-active { color: #24141c; background: #e89ab8; }
.draw-stats-head .draw-icon-button { margin-left: auto; }

.draw-stats-content {
    overflow-y: auto;
    padding: clamp(16px, 2vw, 30px);
}

.draw-stats-loading {
    height: 100%;
    display: grid;
    place-items: center;
}

.draw-stats-spinner {
    width: 42px;
    height: 42px;
    border: 2px solid rgba(172, 196, 216, 0.18);
    border-top-color: #dcebf7;
    border-right-color: var(--draw-blue);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(123, 178, 223, 0.08);
    animation: draw-spin 740ms linear infinite;
}

.draw-stat-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.draw-stat-metric {
    position: relative;
    min-height: 156px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(158, 180, 200, 0.24);
    border-radius: 7px;
    background: rgba(35, 41, 47, 0.52);
    opacity: 0;
    transform: translateY(12px);
    animation: stat-rise 440ms var(--delay, 0ms) cubic-bezier(0.2, 0.82, 0.2, 1) forwards;
}

.draw-stat-metric::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--tone, var(--draw-blue));
    transform: scaleX(var(--value, 0));
    transform-origin: left;
    transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.draw-stat-metric span {
    color: var(--draw-muted);
    font-size: 0.82rem;
    font-weight: 720;
}

.draw-stat-metric strong {
    display: block;
    margin-top: 19px;
    font-size: clamp(2rem, 3.6vw, 3.5rem);
    line-height: 1;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
}

.draw-stat-metric small {
    display: block;
    margin-top: 10px;
    color: var(--draw-dim);
    font-size: 0.78rem;
}

.draw-stat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 14px;
    margin-top: 14px;
}

.draw-stat-list,
.draw-stat-side {
    border: 1px solid rgba(158, 180, 200, 0.24);
    border-radius: 7px;
    background: rgba(35, 41, 47, 0.42);
}

.draw-stat-card {
    min-height: 74px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(154, 176, 196, 0.15);
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}

.draw-stat-card:last-child { border-bottom: 0; }
.draw-stat-card:hover { background: rgba(142, 181, 216, 0.09); transform: translateX(2px); }

.draw-stat-card > i {
    width: 10px;
    height: 10px;
    justify-self: center;
    border-radius: 50%;
    background: var(--draw-dim);
    box-shadow: 0 0 0 6px rgba(128, 140, 152, 0.08);
}

.draw-stat-card[data-state="known"] > i { background: var(--draw-blue); box-shadow: 0 0 0 6px rgba(152, 190, 232, 0.09); }
.draw-stat-card[data-state="reliable"] > i { background: var(--draw-mint); box-shadow: 0 0 0 6px rgba(143, 212, 180, 0.09); }
.draw-stat-card[data-state="missed"] > i { background: var(--draw-rose); box-shadow: 0 0 0 6px rgba(231, 170, 169, 0.09); }

.draw-stat-card div { min-width: 0; }
.draw-stat-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.94rem; }
.draw-stat-card span { display: block; margin-top: 3px; color: var(--draw-muted); font-size: 0.76rem; }
.draw-stat-card b { color: #d7e0e8; font-size: 0.88rem; font-variant-numeric: tabular-nums; }

.draw-stat-side {
    align-self: start;
    padding: 16px;
}

.draw-stat-side-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(156, 178, 198, 0.16);
}

.draw-stat-side-row:last-child { border-bottom: 0; }
.draw-stat-side-row span { color: var(--draw-muted); font-size: 0.84rem; }
.draw-stat-side-row strong { font-size: 1rem; font-variant-numeric: tabular-nums; }

.draw-empty-copy {
    min-height: 260px;
    display: grid;
    place-items: center;
    color: var(--draw-muted);
}

.draw-tooltip {
    position: fixed;
    z-index: 200;
    max-width: min(280px, calc(100vw - 24px));
    padding: 7px 9px;
    border: 1px solid rgba(163, 188, 211, 0.34);
    border-radius: 5px;
    background: rgba(29, 35, 40, 0.96);
    color: #e7edf3;
    box-shadow: 0 10px 26px rgba(5, 10, 15, 0.3);
    font-size: 0.75rem;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 130ms ease, transform 130ms ease;
}

.draw-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.draw-goal-celebration {
    animation: draw-goal-fade 5s linear forwards;
    background:
        radial-gradient(circle at 50% 48%, rgba(204, 255, 194, 0.30), rgba(87, 216, 126, 0.16) 30%, rgba(26, 100, 57, 0.08) 58%, transparent 78%),
        linear-gradient(180deg, rgba(116, 236, 148, 0.10), transparent 45%, rgba(79, 189, 107, 0.08));
    inset: 0;
    isolation: isolate;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 10000;
}

.draw-goal-celebration.is-double-goal {
    animation: draw-double-goal-fade 8s linear forwards;
    background:
        radial-gradient(circle at 50% 48%, rgba(222, 255, 251, 0.34), rgba(43, 227, 169, 0.19) 24%, rgba(75, 171, 255, 0.12) 48%, transparent 76%),
        radial-gradient(ellipse 70% 45% at 18% 80%, rgba(87, 213, 255, 0.13), transparent 70%),
        radial-gradient(ellipse 65% 40% at 88% 18%, rgba(109, 255, 206, 0.13), transparent 72%);
}

.draw-goal-celebration.is-triple-goal {
    animation: draw-triple-goal-fade 10.55s linear forwards;
    background:
        radial-gradient(circle at 50% 48%, rgba(237, 255, 253, 0.39), rgba(43, 227, 169, 0.22) 21%, rgba(88, 191, 255, 0.15) 44%, transparent 75%),
        radial-gradient(ellipse 78% 52% at 10% 86%, rgba(69, 233, 190, 0.17), transparent 70%),
        radial-gradient(ellipse 72% 50% at 92% 12%, rgba(105, 201, 255, 0.18), transparent 72%),
        radial-gradient(ellipse 54% 42% at 52% 88%, rgba(197, 181, 255, 0.12), transparent 74%);
}

.draw-goal-celebration.is-quadruple-goal {
    animation: draw-quadruple-goal-fade 13.9s linear forwards;
    background:
        radial-gradient(circle at 50% 48%, rgba(247, 255, 254, 0.44), rgba(43, 227, 169, 0.25) 19%, rgba(89, 194, 255, 0.18) 40%, rgba(194, 170, 255, 0.09) 61%, transparent 78%),
        radial-gradient(ellipse 86% 58% at 6% 90%, rgba(65, 239, 189, 0.20), transparent 70%),
        radial-gradient(ellipse 80% 56% at 95% 8%, rgba(96, 207, 255, 0.21), transparent 72%),
        radial-gradient(ellipse 62% 48% at 48% 94%, rgba(211, 181, 255, 0.16), transparent 74%),
        radial-gradient(ellipse 52% 36% at 52% 3%, rgba(255, 225, 163, 0.10), transparent 74%);
}

.draw-goal-celebration::before,
.draw-goal-celebration::after {
    border: 3px solid rgba(203, 255, 198, 0.54);
    border-radius: 50%;
    content: "";
    height: 18vmin;
    left: 50%;
    position: absolute;
    top: 48%;
    transform: translate(-50%, -50%) scale(0.1);
    width: 18vmin;
}

.draw-goal-celebration::before {
    animation: draw-goal-shockwave 2.2s 80ms cubic-bezier(0.16, 0.72, 0.22, 1) forwards;
    box-shadow: 0 0 34px rgba(174, 255, 177, 0.44), inset 0 0 24px rgba(166, 248, 167, 0.24);
}

.draw-goal-celebration::after {
    animation: draw-goal-shockwave 2.6s 420ms cubic-bezier(0.16, 0.72, 0.22, 1) forwards;
    border-color: rgba(135, 239, 157, 0.32);
}

.draw-goal-celebration.is-double-goal::before,
.draw-goal-celebration.is-triple-goal::before,
.draw-goal-celebration.is-quadruple-goal::before {
    animation-name: draw-wide-goal-shockwave;
    animation-duration: 3.4s;
    border-color: rgba(203, 255, 245, 0.86);
    box-shadow: 0 0 64px rgba(43, 227, 169, 0.58), 0 0 104px rgba(99, 199, 255, 0.29), inset 0 0 38px rgba(218, 255, 248, 0.36);
}

.draw-goal-celebration.is-triple-goal::before { animation-duration: 4.2s; }
.draw-goal-celebration.is-quadruple-goal::before { animation-duration: 5.2s; }

.draw-goal-celebration.is-double-goal::after,
.draw-goal-celebration.is-triple-goal::after,
.draw-goal-celebration.is-quadruple-goal::after {
    animation-name: draw-wide-goal-shockwave;
    animation-duration: 4.1s;
    border-color: rgba(135, 211, 255, 0.58);
    box-shadow: 0 0 82px rgba(92, 195, 255, 0.32), 0 0 40px rgba(195, 180, 255, 0.20);
}

.draw-goal-celebration.is-triple-goal::after { animation-duration: 5.1s; }
.draw-goal-celebration.is-quadruple-goal::after { animation-duration: 6.4s; }

.draw-goal-confetti {
    animation: draw-goal-confetti var(--duration) cubic-bezier(0.18, 0.72, 0.32, 1) var(--delay) forwards;
    background: var(--color);
    border-radius: var(--radius);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color) 58%, transparent);
    height: var(--height);
    left: var(--left);
    opacity: 0;
    position: absolute;
    top: -8vh;
    width: var(--width);
    z-index: 2;
}

.draw-goal-burst {
    animation: draw-goal-burst-core 1.7s ease-out var(--delay) forwards;
    height: 1px;
    left: var(--left);
    opacity: 0;
    position: absolute;
    top: var(--top);
    width: 1px;
    z-index: 3;
}

.draw-goal-burst::before {
    animation: draw-goal-burst-ring 1.55s ease-out var(--delay) forwards;
    border: 2px solid rgba(197, 255, 192, 0.76);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(139, 240, 159, 0.44);
    content: "";
    height: 12px;
    left: -7px;
    opacity: 0;
    position: absolute;
    top: -7px;
    width: 12px;
}

.draw-goal-spark {
    animation: draw-goal-spark 1.45s cubic-bezier(0.12, 0.7, 0.28, 1) var(--delay) forwards;
    background: var(--color);
    border-radius: 999px;
    box-shadow: 0 0 10px var(--color);
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: rotate(var(--angle)) translateX(0) scaleX(0.5);
    transform-origin: left center;
    width: var(--length);
}

.draw-goal-beam {
    animation: draw-goal-beam 2.35s cubic-bezier(0.14, 0.72, 0.24, 1) var(--delay) forwards;
    background: linear-gradient(90deg, rgba(244, 255, 252, 0.86), rgba(43, 227, 169, 0.24) 22%, rgba(91, 193, 255, 0.12) 58%, transparent 100%);
    filter: blur(4px) drop-shadow(0 0 16px rgba(43, 227, 169, 0.36));
    height: clamp(20px, 4vmin, 58px);
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 49%;
    transform: rotate(var(--angle)) scaleX(0.04);
    transform-origin: left center;
    width: 82vmax;
    z-index: 1;
}

.draw-goal-celebration.is-triple-goal .draw-goal-beam { animation-duration: 3.25s; }
.draw-goal-celebration.is-quadruple-goal .draw-goal-beam { animation-duration: 4.1s; }

.draw-goal-aurora {
    animation: draw-goal-aurora 5.8s ease-in-out var(--delay) forwards;
    background: linear-gradient(105deg, transparent, rgba(43, 227, 169, 0.20) 32%, rgba(95, 197, 255, 0.16) 62%, transparent);
    border-radius: 50%;
    filter: blur(24px);
    height: 18vmin;
    left: var(--left);
    opacity: 0;
    position: absolute;
    top: var(--top);
    transform: rotate(var(--rotate)) translate3d(-8vw, 0, 0) scale(0.8);
    width: 58vw;
    z-index: 0;
}

.draw-goal-celebration.is-triple-goal .draw-goal-aurora { animation-duration: 8.4s; height: 21vmin; width: 64vw; }
.draw-goal-celebration.is-quadruple-goal .draw-goal-aurora { animation-duration: 11.3s; height: 24vmin; width: 70vw; }

.draw-goal-emblem {
    animation: draw-goal-emblem 5.2s cubic-bezier(0.16, 0.82, 0.22, 1) 260ms forwards;
    color: rgba(239, 255, 252, 0.98);
    font-size: clamp(5rem, 17vmin, 12rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    left: 50%;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0;
    position: absolute;
    text-shadow: 0 0 12px rgba(231, 255, 250, 0.82), 0 0 36px rgba(43, 227, 169, 0.56), 0 0 76px rgba(88, 184, 255, 0.34);
    top: 49%;
    transform: translate(-50%, -50%) scale(0.55);
    z-index: 4;
}

.draw-goal-celebration.is-triple-goal .draw-goal-emblem { animation-duration: 7.2s; }
.draw-goal-celebration.is-quadruple-goal .draw-goal-emblem { animation-duration: 9.6s; }

.draw-goal-bloom {
    animation: draw-goal-bloom 5.7s cubic-bezier(0.12, 0.72, 0.2, 1) var(--delay) forwards;
    background: radial-gradient(circle, rgba(239, 255, 252, 0.30), rgba(43, 227, 169, 0.13) 24%, rgba(95, 197, 255, 0.08) 48%, transparent 72%);
    border: 2px solid rgba(184, 255, 240, 0.44);
    border-radius: 50%;
    box-shadow: 0 0 34px rgba(43, 227, 169, 0.26), inset 0 0 26px rgba(116, 215, 255, 0.13);
    height: var(--size);
    left: var(--left);
    opacity: 0;
    position: absolute;
    top: var(--top);
    transform: translate(-50%, -50%) scale(0.12);
    width: var(--size);
    z-index: 1;
}

.draw-goal-celebration.is-quadruple-goal .draw-goal-bloom { animation-duration: 7.2s; }

.draw-goal-comet {
    animation: draw-goal-comet var(--duration) cubic-bezier(0.1, 0.72, 0.2, 1) var(--delay) forwards;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color) 35%, transparent) 38%, var(--color) 92%);
    border-radius: 999px;
    filter: drop-shadow(0 0 9px var(--color));
    height: 3px;
    left: var(--left);
    opacity: 0;
    position: absolute;
    top: var(--top);
    transform: rotate(var(--angle)) translateX(0) scaleX(0.3);
    transform-origin: right center;
    width: clamp(72px, 11vw, 190px);
    z-index: 3;
}

@keyframes draw-forest-drift {
    from { filter: saturate(0.94) brightness(0.96); transform: translate3d(18px, -12px, 0) scale(1.04); }
    to { filter: saturate(1.12) brightness(1.04); transform: translate3d(-42px, 30px, 0) scale(1.09); }
}

@keyframes draw-forest-mist {
    from { opacity: 0.7; transform: translate3d(-32px, 20px, 0) scale(1.05); }
    to { opacity: 0.92; transform: translate3d(46px, -28px, 0) scale(1.12); }
}

@keyframes draw-double-forest-drift {
    from { filter: saturate(1) brightness(0.98); transform: translate3d(28px, -18px, 0) scale(1.05); }
    to { filter: saturate(1.18) brightness(1.06); transform: translate3d(-58px, 38px, 0) scale(1.12); }
}

@keyframes draw-double-forest-mist {
    from { opacity: 0.72; transform: translate3d(-48px, 32px, 0) scale(1.06); }
    to { opacity: 0.98; transform: translate3d(66px, -42px, 0) scale(1.15); }
}

@keyframes draw-triple-forest-drift {
    from { filter: saturate(1.03) brightness(0.99) drop-shadow(0 0 8px rgba(43, 227, 169, 0.08)); transform: translate3d(36px, -24px, 0) scale(1.07); }
    to { filter: saturate(1.23) brightness(1.08) drop-shadow(0 0 15px rgba(91, 202, 255, 0.13)); transform: translate3d(-72px, 46px, 0) scale(1.15); }
}

@keyframes draw-triple-forest-mist {
    from { filter: blur(19px) brightness(0.98) drop-shadow(0 0 10px rgba(43, 227, 169, 0.09)); opacity: 0.78; transform: translate3d(-58px, 38px, 0) scale(1.08); }
    to { filter: blur(22px) brightness(1.08) drop-shadow(0 0 18px rgba(105, 201, 255, 0.14)); opacity: 1; transform: translate3d(78px, -48px, 0) scale(1.18); }
}

@keyframes draw-quadruple-forest-drift {
    from { filter: saturate(1.06) brightness(1) drop-shadow(0 0 12px rgba(43, 227, 169, 0.11)); transform: translate3d(44px, -30px, 0) scale(1.08); }
    to { filter: saturate(1.29) brightness(1.11) drop-shadow(0 0 22px rgba(91, 202, 255, 0.16)); transform: translate3d(-88px, 56px, 0) scale(1.18); }
}

@keyframes draw-quadruple-forest-mist {
    from { filter: blur(21px) brightness(1) drop-shadow(0 0 14px rgba(43, 227, 169, 0.13)); opacity: 0.82; transform: translate3d(-70px, 44px, 0) scale(1.1); }
    to { filter: blur(25px) brightness(1.11) drop-shadow(0 0 24px rgba(105, 201, 255, 0.18)) drop-shadow(0 0 13px rgba(211, 185, 255, 0.11)); opacity: 1; transform: translate3d(92px, -58px, 0) scale(1.21); }
}

@keyframes draw-daily-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes draw-goal-fade {
    0% { opacity: 0; }
    5% { opacity: 1; }
    74% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes draw-double-goal-fade {
    0% { opacity: 0; }
    3% { opacity: 1; }
    84% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes draw-triple-goal-fade {
    0% { opacity: 0; }
    2.5% { opacity: 1; }
    87% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes draw-quadruple-goal-fade {
    0% { opacity: 0; }
    2% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes draw-goal-shockwave {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
    18% { opacity: 0.92; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(8.5); }
}

@keyframes draw-wide-goal-shockwave {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.04) rotate(-6deg); }
    13% { opacity: 1; }
    52% { opacity: 0.68; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(16) rotate(22deg); }
}

@keyframes draw-goal-confetti {
    0% { opacity: 0; transform: translate3d(0, -4vh, 0) rotate(0deg); }
    8% { opacity: 1; }
    82% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--drift), 116vh, 0) rotate(var(--spin)); }
}

@keyframes draw-goal-burst-core {
    0% { opacity: 0; }
    12% { opacity: 1; }
    78% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes draw-goal-burst-ring {
    0% { opacity: 0; transform: scale(0.2); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: scale(8.4); }
}

@keyframes draw-goal-spark {
    0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scaleX(0.45); }
    15% { opacity: 1; }
    72% { opacity: 0.95; }
    100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--distance)) scaleX(0.08); }
}

@keyframes draw-goal-beam {
    0% { opacity: 0; transform: rotate(var(--angle)) scaleX(0.04); }
    16% { opacity: 0.9; }
    48% { opacity: 0.56; transform: rotate(var(--angle)) scaleX(1); }
    100% { opacity: 0; transform: rotate(var(--angle)) scaleX(1.18); }
}

@keyframes draw-goal-aurora {
    0% { opacity: 0; transform: rotate(var(--rotate)) translate3d(-8vw, 0, 0) scale(0.8); }
    24% { opacity: 0.82; }
    72% { opacity: 0.52; }
    100% { opacity: 0; transform: rotate(var(--rotate)) translate3d(10vw, -3vh, 0) scale(1.2); }
}

@keyframes draw-goal-emblem {
    0% { filter: blur(12px); opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
    16% { filter: blur(0); opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    28% { transform: translate(-50%, -50%) scale(1); }
    72% { opacity: 0.92; }
    100% { filter: blur(3px); opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes draw-goal-bloom {
    0% { filter: blur(9px); opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
    17% { filter: blur(0); opacity: 0.88; }
    52% { opacity: 0.5; }
    100% { filter: blur(4px); opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

@keyframes draw-goal-comet {
    0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scaleX(0.25); }
    13% { opacity: 1; }
    68% { opacity: 0.92; }
    100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--distance)) scaleX(1.18); }
}

@keyframes draw-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes helper-open {
    from { opacity: 0; transform: translateY(16px) scale(0.988); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes guide-flow {
    to { stroke-dashoffset: -16; }
}

@keyframes draw-spin {
    to { transform: rotate(360deg); }
}

@keyframes result-pop {
    0% { transform: scale(0.75) rotate(-8deg); }
    60% { transform: scale(1.12) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes stats-open {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stat-rise {
    to { opacity: 1; transform: translateY(0); }
}

.organic-mode-switch {
    width: min(650px, 100%);
    height: 50px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid var(--draw-border);
    border-radius: 8px;
    background: rgba(37, 43, 49, 0.84);
    box-shadow: 0 10px 24px rgba(9, 14, 19, 0.12);
}

.organic-mode-switch button {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 15px;
    border: 0;
    border-right: 1px solid rgba(154, 175, 195, 0.2);
    background: transparent;
    color: #b8c3ce;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 760;
    transition: color 170ms ease, background-color 170ms ease, transform 170ms ease;
}

.organic-mode-switch button:last-child { border-right: 0; }
.organic-mode-switch button:hover { color: white; background: rgba(143, 183, 219, 0.09); }
.organic-mode-switch button:active { transform: scale(0.97); }
.organic-mode-switch button.is-active { color: #111c26; background: #86acd2; }
.organic-mode-switch button:nth-child(2).is-active { background: #a9b9df; }
.organic-mode-switch button:nth-child(3).is-active { background: #9fcdbd; }
.organic-mode-switch svg { width: 21px; height: 21px; flex: 0 0 auto; }

.organic-quiz-board {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--draw-border);
    border-radius: 8px;
    background: var(--draw-panel-2);
    box-shadow: var(--draw-shadow);
}

.organic-quiz-board.is-mode-entering {
    animation: organic-mode-enter 540ms cubic-bezier(0.16, 0.82, 0.22, 1) both;
}

@keyframes organic-mode-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.organic-quiz-stage {
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(480px, 1.1fr);
    background: #252b31;
}

.organic-quiz-stage.is-options-only { grid-template-columns: minmax(0, 1fr); }
.organic-quiz-stage.is-correct { animation: draw-correct-pulse 620ms cubic-bezier(.2, .85, .25, 1); }
.organic-quiz-stage.is-wrong { animation: draw-wrong-pulse 520ms cubic-bezier(.25, .78, .3, 1); }

.organic-visual-pane {
    position: relative;
    min-width: 0;
    min-height: 650px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-right: 1px solid rgba(156, 178, 198, 0.2);
    background:
        radial-gradient(circle at 50% 47%, rgba(143, 183, 219, 0.07), transparent 57%),
        radial-gradient(circle, rgba(174, 193, 211, 0.11) 1.2px, transparent 1.4px) 0 0 / 30px 30px,
        #252b31;
    cursor: grab;
    touch-action: none;
}

.organic-visual-pane[hidden] { display: none !important; }

.organic-visual-pane.is-panning { cursor: grabbing; }
.organic-quiz-visual { width: 100%; height: 100%; display: grid; place-items: center; padding: 54px 42px 72px; }
.organic-visual-transform {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    transform-origin: center;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.organic-visual-pane.is-panning .organic-visual-transform { transition: none; }
.organic-quiz-visual > .organic-visual-transform > svg { width: min(100%, 680px); height: auto; max-height: 500px; }
.organic-visual-transform--structure-image { padding: 12px; }
.organic-structure-image {
    display: block;
    width: min(100%, 680px);
    height: auto;
    max-height: 520px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.organic-quiz-visual .organic-diagram-pair { width: 100%; }

.organic-view-tools {
    position: absolute;
    right: 13px;
    bottom: 13px;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--draw-border);
    border-radius: 7px;
    background: rgba(45, 52, 59, 0.9);
}

.organic-view-tools button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-right: 1px solid rgba(159, 180, 199, 0.2);
    background: transparent;
    color: #c6d0da;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.organic-view-tools button:last-child { border-right: 0; }
.organic-view-tools button:hover { color: white; background: rgba(139, 180, 216, 0.12); }
.organic-view-tools button:active { transform: scale(0.92); }

.organic-stereo-key {
    position: absolute;
    left: 15px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #8f9ba7;
    font-size: 0.7rem;
    font-weight: 720;
}

.organic-stereo-key i {
    width: 22px;
    height: 10px;
    background: #dce5ed;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.organic-stereo-key b {
    width: 22px;
    height: 10px;
    background: repeating-linear-gradient(90deg, #aeb9c5 0 2px, transparent 2px 4px);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.organic-response-pane {
    min-width: 0;
    max-height: 720px;
    overflow-y: auto;
    padding: clamp(22px, 3vw, 46px);
    scrollbar-color: rgba(145, 172, 196, 0.48) transparent;
}

.organic-quiz-stage.is-options-only .organic-response-pane { max-height: none; padding: clamp(20px, 2.4vw, 38px); }
.organic-quiz-options { display: grid; gap: 20px; }
.organic-choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.organic-choice-group legend {
    margin: 0 0 10px;
    padding: 0;
    color: #9fc4e6;
    font-size: 0.75rem;
    font-weight: 820;
    text-transform: uppercase;
}

.organic-choice-grid { display: grid; gap: 9px; }
.organic-choice-group--visual .organic-choice-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); align-items: stretch; }

.organic-choice {
    position: relative;
    min-width: 0;
    min-height: 62px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border: 1px solid rgba(157, 179, 199, 0.28);
    border-radius: 7px;
    background: rgba(48, 55, 62, 0.5);
    color: #dbe3ea;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1), border-color 170ms ease, background-color 170ms ease, color 170ms ease;
}

.organic-choice:hover {
    z-index: 1;
    border-color: rgba(158, 199, 234, 0.5);
    background: rgba(70, 87, 102, 0.45);
    color: #f4f7fa;
    transform: translateY(-2px) scale(1.006);
}

.organic-choice:active { transform: translateY(0) scale(0.985); }
.organic-choice.is-selected { border-color: rgba(145, 190, 230, 0.76); background: rgba(102, 150, 190, 0.2); }
.organic-choice.is-correct { border-color: rgba(126, 211, 171, 0.7); background: rgba(92, 171, 132, 0.17); }
.organic-choice.is-wrong { border-color: rgba(229, 161, 157, 0.7); background: rgba(178, 94, 92, 0.14); }

.organic-choice-key {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(161, 184, 204, 0.32);
    border-radius: 50%;
    color: #9eb2c4;
    font-size: 0.76rem;
    font-weight: 830;
}

.organic-choice.is-selected .organic-choice-key { border-color: #9fc8ec; background: #8ab1d5; color: #14202a; }
.organic-choice.is-correct .organic-choice-key { border-color: #9ce0bf; background: #8fd4b4; color: #11231b; }
.organic-choice.is-wrong .organic-choice-key { border-color: #efb2ae; background: #dc9693; color: #2a1515; }
.organic-choice-label { min-width: 0; font-size: 0.93rem; font-weight: 570; line-height: 1.42; overflow-wrap: anywhere; }

.organic-choice--visual {
    min-height: 290px;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: minmax(215px, 1fr) auto;
    align-items: start;
    padding: 10px;
}

.organic-choice-group--visual[data-visual-count="2"] .organic-choice--visual {
    min-height: 450px;
    grid-template-rows: minmax(365px, 1fr) auto;
}

.organic-choice-group--visual[data-visual-count="4"] .organic-choice--visual {
    min-height: 320px;
    grid-template-rows: minmax(245px, 1fr) auto;
}

.organic-choice-group--visual[data-visual-count="5"] .organic-choice--visual {
    min-height: 300px;
    grid-template-rows: minmax(225px, 1fr) auto;
}

.organic-choice--visual .organic-choice-key { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.organic-choice-diagram { grid-column: 1 / -1; grid-row: 1; min-width: 0; display: grid; place-items: center; }
.organic-choice-diagram .organic-diagram { width: 100%; max-width: 330px; height: auto; }
.organic-choice--visual .organic-choice-label { grid-column: 1 / -1; grid-row: 2; padding: 6px 4px 2px; text-align: center; }

.organic-quiz-feedback {
    min-height: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    margin-top: 22px;
    padding: 15px;
    border: 1px solid rgba(166, 190, 211, 0.3);
    border-radius: 7px;
    background: rgba(34, 40, 46, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(.2, .82, .2, 1), visibility 0s linear 260ms;
}

.organic-quiz-feedback[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.organic-quiz-feedback[data-result="correct"] { border-color: rgba(126, 211, 171, 0.5); }
.organic-quiz-feedback[data-result="wrong"] { border-color: rgba(229, 161, 157, 0.45); }
.organic-feedback-mark { width: 34px; height: 34px; border: 2px solid var(--draw-mint); border-radius: 50%; position: relative; }
.organic-feedback-mark::after { content: ""; position: absolute; left: 9px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--draw-mint); border-bottom: 2px solid var(--draw-mint); transform: rotate(-45deg); }
.organic-quiz-feedback[data-result="wrong"] .organic-feedback-mark { border-color: var(--draw-rose); }
.organic-quiz-feedback[data-result="wrong"] .organic-feedback-mark::after { left: 8px; top: 8px; width: 14px; height: 14px; border: 0; background: linear-gradient(45deg, transparent 44%, var(--draw-rose) 45%, var(--draw-rose) 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--draw-rose) 45%, var(--draw-rose) 55%, transparent 56%); transform: none; }
.organic-quiz-feedback strong { display: block; margin: 3px 0 7px; font-size: 1rem; }
.organic-quiz-feedback p { margin: 0; color: #d9e1e8; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.organic-quiz-feedback ol { display: grid; gap: 5px; margin: 10px 0 0; padding-left: 20px; color: #aebac5; font-size: 0.82rem; line-height: 1.42; }
.organic-quiz-feedback li::marker { color: var(--draw-blue); font-weight: 800; }
.organic-quiz-actions { background: rgba(44, 51, 58, 0.96); }

.organic-diagram { display: block; overflow: visible; }
.organic-diagram-bond,
.organic-diagram-ring { fill: none; stroke: #dce5ed; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.organic-diagram-ring { stroke-width: 5; }
.organic-diagram-bond--rear { stroke: #9eabb7; stroke-width: 3.5; }
.organic-diagram-bond--front { stroke-width: 4.6; }
.organic-diagram-bond--axial { stroke: #e4b889; }
.organic-diagram-bond--equatorial { stroke: #8fd4b4; }
.organic-chair-plane { fill: rgba(132, 151, 169, 0.045); stroke: none; }
.organic-chair-ring { fill: none; stroke: #dce5ed; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.organic-chair-front-edge { stroke: #f0f5f9; stroke-width: 6.5; stroke-linecap: round; }
.organic-chair-wedge { fill: #e4b889; }
.organic-chair-wedge.is-equatorial { fill: #8fd4b4; }
.organic-chair-hash { stroke: #e4b889; stroke-width: 2.7; stroke-linecap: round; }
.organic-chair-hash.is-equatorial { stroke: #8fd4b4; }
.organic-chair-label { font-size: 17px; }
.organic-chair-caption.is-axial { fill: #e4b889; }
.organic-chair-caption.is-equatorial { fill: #8fd4b4; }
.organic-newman-back { fill: #252b31; stroke: #aebac5; stroke-width: 4; }
.organic-newman-front { fill: #e4ebf1; }
.organic-diagram-label { fill: #dfe7ee; font: 700 18px Inter, ui-sans-serif, system-ui, sans-serif; dominant-baseline: middle; }
.organic-diagram-label--paired { font-size: 14px; }
.organic-diagram-label--sugar { font-size: 16px; }
.organic-diagram-caption { fill: #93a2b0; font: 700 14px Inter, ui-sans-serif, system-ui, sans-serif; }
.organic-diagram-oxygen { fill: #ef9d99; }
.organic-diagram-nitrogen { fill: #c0b9ed; }
.organic-diagram-carbon { fill: #e6c58f; }
.organic-diagram-hydrogen { fill: #aebac5; }
.organic-diagram-atom-mask { fill: #252b31; }
.organic-stereo-wedge { fill: #9fc4e6; opacity: 0.82; }
.organic-stereo-wedge.is-emphasized { fill: #8fd4b4; }
.organic-stereo-hash { stroke: #c2b5e5; stroke-width: 3; stroke-linecap: round; }
.organic-stereo-note { fill: #8996a2; font: 700 12px Inter, ui-sans-serif, system-ui, sans-serif; }
.organic-stereo-note--toward { fill: #8fd4b4; }
.organic-stereo-note--away { fill: #c2b5e5; }
.organic-diagram-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: center; }
.organic-diagram-pair .organic-diagram { width: 100%; }

.organic-library-figure {
    width: min(100%, 620px);
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0;
}

.organic-library-model {
    position: relative;
    width: 100%;
    min-height: 330px;
    overflow: hidden;
    contain: layout paint;
    isolation: isolate;
}

.organic-library-model canvas {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

.organic-library-placeholder {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 2px solid rgba(222, 232, 241, 0.18);
    border-top-color: #dce6f0;
    border-radius: 50%;
    animation: draw-spin 720ms linear infinite;
}

.organic-library-model[data-conformation-rendered="true"] .organic-library-placeholder { display: none; }
.organic-library-model.is-unavailable::after {
    content: "3D";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #8493a1;
    font-size: 0.75rem;
    font-weight: 800;
}

.organic-library-figure figcaption {
    min-height: 20px;
    color: #9ba9b6;
    font-size: 0.76rem;
    font-weight: 720;
    line-height: 1.3;
    text-align: center;
}

.organic-library-figure--structure > svg {
    width: 100%;
    height: auto;
    max-height: 420px;
}

.organic-choice-diagram .organic-library-figure { width: 100%; height: 100%; }
.organic-choice-diagram .organic-library-model { min-height: 215px; }
.organic-choice-group--visual[data-visual-count="2"] .organic-library-model { min-height: 365px; }
.organic-choice-group--visual[data-visual-count="4"] .organic-library-model { min-height: 245px; }
.organic-choice-group--visual[data-visual-count="5"] .organic-library-model { min-height: 225px; }
.organic-choice-diagram .organic-library-figure figcaption { font-size: 0.68rem; }
.organic-diagram-pair .organic-library-figure { width: 100%; }
.organic-diagram-pair .organic-library-model { min-height: 320px; }

.organic-helper-diagram-grid .organic-library-figure {
    width: 100%;
    padding: 5px;
    border: 1px solid rgba(158, 180, 200, 0.18);
    border-radius: 7px;
    background: rgba(31, 37, 43, 0.35);
}

.organic-helper-diagram-grid .organic-library-model { min-height: 190px; }
.organic-helper-stereo-diagram .organic-library-figure { width: min(100%, 470px); }

.organic-helper-steps { grid-template-columns: repeat(7, minmax(135px, 1fr)); }
.organic-name-equation,
.organic-energy-order {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding: 16px;
    border: 1px solid rgba(158, 180, 200, 0.2);
    border-radius: 7px;
    background: rgba(31, 37, 43, 0.38);
    font-size: 0.9rem;
    font-weight: 740;
}

.organic-name-equation i,
.organic-energy-order i { width: 20px; height: 1px; background: rgba(160, 181, 200, 0.42); }
.organic-priority-table th:nth-child(3) { width: 260px; }
.organic-stereo-reference { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr); gap: 18px; align-items: stretch; }
.organic-helper-stereo-diagram { min-height: 260px; display: grid; place-items: center; }
.organic-helper-stereo-diagram .organic-diagram { width: min(100%, 410px); }
.organic-helper-diagram-grid { display: grid; gap: 12px; margin-bottom: 20px; }
.organic-helper-diagram-grid--newman { grid-template-columns: repeat(4, minmax(190px, 1fr)); }
.organic-helper-diagram-grid--rings { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
.organic-helper-diagram-grid--chair { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.organic-helper-diagram-grid .organic-diagram { width: 100%; border: 1px solid rgba(158, 180, 200, 0.18); border-radius: 7px; background: rgba(31, 37, 43, 0.35); }
.organic-energy-table td:nth-child(1),
.organic-energy-table td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.organic-conformation-rules,
.organic-fast-check { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; list-style: none; }
.organic-conformation-rules li,
.organic-fast-check li { border: 1px solid rgba(158, 180, 200, 0.18); border-radius: 7px; background: rgba(31, 37, 43, 0.34); }

@media (max-width: 900px) {
    .draw-shell {
        padding: 8px 8px 18px;
    }

    .organic-mode-switch { width: 100%; }
    .organic-quiz-stage { min-height: 0; grid-template-columns: 1fr; }
    .organic-visual-pane { min-height: 440px; border-right: 0; border-bottom: 1px solid rgba(156, 178, 198, 0.2); }
    .organic-response-pane { max-height: none; padding: 26px; }
    .organic-stereo-reference { grid-template-columns: 1fr; }
    .organic-helper-diagram-grid--newman { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .organic-helper-diagram-grid--rings { grid-template-columns: repeat(3, minmax(170px, 1fr)); }

    .draw-controlbar {
        align-items: flex-start;
        overflow: visible;
    }

    .draw-controlbar-main {
        max-width: calc(100% - 70px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .draw-controlbar-main::-webkit-scrollbar { display: none; }
    .draw-family-filter button { min-width: 76px; padding-inline: 10px; }
    .draw-daily-counter { flex-basis: 170px; width: 170px; }
    .draw-search.is-open .draw-search-panel { width: min(320px, calc(100vw - 82px)); }
    .draw-prompt { min-height: 110px; padding-inline: 8px; }
    .draw-prompt h1 { font-size: clamp(1.45rem, 6vw, 2.2rem); }
    .draw-stage { min-height: 620px; height: 67dvh; }
    .draw-toolbar-shell { top: 9px; left: 9px; right: 9px; }
    .draw-toolbar { min-height: 52px; padding: 5px; }
    .draw-tool { width: 40px; height: 40px; flex-basis: 40px; }
    .draw-atom--wide { width: 51px; flex-basis: 51px; }
    .draw-answer { top: 70px; right: 9px; bottom: 66px; }
    .draw-result { width: calc(100% - 126px); bottom: 10px; }
    .draw-view-tools { right: 9px; bottom: 9px; flex-direction: column; }
    .draw-view-tools button + button { border-left: 0; border-top: 1px solid rgba(159, 180, 199, 0.2); }
    .draw-actions { grid-template-columns: 54px minmax(116px, 170px) 54px; padding-inline: 8px; }
    .draw-actions > button { width: 54px; }
    .written-stats-status { display: none; }
    .draw-stat-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .draw-stat-layout { grid-template-columns: 1fr; }
    .draw-helper-columns,
    .draw-helper-numbering { grid-template-columns: 1fr; }
    .draw-helper-examples { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .draw-shell { padding: 0 0 12px; }
    .organic-mode-switch {
        width: 100%;
        height: 48px;
        margin: 0;
        border-width: 0 0 1px;
        border-radius: 0;
    }
    .organic-mode-switch button { gap: 5px; padding-inline: 5px; font-size: 0.72rem; }
    .organic-mode-switch svg { width: 18px; height: 18px; }
    .draw-controlbar { min-height: 110px; align-items: flex-start; border-width: 0 0 1px; border-radius: 0; }
    .draw-controlbar-main {
        max-width: calc(100% - 76px);
        flex-wrap: wrap;
        gap: 6px;
        overflow: visible;
    }
    .draw-controlbar-main > .draw-segment:first-child { order: 0; }
    .draw-controlbar-main > .draw-segment:first-child button { width: 38px; min-width: 38px; padding: 0; }
    #open-draw-helper { order: 1; width: 40px; min-width: 40px; padding: 0; }
    #open-draw-stats { order: 2; width: 40px; min-width: 40px; padding: 0; }
    .draw-search { order: 3; }
    .draw-search > .draw-icon-button { width: 40px; min-width: 40px; padding: 0; }
    .draw-family-filter {
        width: calc(100% - 106px);
        max-width: calc(100% - 106px);
        min-width: 0;
        order: 4;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .draw-family-filter::-webkit-scrollbar { display: none; }
    .draw-daily-counter {
        flex-basis: 100px;
        grid-template-columns: minmax(0, 1fr);
        order: 5;
        padding-inline: 7px;
        width: 100px;
    }
    .draw-daily-attempts { display: none; }
    .draw-daily-heading > span { font-size: 0.56rem; }
    .draw-segment { height: 44px; }
    .draw-segment button,
    .draw-icon-button,
    .draw-flag-button { height: 44px; min-width: 48px; padding-inline: 11px; }
    .draw-family-filter button { min-width: 58px; font-size: 0.74rem; padding-inline: 5px; }
    .draw-position { min-width: 60px; padding-right: 3px; font-size: 0.84rem; }
    .draw-search-panel,
    .draw-search.is-open .draw-search-panel {
        position: fixed;
        top: 61px;
        right: 8px;
        left: 8px;
        width: auto;
    }
    .draw-search-results { width: 100%; max-height: min(420px, calc(100dvh - 125px)); }
    .draw-progress { margin-top: 0; }
    .draw-prompt { min-height: 128px; padding: 14px 12px 12px; }
    .draw-prompt-meta span { min-height: 27px; font-size: 0.7rem; }
    .draw-prompt h1 { font-size: clamp(1.32rem, 6.3vw, 1.82rem); line-height: 1.14; }
    .draw-flag-button { min-width: 44px; width: 44px; padding: 0; }
    .draw-board { border-right: 0; border-left: 0; border-radius: 0; }
    .organic-quiz-board { border-right: 0; border-left: 0; border-radius: 0; }
    .organic-visual-pane { min-height: 350px; }
    .organic-quiz-visual { padding: 36px 18px 62px; }
    .organic-quiz-visual > .organic-visual-transform > svg { max-height: 300px; }
    .organic-structure-image { max-height: 320px; }
    .organic-view-tools { right: 8px; bottom: 8px; }
    .organic-view-tools button { width: 42px; height: 42px; }
    .organic-stereo-key { left: 10px; bottom: 12px; font-size: 0.62rem; }
    .organic-response-pane,
    .organic-quiz-stage.is-options-only .organic-response-pane { padding: 14px 10px 18px; }
    .organic-quiz-options { gap: 15px; }
    .organic-choice { min-height: 58px; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 9px; }
    .organic-choice-key { width: 28px; height: 28px; }
    .organic-choice-label { font-size: 0.82rem; line-height: 1.38; }
    .organic-choice-group--visual .organic-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .organic-choice--visual { min-height: 210px; grid-template-rows: minmax(150px, 1fr) auto; }
    .organic-choice-diagram .organic-diagram { max-height: 170px; }
    .organic-choice-diagram .organic-library-model { min-height: 150px; }
    .organic-choice-group--visual[data-visual-count="2"] .organic-choice-grid { grid-template-columns: 1fr; }
    .organic-choice-group--visual[data-visual-count="2"] .organic-choice--visual {
        min-height: 360px;
        grid-template-rows: minmax(285px, 1fr) auto;
    }
    .organic-choice-group--visual[data-visual-count="2"] .organic-library-model { min-height: 285px; }
    .organic-choice-group--visual[data-visual-count="4"] .organic-choice--visual {
        min-height: 250px;
        grid-template-rows: minmax(190px, 1fr) auto;
    }
    .organic-choice-group--visual[data-visual-count="4"] .organic-library-model { min-height: 190px; }
    .organic-choice-group--visual[data-visual-count="5"] .organic-choice--visual {
        min-height: 240px;
        grid-template-rows: minmax(180px, 1fr) auto;
    }
    .organic-choice-group--visual[data-visual-count="5"] .organic-library-model { min-height: 180px; }
    .organic-library-model { min-height: 280px; }
    .organic-diagram-pair .organic-library-model { min-height: 230px; }
    .organic-quiz-feedback { grid-template-columns: 31px minmax(0, 1fr); gap: 9px; margin-top: 15px; padding: 11px; }
    .organic-feedback-mark { width: 29px; height: 29px; }
    .organic-feedback-mark::after { left: 7px; top: 6px; }
    .organic-quiz-feedback p { font-size: 0.82rem; }
    .organic-quiz-feedback ol { font-size: 0.76rem; }
    .organic-helper-steps { grid-template-columns: repeat(7, 132px); }
    .organic-helper-diagram-grid--newman,
    .organic-helper-diagram-grid--rings,
    .organic-helper-diagram-grid--chair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .organic-helper-diagram-grid .organic-diagram { min-width: 0; }
    .organic-conformation-rules,
    .organic-fast-check { grid-template-columns: 1fr; }
    .organic-name-equation,
    .organic-energy-order { justify-content: flex-start; padding: 12px; font-size: 0.78rem; }
    .draw-stage { min-height: 590px; height: 66dvh; }
    .draw-toolbar-shell { right: 8px; left: 8px; overflow: visible; }
    .draw-toolbar {
        width: 100%;
        max-width: none;
        display: grid;
        grid-template-areas:
            "interaction rings history"
            "atoms atoms atoms";
        grid-template-columns: auto auto minmax(0, 1fr);
        row-gap: 4px;
    }
    .draw-interaction-tools { grid-area: interaction; }
    .draw-ring-tools { grid-area: rings; }
    .draw-history-tools { grid-area: history; justify-self: end; }
    .is-special-drawing-card .draw-toolbar {
        grid-template-areas:
            "interaction history"
            "special special"
            "atoms atoms";
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .is-special-drawing-card .draw-special-tools {
        grid-area: special;
        width: 100%;
        justify-content: center;
        padding: 4px 0;
        border-top: 1px solid rgba(166, 184, 201, 0.2);
        border-right: 0;
    }
    .is-special-drawing-card .draw-answer { top: 160px; }
    .draw-atom-group {
        grid-area: atoms;
        width: 100%;
        justify-content: space-between;
        gap: 0;
        padding-top: 4px;
        padding-right: 0;
        border-top: 1px solid rgba(166, 184, 201, 0.2);
        border-right: 0;
    }
    .draw-atom-group .draw-tool { width: 34px; height: 36px; flex-basis: 34px; }
    .draw-atom-group .draw-atom--wide { width: 43px; flex-basis: 43px; }
    .draw-result {
        right: 64px;
        left: 8px;
        width: auto;
        grid-template-columns: 34px minmax(0, 1fr) 42px 42px;
        transform: translate(0, 18px) scale(0.97);
    }
    .draw-result[aria-hidden="false"] { transform: translate(0, 0) scale(1); }
    .draw-result-mark { width: 29px; height: 29px; }
    .draw-result-copy span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .draw-result button { width: 42px; height: 48px; }
    .draw-answer { top: 114px; width: calc(100% - 18px); left: 9px; }
    .draw-reference { min-height: 180px; }
    .draw-actions { min-height: 70px; }
    .draw-stats-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
    .draw-stats-head { min-height: 62px; padding: 8px; }
    .draw-stats-filter { max-width: calc(100% - 58px); overflow-x: auto; }
    .draw-stats-filter button { min-width: 74px; height: 42px; padding-inline: 10px; }
    .draw-stats-content { padding: 10px; }
    .draw-stat-metrics { gap: 8px; }
    .draw-stat-metric { min-height: 130px; padding: 15px; }
    .draw-stat-card { grid-template-columns: 28px minmax(0, 1fr) auto; padding-inline: 9px; }
    .draw-helper-dialog { inset: 0; width: 100vw; height: 100dvh; margin: 0; }
    .draw-helper-shell { border: 0; border-radius: 0; }
    .draw-helper-head { min-height: 60px; padding: 7px 8px; }
    .draw-helper-head .draw-icon-button { height: 44px; min-width: 44px; width: 44px; }
    .draw-helper-nav button { height: 44px; padding-inline: 13px; }
    .draw-helper-section { padding: 24px 14px; }
    .draw-helper-section h2 { margin-bottom: 18px; }
    .draw-helper-steps { grid-template-columns: repeat(7, 132px); }
    .draw-root-grid { grid-template-columns: 1fr; }
    .draw-helper-examples article {
        grid-template-columns: 1fr;
        padding: 13px;
    }
    .draw-helper-example-structure {
        border-bottom: 1px solid rgba(157, 180, 201, 0.18);
        border-left: 0;
        grid-column: 1;
        grid-row: 1;
        margin: -2px 0 12px;
        padding: 0 0 10px;
    }
    .draw-helper-examples article h3 { grid-row: 2; }
    .draw-helper-examples article p { grid-column: 1; grid-row: 3; }
    .draw-daily-dialog { max-height: calc(100dvh - 16px); max-width: calc(100vw - 16px); width: calc(100vw - 16px); }
    .draw-daily-dialog-content { padding: 12px; }
    .draw-daily-summary { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.is-embedded-card {
    min-height: 100dvh;
    overflow: hidden;
}

.is-embedded-card .draw-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding: 8px;
}

.is-embedded-card .organic-mode-switch,
.is-embedded-card .draw-controlbar,
.is-embedded-card .draw-progress,
.is-embedded-card .draw-prompt-meta,
.is-embedded-card .draw-flag-button,
.is-embedded-card #draw-previous,
.is-embedded-card #draw-next,
.is-embedded-card #written-module-stats-status {
    display: none !important;
}

.is-embedded-card .draw-prompt {
    min-height: 54px;
    padding: 4px 14px 8px;
}

.is-embedded-card .draw-prompt-row h1 {
    font-size: clamp(1.25rem, 2.4vw, 2rem);
}

.is-embedded-card .draw-board {
    min-height: calc(100dvh - 76px);
}

.is-embedded-card .draw-stage {
    height: calc(100dvh - 154px);
    min-height: 430px;
}

.is-embedded-card .draw-actions {
    grid-template-columns: 1fr;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}