* {
    padding: 0;
    line-height: 200%;
}
:root {
    font-size: 14px;
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #26343a;
    background: #edf2f4;
}
.b { font-weight: bold; }
.cover {
    border: 1.5px solid lightgray;
    border-radius: 2px;
    min-height: 1lh;
    margin: 0;
}
body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    min-height: 100vh;
    margin: 0;
    padding: 36px clamp(14px, 3vw, 44px) 56px;
    box-sizing: border-box;
    background-color: #edf2f4;
    background-image: radial-gradient(ellipse at 12% 8%, rgba(194, 215, 220, .5), transparent 40%), radial-gradient(ellipse at 92% 88%, rgba(211, 220, 210, .48), transparent 38%);
}
/* The printable main and its descendants retain the original slip dimensions and layout. */
main {
    flex: 0 0 auto;
    outline: 1px solid;
    background-color: white;
    box-sizing: border-box;
    justify-self: center;
    width: 8.5in;
    min-height: 11in;
    padding: 0 .3in;
    font-family: "Times New Roman";
}
hgroup {
    display: flex;
    align-items: end;
    h1 {
        flex: 1;
        font-family: "Arial Black";
        font-size: 1.2em;
        text-align: center;
        vertical-align: bottom;
    }
}
section {
    font-size: .9em;
    &:first-of-type { font-size: 13px; }
    p:first-child:not(.cover) { margin-block: 5px -5px; }
}
article { font-size: 12px; }
p {
    text-align: center;
    &:not(.cover) { text-align: left; }
    &.smaller { outline: 1px solid; font-size: .85em; }
}
table { table-layout: auto; width: 100%; padding: 1px 7px 0 7px; }
col {
    width: auto;
    &:not(:nth-child(2)) { width: 8%; }
}
td {
    text-align: center;
    &:nth-child(2) { text-align: left; text-indent: 2ex; }
}

