:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #172b37; background: #edf2f2; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
.shell { width: min(100% - 2rem, 48rem); margin: 3.5rem auto 2rem; }
.eyebrow { font-size: .72rem; font-weight: 750; letter-spacing: .16em; color: #41646c; }
h1 { margin: .4rem 0; font-size: clamp(2.5rem, 8vw, 4rem); letter-spacing: -.06em; line-height: 1.1; }
h1 span { color: #087f70; }
.intro { color: #4b636d; line-height: 1.6; margin: 1rem 0 2rem; }
.board { background: white; border: 1px solid #d9e3e5; border-radius: 1.2rem; padding: 1.5rem; box-shadow: 0 12px 35px #173b4810; }
.board-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1.5rem; }
h2 { font-size: 1.2rem; margin: 0; }
#summary { color: #556c75; font-size: .82rem; margin: 0; }
form > label { display: block; font-size: .85rem; font-weight: 650; margin-bottom: .5rem; }
.entry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
input[type="text"] { width: 100%; min-width: 0; border: 1px solid #a9bdc4; border-radius: .6rem; background: #f9fbfb; padding: .8rem; font: inherit; }
button { font: inherit; cursor: pointer; border-radius: .6rem; min-height: 44px; border: 1px solid transparent; }
#add-task { background: #086d61; color: white; padding: .7rem 1rem; font-weight: 650; }
#add-task:hover { background: #075a51; }
:focus-visible { outline: 3px solid #215cd0; outline-offset: 3px; }
button:disabled, input:disabled { opacity: .6; cursor: not-allowed; }
.status { color: #536a74; font-size: .8rem; line-height: 1.6; margin: 1rem 0; min-height: 1.3em; }
.error { color: #8a1828; background: #fff1f1; border: 1px solid #efbdc5; padding: .8rem; border-radius: .6rem; line-height: 1.5; }
#task-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; border-top: 1px solid #e6eded; padding: .9rem 0; }
.task-label { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; line-height: 1.5; min-width: 0; }
.task-label span { overflow-wrap: anywhere; min-width: 0; padding-top: .1rem; }
input[type="checkbox"] { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .25rem 0 0; accent-color: #087568; }
.is-done .task-label span { text-decoration: line-through; color: #64777d; }
.remove { color: #8a2432; background: #fff; border-color: #ead5d9; padding: .45rem .65rem; font-size: .8rem; }
.remove:hover { background: #fff1f3; }
.empty { text-align: center; color: #526e78; padding: 1.5rem .5rem 2rem; font-size: .9rem; }
.empty-mark { font-size: 1.5rem; background: #e3f3ed; color: #087568; border-radius: 50%; width: 3rem; height: 3rem; line-height: 3rem; margin: .5rem auto 1rem; }
.empty p { overflow-wrap: anywhere; }
footer { text-align: center; color: #526a73; font-size: .75rem; line-height: 1.7; margin-top: 1.5rem; }
[hidden] { display: none !important; }
@media (max-width: 380px) { .shell { width: calc(100% - 1rem); margin-top: 2rem; } .board { padding: 1rem; } .entry-row { grid-template-columns: minmax(0, 1fr); } #add-task { width: 100%; } }