*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#d4e4e3}body{font-family:Arial,Helvetica,sans-serif;color:#344b42}canvas{width:100%;height:100%;display:block;outline:none;touch-action:none;user-select:none;-webkit-user-select:none}.brand{position:absolute;left:32px;top:28px;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:2.5px;line-height:1.5;pointer-events:none}.brand small{font-size:7px;letter-spacing:1.5px;opacity:.65}.mark{font:italic 42px Georgia,serif;letter-spacing:-4px;margin-right:6px}.tools{position:absolute;bottom:25px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #ffffff66;border-radius:30px;background:#f5f1e5cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 3px 22px #233b3010}button{background:transparent;border:0;border-radius:24px;color:#344b42;padding:10px 17px;font-size:12px;cursor:pointer;white-space:nowrap}button:hover{background:#fff9}button:focus-visible{outline:2px solid #476950;outline-offset:2px}#result{position:absolute;left:50%;top:22px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;font-weight:800;opacity:0;transition:opacity .25s;padding:15px 30px 13px;border-radius:14px;background:#f7f2e4e8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 30px #1b231a33;max-width:calc(100% - 40px)}#result .tally{display:flex;gap:clamp(26px,5vw,58px);font-size:clamp(30px,4.2vw,52px)}#result.visible{opacity:1}#error{position:absolute;inset:30%;padding:30px;background:#fff7e8;border-radius:12px;line-height:1.5}body.record .brand,body.record .tools{display:none}@media(max-width:600px){.brand{left:18px;top:18px}.tools{bottom:20px}#result{top:14px;padding:11px 18px}}#app{display:flex;align-items:center;justify-content:center;background:#6e6658}canvas{flex:none}.brand{display:none}.tools{bottom:18px}body.record #result{display:none}.study-link{padding:10px 14px;font-size:12px;text-decoration:none;color:inherit;white-space:nowrap;border-radius:24px}.study-link:hover{background:#fff9}@media(max-width:600px){button,.study-link{padding:10px}.tools{gap:0}}@media(max-width:600px){.tools{max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:center;border-radius:18px;width:max-content}.tools button,.study-link{font-size:11px;padding:8px 10px}}.inspector{position:absolute;right:0;top:0;bottom:0;width:300px;padding:28px 24px;background:#f4f0e8;color:#3d4439;overflow:auto;border-left:1px solid #aca88e44}.inspector h1{font:29px Georgia,serif;margin:22px 0 8px}.inspector p{font-size:12px;line-height:1.5;color:#74796c}.inspector a{font-size:11px;text-decoration:none;color:#59694e}.field{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin:18px 0}.field select{font:12px Arial;padding:7px 8px;border:1px solid #cfcfbd;border-radius:5px;background:#fffdf5;color:inherit;max-width:156px}.field input[type=color]{width:44px;height:28px;border:0;padding:0;background:transparent}.slider-field{display:block;margin:14px 0}.slider-field span{display:flex;justify-content:space-between;margin-bottom:6px}.slider-field output{color:#878b7e;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:#747f58}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:22px}.inspector-actions button,.import-look{border:1px solid #c8cbb9;border-radius:5px;padding:10px 8px;text-align:center;font-size:11px;cursor:pointer}.inspector-actions button:first-child{background:#596e49;color:#fff}.studio:not(.record) #app{padding-right:300px}.studio .tools{left:calc((100% - 300px)/2)}.record .inspector,.studio .brand{display:none}@media(max-width:700px){.inspector{top:auto;width:100%;height:300px;bottom:0;padding:16px 22px;border-left:0;border-top:1px solid #aca88e44}.inspector header p{display:none}.inspector h1{margin:10px 0}.studio:not(.record) #app{padding-right:0;padding-bottom:300px}.studio .tools{left:50%;bottom:310px}.field{margin:12px 0}#look-sliders{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}}#result span{display:flex;flex-direction:column;align-items:center;line-height:1}#result small{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-top:9px;opacity:.85}#result .footnote{margin:12px 0 0;max-width:46ch;font-size:11.5px;font-weight:400;line-height:1.45;color:#5a6155;text-align:center}.vote-card{position:absolute;left:20px;top:18px;width:min(360px,40vw);padding:18px 20px;border-radius:14px;background:#f6f1e3;box-shadow:0 8px 30px #1b231a33;color:#333d33}.vote-card .back{display:inline-block;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;text-decoration:none;color:#4a5c4a;opacity:.8}.vote-card .back:hover{opacity:1}.vote-card .meta{display:flex;gap:10px;margin:9px 0 5px;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;opacity:.65}.vote-card h1{margin:0;font:600 16px/1.4 Georgia,serif}.vote-card .kind{margin:8px 0 0;font-size:12px;opacity:.6}.vote-card .links{display:flex;flex-wrap:wrap;gap:13px;margin:11px 0 0;font-size:11px}.tools button:disabled{opacity:.4;cursor:default}.tools button:disabled:hover{background:transparent}.tools .nav-auto{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#344b42;padding:9px 15px 9px 12px;border-radius:24px;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}.tools .nav-auto:hover{background:#fff9}.tools .nav-auto input{appearance:none;-webkit-appearance:none;width:32px;height:18px;border-radius:10px;background:#cfc9b6;position:relative;cursor:pointer;transition:background .18s;flex:none}.tools .nav-auto input:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:left .18s}.tools .nav-auto input:checked{background:#5c7350}.tools .nav-auto input:checked:after{left:16px}.vote-card .links a{color:#3f5a46}.legend{transition:opacity .3s;position:absolute;right:18px;top:18px;margin:0;padding:11px 13px;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:#333d33;border-radius:11px;background:#f7f2e4e0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 26px #1b231a24}.legend li{display:flex;align-items:center;gap:7px}.legend i{width:10px;height:10px;border-radius:3px;flex:none}.legend b{margin-left:auto;opacity:.55;font-variant-numeric:tabular-nums}html.browsing,body.browsing,body.browsing #app{overflow:auto;background:#eae5d7;display:block;height:auto;min-height:100%}.index{max-width:780px;margin:0 auto;padding:56px 22px 90px}.index h1{font:600 clamp(26px,4vw,40px)/1.15 Georgia,serif;margin:0 0 14px;color:#2f3a31}.index .lede{margin:0 0 26px;font-size:14px;line-height:1.6;max-width:60ch;color:#4c5349}.index input{flex:1;padding:12px 14px;font:14px Arial;border:1px solid #c5bfaa;border-radius:8px;background:#fffdf6;color:inherit}.index .more{border:1px solid #b8b19c;border-radius:8px;background:#fffdf6;padding:12px 18px;font-size:13px}.index .more{display:block;width:100%;margin-top:18px}.votes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}.votes a{display:block;padding:15px 17px;background:#fffdf6;border:1px solid #ddd6c2;border-radius:10px;text-decoration:none;color:inherit}.votes a:hover{border-color:#8fa287;background:#fffef9}.votes .meta{display:flex;gap:12px;margin:0;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#7d8378}.votes h2{margin:7px 0 0;font:500 15px/1.4 Georgia,serif}.votes .bar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin:0;background:#e6e1d2}.votes .numbers{display:flex;justify-content:space-between;gap:12px;margin:9px 0 0;font-size:11.5px;color:#6d7369;font-variant-numeric:tabular-nums}.votes em{font-style:normal;opacity:.6;white-space:nowrap}.index .status{font-size:13px;color:#6d7369;text-align:center}#error{max-width:520px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 12px 40px #1d251c22}#error h2{margin:0 0 10px;font:600 20px Georgia,serif}@media(max-width:700px){.vote-card{width:calc(100% - 40px);padding:11px 13px}.vote-card h1{font-size:13px}.legend{display:none}#result .footnote{font-size:11px}}[hidden]{display:none!important}.sound-start{position:absolute;left:50%;top:70%;transform:translate(-50%);padding:14px 22px;border-radius:24px;background:#fff9e8ed;color:#383b33;cursor:pointer;font-size:14px;box-shadow:0 4px 30px #0002}.sound-start[hidden]{display:none}body.finale .legend{opacity:1}.bean-tip{position:fixed;z-index:20;transform:translate(14px,-50%);pointer-events:none;display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:9px;background:#1c2a22ee;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 6px 20px #0b110c66;line-height:1.25}.bean-tip i{width:11px;height:11px;border-radius:3px;flex:none;box-shadow:0 0 0 1px #ffffff40}.bean-tip b{font-weight:700}.live-link{margin:0 0 22px}.live-link a{display:block;padding:13px 16px;border-radius:10px;background:#2f3a31;color:#f4efe2;text-decoration:none;font-size:13px;line-height:1.5}.live-link a:hover{background:#3a473c}.live-link b{color:#ff6a5a;letter-spacing:.3px}.live-badge{position:absolute;left:26px;top:22px;display:flex;align-items:center;gap:8px;font:700 12px/1 Arial;letter-spacing:2px;color:#c8402f;background:#f7f2e4dd;padding:8px 13px;border-radius:20px;box-shadow:0 4px 18px #1b231a22}.live-badge i{width:9px;height:9px;border-radius:50%;background:#e23b28;box-shadow:0 0 #e23b2899;animation:livepulse 1.8s infinite}@keyframes livepulse{0%{box-shadow:0 0 #e23b2899}70%{box-shadow:0 0 0 9px #e23b2800}to{box-shadow:0 0 #e23b2800}}.live-panel{position:absolute;left:50%;bottom:26px;transform:translate(-50%);max-width:min(560px,92vw);text-align:center;background:#f7f2e4ee;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:14px 20px;border-radius:14px;box-shadow:0 8px 30px #1b231a2e;color:#333d33}.live-panel .live-title{margin:0;font:700 10px/1 Arial;letter-spacing:1.4px;text-transform:uppercase;opacity:.6}.live-panel .live-h{margin:5px 0 0;font:600 15px/1.35 Georgia,serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.live-panel .live-status{margin:0;font-size:14px}.live-btn{margin-top:11px;border:1px solid #b8b19c;border-radius:8px;background:#fffdf6;color:#333d33;padding:9px 16px;font-size:12px;cursor:pointer}.live-btn:hover{background:#fff}.bean-tip span{opacity:.7;font-weight:500;border-left:1px solid #ffffff33;padding-left:8px}body.finale .vote-card{opacity:1}.vote-card{transition:opacity .3s}#result.counting{background:#f7f2e4b8;box-shadow:none}#result.counting .footnote{display:none}.live-panel{left:126px;top:20px;bottom:auto;transform:none;width:min(430px,calc(100vw - 150px));max-width:none;text-align:left;padding:12px 16px}.live-panel .live-h{-webkit-line-clamp:4}.live-panel .live-btn{margin-top:8px}.live-badge{left:20px;top:22px}@media(max-width:600px){.live-panel{left:105px;top:18px;width:calc(100vw - 120px);padding:10px}.live-panel .live-h{font-size:12px}.live-badge{left:10px;padding:8px 10px}}.live-badge{flex-wrap:wrap;max-width:100px}.live-sound{flex-basis:100%;font:10px Arial,sans-serif;letter-spacing:0;padding:5px 2px;margin-top:3px;white-space:normal}.live-sound:disabled{opacity:.6}.bean-parade{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;background:linear-gradient(to top,#eae5d7 55px,#eae5d700 145px)}body.browsing .index{padding-bottom:230px}.desktop-notice{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:#1f261fcc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.desktop-notice>div{max-width:340px;padding:26px 24px;border-radius:14px;background:#f7f2e4;color:#2f3a31;text-align:center;box-shadow:0 12px 40px #0006}.desktop-notice .icon{font-size:38px;margin:0}.desktop-notice h2{margin:8px 0 10px;font:600 21px Georgia,serif}.desktop-notice p{font-size:14px;line-height:1.5;margin:0 0 18px}.desktop-notice button{border:1px solid #b8b19c;border-radius:8px;background:#fffdf6;padding:11px 18px;font-size:14px}body:has(.vote-card) .tools{left:calc((min(360px,40vw) - 134px + 100%)/2)!important;right:auto!important;top:18px!important;bottom:auto!important;transform:translate(-50%)!important}.tools .mute{display:inline-flex;align-items:center;padding:9px 13px;opacity:.8}.tools .mute:hover{opacity:1}.tools .mute[aria-pressed=true]{opacity:.55}#result{display:none!important}.zone-count{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;line-height:1;padding:14px 30px 12px;border-radius:14px;background:#f7f2e4e8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 22px #1b231a33;font-weight:800;font-size:clamp(30px,3.8vw,50px);min-width:120px;pointer-events:none;opacity:0;transition:opacity .25s;z-index:3}.zone-count small{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-top:6px;opacity:.85}.zone-count.visible{opacity:1}.zone-count.counting{background:#f7f2e4c4;box-shadow:none;font-size:clamp(26px,3.1vw,40px);padding:12px 26px 10px}body.record .zone-count{display:none}.tools{flex-wrap:wrap;justify-content:center}.tools .footnote{order:99;flex-basis:100%;margin:0 0 4px;padding:0 12px;font-size:11.5px;line-height:1.4;color:#5a6155;text-align:center;white-space:normal}.tools:has(.footnote){border-radius:18px}body:has(.vote-card) .tools{width:max-content;max-width:calc(100% - 40px)}.tools .footnote{width:0;min-width:100%}:root{--top-panel-width:420px}body:has(.vote-card) .tools{width:var(--top-panel-width)}.vote-card{width:var(--top-panel-width)!important;max-width:calc(100% - 40px);background:#f5f1e5cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #ffffff66;box-shadow:0 3px 22px #233b3010}body:has(.vote-card) .tools{left:calc((var(--top-panel-width) + 36px + 100% - 170px)/2)!important}body:has(.vote-card) .tools{flex-wrap:wrap;gap:0;padding:4px 6px}body:has(.vote-card) .tools>button,body:has(.vote-card) .tools .nav-auto{padding:8px 10px}body:has(.vote-card) .tools .nav-auto input{width:28px;height:16px}body:has(.vote-card) .tools .nav-auto input:after{width:12px;height:12px}body:has(.vote-card) .tools .nav-auto input:checked:after{left:14px}.legend,.zone-count,.zone-count.counting{background:#f5f1e5cc!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #ffffff66;box-shadow:0 3px 22px #233b3010!important}:root{--top-panel-width:min(420px,calc((50vw - 34px)/1.5))}body:has(.vote-card) .tools{left:50%!important;transform:translate(-50%)!important}.live-agenda{position:absolute;left:50%;top:40%;max-height:70vh;overflow:auto;transform:translate(-50%,-50%);width:min(680px,84vw);text-align:center;padding:22px 28px;border-radius:16px;background:#f5f1e5e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #ffffff66;box-shadow:0 10px 36px #1b231a33;color:#333d33;transition:top .9s cubic-bezier(.4,0,.2,1),padding .9s,width .9s,opacity .4s}.live-agenda .kicker{margin:0;font:700 11px/1 Arial;letter-spacing:2px;text-transform:uppercase;opacity:.6}.live-agenda h2{margin:10px 0 0;font:600 clamp(17px,2.1vw,27px)/1.3 Georgia,serif}.live-agenda .sub{margin:10px 0 0;font-size:12px;opacity:.65}.live-agenda .links{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.live-agenda .links a{font:600 11px/1 Arial;letter-spacing:.5px;text-decoration:none;color:#333d33;padding:5px 10px;border-radius:999px;border:1px solid #333d3333;background:#ffffff80}.live-agenda .links a:hover{background:#fff;border-color:#333d3366}.live-agenda.raised .links{margin-top:8px;gap:6px}.live-agenda.raised .links a{padding:3px 8px;font-size:10px}.live-agenda.raised{top:76px;width:min(560px,70vw);padding:12px 20px}.live-agenda.raised h2{font-size:clamp(13px,1.35vw,17px);margin-top:6px}.live-agenda.raised .sub{margin-top:6px;font-size:11px}@media(max-width:700px){.live-agenda{width:calc(100vw - 40px);top:34%}.live-agenda.raised{top:62px}}.live-panel{inset:auto auto 26px 50%!important;transform:translate(-50%)!important;text-align:center!important;width:auto!important;max-width:min(560px,92vw)!important}.style-study-picker{position:fixed;z-index:30;right:18px;top:205px;padding:10px 14px;border-radius:10px;background:#f6f1e3;color:#333d33;font:12px Arial;box-shadow:0 3px 18px #302a2420}.style-study-picker select{font:inherit;color:inherit;background:#fffaf0;border:1px solid #b6ae9c;border-radius:5px;padding:5px}.live-badge{max-width:none;gap:2px;padding:5px 6px}.live-nav,.live-now{border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;border-radius:14px;display:flex;align-items:center}.live-nav{width:28px;height:28px;padding:0;justify-content:center;color:#3f4a40}.live-nav svg{flex:none;width:14px;height:14px}.live-nav:disabled{opacity:.25;cursor:default}.live-now{gap:8px;padding:7px 9px 7px 8px;margin-left:3px;color:#c8402f}.live-now:disabled{cursor:default}.live-nav:hover:not(:disabled),.live-now:hover:not(:disabled){background:#2f3a3112}.live-badge.replaying .live-now{color:#8a8578}.live-badge.replaying .live-now i{background:#b3ad9d;animation:none}.live-badge.replaying.news .live-now{color:#c8402f}.live-badge.replaying.news .live-now i{background:#e23b28;animation:livepulse 1.8s infinite}.live-badge .live-sound{flex-basis:100%}