/* Supporting interface only: these rules do not target main or its descendants. */
.page-heading {
    flex: 0 1 280px;
    align-self: flex-start;
    margin-top: 22px;
    color: #33454c;
}
.page-heading .eyebrow { margin: 0 0 8px; color: #647e84; font-size: .76rem; font-weight: 750; letter-spacing: .14em; text-align: left; }
.page-heading h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.2; letter-spacing: -.04em; }
.page-heading > p:last-child { margin: 0; color: #65767b; line-height: 1.6; text-align: left; }
form {
    flex: 0 1 390px;
    align-self: flex-start;
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid rgba(124, 151, 157, .22);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 14px 38px rgba(42, 67, 75, .09);
}
.form-intro h2 { margin: 0; color: #263b42; font-size: 1.35rem; line-height: 1.4; }
.form-intro p, .privacy-note { margin: 4px 0 18px; color: #718087; font-size: .86rem; line-height: 1.5; }
fieldset { min-width: 0; margin: 0 0 16px; padding: 14px; border: 1px solid #dce5e7; border-radius: 11px; }
legend { padding: 0 6px; color: #39565e; font-size: .92rem; font-weight: 700; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.field-grid label:first-child, .field-grid label:nth-child(3) { grid-column: 1 / -1; }
form label { display: grid; gap: 4px; color: #53666c; font-size: .82rem; font-weight: 600; line-height: 1.4; }
form input, form select {
    width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 10px;
    border: 1px solid #d5e0e2; border-radius: 7px; background: #fff; color: #26343a;
    font: inherit; font-size: .9rem; line-height: 1.4; outline: none; transition: border-color .15s, box-shadow .15s;
}
form input:focus, form select:focus { border-color: #6b9299; box-shadow: 0 0 0 3px rgba(107,146,153,.16); }
form input[readonly] { background: #f3f6f6; color: #6d7b80; }
.course-controls { display: grid; gap: 10px; }
.course-preview { display: grid; grid-template-columns: minmax(0,1fr) 64px 64px; gap: 8px; }
.button-row, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.button { min-height: 38px; padding: 7px 12px; border: 1px solid transparent; border-radius: 7px; font: inherit; font-size: .85rem; font-weight: 700; line-height: 1.35; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid rgba(72, 127, 137, .3); outline-offset: 2px; }
.primary { background: #315f68; color: #fff; }
.primary:hover { background: #264e56; }
.secondary { border-color: #cad9dc; background: #f4f8f8; color: #355b63; }
.secondary:hover { background: #eaf2f3; }
.text-button { padding-inline: 7px; background: transparent; color: #66797e; }
.text-button:hover { background: #f1f5f5; }
.status { min-height: 1.4em; margin: 5px 0 0; color: #54746e; font-size: .8rem; line-height: 1.4; }
.privacy-note { margin: 10px 0 0; text-align: center; }
@media (max-width: 1100px) {
    body { gap: 18px; }
    .page-heading { flex-basis: 220px; }
}
@media (max-width: 760px) {
    body { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 36px; }
    .page-heading { width: min(100%, 560px); flex: none; margin: 4px 0 0; }
    form { width: min(100%, 560px); flex: none; }
}
@media (max-width: 380px) {
    form { padding: 16px; }
    fieldset { padding: 11px; }
    .course-preview { grid-template-columns: minmax(0,1fr) 54px 54px; gap: 5px; }
    .button { font-size: .8rem; }
}
@media print {
    @page { size: letter; }
    :root, body { background: #fff; }
    body { display: block; min-height: 0; padding: 0; }
    .page-heading, form { display: none !important; }
    main { margin: 0; outline: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Quiet decorative motion stays behind the supporting interface, never the printed slip. */
body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 10% 4% auto auto;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(87, 133, 139, .11);
    border-radius: 42% 58% 61% 39% / 45% 42% 58% 55%;
    box-shadow: 0 0 0 22px rgba(255,255,255,.16), 0 0 0 48px rgba(255,255,255,.1);
    pointer-events: none;
    animation: drift 18s ease-in-out infinite alternate;
}
.page-heading { position: relative; }
.page-heading::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 18px;
    border-radius: 4px;
    background: linear-gradient(90deg, #8bafb1, #d3c5a5);
    transform-origin: left;
    animation: reveal 1.2s ease both;
}
.slip-code-cell { position: relative; }
.slip-remove {
    position: absolute;
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    border: 1px solid #d7a3a0;
    border-radius: 50%;
    background: #fff8f7;
    color: #9b5550;
    font: 700 15px/18px system-ui, sans-serif;
    cursor: pointer;
    opacity: 0;
    visibility: visible;
    transition: opacity .15s ease;
}
tr:hover .slip-remove { opacity: 1; }
.slip-remove:focus-visible { opacity: 1; outline: 2px solid #6b9299; }
@media (hover: none) { .slip-remove { opacity: 1; } }
.custom-course { margin-top: 12px; color: #52666b; font-size: .82rem; }
.custom-course summary { cursor: pointer; font-weight: 650; }
.custom-course-grid { display: grid; grid-template-columns: 1fr 1fr 70px; gap: 8px; margin: 10px 0; }
.custom-course-grid label:nth-child(3) { grid-column: 1 / -1; }
@keyframes drift { from { transform: translate3d(0, -8px, 0) rotate(-4deg); } to { transform: translate3d(-18px, 16px, 0) rotate(6deg); } }
@keyframes reveal { from { transform: scaleX(.15); opacity: .35; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media print {
    body::before, .page-heading::after, .slip-remove { display: none !important; }
}

/* Floating plus-sign doodles animate independently for a playful, low-contrast backdrop. */
.plus-decor {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    color: rgba(73, 119, 125, .18);
}
.plus-decor span {
    position: absolute;
    display: block;
    font: 300 clamp(20px, 3vw, 38px)/1 ui-sans-serif, system-ui, sans-serif;
    animation: plus-doodle var(--duration, 13s) ease-in-out var(--delay, 0s) infinite alternate;
}
.plus-decor span:nth-child(1) { left: 8%; top: 16%; --duration: 17s; --delay: -6s; --turn: 94deg; }
.plus-decor span:nth-child(2) { left: 24%; top: 72%; --duration: 13s; --delay: -2s; --turn: -43deg; }
.plus-decor span:nth-child(3) { left: 46%; top: 10%; --duration: 19s; --delay: -11s; --turn: 137deg; }
.plus-decor span:nth-child(4) { left: 66%; top: 83%; --duration: 15s; --delay: -7s; --turn: 51deg; }
.plus-decor span:nth-child(5) { left: 83%; top: 28%; --duration: 21s; --delay: -14s; --turn: -116deg; }
.plus-decor span:nth-child(6) { left: 92%; top: 67%; --duration: 12s; --delay: -4s; --turn: 73deg; }
.plus-decor span:nth-child(7) { left: 37%; top: 91%; --duration: 18s; --delay: -9s; --turn: -81deg; }
@keyframes plus-doodle {
    0% { transform: translate3d(-5px, 9px, 0) rotate(0deg) scale(.8); opacity: .3; }
    55% { transform: translate3d(9px, -11px, 0) rotate(var(--turn)) scale(1.12); opacity: .85; }
    100% { transform: translate3d(-3px, 4px, 0) rotate(calc(var(--turn) * -1)) scale(.95); opacity: .42; }
}
.page-heading, form { position: relative; z-index: 1; }
.catchphrase { margin-top: 17px !important; color: #50777b; font-size: .92rem; font-style: italic; font-weight: 650; letter-spacing: .015em; text-align: left; }
#add-course { border-color: #296752; background: #347a61; color: #fff; }
#add-course:hover { background: #28694f; }
#drop-course { border-color: #d9a8a0; background: #fff3f0; color: #97564f; }
#drop-course:hover { background: #fbe5e0; }
.course-progress { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.progress-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.5; }
.registered-chip { border-color: #c5dfd3; background: #edf8f1; color: #2e6d50; }
.dropped-chip { border-color: #edd0ca; background: #fff2ef; color: #96574d; }
.status { min-height: 1.5em; padding: 0; border-radius: 7px; transition: color .2s, background-color .2s, padding .2s; }
.status.success, .status.error, .status.neutral { padding: 7px 10px; }
.status.success { background: #eaf6ed; color: #286341; }
.status.error { background: #fff0ee; color: #963d35; }
.status.neutral { background: #eef3f5; color: #4e6870; }
@media (prefers-reduced-motion: reduce) {
    .plus-decor span { animation: none !important; }
}
@media print {
    .plus-decor { display: none !important; }
}

/* Stronger, hand-drawn plus marks: remain decorative and behind page content. */
.plus-decor span {
    width: 22px;
    height: 22px;
    color: rgba(59, 111, 119, .62);
    font-size: 0;
    animation-name: plus-doodle-visible;
}
.plus-decor span::before,
.plus-decor span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    border-radius: 3px;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.plus-decor span::before { width: 17px; height: 3px; }
.plus-decor span::after { width: 3px; height: 17px; }
@keyframes plus-doodle-visible {
    0% { transform: translate3d(-5px, 9px, 0) rotate(-15deg) scale(.86); opacity: .56; }
    55% { transform: translate3d(9px, -11px, 0) rotate(var(--turn)) scale(1.16); opacity: .95; }
    100% { transform: translate3d(-3px, 4px, 0) rotate(calc(var(--turn) * -1)) scale(.94); opacity: .68; }
}
@media (prefers-reduced-motion: reduce) {
    .plus-decor span { animation: none !important; opacity: .72; }
}

/* Cozy chaos: the art layer is trapped behind the page content, never over it. */
body { isolation: isolate; }
.plus-decor {
    z-index: -1;
    color: rgba(96, 101, 78, .34);
}
.plus-decor span {
    width: auto;
    height: auto;
    font: 500 26px/1 ui-sans-serif, system-ui, sans-serif;
    color: rgba(125, 111, 80, .42);
    animation: cozy-drift var(--duration, 14s) ease-in-out var(--delay, 0s) infinite alternate;
    will-change: transform;
}
.plus-decor span::before,
.plus-decor span::after { display: none; }
.plus-decor .p1 { left: 3%; top: 12%; --duration: 17s; --delay: -4s; --angle: 105deg; color: rgba(71, 130, 129, .49); }
.plus-decor .p2 { left: 13%; top: 54%; --duration: 21s; --delay: -13s; --angle: -79deg; }
.plus-decor .p3 { left: 22%; top: 86%; --duration: 16s; --delay: -7s; --angle: 142deg; color: rgba(183, 131, 88, .48); }
.plus-decor .p4 { left: 33%; top: 26%; --duration: 19s; --delay: -11s; --angle: -124deg; }
.plus-decor .p5 { left: 43%; top: 69%; --duration: 14s; --delay: -3s; --angle: 83deg; color: rgba(113, 133, 98, .52); }
.plus-decor .p6 { left: 54%; top: 8%; --duration: 23s; --delay: -17s; --angle: -96deg; }
.plus-decor .p7 { left: 64%; top: 47%; --duration: 18s; --delay: -9s; --angle: 132deg; color: rgba(183, 131, 88, .46); }
.plus-decor .p8 { left: 74%; top: 91%; --duration: 15s; --delay: -6s; --angle: -72deg; }
.plus-decor .p9 { left: 86%; top: 18%; --duration: 20s; --delay: -14s; --angle: 119deg; color: rgba(71, 130, 129, .48); }
.plus-decor .p10 { left: 95%; top: 61%; --duration: 13s; --delay: -8s; --angle: -151deg; }
.plus-decor .p11 { left: 7%; top: 90%; --duration: 22s; --delay: -18s; --angle: 63deg; }
.plus-decor .p12 { left: 91%; top: 84%; --duration: 16s; --delay: -2s; --angle: -111deg; }
.plus-decor .shape { animation-name: shape-float; }
.plus-decor .star { color: rgba(183, 131, 88, .5); font-size: 22px; }
.plus-decor .s1 { left: 17%; top: 28%; --duration: 18s; --delay: -12s; }
.plus-decor .s2 { left: 39%; top: 91%; --duration: 14s; --delay: -5s; font-size: 30px; }
.plus-decor .s3 { left: 72%; top: 13%; --duration: 20s; --delay: -15s; }
.plus-decor .s4 { left: 95%; top: 37%; --duration: 17s; --delay: -9s; }
.plus-decor .dot { color: rgba(94, 133, 119, .58); font-size: 33px; }
.plus-decor .d1 { left: 28%; top: 60%; --duration: 12s; --delay: -4s; }
.plus-decor .d2 { left: 58%; top: 81%; --duration: 19s; --delay: -16s; font-size: 42px; }
.plus-decor .d3 { left: 81%; top: 73%; --duration: 15s; --delay: -6s; }
.plus-decor .d4 { left: 49%; top: 37%; --duration: 22s; --delay: -11s; font-size: 40px; }
.plus-decor .ring { color: rgba(173, 126, 93, .48); font-size: 23px; }
.plus-decor .r1 { left: 10%; top: 34%; --duration: 21s; --delay: -8s; }
.plus-decor .r2 { left: 68%; top: 62%; --duration: 16s; --delay: -3s; }
.plus-decor .r3 { left: 31%; top: 10%; --duration: 13s; --delay: -10s; }
.plus-decor .squiggle { left: 88%; top: 49%; color: rgba(171, 132, 96, .45); font-size: 25px; --duration: 19s; --delay: -14s; }
@keyframes cozy-drift {
    0% { transform: translate3d(-8px, 8px, 0) rotate(-25deg) scale(.78); opacity: .48; }
    50% { transform: translate3d(13px, -15px, 0) rotate(var(--angle, 45deg)) scale(1.13); opacity: 1; }
    100% { transform: translate3d(-6px, 5px, 0) rotate(calc(var(--angle, 45deg) * -1)) scale(.92); opacity: .64; }
}
@keyframes shape-float {
    0% { transform: translate3d(9px, -7px, 0) rotate(0deg) scale(.82); opacity: .44; }
    55% { transform: translate3d(-14px, 12px, 0) rotate(190deg) scale(1.12); opacity: .9; }
    100% { transform: translate3d(5px, -4px, 0) rotate(330deg) scale(.92); opacity: .55; }
}
.page-heading h1 { color: #344d4d; }
.page-heading .eyebrow { color: #8b6c4f; }
form { border-color: rgba(185, 151, 111, .28); box-shadow: 0 14px 38px rgba(95, 71, 48, .10); }
@media (max-width: 760px) {
    .plus-decor span { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .plus-decor span { animation: none !important; opacity: .72; }
}
@media print {
    .plus-decor { display: none !important; }
}

/* A warmer, more playful palette and a lively field of drifting shapes. */
:root {
    --accent-coral: #e56b5d;
    --accent-tangerine: #f09a4a;
    --accent-gold: #e3bc57;
    --accent-teal: #3d9c92;
    --accent-lilac: #9b78bd;
    --accent-berry: #cf628d;
    --accent-sky: #65a8d2;
}
body {
    background-color: #fff4e7;
    background-image:
        radial-gradient(ellipse at 8% 12%, rgba(255, 189, 133, .55), transparent 38%),
        radial-gradient(ellipse at 89% 15%, rgba(217, 175, 225, .37), transparent 34%),
        radial-gradient(ellipse at 78% 86%, rgba(144, 210, 190, .38), transparent 38%),
        radial-gradient(ellipse at 15% 82%, rgba(255, 211, 126, .36), transparent 35%);
}
.plus-decor span { text-shadow: 0 2px 12px rgba(117, 75, 54, .12); }
.plus-decor .p1, .plus-decor .p9 { color: rgba(34, 147, 141, .78); }
.plus-decor .p2, .plus-decor .p7, .plus-decor .p11 { color: rgba(233, 100, 83, .78); }
.plus-decor .p3, .plus-decor .p6, .plus-decor .p10 { color: rgba(231, 157, 48, .82); }
.plus-decor .p4, .plus-decor .p8, .plus-decor .p12 { color: rgba(153, 103, 190, .77); }
.plus-decor .star { color: rgba(223, 143, 46, .82); }
.plus-decor .dot { color: rgba(207, 83, 133, .78); }
.plus-decor .ring { color: rgba(49, 151, 143, .72); }
.plus-decor .squiggle { color: rgba(225, 96, 83, .76); }
.plus-decor .shape { text-shadow: 0 3px 15px rgba(128, 74, 75, .17); }
.plus-decor .s1 { font-size: 31px; }
.plus-decor .s2 { font-size: 38px; color: rgba(205, 92, 138, .8); }
.plus-decor .s3 { font-size: 29px; color: rgba(67, 157, 143, .82); }
.plus-decor .d1, .plus-decor .d3 { font-size: 43px; }
.plus-decor .r1, .plus-decor .r3 { font-size: 30px; }

/* First-load float: staggered so the three focal areas arrive with a little character. */
@keyframes float-in-header {
    0% { opacity: 0; transform: translate3d(0, 25px, 0) rotate(-1deg); }
    68% { opacity: 1; transform: translate3d(0, -5px, 0) rotate(.35deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes float-in-slip {
    0% { opacity: 0; transform: translate3d(0, 34px, 0) rotate(1.1deg); }
    70% { opacity: 1; transform: translate3d(0, -7px, 0) rotate(-.25deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes float-in-form {
    0% { opacity: 0; transform: translate3d(0, 30px, 0) rotate(-.8deg); }
    72% { opacity: 1; transform: translate3d(0, -6px, 0) rotate(.2deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
.page-heading { animation: float-in-header 1s cubic-bezier(.2,.8,.2,1) both; }
main { animation: float-in-slip 1.15s .12s cubic-bezier(.2,.8,.2,1) both; }
form { animation: float-in-form 1.1s .28s cubic-bezier(.2,.8,.2,1) both, form-nudge 4.8s 2s ease-in-out infinite; }
@keyframes form-nudge {
    0%, 70%, 100% { box-shadow: 0 14px 38px rgba(137, 89, 61, .13), 0 0 0 0 rgba(229, 107, 93, 0); }
    82% { box-shadow: 0 17px 42px rgba(137, 89, 61, .18), 0 0 0 7px rgba(229, 107, 93, .12); }
    91% { box-shadow: 0 14px 38px rgba(137, 89, 61, .13), 0 0 0 2px rgba(229, 107, 93, .08); }
}
/* A small guided glow travels down the form border to invite the first interaction. */
form::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(229,107,93,.55), rgba(240,154,74,.15), rgba(61,156,146,.4)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    animation: form-guide 5.2s 1.7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes form-guide {
    0%, 56%, 100% { opacity: 0; transform: scale(.99); }
    68%, 83% { opacity: .9; transform: scale(1.015); }
    92% { opacity: .3; transform: scale(1.005); }
}
.button { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s; }
#add-course:hover, #drop-course:hover, .primary:hover, .secondary:hover { transform: translateY(-2px) scale(1.025); box-shadow: 0 7px 16px rgba(74, 91, 68, .13); }
.plus-decor .p1 { --duration: 9s; }
.plus-decor .p3 { --duration: 11s; }
.plus-decor .p6 { --duration: 8.5s; }
.plus-decor .p8 { --duration: 10s; }
.plus-decor .s2, .plus-decor .r2 { --duration: 7s; }
@media (prefers-reduced-motion: reduce) {
    .page-heading, main, form { animation: none !important; opacity: 1 !important; transform: none !important; }
    form::before { animation: none !important; }
}

/* Variable-speed background drift: each tiny particle has its own route and cycle. */
.plus-decor span {
    left: var(--x);
    top: var(--y);
    width: auto;
    height: auto;
    font-size: var(--size);
    opacity: var(--shine);
    animation: particle-wander var(--speed) cubic-bezier(.37,.04,.63,.98) var(--delay) infinite alternate;
    will-change: auto;
}
.plus-decor .plus { color: rgba(218, 91, 75, .78); }
.plus-decor .star { color: rgba(216, 139, 40, .78); }
.plus-decor .dot { color: rgba(196, 71, 124, .8); }
.plus-decor .ring { color: rgba(42, 143, 137, .76); }
.plus-decor .squiggle { color: rgba(137, 93, 177, .78); }
@keyframes particle-wander {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.72); }
    45% { transform: translate3d(var(--mx), var(--my), 0) rotate(var(--mturn)) scale(1.14); }
    100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--turn)) scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
    .plus-decor span { animation: none !important; transform: none !important; }
}

/* Warm student-to-student helper: hover to open, tap a tip for its timed answer. */
.helper-wrap {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    margin-top: 8px;
    z-index: 4;
}
.helper-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid rgba(214, 151, 73, .45);
    border-radius: 999px;
    background: rgba(255, 250, 235, .9);
    color: #895c2e;
    font-family: inherit;
    font-size: .83rem;
    font-weight: 650;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(173, 119, 61, .1);
    transition: transform .2s, background .2s, box-shadow .2s;
}
.helper-trigger:hover, .helper-wrap.menu-open .helper-trigger { transform: translateY(-2px); background: #fff0ca; box-shadow: 0 7px 18px rgba(173, 119, 61, .18); }
.helper-trigger span:first-child { font-size: 1.2rem; line-height: 1; }
.helper-menu {
    position: absolute;
    z-index: 8;
    left: calc(100% + 12px);
    bottom: -6px;
    display: grid;
    width: 220px;
    padding: 11px;
    border: 1px solid rgba(194, 137, 77, .3);
    border-radius: 13px;
    background: rgba(255, 250, 239, .98);
    box-shadow: 0 15px 36px rgba(94, 66, 48, .18);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-10px, 10px, 0) scale(.94);
    transform-origin: left bottom;
    transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility .2s;
}
.helper-wrap:hover .helper-menu, .helper-wrap:focus-within .helper-menu, .helper-wrap.menu-open .helper-menu {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
}
.helper-wrap.showing-answer .helper-menu { opacity: 0; visibility: hidden; transform: translate3d(-10px, 10px, 0) scale(.94); pointer-events: none; }
.helper-menu-title { margin: 0 0 5px; color: #9b6139; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.tip-choice {
    padding: 7px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #485b59;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.tip-choice:hover, .tip-choice:focus-visible { outline: none; background: #fce9cf; color: #8a4b38; }
.tip-answer {
    position: absolute;
    left: 0;
    top: calc(100% + 9px);
    z-index: 10;
    width: min(310px, calc(100vw - 40px));
    padding: 12px 14px;
    border: 1px solid rgba(84, 150, 130, .3);
    border-radius: 12px;
    background: rgba(239, 250, 239, .98);
    box-shadow: 0 12px 30px rgba(56, 112, 85, .17);
    color: #38584c;
    animation: answer-pop .28s cubic-bezier(.2,.8,.2,1) both;
}
.tip-answer[hidden] { display: none; }
.tip-answer strong { color: #32715a; font-size: .88rem; }
.tip-answer p { margin: 5px 0 0; font-size: .84rem; line-height: 1.5; text-align: left; }
.tip-answer.fizzling { animation: answer-fizzle 1.5s ease-in forwards; pointer-events: none; }
@keyframes answer-pop { from { opacity: 0; transform: translateY(-7px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes answer-fizzle { to { opacity: 0; transform: translateY(9px) scale(.93); filter: blur(3px); } }
@media (max-width: 760px) {
    .helper-menu { left: 0; bottom: calc(100% + 9px); transform-origin: bottom left; }
    .helper-wrap:hover .helper-menu, .helper-wrap:focus-within .helper-menu, .helper-wrap.menu-open .helper-menu { transform: translateY(0) scale(1); }
    .helper-wrap.showing-answer .helper-menu { transform: translateY(8px) scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
    .helper-menu, .tip-answer, .tip-answer.fizzling { animation: none !important; transition: none !important; filter: none !important; }
}
@media print { .helper-wrap { display: none !important; } }

/* Interactive paper: a subtle shadow, pointer-following glass sheen, and edge glint. */
main {
    position: relative;
    isolation: isolate;
    outline: 1px solid rgba(39, 55, 54, .08);
    box-shadow: 0 22px 58px rgba(99, 70, 49, .2), 0 4px 13px rgba(76, 74, 58, .12);
    transform: perspective(1300px) rotateX(var(--slip-tilt-y, 0deg)) rotateY(var(--slip-tilt-x, 0deg));
    transform-style: preserve-3d;
    transition: transform .18s ease-out, box-shadow .25s ease, outline-color .2s ease;
}
main::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 2px;
    background: radial-gradient(ellipse 300px 360px at var(--glass-x, 50%) var(--glass-y, 20%), rgba(255, 206, 128, .22), rgba(125, 204, 216, .12) 38%, rgba(194, 152, 231, .08) 55%, transparent 76%);
    opacity: 0;
    mix-blend-mode: soft-light;
    transition: opacity .25s ease;
    pointer-events: none;
}
main::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 2px;
    background: conic-gradient(from var(--edge-angle, 0deg), transparent 0deg, rgba(234, 116, 90, .75) 22deg, rgba(244, 199, 94, .8) 55deg, rgba(77, 181, 173, .72) 88deg, transparent 128deg, transparent 360deg) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
main:hover {
    outline-color: rgba(58, 141, 140, .18);
    box-shadow: 0 26px 68px rgba(99, 70, 49, .25), 0 0 26px rgba(78, 176, 170, .1);
}
main:hover::before, main:hover::after { opacity: 1; }
.motion-toggle {
    display: block;
    margin-top: 12px;
    padding: 6px 10px;
    border: 1px solid rgba(97, 116, 111, .26);
    border-radius: 8px;
    background: rgba(255,255,255,.7);
    color: #52615c;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}
.motion-toggle:hover { background: #fff; }
.helper-trigger.wiggle { animation: help-wiggle .78s ease-in-out; }
@keyframes help-wiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    18% { transform: rotate(-9deg) scale(1.07); }
    38% { transform: rotate(8deg) scale(1.08); }
    58% { transform: rotate(-6deg) scale(1.04); }
    78% { transform: rotate(4deg) scale(1.02); }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
}
html.motion-off .plus-decor span { transform: none !important; }
html.motion-off main { transform: none !important; }
html.motion-off main::before, html.motion-off main::after { opacity: 0 !important; }
.motion-toggle[aria-pressed="true"] { border-color: rgba(172, 101, 78, .35); background: #fff0e9; color: #8a5141; }
@media (prefers-reduced-motion: reduce) {
    main { transform: none !important; transition: none !important; }
    main::before, main::after { display: none !important; }
}
@media (hover: none) {
    main::before, main::after { display: none; }
    main { transform: none !important; }
}
@media print {
    main { box-shadow: none !important; outline-color: transparent !important; transform: none !important; }
    main::before, main::after { display: none !important; }
}