:root{font-family:Georgia,Times New Roman,serif;color:#332c24;background:#eee6d6;font-synthesis:none}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:#eee6d6}main{width:min(100% - 2rem,860px);margin:0 auto;padding:clamp(3rem,9vw,7rem) 0 3rem}header{margin-bottom:2.25rem}.result-label,.input-heading span,.dataset-heading span,.empty-dataset,.dataset-pill{font-family:Arial,Helvetica,sans-serif}h1{margin:0;font-size:clamp(2.6rem,9vw,5.4rem);font-weight:400;letter-spacing:-.055em;line-height:.94}.intro{max-width:520px;margin:1.25rem 0 0;color:#665b4f;font-size:clamp(1rem,2.5vw,1.15rem);line-height:1.55}.calculator{border-top:1px solid #9d8f7b;border-bottom:1px solid #9d8f7b;padding:1.5rem 0 0}.entry-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:clamp(2rem,6vw,4rem)}.input-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.65rem}label{font-size:1.1rem;font-weight:700}.input-heading span{color:#786c5f;font-size:.72rem;letter-spacing:.025em}input{display:block;width:100%;border:1px solid #ab9c87;border-radius:2px;outline:3px solid transparent;background:#f8f3e8;color:#332c24;font:1.25rem/1.6 Courier New,monospace;padding:.9rem 1rem;transition:border-color .12s ease,outline-color .12s ease}input::placeholder{color:#a59a8a}input:focus{border-color:#8a4f32;outline-color:#8a4f3229}input[aria-invalid=true]{border-color:#9e3f35}.error{margin:.75rem 0 0;color:#8c3029;font:.85rem/1.4 Arial,Helvetica,sans-serif}.dataset-panel{min-height:8rem;border-left:1px solid #b7aa97;padding-left:1.25rem}.dataset-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.6rem;border-bottom:1px solid #b7aa97}.dataset-heading h2{margin:0;font-size:1.1rem}.dataset-heading span{color:#786c5f;font-size:.72rem;white-space:nowrap}.empty-dataset{margin:1rem 0 0;color:#8b8072;font-size:.8rem;line-height:1.45}#dataset{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.7rem;max-height:13rem;margin:.85rem 0 0;padding:0;overflow-y:auto;list-style:none}#dataset[hidden]{display:none}#dataset li{max-width:100%}.dataset-pill{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.4rem;max-width:100%;border:1.5px solid #b7ab9b;border-radius:1.15rem;background:#fbf8f1;box-shadow:0 1px 2px #332c241a;color:#332c24;font:600 1.3rem/1 Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;padding:.7rem .75rem .7rem 1rem;cursor:pointer;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease}.dataset-pill:hover,.dataset-pill:focus-visible{border-color:#8a4f32;background:#fffdf8;box-shadow:0 2px 5px #332c2424}.dataset-pill:focus-visible{outline:2px solid #8a4f32;outline-offset:2px}.dataset-pill span:first-child{overflow:hidden;text-overflow:ellipsis;cursor:pointer}.dataset-pill span:last-child{font-family:Arial,Helvetica,sans-serif;color:#8d8982;font-size:2rem;font-weight:300;line-height:.65;cursor:pointer}.dataset-pill:hover span:last-child,.dataset-pill:focus-visible span:last-child{color:#8a4f32}.result{margin-top:1.5rem;padding:1.75rem 0 1.5rem;border-top:1px dashed #b7aa97}.result-label{margin:0 0 .3rem;color:#786c5f;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}#sum-of-squares{display:block;min-height:1.1em;color:#8a4f32;font-size:clamp(3.5rem,14vw,7rem);font-variant-numeric:tabular-nums;letter-spacing:-.06em;line-height:1;overflow-wrap:anywhere}.details{display:flex;gap:2.5rem;margin-top:1.25rem}.details p{margin:0;font-size:1.05rem;font-variant-numeric:tabular-nums}.details span{margin-right:.35rem;color:#786c5f;font-family:Arial,Helvetica,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.formula{margin:1.35rem 0 0;color:#786c5f;font-size:.9rem;font-style:italic;text-align:right}@media(max-width:480px){main{width:min(100% - 1.5rem,860px)}.input-heading{display:block}.input-heading span{display:block;margin-top:.25rem}.details{gap:1.5rem}}@media(max-width:650px){.entry-grid{grid-template-columns:1fr;gap:1.5rem}.dataset-panel{min-height:0;border-top:1px solid #b7aa97;border-left:0;padding-top:1.25rem;padding-left:0}}@media(prefers-reduced-motion:reduce){input,.dataset-pill{transition:none}}
