:root{--ink:#263e35;--muted:#7b857d;--green:#2a6550;--paper:#f7f8f3;--line:#e2e7dc;--mint:#edf3e8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:14px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #df9b34;outline-offset:4px}button{transition:background .15s,transform .15s}button:hover{filter:brightness(.96)}button:active{transform:translateY(1px)}.header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:0 max(32px,calc((100vw - 1280px)/2))}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-size:19px;font-weight:750;letter-spacing:-.5px;white-space:nowrap}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:5px;font-weight:500}.brand-icon{display:grid;place-items:center;width:40px;height:42px;background:var(--green);color:white;border-radius:11px;font-size:31px}.header-note{margin-left:auto;font-size:12px;color:var(--muted)}.subject{border:1px solid #dce3d5;border-radius:20px;padding:7px 13px;font-size:11px}main{max-width:1280px;margin:auto;padding:37px 32px 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2.5px;color:var(--green)}h1{font-size:34px;letter-spacing:1px;margin:12px 0}h1 span{color:var(--green)}p{line-height:1.7}.intro p{color:var(--muted);font-size:13px;margin:0}.intro-note{transform:rotate(-3deg);background:#f3edd6;border:1px solid #e8dfbe;padding:15px 22px;box-shadow:3px 4px 0 #eeeade}.intro-note span{display:block;font-size:10px;margin-bottom:7px}.intro-note strong{font-size:14px}.settings{display:flex;align-items:center;gap:32px;border:1px solid var(--line);background:white;border-radius:13px;padding:20px 25px;margin-bottom:24px}.setting-title{display:flex;align-items:center;gap:12px}.step{display:inline-grid;place-items:center;background:var(--mint);border-radius:6px;width:27px;height:27px;color:var(--green);font-size:11px;font-weight:700;flex-shrink:0}h2{font-size:14px;margin:0}h3{font-size:13px;margin:0}.setting-title p{margin:6px 0 0;font-size:10px;color:var(--muted)}.slider-wrap{flex:1;max-width:500px;margin-left:auto}input[type=range]{width:100%;accent-color:var(--green);cursor:pointer}.range-labels{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;margin-top:3px}.preset{border:0;background:var(--mint);color:var(--green);border-radius:5px;font-size:10px;padding:3px 12px;margin:0 3px}.number-wrap{display:flex;align-items:baseline;gap:8px}.number-wrap input{width:86px;font-size:36px;font-weight:650;color:var(--green);border:0;border-bottom:2px solid var(--line);text-align:center;background:transparent}.number-wrap span{font-size:13px}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:22px;align-items:start}.classroom-panel,.results-panel{border:1px solid var(--line);border-radius:14px;background:white;overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 20px;border-bottom:1px solid var(--line)}.panel-heading h2{display:flex;align-items:center;gap:10px}.panel-heading>span{font-size:10px;color:var(--muted)}.room{padding:23px 25px 0;background:#f1f2e9;background-image:linear-gradient(90deg,#e6e9dd66 1px,transparent 1px);background-size:44px 100%}.blackboard{position:relative;background:#2f5b4b;color:white;border:5px solid #c9b995;border-bottom:7px solid #b1a17e;border-radius:4px;max-width:480px;margin:auto;padding:13px 20px 20px;text-align:center;box-shadow:0 4px 7px #35482a12}.board-top{display:flex;justify-content:space-between;color:#c0d1c3;font-size:8px;letter-spacing:1px;margin-bottom:16px}.blackboard h3{font-weight:500;font-size:16px;letter-spacing:1px}.blackboard p{color:#c6d6c5;font-size:10px;margin:10px 0 0}.chalk{position:absolute;bottom:0;right:24px;width:25px;height:4px;background:#f5eee1;border-radius:2px}.room-front{text-align:center;font-size:8px;color:#a8af9f;margin:14px 0}.students{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px 8px;max-width:570px;margin:auto}.student{min-width:0;position:relative;background:#f9f9f4;border:1px solid #e0e4d6;border-bottom:3px solid #d5dbc9;border-radius:8px;padding:5px 1px 3px;color:#737e69;display:flex;flex-direction:column;align-items:center;min-height:57px}.person{display:block;position:relative;width:26px;height:28px;margin-bottom:2px}.person:before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;left:7.5px;top:0;background:currentColor}.person:after{content:"";position:absolute;width:24px;height:13px;left:1px;bottom:2px;background:currentColor;border-radius:10px 10px 4px 4px}.seat-label{font-size:9px;white-space:nowrap;font-variant-numeric:tabular-nums}.birthday-label{font-size:10px;line-height:1.2;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}.dense .birthday-label{font-size:9px}.student.matched{background:var(--group-bg);color:var(--group);border:2px solid var(--group);border-bottom-width:3px;box-shadow:0 0 8px var(--group-bg)}.group-badge{position:absolute;top:-6px;right:-3px;background:var(--group);color:white;font-size:8px;border-radius:4px;min-width:16px;padding:1px 3px}.student.selected{outline:3px solid #c7993e;outline-offset:2px}.students.dense{grid-template-columns:repeat(10,minmax(0,1fr));gap:8px 6px}.dense .student{min-height:46px;padding-top:3px}.dense .person{transform:scale(.8);height:23px}.dense .seat-label{font-size:8px}.student-detail{text-align:center;font-size:10px;color:#69765d;margin:0;padding:14px 0;min-height:45px}.classroom-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px}.classroom-actions strong{font-size:11px}.classroom-actions p{font-size:10px;color:var(--muted);margin:5px 0 0}.primary{background:var(--green);color:white;border:0;border-radius:8px;padding:14px 23px;font-weight:700;white-space:nowrap;box-shadow:0 3px 0 #194535}.primary span{margin-left:20px}.matches{border-top:1px solid var(--line);padding:17px 20px;background:#fcfdf9}.result-title{font-size:15px;font-weight:700}.matches p{font-size:11px;color:var(--muted);margin:7px 0}.match-groups{display:flex;flex-wrap:wrap;gap:7px}.match-chip{border:1px solid var(--group);background:var(--group-bg);color:var(--group);border-radius:6px;padding:7px 9px;font-size:11px}.match-chip b{margin-right:7px}.reset-button{background:#f8faf4;border:1px solid #a8b99a;border-radius:6px;color:var(--green);font-size:10px;font-weight:600;padding:8px;white-space:nowrap;flex-shrink:0}.reset-button:hover{background:var(--mint)}.probabilities{padding:20px}.theory{padding:17px 20px;background:var(--mint);border-radius:10px}.metric-label{font-size:11px;font-weight:600;display:flex;justify-content:space-between}.metric-label span{background:white;padding:2px 7px;border-radius:4px;font-size:9px;color:var(--green)}.big-number{font-size:60px;color:var(--green);font-weight:650;line-height:1.2;letter-spacing:-2px;font-variant-numeric:tabular-nums;margin-top:9px}.big-number small{font-size:24px;letter-spacing:0;margin-left:7px}.theory p{margin:6px 0 0;font-size:10px;color:#63755c}.experiment{padding:19px 5px 14px}.experiment-number{font-size:39px;font-weight:650;margin:8px 0 12px;font-variant-numeric:tabular-nums}.experiment-number small{font-size:18px;margin-left:6px}.comparison-track{height:8px;background:#edf0e8;border-radius:5px;position:relative}.comparison-track div{height:100%;width:0;background:#a8bd84;border-radius:5px}.comparison-track>span{position:absolute;top:-4px;width:2px;height:16px;background:var(--green)}.legend{display:flex;gap:14px;font-size:9px;color:var(--muted);margin-top:8px}.legend i{display:inline-block;width:7px;height:7px;background:#a8bd84;border-radius:2px;margin-right:5px}.counts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:14px}.counts>div{display:flex;flex-direction:column;gap:8px;padding-left:5px}.counts>div+div{border-left:1px solid var(--line);padding-left:20px}.counts span{font-size:10px;color:var(--muted)}.counts strong{font-size:22px}.counts b{font-weight:600}.counts small{font-size:11px;font-weight:400}.batch{border-top:1px solid var(--line);padding:20px}.batch p,.chart-section p{font-size:10px;color:var(--muted);margin:7px 0 12px}.batch-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.batch-buttons button{border:1px solid #d5decb;color:var(--green);background:#f8faf4;border-radius:6px;padding:10px 0;font-size:11px;font-weight:600}.batch .batch-status{margin-bottom:0;font-size:9px;min-height:16px}.chart-section{border-top:1px solid var(--line);padding:18px 20px}.chart-title{display:flex;justify-content:space-between;gap:4px;align-items:center}.chart-title h3{font-size:11px}.chart-title span{font-size:9px;color:var(--muted)}#chart{width:100%;display:block;margin-top:10px}.chart-section p{margin-bottom:0}.explanation{margin-top:22px;border:1px solid var(--line);background:#f0f3e9;border-radius:10px;padding:18px 22px}.explanation summary{display:flex;justify-content:space-between;cursor:pointer;font-size:12px;font-weight:600;gap:16px}.explanation summary span+span{font-size:10px;font-weight:400;color:var(--muted)}.explanation>div{max-width:900px;font-size:12px;line-height:1.8;margin-top:20px}.explanation code{display:block;padding:12px;background:white;border-radius:6px;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;gap:16px;padding:25px 0;color:#899281;font-size:10px}footer span:first-child{font-weight:650}.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}@media(min-width:1450px){main{padding-top:42px}.students{gap:13px 10px}.student{min-height:63px}.room{padding-top:25px}}@media(max-width:1000px){main{padding:25px 20px 0}.header{padding:0 20px}.intro-note{display:none}.workspace{grid-template-columns:minmax(0,1.35fr) minmax(290px,1fr);gap:15px}.settings{gap:20px}.room{padding:18px 14px 0}.students{gap:8px 5px}.classroom-actions{flex-wrap:wrap}.classroom-actions .primary{flex:1}.panel-heading{padding:15px}.panel-heading h2{font-size:12px}.blackboard h3{font-size:13px}.students.dense{grid-template-columns:repeat(8,minmax(0,1fr))}.header-note{display:none}.subject{margin-left:auto}}@media(max-width:720px){.header{height:73px}.brand{font-size:16px}.subject{font-size:9px;padding:6px 10px}main{padding:26px 16px 0}h1{font-size:28px}.intro p{font-size:11px;max-width:310px}.settings{flex-wrap:wrap;padding:16px;gap:14px}.setting-title{width:100%}.slider-wrap{margin:0;max-width:none}.number-wrap input{font-size:30px;width:75px}.workspace{grid-template-columns:1fr;gap:20px}.room{padding:20px 16px 0}.students{gap:11px 7px}.student{min-height:55px}.students.dense{grid-template-columns:repeat(8,minmax(0,1fr))}.classroom-actions{flex-wrap:nowrap}.classroom-actions strong{font-size:10px}.primary{font-size:12px;padding:14px 15px}.primary span{margin-left:10px}.panel-heading h2{font-size:13px}.blackboard h3{font-size:13px}#chart{max-height:165px}.explanation{padding:16px}.explanation summary{font-size:11px}footer{font-size:9px;flex-wrap:wrap}footer span:nth-child(2){display:none}}@media(max-width:390px){.students,.students.dense{grid-template-columns:repeat(6,minmax(0,1fr))}.classroom-actions{flex-direction:column;align-items:stretch}.classroom-actions>div{text-align:center}.primary{width:100%}.intro h1{font-size:25px}.subject{display:none}}