/* Out of Office, the game inside the mascot (js/game.js). The host page links this stylesheet.
   Every material has a top / left / right tone, like the mascot; each theme sets its own. */
.ooo{--path-t:#FFFFFF;--path-l:#33427E;--path-r:#6F84CC;--stone-t:#DCE5FF;--stone-l:#5266A8;--stone-r:#8195D8;--ink-t:#4A5A94;--ink-l:#0E1530;--ink-r:#26345F;--acc-t:#8E9DFF;--acc-l:#1428A8;--acc-r:#1F3AE0;--paper-t:#FFFFFF;--paper-l:#BCC8EC;--paper-r:#DCE4F8;--gloom-t:#D3D5DE;--gloom-l:#7A7F92;--gloom-r:#A3A7B6;--glow-t:#FFE58A;--glow-l:#C9A21E;--glow-r:#F2C935;--warm-t:#FFB59A;--warm-l:#C4471C;--warm-r:#FF6B3D;--mint-t:#9FF0D2;--mint-l:#128A66;--mint-r:#22B98A;--skin-t:#F7DCC8;--skin-l:#B5826A;--skin-r:#D9AB92;--tape-t:#FF8A8A;--tape-l:#B01E2E;--tape-r:#E23B4B;--pit-t:#7C93DD;--pit-l:#33427E;--pit-r:#5266A8;--wall-t:#FFFFFF;--wall-l:#E9EEFF;--wall-r:#F6F8FF;--trunk-t:#C3D5FF;--trunk-l:#8FA8EC;--trunk-r:#9DB5F5;--decal:#0E1530;--decalInv:#FFFFFF;--head-t:var(--cubeTop,#FFFFFF);--head-l:var(--cubeL,#0E1530);--head-r:var(--cubeR,#2B3A73);position:relative;overflow:hidden;width:100%;height:100%;color:var(--ink,#0E1530);font-family:var(--display,Montserrat,"Helvetica Neue",Arial,sans-serif);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.t-charcoal .ooo,.t-yellow .ooo{--path-t:#F4F1EA;--path-l:#4A4A52;--path-r:#74747E;--stone-t:#8E8E98;--stone-l:#2E2E35;--stone-r:#45454E;--ink-t:#3A3A42;--ink-l:#111114;--ink-r:#222227;--acc-t:#FF9A70;--acc-l:#B83E15;--acc-r:#FF5B23;--paper-t:#F4F1EA;--paper-l:#9E9990;--paper-r:#C9C4BA;--gloom-t:#8A8C96;--gloom-l:#3E3F47;--gloom-r:#5D5F68;--glow-t:#FFE27A;--glow-l:#A88410;--glow-r:#E0B524;--warm-t:#9AD8FF;--warm-l:#1B6FA8;--warm-r:#3D9BDB;--mint-t:#9FF0D2;--mint-l:#128A66;--mint-r:#22B98A;--skin-t:#F1D2BC;--skin-l:#9C6F5A;--skin-r:#C9997F;--tape-t:#FF8A8A;--tape-l:#B01E2E;--tape-r:#E23B4B;--pit-t:#34343B;--pit-l:#17171A;--pit-r:#222227;--wall-t:#F4F1EA;--wall-l:#E2DED4;--wall-r:#ECE8DF;--trunk-t:#36363D;--trunk-l:#232328;--trunk-r:#2A2A30;--decal:#1C1C20;--decalInv:#F4F1EA;}
.t-yellow .ooo{--acc-t:#FFE99A;--acc-l:#B38E14;--acc-r:#FFD23F;--glow-t:#FFA27A;--glow-l:#B83E15;--glow-r:#FF6B33;}
.t-midnight .ooo{--path-t:#E8EDFF;--path-l:#3A4C92;--path-r:#5C72C4;--stone-t:#5A6BAE;--stone-l:#1D2B66;--stone-r:#2B3C82;--ink-t:#2A3A78;--ink-l:#070D26;--ink-r:#121C48;--acc-t:#AAB9FF;--acc-l:#4460D9;--acc-r:#7B93FF;--paper-t:#E8EDFF;--paper-l:#9AA8DC;--paper-r:#C2CCF0;--gloom-t:#8A90A8;--gloom-l:#3C4258;--gloom-r:#5B6178;--pit-t:#18265A;--pit-l:#070D26;--pit-r:#0F1A3D;--wall-t:#E8EDFF;--wall-l:#CDD6F8;--wall-r:#DCE3FB;--trunk-t:#1E2D68;--trunk-l:#131D4A;--trunk-r:#18255A;--decal:#0F1A3D;--decalInv:#E8EDFF;}
.ooo-bg{position:absolute;inset:0;background-color:var(--bg,#A8C3FF);background-image:radial-gradient(var(--dot,rgba(14,21,48,.1)) 1.2px,transparent 1.6px);background-size:18px 18px}
.ooo-inl{position:absolute;left:0;top:0;width:100vw;height:100vh;z-index:100;pointer-events:none}
.ooo-inl.on{pointer-events:auto}
.ooo-inl .ooo-bg{opacity:0}
.ooo-crankbtn{position:absolute;left:63%;top:61.5%;width:31%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:0;padding:0;margin:0;background:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;z-index:2}
.ooo-crankbtn:active{cursor:grabbing}
.ooo-crankbtn:focus-visible{outline:3px solid var(--accent,#1F3AE0);outline-offset:2px}
.ooo-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.ooo-btn.ooo-turn{min-width:48px;min-height:48px;border-radius:50%;font:700 24px/1 var(--display,Montserrat,"Helvetica Neue",Arial,sans-serif);padding:0 0 2px;flex:none}
.ooo-hud.off>*{opacity:0;pointer-events:none}.ooo-hud>*{transition:opacity .4s}
.ooo-cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;outline:none;touch-action:none}
.ooo-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ooo-hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.ooo-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ooo-right{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-left:auto}
.ooo-chip{background:var(--card,#BDD2FF);border:1.5px solid var(--line,rgba(14,21,48,.16));border-radius:14px;padding:7px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ooo-chip .n{font:600 11px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);letter-spacing:.06em;color:var(--accent,#1F3AE0);white-space:nowrap}
.ooo-chip b{font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.ooo-pips{display:flex;gap:5px;margin-top:2px}
.ooo-pips i{width:22px;height:6px;border-radius:3px;background:var(--line,rgba(14,21,48,.16));transition:background .4s,transform .4s}
.ooo-pips i.on{background:var(--accent,#1F3AE0)}
.ooo-pips i.cur{background:var(--ink,#0E1530);transform:scaleY(1.35)}
.ooo-sighs{flex-direction:row;gap:8px;min-height:38px;box-sizing:border-box;align-items:center;transition:transform .25s}
.ooo-sighs.bump{transform:scale(1.18)}
.ooo-sighs span{font:600 11px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);color:var(--muted,#26345F);letter-spacing:.04em}
.ooo-sighs b{font:700 16px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.ooo-btn{pointer-events:auto;font:600 12.5px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);min-height:40px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line,rgba(14,21,48,.16));background:var(--card,#BDD2FF);color:var(--ink,#0E1530);cursor:pointer;white-space:nowrap}
.ooo-cv:focus,.ooo-cv:focus-visible{outline:none}
.ooo-btn:focus-visible{outline:3px solid var(--accent,#1F3AE0);outline-offset:-3px}
.ooo-btn.primary{background:var(--accent,#1F3AE0);color:var(--accentInk,#fff);border-color:var(--accent,#1F3AE0);font:700 15px var(--display,Montserrat,"Helvetica Neue",Arial,sans-serif);min-height:48px;padding:0 20px}
.ooo-btn.big{font:700 15px var(--display,Montserrat,"Helvetica Neue",Arial,sans-serif);min-height:48px;padding:0 20px}
.ooo-hint{align-self:center;flex:0 1 560px;min-width:0;margin:0 auto;box-sizing:border-box;background:var(--ink,#0E1530);color:var(--bg,#A8C3FF);font:600 14px/1.45 var(--display,Montserrat,"Helvetica Neue",Arial,sans-serif);padding:10px 16px;border-radius:14px;text-align:center;transition:opacity .3s}
.ooo-hint.no{background:var(--tape-r);color:#fff}
.ooo-hint:empty{opacity:0}
.ooo [hidden]{display:none!important}
.ooo-card{position:absolute;inset:0;display:grid;place-items:end center;padding:16px 16px max(20px,env(safe-area-inset-bottom,0px));pointer-events:none}
.ooo-card-in{pointer-events:auto;background:var(--card,#BDD2FF);border:1.5px solid var(--line,rgba(14,21,48,.16));border-radius:24px;padding:26px;max-width:420px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.18);animation:ooo-up .5s cubic-bezier(.2,.9,.3,1.2) both}
.ooo-card-in{position:relative}
.ooo-replay{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:10px;border:1.5px solid var(--line,rgba(14,21,48,.16));background:none;color:var(--muted,#26345F);font:600 11.5px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);cursor:pointer}
.ooo-replay:hover{color:var(--ink,#0E1530)}
.ooo-replay:focus-visible{outline:3px solid var(--accent,#1F3AE0);outline-offset:2px}
.ooo-card .ey{padding-right:120px;font:600 12px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);letter-spacing:.06em;color:var(--accent,#1F3AE0)}
.ooo-card h2{margin:0;font-weight:800;font-size:clamp(24px,5vw,30px);letter-spacing:-.02em;line-height:1.05}
.ooo-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted,#26345F)}
.ooo-contact{font:600 15px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace)!important;color:var(--ink,#0E1530)!important;-webkit-user-select:text;user-select:text;background:var(--bg,#A8C3FF);border-radius:12px;padding:10px 12px;overflow-wrap:anywhere}
.ooo-card .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ooo-title{position:absolute;left:0;right:0;top:calc(max(14px,env(safe-area-inset-top,0px)) + 64px);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px;background:var(--ink,#0E1530);color:var(--bg,#A8C3FF);text-align:center;animation:ooo-band 2.6s cubic-bezier(.2,.8,.2,1) both}
.ooo-title .k{font:700 12px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);letter-spacing:.14em;color:var(--bg,#A8C3FF);opacity:.8}
.ooo-title .h{font:800 clamp(19px,4.6vw,34px)/1.12 var(--display,Montserrat,"Helvetica Neue",Arial,sans-serif);letter-spacing:-.015em;color:var(--bg,#A8C3FF);max-width:22em;text-wrap:balance}
.ooo-title .s{font:600 13px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);letter-spacing:.04em;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.ooo-title .s b{background:var(--accent,#1F3AE0);color:var(--accentInk,#fff);padding:3px 9px;border-radius:8px;font-weight:700}
.ooo-title .p{display:flex;gap:6px}.ooo-title .p i{width:34px;height:7px;border-radius:4px;background:rgba(127,127,127,.45)}.ooo-title .p i.on{background:var(--accent,#1F3AE0)}
.ooo-title .p i.new{animation:ooo-pip .5s .5s both}
@keyframes ooo-pip{from{background:rgba(127,127,127,.45);transform:scale(1)}50%{transform:scale(1.5)}to{background:var(--accent,#1F3AE0);transform:scale(1)}}
@keyframes ooo-band{0%{clip-path:inset(50% 0 50% 0);opacity:0}12%{clip-path:inset(0 0 0 0);opacity:1}86%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(50% 0 50% 0);opacity:0}}
@keyframes ooo-up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.ooo-sigh{position:absolute;transform:translate(-50%,-100%);font:italic 700 12px var(--display,Montserrat,"Helvetica Neue",Arial,sans-serif);color:var(--decal);background:var(--paper-t);border:2px solid var(--ink,#0E1530);border-radius:12px 12px 12px 3px;padding:2px 8px;animation:ooo-sigh 2.4s ease-out both;white-space:nowrap}
@keyframes ooo-sigh{0%{opacity:0;margin-top:8px}15%{opacity:1}70%{opacity:1}100%{opacity:0;margin-top:-26px}}
.ooo-no{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;animation:ooo-no .6s ease-out both}
.ooo-no:before,.ooo-no:after{content:"";position:absolute;left:3px;right:3px;top:14px;height:6px;border-radius:3px;background:var(--tape-r);box-shadow:0 0 0 2px var(--paper-t);transform:rotate(45deg)}
.ooo-no:after{transform:rotate(-45deg)}
@keyframes ooo-no{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
.ooo-tag{position:absolute;transform:translate(-50%,-50%);font:700 11px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);letter-spacing:.04em;background:var(--ink,#0E1530);color:var(--bg,#A8C3FF);border-radius:9px;padding:3px 8px;white-space:nowrap;transition:opacity .4s}
.ooo-tag.goal{background:var(--accent,#1F3AE0);color:var(--accentInk,#fff)}
.ooo-tag.goal:after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--accent,#1F3AE0)}
.ooo-load{position:absolute;inset:0;display:grid;place-items:center;font:600 13px var(--mono,"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace);color:var(--muted,#26345F);pointer-events:none}
.ooo-btn .sm{display:none}
@media (max-width:520px){.ooo-btn .lg{display:none}.ooo-btn .sm{display:inline}.ooo-chip{padding:6px 9px}.ooo-chip .n{font-size:10px;letter-spacing:0}.ooo-right{flex-wrap:nowrap}.ooo-hud{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}.ooo-btn.ooo-turn{min-width:44px;min-height:44px}.ooo-title{top:calc(max(14px,env(safe-area-inset-top,0px)) + 104px);padding:16px 12px}.ooo-chip b{font-size:13px}.ooo-hint{font-size:13px;padding:9px 12px}.ooo-sighs span{display:none}.ooo-btn{padding:0 10px;font-size:12px}.ooo-pips i{width:16px}.ooo-right{gap:5px}.ooo-btn{padding:0 9px}.ooo-tag{font-size:10px}}
@media (max-width:520px){.ooo-btn.ooo-close:not([hidden]){display:inline-grid;place-items:center;width:40px;min-width:40px;height:40px;padding:0;font-size:15px}}
@media (prefers-reduced-motion:reduce){.ooo-title{animation-duration:2.6s;animation-timing-function:step-end}.ooo-card-in,.ooo-no{animation:none}}