:root {
    --ink:#182e2b;
    --muted:#64736d;
    --paper:#f6f7f3;
    --white:#fff;
    --line:#dce3dc;
    --green:#245d49;
    --mint:#e1eee4;
    --radius:16px;
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-synthesis:none;
    font-size:16px;
    line-height:1.55
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
a {
    color:inherit;
    text-decoration:none
}
button,input,select,textarea {
    font:inherit
}
button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
button:disabled {
    cursor:not-allowed;
    opacity:.43
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
    outline:3px solid #ba742a;
    outline-offset:4px
}
button,input,textarea,select {
    border-radius:8px
}
input,textarea,select {
    width:100%;
    padding:12px 14px;
    border:1px solid #cdd7ce;
    background:#fff;
    color:var(--ink);
    min-height:46px
}
textarea {
    resize:vertical
}
input[readonly] {
    background:#f6f8f4
}
label {
    display:block;
    font-size:.88rem;
    font-weight:600
}
label input,label textarea,label select {
    margin-top:7px
}
label output {
    float:right;
    font-weight:700
}
input[type=range] {
    padding:0;
    min-height:44px;
    accent-color:var(--green);
    cursor:pointer
}
h1,h2,h3,p {
    margin-top:0
}
h1 {
    font-size:clamp(2rem,4.1vw,3.15rem);
    line-height:1.13;
    letter-spacing:-.045em;
    font-weight:600;
    margin-bottom:16px;
    overflow-wrap:anywhere
}
h2 {
    font-size:1.25rem;
    line-height:1.35;
    letter-spacing:-.025em;
    font-weight:600;
    margin-bottom:14px
}
h3 {
    font-size:1rem;
    font-weight:600;
    margin-bottom:9px
}
p {
    margin-bottom:18px
}
em {
    font-family:Georgia,serif;
    font-weight:400;
    color:var(--green)
}
[hidden] {
    display:none!important
}
.small,small {
    font-size:.8rem
}
.muted {
    color:var(--muted)
}
.site-header {
    background:#fff;
    border-bottom:1px solid var(--line)
}
.header-inner {
    max-width:1376px;
    margin:auto;
    padding:23px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.brand {
    display:flex;
    align-items:center;
    font-size:1.2rem;
    font-weight:750;
    letter-spacing:-.06em;
    white-space:nowrap
}
.brand-light {
    font-weight:400
}
.brand-mark {
    background:var(--green);
    color:#fff;
    border-radius:9px;
    font-size:1.6rem;
    line-height:36px;
    width:36px;
    height:36px;
    display:inline-block;
    text-align:center;
    margin-right:11px
}
.phase-label {
    letter-spacing:.11em;
    font-size:.55rem;
    font-weight:650;
    margin-left:15px;
    border-left:1px solid var(--line);
    padding:5px 0 5px 15px;
    color:var(--muted)
}
nav {
    display:flex;
    align-items:center;
    gap:26px;
    font-size:.83rem
}
nav form {
    margin:0
}
.teacher-name {
    border-left:1px solid var(--line);
    padding-left:22px;
    color:var(--muted)
}
.page {
    max-width:1296px;
    margin:0 auto;
    padding:48px 0 72px;
    min-height:calc(100vh - 180px)
}
.site-footer {
    max-width:1296px;
    margin:auto;
    padding:24px 0;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-size:.72rem;
    color:var(--muted)
}
.site-footer span:first-child {
    font-weight:700;
    color:var(--ink)
}
.eyebrow,.section-number {
    font-size:.66rem;
    letter-spacing:.15em;
    font-weight:700;
    color:var(--green)
}
.eyebrow {
    margin-bottom:16px
}
.live-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#4e8565;
    margin-right:8px;
    vertical-align:middle
}
.button {
    display:inline-flex;
    gap:20px;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    min-height:48px;
    border:1px solid transparent;
    font-size:.85rem;
    font-weight:600;
    border-radius:9px;
    white-space:normal;
    text-align:center
}
.button span {
    margin-left:auto
}
.primary {
    background:var(--green);
    color:#fff
}
.primary:hover {
    background:#1b4939
}
.secondary {
    background:#fff;
    border-color:#ced8ce;
    color:var(--ink)
}
.secondary:hover {
    background:#edf2eb
}
.full {
    width:100%
}
.text-button {
    padding:8px 0;
    background:transparent;
    border:0;
    color:var(--green);
    min-height:44px
}
.inline-link {
    color:var(--green);
    font-weight:600
}
.actions {
    display:flex;
    gap:22px;
    align-items:center;
    flex-wrap:wrap
}
.panel {
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px
}
.panel-heading {
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:22px
}
.panel-heading h2 {
    margin:0
}
.panel-heading .count-badge,.panel-heading .role-pill,.panel-heading .progress-badge {
    margin-left:auto
}
.count-badge {
    font-size:.72rem;
    color:var(--green);
    background:var(--mint);
    padding:3px 9px;
    border-radius:6px
}
.stack {
    display:flex;
    flex-direction:column;
    gap:20px
}
.wide-gap {
    gap:24px
}
.notice {
    border-radius:10px;
    padding:18px 22px;
    margin-bottom:24px;
    font-size:.9rem;
    border:1px solid
}
.notice ul {
    margin:8px 0 0;
    padding-left:22px
}
.success {
    background:#e8f2e7;
    border-color:#c5dbc3;
    color:#26512e
}
.error {
    background:#fff0e9;
    border-color:#e7c1b4;
    color:#8b3d2e
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:0 0 35px
}
.page-heading p:last-child {
    margin-bottom:0
}
.heading-dot {
    color:#6f9d73
}
.section-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    margin-bottom:28px;
    gap:16px
}
.tabs {
    display:flex;
    gap:26px
}
.tabs a {
    font-size:.86rem;
    padding:0 1px 16px;
    color:var(--muted);
    border-bottom:2px solid transparent
}
.tabs a.selected {
    color:var(--green);
    border-color:var(--green);
    font-weight:600
}
.project-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}
.project-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px;
    min-width:0
}
.card-top {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin-bottom:28px;
    flex-wrap:wrap
}
.class-tag {
    font-size:.75rem;
    background:#eff2ed;
    border-radius:6px;
    padding:4px 9px;
    font-weight:600
}
.status-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:6px;
    background:#f0f1ed;
    color:#647167;
    font-size:.68rem;
    font-weight:600
}
.status-pill>span {
    display:inline-block;
    background:#90988d;
    width:5px;
    height:5px;
    border-radius:50%
}
.status-pill.open {
    background:#e8f1e5;
    color:#3b683d
}
.status-pill.open>span {
    background:#5a935b
}
.project-card h2 {
    font-size:1.3rem;
    overflow-wrap:anywhere
}
.project-description {
    font-size:.85rem;
    color:var(--muted);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:64px;
    white-space:pre-line;
    overflow-wrap:anywhere
}
.card-stats {
    display:flex;
    gap:26px;
    margin:26px 0 24px;
    font-size:.76rem;
    color:var(--muted)
}
.card-stats strong {
    font-size:1rem;
    color:var(--ink);
    margin-right:5px
}
.card-bottom {
    padding-top:18px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:.78rem
}
.empty-state {
    grid-column:1/-1;
    text-align:center;
    padding:60px 24px
}
.empty-state p {
    max-width:520px;
    margin:0 auto 26px
}
.empty-symbol {
    font-size:2rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    background:var(--mint);
    border-radius:18px;
    margin-bottom:20px;
    color:var(--green)
}
.back-link {
    font-size:.8rem;
    color:var(--muted);
    display:inline-block;
    margin-bottom:24px
}
.editor-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 355px;
    gap:28px
}
.optional {
    font-weight:400;
    font-size:.7rem;
    color:var(--muted);
    margin-left:6px
}
.concept-list {
    margin:22px 0
}
.concept-row {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid #edf0e9
}
.concept-order {
    width:22px;
    flex-shrink:0;
    font-size:.73rem;
    color:#849184
}
.concept-edit {
    display:flex;
    align-items:center;
    flex:1;
    gap:4px;
    min-width:0
}
.concept-edit input {
    font-size:.85rem;
    padding:8px 10px
}
.icon-button {
    padding:8px 10px;
    min-height:44px;
    min-width:44px;
    font-size:.76rem;
    border:0;
    background:#edf2eb;
    color:var(--green);
    flex-shrink:0
}
.danger-text {
    color:#9a4940
}
.reorder-buttons {
    display:flex;
    gap:4px
}
.add-concept {
    display:flex;
    gap:12px
}
.add-concept input {
    min-width:0
}
.empty-inline {
    font-size:.85rem;
    color:var(--muted);
    padding:18px 0
}
.access-panel {
    background:#f3f7ee
}
.link-label {
    margin:22px 0 7px;
    font-size:.7rem;
    color:var(--muted)
}
.copy-field {
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0
}
.copy-field input {
    font-size:.72rem;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis
}
.copy-status:empty {
    display:none
}
.copy-status {
    margin:8px 0;
    color:var(--green)
}
.aside-stat {
    display:flex;
    align-items:center;
    gap:12px;
    border-top:1px solid var(--line);
    margin-top:24px;
    padding-top:20px
}
.aside-stat strong {
    font-size:2rem;
    font-weight:500
}
.aside-stat span {
    font-size:.78rem;
    color:var(--muted)
}
.subtle-panel {
    background:#f0f2ec
}
.subtle-panel hr {
    border:0;
    border-top:1px solid var(--line);
    margin:20px 0 10px
}
.instruction-list {
    padding-left:22px;
    font-size:.88rem;
    color:var(--muted)
}
.instruction-list li {
    padding:8px 0 8px 6px
}
.home-hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    padding:32px 0 60px
}
.home-hero h1,.login-copy h1 {
    font-size:clamp(3rem,5.4vw,5rem);
    line-height:1.06;
    letter-spacing:-.065em
}
.hero-description {
    max-width:520px;
    font-size:1.05rem;
    line-height:1.8;
    color:var(--muted);
    margin:26px 0 30px
}
.home-hero .actions .muted {
    font-size:.75rem
}
.hero-illustration {
    padding:0 30px;
    text-align:center
}
.illustration-top,.illustration-bottom {
    font-size:.6rem;
    letter-spacing:.15em;
    color:var(--muted);
    display:block;
    padding:12px
}
.mini-compass,.compass {
    background:conic-gradient(from 0deg at 50% 50%,#f2e5d1 0deg 90deg,#e9e6f2 90deg 180deg,#dcece6 180deg 270deg,#e8ebd6 270deg 360deg);
    position:relative;
    aspect-ratio:1;
    isolation:isolate
}
.mini-compass {
    border:1px solid #d7decc;
    border-radius:12px;
    max-width:400px;
    margin:auto
}
.mini-compass:before,.compass:before {
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:1px;
    height:100%;
    background:#aab7aa;
    z-index:-1
}
.mini-compass:after,.compass:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:#aab7aa;
    z-index:-1
}
.demo-bubble {
    position:absolute;
    border-radius:30px;
    padding:8px 14px;
    font-size:.7rem;
    border:1px solid #b8c4b3;
    background:#fff;
    box-shadow:0 3px 8px #253c2910
}
.bubble-a {
    top:23%;
    left:8%;
    background:#f7f9eb
}
.bubble-b {
    top:32%;
    right:3%;
    background:#fff8ed
}
.bubble-c {
    bottom:21%;
    right:3%;
    background:#f4f0fb
}
.bubble-d {
    bottom:32%;
    left:9%;
    background:#eaf5ee
}
.center-cross {
    position:absolute;
    left:48%;
    top:45%;
    font-size:1.4rem;
    color:#7e8c7e
}
.illustration-note {
    font-family:Georgia,serif;
    font-style:italic;
    font-size:.88rem;
    color:var(--muted);
    margin-top:17px
}
.home-steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
    border-top:1px solid var(--line);
    padding:35px 0 22px
}
.step-number {
    font-size:.68rem;
    color:var(--green);
    display:block;
    margin-bottom:15px
}
.home-steps p {
    font-size:.85rem;
    color:var(--muted);
    max-width:310px
}
.home-steps h2 {
    font-size:1.1rem
}
.note-bar {
    padding:18px 22px;
    border:1px solid var(--line);
    background:#eef2e8;
    border-radius:10px;
    font-size:.82rem;
    color:#4f6552
}
.login-layout {
    display:grid;
    grid-template-columns:1fr 440px;
    gap:100px;
    align-items:center;
    max-width:1100px;
    margin:50px auto 30px
}
.login-panel {
    padding:38px
}
.login-panel h2 {
    margin-top:18px;
    font-size:1.65rem
}
.login-panel .stack {
    margin:28px 0
}
.login-decoration {
    display:flex;
    flex-wrap:wrap;
    gap:12px
}
.login-decoration span {
    padding:8px 17px;
    background:var(--mint);
    border-radius:30px;
    font-size:.8rem
}
.login-decoration span:nth-child(2) {
    background:#f1e6d1
}
.login-decoration span:nth-child(3) {
    background:#eae4f0
}
.role-pill {
    background:#eef1e9;
    border:1px solid #dfe4d8;
    border-radius:20px;
    padding:5px 12px;
    font-size:.7rem;
    white-space:nowrap
}
.student-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    margin-bottom:28px
}
.project-intro {
    font-size:.95rem;
    color:var(--muted);
    white-space:pre-line;
    max-width:800px;
    margin-bottom:0;
    overflow-wrap:anywhere
}
.activity-badge {
    font-size:.75rem;
    white-space:nowrap;
    border:1px solid var(--line);
    background:#fff;
    border-radius:8px;
    padding:10px 15px
}
.name-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    margin-bottom:28px;
    background:#eef4e9
}
.name-panel h2 {
    margin:10px 0
}
.name-panel p {
    margin:0;
    max-width:500px
}
.inline-fields {
    display:flex;
    gap:12px;
    align-items:flex-end
}
.inline-fields input {
    min-width:0
}
.activity-toolbar {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:0 0 20px;
    font-size:.8rem
}
.student-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:24px;
    align-items:start
}
.board-panel {
    padding:26px
}
.board-panel .panel-heading {
    flex-wrap:wrap
}
.board-panel .panel-heading h2 {
    font-size:1.1rem
}
.progress-badge {
    font-size:.7rem;
    background:#edf2e8;
    padding:5px 10px;
    border-radius:6px
}
.compass-shell {
    max-width:790px;
    margin:22px auto 0
}
.compass-middle {
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 46px;
    align-items:stretch
}
.compass {
    width:100%;
    border:1px solid #c1cdbb;
    border-radius:4px;
    background-image:linear-gradient(#fff3 1px,transparent 1px),linear-gradient(90deg,#fff3 1px,transparent 1px),conic-gradient(from 0deg at 50% 50%,#f2e5d1 0deg 90deg,#e9e6f2 90deg 180deg,#dcece6 180deg 270deg,#e8ebd6 270deg 360deg);
    background-size:10% 10%,10% 10%,100% 100%
}
.axis-top,.axis-bottom {
    text-align:center;
    font-size:.72rem;
    font-weight:600;
    padding:9px 0;
    color:#445a4c
}
.axis-top span,.axis-bottom span {
    display:block;
    font-size:.57rem;
    font-weight:400;
    color:#7c887b
}
.axis-left,.axis-right {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.72rem;
    font-weight:600;
    color:#445a4c
}
.axis-left>span,.axis-right>span {
    position:absolute;
    white-space:nowrap;
    transform:rotate(-90deg)
}
.axis-right>span {
    transform:rotate(90deg)
}
.axis-left small,.axis-right small {
    position:absolute;
    top:51%;
    font-size:.56rem;
    font-weight:400
}
.axis-left small {
    right:3px
}
.axis-right small {
    left:3px
}
.quadrant {
    position:absolute;
    pointer-events:none;
    font-size:.48rem;
    letter-spacing:.08em;
    color:#556148;
    opacity:.7;
    padding:12px;
    max-width:49%;
    z-index:-1
}
.q-one {
    top:0;
    left:0
}
.q-two {
    top:0;
    right:0;
    text-align:right
}
.q-three {
    bottom:0;
    left:0
}
.q-four {
    bottom:0;
    right:0;
    text-align:right
}
.origin {
    position:absolute;
    width:7px;
    height:7px;
    background:#88957e;
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:-1
}
.board-note {
    font-size:.72rem;
    color:var(--muted);
    text-align:center;
    max-width:660px;
    margin:17px auto 0
}
.concept-bank {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    min-height:58px;
    margin:20px 0
}
.concept-bank-panel .panel-heading {
    display:block
}
.concept-bank-panel .panel-heading .small {
    display:block;
    margin-top:6px
}
.concept-bubble {
    font-size:.75rem;
    padding:10px 13px;
    border:1px solid var(--point-border,#c2cebc);
    border-radius:24px;
    background:var(--bubble-bg,#f1f4e9);
    color:#293c30;
    touch-action:none;
    user-select:none;
    cursor:grab;
    min-height:44px;
    max-width:100%;
    overflow-wrap:anywhere;
    line-height:1.3;
    box-shadow:0 2px 3px #203a2410
}
.drag-handle {
    opacity:.5;
    margin-right:4px
}
.concept-bubble.placed {
    position:absolute;
    transform:translate(-50%,-50%);
    max-width:145px;
    z-index:2;
    white-space:normal
}
.concept-bubble.placed:focus,.concept-bubble.placed:hover {
    z-index:20
}
.concept-bubble.dragging {
    position:fixed!important;
    transform:translate(-50%,-50%);
    z-index:1000;
    cursor:grabbing;
    opacity:.9;
    pointer-events:none;
    max-width:170px
}
.concept-bubble.selected-concept {
    outline:2px solid #6a805f;
    outline-offset:2px
}
.color-0 {
    --point:#507954;
    --point-border:#a9c2a2;
    --bubble-bg:#eff6e9
}
.color-1 {
    --point:#b77736;
    --point-border:#d6b58a;
    --bubble-bg:#fbefdb
}
.color-2 {
    --point:#6c5aa6;
    --point-border:#b8a7d5;
    --bubble-bg:#f1ebfb
}
.color-3 {
    --point:#287c83;
    --point-border:#9bbfc1;
    --bubble-bg:#e7f2f2
}
.color-4 {
    --point:#a84f69;
    --point-border:#d1a1b0;
    --bubble-bg:#fcebf0
}
.color-5 {
    --point:#647b27;
    --point-border:#b3c384;
    --bubble-bg:#f2f5dd
}
.color-6 {
    --point:#4370a8;
    --point-border:#9db6d3;
    --bubble-bg:#e9f1fc
}
.color-7 {
    --point:#9b573c;
    --point-border:#d6af9c;
    --bubble-bg:#f9eee8
}
.keyboard-panel label {
    margin-top:16px
}
.keyboard-panel select {
    margin-top:7px
}
.keyboard-panel .small {
    font-size:.74rem
}
.range-labels {
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:.65rem;
    margin-top:-5px
}
.keyboard-panel .button {
    margin-top:22px
}
.keyboard-panel>.text-button {
    align-self:center
}
.submission-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin-top:24px
}
.submission-bar p {
    margin-bottom:0
}
.result-count {
    min-width:130px;
    padding:16px 24px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:14px
}
.result-count strong {
    font-size:2.2rem;
    font-weight:500
}
.result-count span {
    font-size:.8rem;
    color:var(--muted)
}
.result-filters {
    display:flex;
    gap:16px;
    align-items:flex-end;
    padding:18px;
    background:#f6f8f2;
    border:1px solid #e7ece1;
    border-radius:10px;
    margin-bottom:25px
}
.result-filters label {
    flex:1;
    min-width:0;
    font-size:.76rem
}
.result-filters select {
    font-size:.8rem
}
.result-board {
    margin-top:24px
}
.results-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:24px
}
.plot-point {
    position:absolute;
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    border-radius:50%;
    padding:0;
    transform:translate(-50%,-50%);
    z-index:2
}
.plot-point:before {
    content:"";
    display:block;
    margin:7px;
    width:14px;
    height:14px;
    background:var(--point,#476a48);
    border:2px solid #fff;
    border-radius:50%;
    box-shadow:0 0 0 1px #354b3c30
}
.plot-point:hover,.plot-point:focus {
    z-index:30
}
.point-tooltip {
    display:none;
    position:absolute;
    left:50%;
    bottom:32px;
    transform:translateX(-50%);
    background:#1f372e;
    color:#fff;
    padding:10px 13px;
    border-radius:8px;
    font-size:.7rem;
    font-weight:400;
    white-space:normal;
    width:190px;
    text-align:left;
    pointer-events:none;
    overflow-wrap:anywhere;
    box-shadow:0 4px 12px #1f372e20
}
.plot-point:hover .point-tooltip,.plot-point:focus .point-tooltip {
    display:block
}
.plot-point:focus {
    outline-offset:0
}
.table-scroll {
    overflow:auto
}
table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:.78rem
}
th {
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--muted);
    white-space:nowrap;
    padding:14px 10px;
    border-bottom:1px solid var(--line)
}
td {
    padding:14px 10px;
    border-bottom:1px solid #edf0e9;
    overflow-wrap:anywhere
}
th:first-child,td:first-child {
    padding-left:0
}
.legend-dot {
    display:inline-block;
    background:var(--point);
    width:8px;
    height:8px;
    border-radius:50%;
    margin-right:9px
}
.coordinates-details {
    margin-top:24px
}
summary {
    cursor:pointer;
    font-size:.85rem;
    font-weight:600;
    min-height:44px;
    display:list-item;
    padding:8px 0
}
.coordinates-details table {
    margin-top:15px
}
.submission-row {
    display:flex;
    align-items:center;
    gap:13px;
    border-bottom:1px solid #edf0e9;
    padding:16px 0;
    font-size:.85rem
}
.submission-row small {
    display:block;
    font-size:.7rem;
    color:var(--muted);
    margin-top:3px
}
.submission-row strong {
    font-weight:600;
    overflow-wrap:anywhere
}
.avatar {
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:50%;
    background:#e7ede2;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
    color:#526645
}
.submission-arrow {
    margin-left:auto;
    color:var(--green)
}
.pagination {
    margin-top:25px;
    font-size:.8rem
}
.pagination svg {
    width:20px;
    height:20px
}
.pagination nav {
    display:block
}
.pagination nav>div {
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:center
}
.pagination .hidden {
    display:none
}
.receipt-heading {
    text-align:center;
    max-width:720px;
    margin:10px auto 30px
}
.saved-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#dfeedd;
    color:#30673a;
    font-size:1.5rem;
    margin:0 auto 18px
}
.receipt-heading h1 {
    font-size:2.65rem
}
.receipt-link {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    align-items:center;
    max-width:1000px;
    margin:auto;
    background:#edf4e7
}
.receipt-link p {
    margin:0
}
.receipt-link .copy-status {
    grid-column:1/-1
}
.receipt-heading~.result-board,.receipt-heading~.coordinates-details {
    max-width:1000px;
    margin-left:auto;
    margin-right:auto
}
.error-page {
    max-width:650px;
    margin:50px auto;
    text-align:center;
    padding:60px 30px
}
.error-page .button {
    margin-top:20px
}
dialog {
    border:1px solid var(--line);
    border-radius:18px;
    padding:32px;
    max-width:490px;
    width:calc(100% - 32px);
    color:var(--ink);
    box-shadow:0 20px 80px #142a2940
}
dialog::backdrop {
    background:#152b285c
}
dialog h2 {
    font-size:1.6rem;
    margin-top:16px
}
dialog p {
    font-size:.9rem;
    color:var(--muted);
    line-height:1.7
}
dialog .actions {
    justify-content:flex-end;
    gap:12px;
    margin-top:28px
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link {
    position:absolute;
    left:20px;
    top:-100px;
    padding:12px;
    background:var(--green);
    color:#fff;
    z-index:100
}
.skip-link:focus {
    top:10px
}
@media(min-width:1500px) {
    .page {
        padding-top:60px
    }
    .home-hero {
        padding-top:50px;
        padding-bottom:85px
    }
}
@media(max-width:1390px) {
    .page {
        margin:0 40px
    }
    .site-footer {
        margin:0 40px
    }
}
@media(max-width:1080px) {
    .project-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .editor-grid {
        grid-template-columns:minmax(0,1fr) 300px;
        gap:20px
    }
    .panel {
        padding:22px
    }
    .student-grid {
        grid-template-columns:minmax(0,1fr) 280px;
        gap:18px
    }
    .board-panel {
        padding:20px 12px
    }
    .board-panel .panel-heading {
        padding:0 8px
    }
    .home-hero {
        gap:25px
    }
    .hero-illustration {
        padding:0 15px
    }
    .login-layout {
        gap:40px;
        grid-template-columns:1fr 400px
    }
    .concept-row {
        gap:4px
    }
    .concept-order {
        width:16px
    }
    .concept-edit .icon-button {
        padding:8px 5px;
        min-width:36px
    }
    .reorder-buttons {
        gap:2px
    }
    .reorder-buttons .icon-button {
        min-width:36px
    }
    .phase-label {
        display:none
    }
}
@media(max-width:820px) {
    .page {
        margin:0 24px;
        padding-top:32px
    }
    .header-inner {
        padding:18px 24px
    }
    .site-footer {
        margin:0 24px
    }
    .teacher-name {
        display:none
    }
    .editor-grid,.login-layout {
        grid-template-columns:1fr
    }
    .editor-grid>aside {
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:start
    }
    .student-grid {
        grid-template-columns:1fr
    }
    .student-grid>aside {
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:start
    }
    .student-grid .board-panel {
        padding:24px
    }
    .name-panel {
        grid-template-columns:1fr;
        gap:20px
    }
    .results-bottom {
        grid-template-columns:1fr
    }
    .login-layout {
        margin:15px auto;
        gap:30px;
        max-width:550px
    }
    .login-copy h1 {
        font-size:3rem
    }
    .login-copy .hero-description {
        font-size:.95rem;
        margin:20px 0
    }
    .login-decoration {
        display:none
    }
    .home-hero {
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .home-hero h1 {
        font-size:3rem
    }
    .hero-description {
        font-size:.93rem
    }
    .hero-illustration {
        padding:0
    }
    .demo-bubble {
        font-size:.6rem;
        padding:5px 8px
    }
    .home-steps {
        gap:24px
    }
    .receipt-link {
        grid-template-columns:1fr;
        gap:18px
    }
    .student-heading {
        display:block
    }
    .activity-badge {
        display:inline-block;
        margin-top:20px
    }
    .result-filters {
        flex-wrap:wrap
    }
    .result-filters label {
        min-width:200px
    }
    .result-filters .button {
        margin-left:auto
    }
    .project-card {
        padding:22px
    }
}
@media(max-width:560px) {
    .page {
        margin:0 16px;
        padding-bottom:40px
    }
    .header-inner {
        padding:15px 16px;
        gap:15px
    }
    .brand {
        font-size:1rem
    }
    .brand-mark {
        width:30px;
        height:30px;
        line-height:30px;
        font-size:1.3rem;
        margin-right:8px
    }
    nav {
        gap:14px;
        font-size:.72rem
    }
    .site-footer {
        margin:0 16px;
        padding:20px 0;
        flex-wrap:wrap;
        font-size:.65rem
    }
    .site-footer span:last-child {
        display:none
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:20px;
        margin-bottom:26px
    }
    h1 {
        font-size:2.1rem
    }
    .project-grid {
        grid-template-columns:1fr
    }
    .section-toolbar {
        align-items:flex-start
    }
    .tabs {
        gap:18px
    }
    .tabs a {
        font-size:.75rem
    }
    .section-toolbar>.small {
        font-size:.65rem;
        padding-top:3px
    }
    .editor-grid>aside,.student-grid>aside {
        display:flex;
        flex-direction:column
    }
    .editor-grid>aside>*,.student-grid>aside>* {
        width:100%
    }
    .panel {
        padding:20px
    }
    .concept-row {
        flex-wrap:wrap;
        gap:4px
    }
    .concept-edit {
        min-width:calc(100% - 32px)
    }
    .reorder-buttons {
        margin-left:26px
    }
    .concept-row>form:last-child {
        margin-left:auto
    }
    .concept-edit .icon-button,.reorder-buttons .icon-button {
        min-width:44px
    }
    .add-concept {
        flex-wrap:wrap
    }
    .add-concept input {
        flex:1;
        min-width:150px
    }
    .add-concept .button {
        padding:12px
    }
    .home-hero {
        grid-template-columns:1fr;
        padding-top:12px;
        padding-bottom:35px;
        gap:35px
    }
    .home-hero h1 {
        font-size:3.7rem
    }
    .hero-description {
        font-size:.98rem;
        margin:22px 0
    }
    .hero-illustration {
        padding:0 22px
    }
    .mini-compass {
        max-width:300px
    }
    .demo-bubble {
        font-size:.68rem;
        padding:7px 10px
    }
    .home-steps {
        grid-template-columns:1fr;
        gap:15px;
        padding-top:28px
    }
    .home-steps article {
        display:grid;
        grid-template-columns:38px 1fr;
        gap:0 10px
    }
    .step-number {
        grid-row:1/3;
        padding-top:4px
    }
    .home-steps h2 {
        margin-bottom:8px
    }
    .home-steps p {
        grid-column:2;
        margin-bottom:12px
    }
    .note-bar {
        padding:16px;
        font-size:.78rem
    }
    .login-panel {
        padding:24px
    }
    .login-copy h1 {
        font-size:2.8rem
    }
    .inline-fields {
        flex-wrap:wrap
    }
    .inline-fields input {
        flex:1;
        min-width:140px
    }
    .activity-toolbar {
        display:block;
        padding-bottom:14px
    }
    .activity-toolbar>span {
        display:block;
        margin-bottom:7px
    }
    .student-grid .board-panel {
        padding:16px 6px
    }
    .board-panel .panel-heading {
        gap:10px
    }
    .board-panel .panel-heading h2 {
        font-size:1rem;
        flex-basis:100%
    }
    .board-panel .panel-heading .progress-badge {
        margin-left:0
    }
    .compass-shell {
        margin-top:12px
    }
    .compass-middle {
        grid-template-columns:28px minmax(0,1fr) 28px
    }
    .axis-left>span,.axis-right>span {
        font-size:.6rem
    }
    .axis-left small,.axis-right small {
        display:none
    }
    .axis-top,.axis-bottom {
        font-size:.64rem
    }
    .quadrant {
        font-size:.37rem;
        padding:6px
    }
    .concept-bubble.placed {
        font-size:.62rem;
        max-width:98px;
        padding:6px 8px;
        min-height:44px
    }
    .board-note {
        font-size:.68rem;
        padding:0 10px
    }
    .submission-bar {
        flex-direction:column;
        align-items:stretch;
        gap:18px
    }
    .result-count {
        padding:12px 20px
    }
    .result-filters {
        padding:12px;
        gap:12px
    }
    .result-filters label {
        min-width:100%;
        font-size:.74rem
    }
    .result-filters .button {
        width:100%
    }
    .results-bottom {
        gap:18px
    }
    .result-board {
        padding:18px 4px
    }
    .result-board .panel-heading {
        padding:0 15px;
        flex-wrap:wrap
    }
    .result-board .panel-heading .status-pill {
        margin-left:0
    }
    .receipt-heading h1 {
        font-size:2rem
    }
    .receipt-heading p {
        font-size:.85rem
    }
    .plot-point {
        width:30px;
        height:30px
    }
    .plot-point:before {
        margin:8px
    }
    .point-tooltip {
        width:150px;
        font-size:.65rem
    }
    .receipt-link {
        padding:20px
    }
    .receipt-link .copy-field {
        gap:4px
    }
    .receipt-link input {
        font-size:.65rem
    }
    dialog {
        padding:24px
    }
    dialog .actions {
        align-items:stretch
    }
    dialog .button {
        flex:1;
        gap:8px
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important
    }
}
@media print {
    .site-header nav,.site-footer,.back-link,.copy-field,.result-filters,.submission-bar {
        display:none
    }
    .page {
        margin:0;
        padding:0
    }
    .panel {
        break-inside:avoid
    }
    .plot-point {
        print-color-adjust:exact
    }
    .compass {
        print-color-adjust:exact
    }
    .coordinates-details {
        display:block
    }
}