:root{font-family:ui-rounded,'Avenir Next',Avenir,'Segoe UI',sans-serif;color:#243149;background:#fff;font-synthesis:none;font-size:16px;--line:#dfe6ef;--muted:#667286;--blue:#365fcc}*{box-sizing:border-box}body{margin:0}header,main{max-width:1120px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:28px 28px 12px}a{color:inherit;text-decoration:none}.brand{font-weight:700;display:flex;gap:10px;align-items:center}.brandmark{font-size:29px;color:var(--blue)}.quiet,.small{color:var(--muted);font-size:.82rem}main{padding:0 28px}button,input,textarea,select{font:inherit}button,a,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #6f93ff;outline-offset:4px}button{border:1px solid var(--line);background:white;border-radius:8px;padding:10px 16px;color:inherit}button:hover{border-color:#98accc}.primary{background:var(--blue);color:white;border:0;font-weight:600;padding:14px 22px;border-radius:9px}.primary:hover{background:#254cae}.link-button{display:inline-block}.intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:65px 0 50px}h1{font-size:clamp(38px,5.2vw,64px);letter-spacing:-2.6px;line-height:1.03;margin:0 0 22px;font-weight:750}p{line-height:1.65}.intro p{color:var(--muted);margin:0 0 25px;font-size:1.05rem}.hat-demo{display:flex;align-items:center;gap:25px}.guide-copy{max-width:235px}.guide-copy>span{color:#16704b;font-size:.85rem;font-weight:700}.guide-copy h2{font-size:23px;line-height:1.2;margin:10px 0}.guide-copy p{font-size:.92rem;margin:0}.figure{width:78px;height:104px;overflow:visible;shape-rendering:crispEdges;filter:drop-shadow(0 5px 0 #2431490c)}#guide-person .figure{width:132px;height:180px}.hat{transform-origin:40px 22px}.changed .hat{animation:hat-change .45s ease-out}.section-line{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.section-line h2{font-size:21px;letter-spacing:-.4px;margin:0}.section-line>span{font-size:.8rem;color:var(--muted)}.learn{border-top:1px solid var(--line);padding:30px 0 40px}.hat-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.hat-option{display:flex;gap:10px;flex-direction:column;align-items:center;padding:15px 8px;background:#f8fafc;border:1px solid transparent;border-radius:10px}.hat-option[aria-pressed=true]{border-color:#6687c3;background:#f0f5ff}.hat-option svg{width:49px;height:34px}.hat-option b{font-size:.86rem}.hat-option span{font-size:.73rem;color:var(--muted)}.method-note{font-size:.82rem;color:var(--muted);max-width:770px;margin:20px 0 0}#playground{padding:28px 0;border-top:1px solid var(--line);scroll-margin-top:25px}.modes{display:flex;background:#edf1f6;border-radius:9px;padding:4px;gap:3px}.modes button{border:0;background:transparent;font-size:.83rem;padding:9px 15px}.modes button.selected{background:white;box-shadow:0 1px 5px #23304712}form{border:1px solid var(--line);padding:24px;border-radius:14px;margin-bottom:24px}form>label{display:block;font-weight:650;font-size:.93rem;margin-bottom:12px}textarea{width:100%;padding:13px 15px;resize:vertical;min-height:75px;border:1px solid #cdd6e3;border-radius:8px;color:inherit;background:#fff;line-height:1.5}textarea::placeholder{color:#8490a2}.examples{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 16px}.examples button{font-size:.75rem;padding:6px 11px;border-radius:20px;background:#f7f9fc}details{font-size:.83rem;color:var(--muted)}details textarea{margin-top:12px}summary{cursor:pointer}.form-bottom{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:20px}.round-choice{display:flex;flex-direction:column;gap:6px;font-size:.76rem;color:var(--muted)}select{padding:8px 28px 8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#243149;font-size:.85rem}form .small{margin-bottom:0;font-size:.72rem}.stage{position:relative;min-height:435px;background:#f3f7fc;border:1px solid #e7edf6;border-radius:16px;overflow:hidden}.stage-top,.stage-bottom{position:absolute;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;z-index:3}.stage-top{top:20px}.stage-bottom{bottom:15px;color:var(--muted)}.status:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#8593a5;margin-right:8px}.running .status:before{background:#33895c;animation:pulse 1.5s infinite}.table{position:absolute;width:59%;height:162px;top:148px;left:20.5%;background:#dfe7f4;border:7px solid #eaf0f9;border-radius:50%;box-shadow:0 13px 0 #cad6e9,0 23px 0 #e4ebf5;display:grid;place-items:center}.table-inlay{position:absolute;inset:15px;border:1px dashed #bccce2;border-radius:50%}.table span{color:#7183a0;font-size:12px;z-index:1}.person{position:absolute;display:flex;align-items:center;flex-direction:column;z-index:2;transform:translateX(-50%);width:95px}.person .name{font-size:.7rem;font-weight:650;background:#ffffffcf;border-radius:10px;padding:3px 7px;margin-top:3px}.person .figure{width:65px;height:87px}.person.active .figure{animation:speak .6s ease-in-out 3}.person.active .name{outline:2px solid #4874ec}.person[data-role=moderator]{left:50%;top:46px}.person[data-role=white]{left:22%;top:100px}.person[data-role=red]{left:10%;top:218px}.person[data-role=green]{left:31%;top:281px}.person[data-role=yellow]{left:69%;top:281px}.person[data-role=black]{left:90%;top:218px}.person[data-role=blue]{left:78%;top:100px}.speech-bubble{position:absolute;z-index:4;top:179px;left:32%;width:36%;background:white;border-radius:9px;padding:13px 17px;font-size:.75rem;line-height:1.45;box-shadow:0 3px 15px #253b5512;max-height:100px;overflow:hidden}.text-button{border:0;background:transparent;padding:5px;font-size:.75rem}progress{height:3px;display:block;width:calc(100% - 28px);margin:0 14px 22px;border:0;background:#e8edf5}progress::-webkit-progress-bar{background:#e8edf5}progress::-webkit-progress-value{background:#4874ec}.run-actions{display:flex;gap:9px;align-items:center;margin:16px 0}.run-actions button{font-size:.8rem}#error{padding:15px;border-left:3px solid #d64355;background:#fff3f3;color:#872b37}.turn{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:20px}.turn-label{font-size:.78rem;font-weight:700;display:flex;flex-direction:column;gap:7px}.turn-label span{font-size:.72rem;color:var(--muted);font-weight:400}.turn-content{font-size:.9rem;line-height:1.65;min-width:0;overflow-wrap:anywhere}.turn-content p{margin:0 0 12px}.turn-content details{margin-top:10px}.turn-content li{margin:7px 0}.report{padding:26px;background:#f4f7fc;border-radius:12px;line-height:1.75;font-size:.92rem;overflow-wrap:anywhere}.report h3{font-size:1.15rem;margin-top:28px}.report h2{font-size:1.35rem}#report-section{margin-top:32px}#native-panel{text-align:center;background:#f5f8fc;padding:48px 20px;border-radius:15px}.native-icon{font-size:42px;color:#4874ec}#native-panel h3{font-size:24px}footer{margin:45px 0 25px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:.72rem;color:var(--muted)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.no-motion *{animation:none!important;transition:none!important}@keyframes speak{50%{transform:translateY(-4px) rotate(-2deg)}}@keyframes hat-change{0%{transform:translateY(-25px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-width:700px){header,main{padding-left:18px;padding-right:18px}.intro{grid-template-columns:1fr;gap:34px;padding:40px 0}h1{letter-spacing:-1.8px}.hat-demo{justify-content:center}.hat-picker{grid-template-columns:repeat(3,1fr)}.section-line{align-items:start;flex-direction:column;gap:13px}.form-bottom{align-items:stretch;flex-direction:column}.round-choice select{width:100%}form{padding:17px}.stage{min-height:415px}.person .figure{width:50px;height:70px}.person{width:70px}.person[data-role=red]{left:12%}.person[data-role=black]{left:88%}.table{left:17%;width:66%;top:150px;height:130px}.table span{font-size:9px}.speech-bubble{top:176px;left:27%;width:46%;font-size:.67rem;max-height:83px;padding:10px}.stage-top,.stage-bottom{left:13px;right:13px;font-size:.68rem}.stage-bottom{bottom:12px}.stage-bottom>span{max-width:63%}.turn{grid-template-columns:1fr;gap:10px}.turn-label{flex-direction:row;gap:12px}.run-actions{flex-wrap:wrap}footer{flex-direction:column;gap:7px}}