@charset "UTF-8";
*{box-sizing:border-box}
:root{color-scheme:light;--ink:#39344a;--muted:#827c91;--purple:#7b5ad8;--paper:#fcfaf7;--row:86px;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;font-synthesis:none}
body{margin:0;background:var(--paper);color:var(--ink);min-width:320px;background-image:radial-gradient(#b8adb31a .8px,transparent .8px);background-size:12px 12px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.board-scroll:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
button:disabled{cursor:default}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.page-shell{max-width:1536px;margin:auto;padding:0 42px}
.topbar{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0}
.brand{display:flex;flex-shrink:0;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:20px;letter-spacing:1px;font-weight:800;white-space:nowrap}
.brand small{display:block;font-weight:500;font-size:11px;letter-spacing:3px;margin-top:4px;color:var(--muted)}
.brand-mark{display:grid;grid-template-columns:repeat(2,17px);gap:3px;transform:rotate(-7deg)}
.brand-mark i{width:17px;height:17px;border-radius:5px;background:#9272de;box-shadow:inset 0 -3px 0 #0000000d}
.brand-mark i:nth-child(2){background:#baa6ec;transform:translateY(-3px)}
.brand-mark i:nth-child(3){background:#f5c563}
.brand-mark i:nth-child(4){background:#a6d8c0}
.utility-button{width:40px;height:40px;display:flex;flex-shrink:0;align-items:center;justify-content:center;border:1px solid var(--line,#e7e0e9);border-radius:12px;background:var(--surface,#fffdfb);padding:0;color:var(--control-ink,#6c637d);cursor:pointer;transition:background .2s,transform .2s}
.utility-button:hover:not(:disabled){background:var(--accent-soft,#f0eaf9);transform:translateY(-1px)}
.utility-button:disabled{opacity:.45;cursor:default}
.utility-button svg{width:18px;height:18px}
.utility-button.chant-toggle{width:auto;gap:6px;padding:0 10px;white-space:nowrap;font-size:12px;font-weight:650}
.chant-toggle[aria-pressed="true"]{border-color:var(--purple);background:var(--accent-soft,#f0eaf9);color:var(--control-ink,var(--purple))}
@media(max-width:480px){.utility-button.chant-toggle{width:36px;padding:0}.chant-toggle span{display:none}}
.workspace-tools{display:flex;flex:1;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.tool-group{display:flex;align-items:center;gap:8px}
.icon-select{position:relative}
.icon-select .appearance-select{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer;font:inherit}
.icon-select:focus-within,.tool-menu>summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.tool-menu{position:relative}
.tool-menu>summary{list-style:none}
.tool-menu>summary::-webkit-details-marker{display:none}
.tool-menu[open]>summary{background:var(--accent-soft,#f0eaf9);border-color:var(--purple)}
.tool-popover{position:absolute;right:0;top:calc(100% + 10px);z-index:20;width:174px;padding:8px;border:1px solid var(--line,#e7e0e9);border-radius:15px;background:var(--surface,#fffdfb);color:var(--ink);box-shadow:0 12px 32px #30204e24}
.tool-popover p{margin:5px 8px 7px;font-size:12px;color:var(--muted)}
.tool-popover button{display:block;width:100%;border:0;border-radius:9px;padding:10px 12px;text-align:left;background:transparent;font-size:13px}
.tool-popover button:hover,.tool-popover button:focus-visible{background:var(--accent-soft,#f0eaf9)}
.workspace-tools button:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

.playground{position:relative;background:#fffdfb;border:1px solid #ebe5ea;border-radius:24px;box-shadow:0 5px 0 #eee7ee66,0 14px 40px #7e628606;padding:22px 20px 0}
.board-scroll{overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#d1c2e8 transparent;padding:0 0 8px}
.board{position:relative;min-width:980px}
.mobile-navigation{display:none}
.table-columns{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:9px;align-items:end;padding:0 0 2px}
.number-column{--color:#8f78ce;--tint:#f1eafa;--edge:#d6c7ef;background:var(--tint);border:1.5px solid var(--edge);border-radius:16px 16px 13px 13px;padding:0 5px 5px;position:relative;isolation:isolate;box-shadow:0 3px 0 color-mix(in srgb,var(--edge),transparent 55%)}
.column-heading{height:var(--row);display:flex;align-items:center;justify-content:center;position:relative;margin:0;font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;font-size:37px;line-height:1;font-weight:900;color:var(--color);text-shadow:0 2px 0 #ffffffa6}
.column-heading:after{content:"";position:absolute;bottom:13px;left:calc(50% - 13px);width:26px;border-bottom:3px solid var(--edge);border-radius:50%}
.column-heading button{width:100%;height:100%;border:0;padding:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-shadow:inherit}
.column-heading button:hover{background:#ffffff40}
.column-heading:after{pointer-events:none}
.block-cell{height:var(--row);border-radius:9px;position:relative;border:1px solid #ffffffcf;background:#ffffffa8;margin-top:4px;box-shadow:0 1px 2px #72507b06;transition:background .2s,border .2s}
.block-cell.selected{background:#fff;border-color:var(--color);box-shadow:0 0 0 1px var(--color)}
.block-cell.selected:after{content:"";position:absolute;left:5px;top:5px;width:4px;height:4px;background:var(--color);border-radius:50%}
.block-cell:hover{background:#fff}
.discovery{position:absolute;top:15px;left:34%;right:1%;height:420px;display:flex;align-items:flex-start;justify-content:flex-end;gap:20px;z-index:2;pointer-events:none}
.discovery-copy{position:relative;margin-top:52px;min-width:0;max-width:330px;padding:15px 20px;border:1px solid var(--line,#e7e0e9);border-radius:23px;background:var(--accent-soft,#f0eaf9);box-shadow:0 4px 0 var(--soft-shadow,#30204e12);pointer-events:auto}
.discovery-copy:after{content:"";position:absolute;right:-9px;bottom:20px;width:16px;height:16px;background:inherit;border-top:1px solid var(--line,#e7e0e9);border-right:1px solid var(--line,#e7e0e9);transform:rotate(45deg)}
.utility-button.explore-button{width:auto;min-height:44px;height:auto;max-width:100%;gap:8px;margin:12px auto 0;padding:9px 14px;font-size:14px;font-weight:700}

.discovery h2{font-size:22px;letter-spacing:1px;margin:0;font-weight:750;line-height:1.45;text-wrap:balance}
.discovery h2 span{font-size:33px;font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;color:var(--purple);display:inline-block;transform:rotate(-7deg)}

.discovery-preview{width:clamp(400px,34vw,500px);flex-shrink:0;position:relative;pointer-events:auto}
.discovery-stage{width:100%;height:420px;position:relative;isolation:isolate}
.discovery-stage:before{content:"";position:absolute;inset:16px 24px 12px;background:#f5effb;border-radius:47% 53% 51% 49% / 49% 37% 63% 51%;z-index:-1}
.doodle{position:absolute;color:#d1b1eb;font-size:32px;transform:rotate(10deg);pointer-events:none}
.doodle-one{right:2%;top:9px;color:#e8b850}
.doodle-two{right:24%;top:395px;font-size:18px}
.board-bottom{min-height:60px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;color:#9d90a6;font-size:12px;border-top:1px dashed #e8e0eb;margin-top:13px}
.board-bottom>.life-control{justify-self:start}
.life-control{position:relative;width:max-content}
#life-toggle svg{width:27px;height:27px;transition:transform .2s}
#life-toggle[aria-pressed="true"]{background:var(--accent-soft,#eee7f9)}
#life-toggle[aria-pressed="true"] svg{transform:rotate(-7deg)}
.life-feedback{position:absolute;z-index:10;left:0;bottom:calc(100% + 10px);padding:8px 12px;border:1px solid var(--line,#e7e0e9);border-radius:12px;background:var(--accent-soft,#eee7f9);color:var(--control-ink,#7956b9);box-shadow:0 4px 12px #30204e18;font-size:12px;white-space:nowrap;pointer-events:none}
.life-feedback:after{content:"";position:absolute;left:14px;bottom:-5px;width:8px;height:8px;background:inherit;border-right:1px solid var(--line,#e7e0e9);border-bottom:1px solid var(--line,#e7e0e9);transform:rotate(45deg)}
.board-bottom #table-view{justify-self:center}
.board-status{display:flex;justify-self:end;align-items:center;gap:14px}
.page-footer{display:flex;justify-content:space-between;gap:12px;padding:21px 7px 25px;color:#aaa1ae;font-size:11px;letter-spacing:.4px}
.page-footer kbd{font:inherit;background:#f0eaf1;border-radius:4px;padding:3px 5px;letter-spacing:1px;color:#9c8aa9}
.footer-dot{margin:0 10px}

/* Each character is one unit deep, with six faces and an exact row × column grid. */
.creature-button{display:block;width:100%;height:100%;padding:0;border:0;background:none;perspective:650px;position:relative;touch-action:none;cursor:grab;border-radius:8px;user-select:none;-webkit-user-select:none;contain:layout style}
.creature-button:active,.creature-button.dragging{cursor:grabbing}
.block-cell>.creature-button{width:calc(100% - 18px);height:calc(100% - 14px);margin:7px 9px}
.creature-button:focus-visible{outline-offset:0;z-index:4}
.creature-shadow{position:absolute;left:50%;top:calc(50% + var(--h)/2 + 7px);width:calc(var(--w)*.8 + 10px);height:8px;transform:translateX(-50%);background:#49314d1a;border-radius:50%;filter:blur(2px);pointer-events:none}
.creature{--rx:-13deg;--ry:-19deg;position:absolute;width:var(--w);height:var(--h);left:50%;top:50%;margin-left:calc(var(--w)/-2);margin-top:calc(var(--h)/-2 + var(--character-offset,0px) + 3px);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));pointer-events:none;transition:transform .25s ease-out}
.dragging .creature{transition:none}
.face{--shade:transparent;position:absolute;left:0;top:0;backface-visibility:hidden;border:1px solid var(--block-edge);border-radius:2px;background:var(--block-edge);display:grid;grid-template-columns:repeat(var(--face-cols),1fr);grid-template-rows:repeat(var(--face-rows),1fr);overflow:hidden}
.block-tile{min-width:0;min-height:0;border:clamp(.5px,calc(var(--unit)*.013),1.3px) solid color-mix(in srgb,var(--tile),var(--block-edge) 45%);border-radius:calc(var(--unit)*.045);background:linear-gradient(var(--shade),var(--shade)),linear-gradient(135deg,#ffffff20,transparent 48%,#00000008),var(--tile);box-shadow:inset 1px 1px 1px #ffffff38,inset -1px -1px 1px #0000000d}
.face.front,.face.back{width:var(--w);height:var(--h)}
.face.front{transform:translateZ(calc(var(--depth)/2))}
.face.back{--shade:#1713290c;transform:rotateY(180deg) translateZ(calc(var(--depth)/2))}
.face.right,.face.left{--shade:#17132924;width:var(--depth);height:var(--h);left:calc((var(--w) - var(--depth))/2)}
.face.right{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.face.left{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.face.top,.face.bottom{--shade:#ffffff30;width:var(--w);height:var(--depth);top:calc((var(--h) - var(--depth))/2)}
.face.top{transform:rotateX(90deg) translateZ(calc(var(--h)/2))}
.face.bottom{--shade:#17132920;transform:rotateX(-90deg) translateZ(calc(var(--h)/2))}
.character-number{position:absolute;left:50%;top:0;transform:translate(-50%,-110%) translateZ(calc(var(--depth)/2 + 1px));font-family:"Trebuchet MS",system-ui,sans-serif;font-size:var(--num-size);line-height:1.15;font-weight:900;color:#272332;text-shadow:0 1px 0 #ffffff8c;backface-visibility:hidden}
.expression{--eye-ring:var(--limb);position:absolute;left:50%;top:var(--face-y,46%);width:var(--face-size);height:calc(var(--face-size)*.76);transform:translate(-50%,-50%) translateZ(calc(var(--depth)/2 + 2px));backface-visibility:hidden;filter:drop-shadow(0 1px 1px #30203825)}
.eyes{display:flex;justify-content:space-between;width:88%;height:61%;margin:auto;position:relative}
.eye{z-index:1;width:45%;height:100%;background:#fffef8;border:clamp(1px,calc(var(--face-size)*.025),4px) solid var(--eye-ring);border-radius:49%;position:relative;box-shadow:inset 0 -2px 1px #d8cbbf55}
.eye:after{content:"";position:absolute;left:35%;top:28%;width:43%;height:57%;background:#18191f;border-radius:50%}
.eye:before{content:"";position:absolute;left:54%;top:29%;width:13%;height:17%;background:white;border-radius:50%;z-index:1}
.creature-button .eye:before,.creature-button .eye:after{translate:calc(var(--face-size)*var(--gaze-x,0)) calc(var(--face-size)*var(--gaze-y,0));transition:translate 100ms ease-out}
.brow{display:none}
.mouth{position:absolute;left:31%;top:72%;width:38%;height:29%;background:#512630;border:clamp(1px,calc(var(--face-size)*.014),2px) solid var(--limb);border-radius:12% 12% 50% 50% / 10% 10% 90% 90%;overflow:hidden}
.mouth:before{content:"";position:absolute;top:0;left:8%;right:8%;height:32%;background:#fffdf4;border-radius:0 0 35% 35%}
.mouth:after{content:"";position:absolute;left:27%;right:15%;height:35%;bottom:-3%;background:#ee788e;border-radius:60% 60% 0 0}
.arm{position:absolute;top:51%;width:calc(var(--face-size)*.3);height:calc(var(--face-size)*.23);border:clamp(2px,calc(var(--face-size)*.065),9px) solid var(--limb);border-top:0;border-right:0;border-radius:60% 0 0 60%;transform:translateZ(1px);backface-visibility:hidden}
.arm:after{content:"";position:absolute;width:calc(var(--face-size)*.105);height:calc(var(--face-size)*.105);border-radius:50%;left:calc(var(--face-size)*-.055);top:calc(var(--face-size)*-.025);background:var(--limb)}
.arm.left{left:calc(var(--face-size)*-.26);transform:rotate(18deg) translateZ(calc(var(--depth)/2 + 1px))}
.arm.right{right:calc(var(--face-size)*-.26);transform:scaleX(-1) rotate(18deg) translateZ(calc(var(--depth)/2 + 1px))}
.foot{position:absolute;bottom:calc(var(--face-size)*-.17);width:calc(var(--face-size)*.105);height:calc(var(--face-size)*.23);background:var(--limb);border-radius:40%;transform:translateZ(calc(var(--depth)/2 + 1px))}
.foot:after{content:"";position:absolute;bottom:0;left:-25%;width:165%;height:42%;border-radius:50% 50% 35% 35%;background:var(--limb)}
.foot.left{left:22%}.foot.right{right:22%}
.expression[data-mood="1"] .eye:last-child{height:33%;background:transparent;border:0;border-top:2px solid #453040;border-radius:50%;margin-top:18%;box-shadow:none;transform:rotate(-12deg)}
.expression[data-mood="1"] .eye:last-child:before,.expression[data-mood="1"] .eye:last-child:after{display:none}
.expression[data-mood="1"] .mouth{transform:rotate(-10deg)}
.expression[data-mood="2"] .mouth{left:42%;width:18%;height:30%;background:#512630;border-radius:50%;top:72%;border:0}
.expression[data-mood="2"] .mouth:before,.expression[data-mood="2"] .mouth:after{display:none}
.expression[data-mood="2"] .eye:after{width:30%;height:37%;top:37%;left:39%}
.expression[data-mood="3"] .eye{border:0;border-top:3px solid #46303e;background:none;border-radius:50%;height:35%;margin-top:10%;box-shadow:none}
.expression[data-mood="3"] .eye:after,.expression[data-mood="3"] .eye:before{display:none}
.expression[data-mood="3"] .mouth,.expression[data-mood="5"] .mouth{top:66%;left:28%;width:44%;height:40%;border:0;background:#512630;border-radius:10% 10% 50% 50%;overflow:hidden}
.expression[data-mood="3"] .mouth:after,.expression[data-mood="5"] .mouth:after{content:"";position:absolute;left:20%;right:20%;height:55%;bottom:-5%;background:#f38fa9;border-radius:50% 50% 0 0}
.expression[data-mood="4"] .eye{border:0;background:#e95d8b;clip-path:polygon(50% 20%,70% 2%,95% 10%,100% 38%,50% 100%,0 38%,5% 10%,30% 2%);border-radius:0;box-shadow:none}
.expression[data-mood="4"] .eye:before,.expression[data-mood="4"] .eye:after{display:none}
.expression[data-mood="5"] .mouth{overflow:visible;height:25%}
.expression[data-mood="5"] .mouth:after{height:130%;bottom:-55%;border-radius:5px 5px 50% 50%;left:44%;right:5%}
.expression-previous{pointer-events:none}
.eyes{transform-origin:center 45%}
:root[data-life="off"] .block-cell:not(.selected) .eye{height:33%;margin-top:18%;background:none;border:0;border-bottom:2px solid #453040;border-radius:0 0 50% 50%;box-shadow:none;clip-path:none;transform:none}
:root[data-life="off"] .block-cell:not(.selected) .eye:before,:root[data-life="off"] .block-cell:not(.selected) .eye:after{display:none}
:root[data-life="off"] .block-cell:not(.selected) :is(.creature,.arm){animation:none}

/* Recognisable Numberblocks details, scaled with the face in every view. */
[data-character="one"] .eyes{justify-content:center}
[data-character="one"] .eye{width:63%;height:113%;border-radius:50%}
[data-character="one"] .mouth{top:79%}
:is([data-character="two"],[data-character="twenty"]) .expression{--eye-ring:#85549e}
[data-character="twenty-one"] .expression{--eye-ring:#c88632}
:is([data-character="two"],[data-character="twenty"],[data-character="twenty-one"]) .eyes:before{content:"";position:absolute;left:43%;top:42%;width:14%;height:9%;background:var(--eye-ring)}
[data-character="two"] .foot:after{background:#fff1cb;border-bottom:2px solid #d78e2a}
:is([data-character="four"],[data-character="nine"],[data-character="twenty-eight"],[data-character="forty-two"],[data-character="forty-nine"],[data-character="fifty-six"],[data-character="sixty-three"],[data-character="seventy-two"]) .eye{border-radius:22%}
:is([data-character="four"],[data-character="nine"]) .brow{display:block;position:absolute;top:-17%;width:30%;height:12%;background:var(--limb);border-radius:1px}
.brow.left{left:9%;rotate:-6deg}.brow.right{right:9%;rotate:6deg}
:is([data-character="five"],[data-character="ten"]) .eyes:before,[data-character="ten"] .eyes:after{content:"";position:absolute;left:-9%;top:-24%;width:61%;height:144%;background:var(--limb);clip-path:polygon(50% 0,62% 32%,98% 35%,72% 57%,80% 94%,50% 74%,20% 94%,28% 57%,2% 35%,38% 32%)}
[data-character="ten"] .eyes:after{left:auto;right:-9%}
[data-character="eight"] .eyes:before{content:"";position:absolute;inset:-24% -16%;background:#792758;clip-path:polygon(0 0,26% 16%,33% 0,50% 20%,67% 0,74% 16%,100% 0,90% 45%,100% 80%,72% 80%,64% 100%,50% 80%,36% 100%,28% 80%,0 80%,10% 45%)}
[data-character="eight"] .extra-arm.upper{top:15%}
[data-character="eight"] .extra-arm.lower{top:77%}
.character-accessory,.creature .official-accessory{position:absolute;backface-visibility:hidden;transform:translateZ(calc(var(--depth)/2 + 1px));pointer-events:none}
.official-accessory{fill:none;stroke:none}
[data-character="seven"] .expression{--eye-ring:#e8c731}
[data-character="seven"] .mouth{border-color:#e8c731}
[data-character="seventy-two"] .expression{--eye-ring:#7e808f}
[data-character="twenty-eight"] .motion-body :is(.arm,.forearm,.hand){background:linear-gradient(90deg,#ed4545 0% 14.285%,#f5a43b 14.285% 28.57%,#ffe34d 28.57% 42.855%,#81c84c 42.855% 57.14%,#4bbfe4 57.14% 71.425%,#5355aa 71.425% 85.71%,#954cb0 85.71% 100%)}
[data-character="twenty-one"] .character-number{top:calc(var(--face-size)*-.18)}
[data-character="forty-nine"] .creature-shadow{translate:0 var(--character-offset,0px)}
.crown{left:calc(50% - var(--face-size)*.3);top:calc(var(--face-size)*-.3);width:calc(var(--face-size)*.6);height:calc(var(--face-size)*.35);background:linear-gradient(100deg,#d64b38,#b92d32);clip-path:polygon(0 0,28% 40%,50% 0,72% 40%,100% 0,88% 100%,12% 100%)}
:is([data-character="three"],[data-character="seven"],[data-character="forty-nine"]) .character-number{top:calc(var(--face-size)*-.28)}
.buttons{right:12%;top:24%;height:54%;display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.buttons i{width:calc(var(--face-size)*.085);height:calc(var(--face-size)*.085);border-radius:50%;background:#c04435;box-shadow:inset 1px 1px 0 #ffffff44}
.dice-pips{inset:15% 8%;display:grid;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(3,auto);justify-content:space-between;align-content:space-between}
.dice-pips i{width:calc(var(--face-size)*.12);height:calc(var(--face-size)*.12);border-radius:50%;background:#c881c5;box-shadow:inset 0 -1px 1px #55357855}
.top-hat{left:10%;top:calc(var(--face-size)*-.35);width:calc(var(--face-size)*.35);height:calc(var(--face-size)*.38);background:linear-gradient(to right,#6e478e,#9664b2 60%,#81529e);border:1px solid #684184;border-bottom:calc(var(--face-size)*.07) solid #edba45;border-radius:16% 16% 6% 6%;rotate:-14deg}
.top-hat:after{content:"";position:absolute;left:-25%;bottom:calc(var(--face-size)*-.085);width:150%;height:calc(var(--face-size)*.065);border-radius:50%;background:#84539c}
.bow-tie{left:calc(50% - var(--face-size)*.16);top:77%;width:calc(var(--face-size)*.32);height:calc(var(--face-size)*.14);background:#fff7db;clip-path:polygon(0 0,43% 30%,57% 30%,100% 0,100% 100%,57% 70%,43% 70%,0 100%)}

.life-toggle{min-height:38px;padding:8px 13px;border:1px solid var(--line,#e7e0e9);border-radius:20px;background:var(--surface,#fffdfb);color:var(--control-ink,var(--purple));font-size:12px;white-space:nowrap}
.life-toggle:before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--muted)}
.life-toggle[aria-pressed="true"]:before{background:#77b78e;box-shadow:0 0 0 3px #77b78e22}
.discovery-stage .creature-shadow{height:12px;filter:blur(5px);background:#80649020;top:calc(50% + var(--h)/2 + 15px)}
.discovery-stage .face{border-radius:4px}

dialog{width:min(590px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #e3d7ee;border-radius:30px;padding:35px 30px 22px;text-align:center;background:#fffcf9;color:var(--ink);box-shadow:0 20px 100px #30204e30}
dialog::backdrop{background:#37284355;backdrop-filter:blur(6px)}
.close-button{position:absolute;right:16px;top:14px;border:0;border-radius:50%;width:36px;height:36px;background:#f0eaf6;color:#8d79a2;font-size:26px;line-height:1}
.dialog-kicker{font-size:12px;letter-spacing:2px;color:#ac94bb}
dialog h2{font-size:30px;margin:10px 0;color:#5e4774}
dialog h2 span{color:var(--purple)}
dialog>p{font-size:14px;color:#9889a6;margin:0}
.block-description{font-size:14px;line-height:1.6;letter-spacing:0;color:var(--control-ink,#6c637d);font-variant-numeric:tabular-nums;text-wrap:balance}
#selected-description{margin:10px 0 0}
#dialog-description{font-size:16px;font-weight:600;color:var(--control-ink,#6c637d)}
.large-stage{height:360px;margin:10px auto 7px;position:relative;border-radius:24px;background:radial-gradient(ellipse at center,#f3eaf8 0,transparent 68%)}
.large-stage .creature-button{perspective:950px}
.large-stage .face{border-radius:4px}
.large-stage .creature-shadow{height:17px;filter:blur(7px);top:calc(50% + var(--h)/2 + 18px)}
.explore-popover{position:fixed;inset:auto;margin:0;width:max-content;padding:12px;border:1px solid var(--line,#e8dfec);border-radius:18px;background:var(--surface,#fff);box-shadow:0 10px 32px #30204e24}
.expression-buttons:popover-open{display:grid;grid-template-columns:repeat(4,44px);gap:8px}
#action-toggle,#unit-play-toggle{position:relative;width:44px;height:40px}
#unit-play-toggle{width:auto;gap:7px;padding:0 12px;font-size:12px;white-space:nowrap}
#action-toggle[aria-expanded="true"],#unit-play-toggle[aria-expanded="true"]{background:var(--accent-soft,#eee4fb);border-color:var(--purple)}
.expression-buttons button{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line,#e8dfec);background:var(--surface,#fff);padding:0;border-radius:12px;color:var(--control-ink,var(--purple))}
.expression-buttons .expression,#action-toggle .expression{--face-size:27px;--limb:var(--control-ink,#6e546e);top:49%;transform:translate(-50%,-50%);pointer-events:none}
.expression-buttons button:hover,.expression-buttons button[aria-pressed="true"]{background:var(--accent-soft,#eee4fb);border-color:var(--purple);color:var(--control-ink,var(--purple))}
.expression-buttons .pose-icon{width:30px;height:32px;stroke-linecap:round;stroke-linejoin:round}
.action-feedback:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;max-width:560px;margin:12px auto 0;padding:10px 14px;border-radius:12px;background:var(--accent-soft,#eee4fb);color:var(--control-ink,#6e546e);font-size:14px;line-height:1.5}
.action-feedback p{flex:1 1 180px;margin:0;text-align:left}
.action-feedback button{min-height:44px;font-size:14px}
.action-feedback button:disabled{opacity:.65}
.pose-icon rect{fill:var(--accent-soft,#eee4fb)}
.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:1500px){:root{--row:94px}.discovery{top:20px;height:460px}.discovery-preview{width:540px}.discovery-stage{height:460px}.discovery h2{font-size:27px}.discovery h2 span{font-size:38px}.doodle-two{top:435px}}
@media(max-width:1190px){.page-shell{padding:0 24px}.playground{padding-left:12px;padding-right:12px}.discovery{left:34%;right:1%;height:380px;gap:18px}.discovery-preview{width:360px}.discovery-stage{height:380px}.discovery h2{font-size:20px}.column-heading{font-size:34px}.doodle-two{top:355px}.board-status{gap:8px}}
@media(max-width:740px){.page-shell{padding:0 16px}.topbar{min-height:78px;gap:12px 8px;padding:18px 0}.brand{font-size:16px;gap:9px;letter-spacing:0}.brand small{font-size:10px;letter-spacing:2px}.brand-mark{grid-template-columns:repeat(2,14px);gap:2px}.brand-mark i{width:14px;height:14px;border-radius:4px}.workspace-tools,.tool-group{gap:6px}.utility-button{width:36px;height:36px;border-radius:11px}.playground{padding-top:14px;border-radius:20px}.board{min-width:990px}.board-bottom{line-height:1.7;font-size:11px;gap:6px;min-height:60px;margin-top:8px}.page-footer{padding:18px 0;justify-content:center;font-size:10px}.page-footer>span:last-child{display:none}.large-stage{height:300px}.large-stage .creature-button{scale:.82}dialog{padding:32px 16px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1090px){.mobile-navigation{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px;gap:8px;color:#9583a0;font-size:11px}.mobile-navigation button{border:1px solid #e8ddef;background:#f5effa;color:#9d7bbd;border-radius:10px;min-width:40px;height:32px;font-size:18px}}
@media(max-width:740px){
  .discovery{position:sticky;left:0;right:auto;top:auto;width:calc(100vw - 76px);height:auto;margin:0 0 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,42%);align-items:center;gap:8px 10px}
  .discovery-copy{max-width:100%;padding:10px 12px;margin-top:0;border-radius:16px;text-align:left}
  .discovery-copy:after{right:-6px;top:calc(50% - 6px);bottom:auto;width:10px;height:10px;transform:rotate(45deg)}
  .discovery h2{font-size:16px;letter-spacing:0}.discovery h2 span{font-size:24px}
  .discovery-preview{display:contents}.discovery-stage{height:184px;pointer-events:auto}
  .discovery .friend-copy{grid-column:1/-1;min-height:0;padding:4px 0;pointer-events:auto;font-size:13px;line-height:1.5}
  .discovery-copy:has(.pattern-discovery:not([hidden])){grid-column:1/-1}
  .discovery:has(.pattern-discovery:not([hidden])) .discovery-stage{grid-column:1/-1;width:min(100%,260px);justify-self:center}
  .discovery .doodle{display:none}.discovery .creature{scale:1}
}
@media(max-width:360px){.discovery h2{font-size:15px}.discovery h2 span{font-size:23px}}

/* The same block jumps out of the preview and returns when the stage closes. */
html{scrollbar-gutter:stable}
html.exploring{overflow:hidden}
#hero-stage{cursor:zoom-in}
#hero-stage.is-expanded{visibility:hidden}
#hero-stage .creature-button{cursor:zoom-in}
#hero-stage .creature-button.dragging{cursor:grabbing}
#explore-dialog{width:min(1180px,94vw);height:min(920px,90dvh);max-height:none;padding:28px 36px 24px;border:0;background:transparent;box-shadow:none;isolation:isolate;overflow:visible}
#explore-dialog[open]{display:flex;flex-direction:column}
#explore-dialog:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:30px;background:var(--surface,#fffcf9);border:1px solid var(--line,#e3d7ee);box-shadow:0 20px 100px #30204e30;animation:stage-reveal 380ms 100ms both}
#explore-dialog::backdrop{animation:stage-reveal 380ms both;transition:background .25s,backdrop-filter .25s}
#explore-dialog .large-stage{flex:1;min-height:0;height:auto;width:100%;margin:16px auto;border-radius:36%;background:radial-gradient(ellipse at center,var(--accent-soft,#f3eaf8) 0,transparent 68%);will-change:transform}
#explore-dialog .large-stage .creature-button{scale:1}
#explore-dialog .expression-buttons button{min-height:44px;min-width:44px;padding:0}
#explore-dialog[data-phase="opening"]>:not(.large-stage){animation:stage-controls-in 160ms 620ms both}
#explore-dialog[data-phase="opening"] .creature-shadow{animation:stage-hop-shadow 780ms both}
#explore-dialog[data-phase="closing"]>:not(.large-stage),#explore-dialog[data-phase="closing"]:before{opacity:0;transition:opacity .15s;pointer-events:none;animation:none}
#explore-dialog[data-phase="closing"]::backdrop{background:transparent;backdrop-filter:blur(0)}
#explore-dialog[data-phase="opening"] .large-stage,#explore-dialog[data-phase="closing"] .large-stage{pointer-events:none}
@keyframes stage-reveal{from{opacity:0}to{opacity:1}}
@keyframes stage-controls-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes stage-hop-shadow{0%,100%{opacity:1;scale:1}43%{opacity:.25;scale:.65}77%{opacity:1;scale:1.08}90%{opacity:.8;scale:.95}}
@media(max-width:740px){#explore-dialog{width:calc(100vw - 24px);height:92dvh;padding:28px 14px 18px}#explore-dialog h2{font-size:26px}#explore-dialog .large-stage{margin:10px auto}}

.friend-copy{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:5px 6px;color:var(--control-ink,#6c637d);font-size:12px;text-align:center}
#related-friends{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
#related-friends:empty{display:none}
.friend-chip{border:1px solid var(--line);border-radius:18px;background:var(--accent-soft);color:var(--control-ink);padding:6px 12px;font-size:12px}
.block-cell.related{outline:2px dashed var(--purple);outline-offset:2px;z-index:3}
.friend-bubble{position:absolute;z-index:5;left:50%;top:-7px;transform:translate(-50%,-60%);padding:4px 7px;border-radius:9px 9px 9px 2px;background:var(--purple);color:var(--surface,#fff);font-size:10px;white-space:nowrap;pointer-events:none;box-shadow:0 3px 9px #30204e18;animation:friend-hello .4s both}
@keyframes friend-hello{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(max-width:740px){.friend-copy{font-size:11px}.board-bottom{grid-template-columns:1fr auto;gap:10px;padding:12px 0}.board-bottom>.life-control{grid-column:1;grid-row:1}.board-bottom #table-view{grid-column:2;grid-row:1;justify-self:end}.board-status{grid-column:1/-1;grid-row:2;justify-self:end}}

@media(max-width:560px){.topbar{flex-wrap:wrap}.topbar .brand{flex-basis:100%}.workspace-tools{flex:0 0 auto;margin-left:auto}}

/* Keep the controls reachable while the learning area fills the screen. */
.playground-fullscreen{overflow:hidden;scrollbar-gutter:auto}
.playground-fullscreen .topbar,.playground-fullscreen .page-footer{visibility:hidden}
.playground.is-fullscreen{position:fixed;inset:0;z-index:50;width:100%;height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;padding:clamp(16px,3vmin,48px);display:flex;flex-direction:column;justify-content:center}
.playground.is-fullscreen .board-scroll{display:flex;flex:0 1 auto;min-height:0;overflow:auto;padding:0;scrollbar-gutter:stable both-edges;container-type:inline-size}
.playground.is-fullscreen .board{flex-shrink:0;margin:auto}
.playground.is-fullscreen .board-bottom{width:min(100%,calc(1440px * var(--board-scale,1)));margin:13px auto 0}
.playground.is-fullscreen .board-bottom,.playground.is-fullscreen .mobile-navigation{flex-shrink:0}
@media(min-width:741px){.playground.is-fullscreen .board{width:1440px;min-width:1440px;--row:94px;zoom:var(--board-scale,1)}.playground.is-fullscreen .discovery{top:20px;height:460px;gap:20px}.playground.is-fullscreen .discovery-preview{width:540px}.playground.is-fullscreen .discovery-stage{height:460px}.playground.is-fullscreen .discovery h2{font-size:27px}.playground.is-fullscreen .discovery h2 span{font-size:38px}.playground.is-fullscreen .doodle-two{top:435px}.playground.is-fullscreen .mobile-navigation{display:none}}
@media(max-width:740px){.playground.is-fullscreen{padding:12px}.playground.is-fullscreen .discovery{width:100cqw}}

@media(max-width:740px){
  .playground-tools{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:8px 0 12px;background:var(--paper,#fffcf9)}
  .playground-tools #table-view{grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .playground-tools #table-view button{min-width:0;min-height:44px;justify-content:center;padding:6px 4px;font-size:12px}
  .playground-tools #explore-selected{grid-row:2;margin:0;min-width:0}
  .playground-tools .mobile-navigation{padding:0}
  .playground.is-fullscreen .playground-tools{position:relative;top:auto;flex-shrink:0}
}

#language-toggle{font-size:13px;font-weight:750}
:root:lang(en) .brand{letter-spacing:0;font-size:18px}
:root:lang(en) .brand small{letter-spacing:.5px}
:root:lang(en) .discovery h2{letter-spacing:0}
@media(max-width:740px){:root:lang(en) .brand{font-size:16px}}

.column-jump select{min-height:44px;max-width:100%;border:1px solid var(--line,#e7e0e9);border-radius:11px;padding:0 8px;background:var(--surface,#fffdfb);color:var(--control-ink,#6c637d);font:inherit;font-size:12px;cursor:pointer}
.column-jump select:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
@media(max-width:740px){
  .playground-tools{grid-template-columns:minmax(0,1fr) 108px}
  .playground-tools #table-view{grid-column:1/-1}
  .playground-tools #explore-selected{grid-column:1;padding:8px;font-size:12px;gap:5px}
  .playground-tools .mobile-navigation{grid-column:2;grid-row:2;display:block}
  .playground-tools .mobile-navigation>button,.playground-tools .navigation-hint{display:none}
  .column-jump select{width:100%}
}

/* Leave room for device cutouts and keep menus within the visible viewport. */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.explore-popover{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
#explore-dialog{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)}
#explore-dialog h2{padding-inline:36px}
.playground.is-fullscreen{--fullscreen-padding:clamp(16px,3vmin,48px);padding-top:max(var(--fullscreen-padding),env(safe-area-inset-top));padding-right:max(var(--fullscreen-padding),env(safe-area-inset-right));padding-bottom:max(var(--fullscreen-padding),env(safe-area-inset-bottom));padding-left:max(var(--fullscreen-padding),env(safe-area-inset-left))}
@media(max-width:740px){
  .playground.is-fullscreen{--fullscreen-padding:12px}
  .board-scroll{container-type:inline-size}
  .discovery{width:100cqw}
  .playground-tools{top:env(safe-area-inset-top)}
}
@media(max-width:740px),(any-pointer:coarse){
  .utility-button,.close-button{min-width:44px;min-height:44px}
  .life-toggle,.friend-chip,#explore-dialog .life-toggle,.tool-popover button,.mobile-navigation button{min-height:44px;min-width:44px}
  #action-toggle,#unit-play-toggle{min-height:44px}
}
@media(max-height:560px){
  #explore-dialog{overflow-y:auto;background:var(--surface,#fffcf9);border-radius:24px;padding-top:12px}
  #explore-dialog .large-stage{flex:1 0 140px}
  #close-dialog{position:sticky;top:0;right:auto;align-self:flex-end;flex-shrink:0;margin-bottom:-44px;z-index:3}
}

@media(min-width:640px) and (max-width:740px){
  .playground .board-bottom .board-status{flex:0 0 auto}
}
@media(min-width:640px) and (max-width:740px) and (max-height:560px){
  .playground-tools{grid-template-columns:minmax(0,1fr) max-content 108px;padding:4px 0 8px}
  .playground-tools #table-view{grid-column:1;grid-row:1}
  .playground-tools #explore-selected{grid-column:2;grid-row:1}
  .playground-tools .mobile-navigation{grid-column:3;grid-row:1}
}

/* Keep an opted-in discovery clue with the controls while browsing the table. */
.playground-tools:has(>.achievement-replay-note:not([hidden])){position:sticky;top:env(safe-area-inset-top);z-index:6;background:var(--paper,#fffcf9)}
.playground-tools>.achievement-replay-note{grid-column:1/-1;grid-row:3;margin:0 0 8px;padding:8px 10px;gap:6px 10px}
.playground-tools>.achievement-replay-note p{flex-basis:100%;min-width:0}
.playground-tools>.achievement-replay-note .achievement-replay-dismiss{margin-left:auto}
.block-cell.guided-start{outline:3px dashed var(--purple);outline-offset:2px;scroll-margin-block:160px 24px}
.playground.is-fullscreen .playground-tools:has(>.achievement-replay-note:not([hidden])){position:relative;top:auto}