:root { color-scheme: light; --ink: #18302b; --muted: #60716c; --paper: #fbfaf6; --green: #2d775c; --mint: #dff3e6; --line: #d8e1d9; --warm: #ffb45f; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--ink); background: radial-gradient(circle at 8% 5%, #e3f5e9 0 16%, transparent 36%), var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font: inherit; }
.page-shell { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 64px; }
.hero { max-width: 710px; text-align: center; margin: 0 auto 64px; }
.eyebrow { margin: 0 0 12px; color: var(--green); font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 14px; font-size: clamp(2.25rem, 5vw, 4.4rem); letter-spacing: -.06em; line-height: .98; } h2 { margin-bottom: 6px; font-size: 1.25rem; } .lead, .section-heading p { color: var(--muted); }
.task-switch { display: inline-flex; gap: 4px; margin: 6px 0 12px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: white; } .task-switch button { padding: 8px 13px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; } .task-switch button.active, .task-switch button[aria-selected="true"] { color: white; background: var(--green); } .task-switch button:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
.regenerate { display: inline-flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px 18px; border: 1px solid #246348; border-radius: 999px; color: white; background: var(--green); cursor: pointer; box-shadow: 0 8px 22px #2d775c2e; transition: transform .2s ease, background .2s ease; } .regenerate:hover, .regenerate:focus-visible { background: #205b44; transform: translateY(-2px); } .regenerate span { font-size: 1.2em; }
.section-heading { text-align: center; margin-bottom: 24px; } .section-heading p { margin-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: center; }
.candidate-card { min-height: 230px; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); text-align: left; background: #fff; cursor: pointer; box-shadow: 0 12px 25px #18302b0b; transition: opacity .42s ease, transform .42s ease, box-shadow .2s ease, border-color .2s ease; }
.candidate-card:hover, .candidate-card:focus-visible { border-color: var(--green); box-shadow: 0 16px 32px #18302b17; outline: none; transform: translateY(-5px); } .card-topline { display: flex; gap: 8px; align-items: baseline; } .task-label { color: var(--muted); font-size: .85rem; } .card-topline strong, .selected-task > strong { color: var(--green); font-size: 1.5rem; } .formula { display: grid; flex: 1; place-items: center; width: 100%; padding: 18px 0; font-size: clamp(1.4rem, 2.5vw, 2rem); } .choose-hint { color: var(--green); font-size: .9rem; font-weight: 700; }
.candidate-card.selected { width: min(100%, 430px); min-height: 260px; margin: 0 auto; border-color: var(--green); background: #fcfffc; cursor: default; transform: none; } .fraction-card.restored-card { pointer-events: none; } .candidate-card.leaving { opacity: 0; transform: scale(.82); pointer-events: none; } .cards.is-selected { grid-template-columns: 1fr; }
.cards.is-entering .candidate-card { animation: card-in .42s both; } .cards.is-entering .candidate-card:nth-child(2) { animation-delay: .06s; } .cards.is-entering .candidate-card:nth-child(3) { animation-delay: .12s; }
.selected-answer { display: grid; gap: 4px; width: 100%; margin-top: 4px; padding: 12px; border-radius: 12px; color: #24523e; background: var(--mint); text-align: center; animation: rise-in .35s both; } .selected-answer > span:first-child { font-size: .78rem; font-weight: 750; } .selected-answer .katex-display { margin: 0; font-size: 1.15rem; }
.task1-card { min-height: 310px; padding: 18px; } .task1-card .card-topline { width: 100%; } .plan-preview { display: block; flex: 1; width: 100%; margin: 10px 0 7px; } .seed-label { color: var(--muted); font: .75rem ui-monospace, SFMono-Regular, Consolas, monospace; } .task1-card .choose-hint { margin-top: 9px; }
.bundle-card { min-height: 330px; padding: 18px; } .bundle-card .card-topline { width: 100%; } .validation-chip { display: inline-flex; margin-top: 7px; padding: 4px 8px; border-radius: 999px; color: #24523e; background: var(--mint); font-size: .72rem; font-weight: 750; } .bundle-card .choose-hint { margin-top: 9px; }
.plot-svg { display: block; width: 100%; max-height: 440px; border-radius: 11px; background: #fbfcfa; } .plan-preview .plot-svg { max-height: 205px; } .plot-svg .grid { stroke: #d8ddd8; stroke-width: .035; } .plot-svg .plot-boundary { fill: #fff; fill-opacity: .3; stroke: #1f302a; stroke-width: .16; shape-rendering: crispEdges; } .plot-svg .plan-path { fill: url(#tile-pattern); } .plot-svg .building { stroke: #5a3a25; stroke-width: .09; } .plot-svg .greenhouse { stroke: #3e7971; } .plot-svg .garden > rect { fill: #dcecb6; stroke: #6d8347; stroke-width: .09; } .plot-svg .garden-row { stroke: #779552; stroke-width: .11; } .plot-svg .orchard > rect { fill: #f2f8e4; stroke: #55713b; stroke-width: .09; } .plot-svg .tree { fill: #4e7b3f; stroke: #24522d; stroke-width: .04; } .plot-svg .marker circle { fill: white; stroke: #17231f; stroke-width: .1; } .plot-svg .marker text { fill: #17231f; font: 700 .66px system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; } .plot-svg .gate-gap { stroke: white; stroke-width: .26; } .plot-svg .gate { fill: none; stroke: #17231f; stroke-width: .13; } .plot-svg .legend { font: .68px system-ui, sans-serif; fill: #30423b; } .plot-svg .legend .plan-path { stroke: #db9d4c; stroke-width: .04; }
.task1-card.selected { width: min(100%, 910px); max-width: none; min-height: 0; padding: 26px; } .task1-expanded { cursor: default; } .task1-expanded:hover { transform: none; } .plan-detail { width: 100%; margin-top: 16px; } .full-plan { width: min(100%, 760px); margin: 0 auto 20px; } .plan-text { max-width: 800px; margin: 0 auto; color: #32453d; line-height: 1.55; } .plan-text p { margin-bottom: 13px; } .mapping-table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: .92rem; } .mapping-table th, .mapping-table td { min-width: 62px; padding: 10px 8px; border: 1px solid #aec0b2; text-align: center; } .mapping-table th { background: #eff7ef; } .mapping-table td { height: 40px; background: white; }
.bundle-card.selected { width: min(100%, 910px); max-width: none; min-height: 0; padding: 26px; } .bundle-expanded { cursor: default; } .bundle-expanded:hover { transform: none; } .bundle-detail { width: 100%; margin-top: 16px; } .bundle-task-tabs { display: flex; gap: 7px; justify-content: center; margin: 24px 0 16px; } .bundle-task-tab { width: 38px; height: 38px; border: 1px solid #9ab8a7; border-radius: 50%; color: #24523e; background: white; cursor: pointer; font-weight: 800; } .bundle-task-tab.active, .bundle-task-tab[aria-selected="true"] { color: white; background: var(--green); border-color: var(--green); } .bundle-task-tab:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; } .bundle-question { width: min(100%, 800px); margin: 0 auto; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #f9fcf9; color: #2c443a; line-height: 1.55; } .bundle-question p { margin-bottom: 0; } .answer-placeholder { display: inline-flex; min-width: 155px; gap: 8px; margin-top: 16px !important; padding: 8px 10px; border-radius: 8px; color: #496056; background: white; font-weight: 700; } .answer-placeholder span { display: inline-block; flex: 1; min-width: 55px; border-bottom: 1px solid #567269; } .heating-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: .84rem; } .heating-table th, .heating-table td { padding: 8px; border: 1px solid #aec0b2; text-align: center; } .heating-table th { background: #eff7ef; }
.technical { width: min(100%, 760px); margin: 36px auto 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .technical summary { padding: 15px 18px; cursor: pointer; font-weight: 700; } pre { max-height: 360px; margin: 0; padding: 18px; overflow: auto; border-top: 1px solid var(--line); color: #25483c; background: #f4f8f4; font: .8rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; } .json-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 18px; } .json-actions button { padding: 9px 12px; border: 1px solid #9ab8a7; border-radius: 9px; color: #24523e; background: white; cursor: pointer; } .json-actions button:hover, .json-actions button:focus-visible { background: var(--mint); outline: 2px solid var(--warm); outline-offset: 2px; }
.answer-technical { margin-top: 14px; } .answer-technical p { margin: 0; padding: 0 18px 16px; color: #24523e; font-weight: 800; letter-spacing: .02em; line-height: 1.5; white-space: pre-line; }
.status { min-height: 1.5em; margin: 18px auto 0; color: var(--muted); text-align: center; font-size: .9rem; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .page-shell { width: min(100% - 28px, 520px); padding-top: 44px; } .hero { margin-bottom: 42px; } .cards { grid-template-columns: 1fr; } .candidate-card { min-height: 175px; } .task1-card.selected, .bundle-card.selected { padding: 16px; } .mapping-table, .heating-table { display: block; overflow-x: auto; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }