/* Browser presentation only. Layers: pets/mat edit <=100050, shell 100060,
   open control panel 100070. Keep the play area free of pointer-catching layers.
   Preserve Beastie's green accent and existing photography; UI density 2,
   design variance 3, UI motion 2. Native pet animation is managed separately. */
:root{--demo-surface:#f8faf9;--demo-ink:#25352c;--demo-muted:#53675b;--demo-line:#d8e2db;--demo-soft:#eaf0ec;--demo-accent:#315e20;--demo-on-accent:#fff;--demo-panel-top:76px;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#c6dde1;pointer-events:auto!important}
.desk{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#eff7f780,#eff7f710),url('../img/wall.jpg?2') center/cover no-repeat}
.demo-ui{font:500 16px/1.5 -apple-system,'PingFang TC',system-ui,sans-serif;color:var(--demo-ink);pointer-events:auto}
.demo-ui button,.demo-ui select,.demo-ui input{font:inherit;color:inherit}
.demo-ui button,.demo-ui a{touch-action:manipulation}
.demo-ui button{min-height:44px;border:1px solid transparent;border-radius:10px;padding:9px 12px;background:var(--demo-soft);cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.demo-ui button:hover{border-color:var(--demo-line)}
.demo-ui button:active{transform:translateY(1px)}
.demo-ui button:disabled{cursor:default;opacity:.65;transform:none}
.demo-ui :is(button,a,input,select):focus-visible{outline:3px solid var(--demo-accent);outline-offset:3px}
.demo-ui [hidden],.demo-ui[hidden]{display:none!important}
.demo-header{position:fixed;top:12px;left:12px;right:12px;z-index:100060;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:8px 12px;border:1px solid var(--demo-line);border-radius:16px;background:var(--demo-surface)}
.demo-header a{display:none;min-height:44px;align-items:center;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--demo-ink);white-space:nowrap;font-size:14px;font-weight:600}
.standalone-demo .demo-header a{display:inline-flex}
.demo-return{justify-self:start}
.demo-header .demo-next{justify-self:end;background:var(--demo-accent);color:var(--demo-on-accent)}
.demo-toolbar{display:flex;align-items:center;gap:8px}
.demo-toolbar button{background:transparent;font-weight:600}
.demo-toolbar button[aria-expanded='true']{background:var(--demo-soft);border-color:var(--demo-line)}
.demo-toolbar #cat-break-preview{background:var(--demo-soft)}
.chevron{margin-left:10px;color:var(--demo-muted)}
html:not(.standalone-demo) .demo-header{width:max-content;max-width:calc(100% - 24px);left:50%;right:auto;transform:translateX(-50%);grid-template-columns:auto}
.demo-hint{position:fixed;top:var(--demo-panel-top);left:16px;right:16px;margin:0;text-align:center;color:#314f45;font:500 14px/1.5 -apple-system,'PingFang TC',system-ui,sans-serif;pointer-events:none}
.demo-panel{position:fixed;top:var(--demo-panel-top);left:50%;transform:translateX(-50%);z-index:100070;width:320px;max-width:calc(100vw - 24px);max-height:calc(100dvh - var(--demo-panel-top) - 12px);overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid var(--demo-line);border-radius:16px;background:var(--demo-surface);box-shadow:0 12px 30px #20382d20}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px -6px 8px 0}
.panel-heading h2{font-size:17px;line-height:1.35;margin:0}
.panel-heading button{background:transparent;padding:4px;min-width:44px;font-size:23px;font-weight:400}
.panel-help{font-size:14px;line-height:1.6;color:var(--demo-muted);margin:10px 0 16px}
.field{display:grid;gap:7px;margin:0 0 14px;font-weight:600}
.field select,.field input{width:100%;min-height:44px;border:1px solid var(--demo-line);border-radius:10px;padding:9px 11px;background:var(--demo-surface)}
.check-field{display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-bottom:12px;font-weight:600;cursor:pointer}
.check-field input{width:22px;height:22px;accent-color:var(--demo-accent)}
.demo-ui .panel-primary{width:100%;background:var(--demo-accent);color:var(--demo-on-accent)}
.panel-actions{display:flex;gap:8px;margin-top:8px}
.panel-actions button{flex:1}
.break-demo-status{display:block;color:var(--demo-muted);font-size:14px;font-variant-numeric:tabular-nums;margin-top:12px}
.rc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc .rcp{display:flex;align-items:center;justify-content:center;gap:6px;min-height:68px;padding:6px;font-weight:600;white-space:normal}
.rc .rcp img{object-fit:contain;pointer-events:none}
.rc .rcp.active{border:2px solid var(--demo-accent);background:var(--demo-soft)}
.cat-break-showing .demo-hint,.demo-bed-moving .demo-hint,.demo-panel-open .demo-hint,.demo-actions-open .demo-hint{visibility:hidden}
.cat-break-showing .cat:not(.cat-break-active),.cat-break-showing .cat-bed{visibility:hidden}
.demo-bottom{position:fixed;z-index:100060;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;align-items:center;max-height:min(52dvh,max(96px,calc(100dvh - var(--demo-panel-top) - 112px)));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:16px;pointer-events:none}
.demo-bottom>*{flex:none;pointer-events:auto;width:min(100%,560px)}
.demo-dock-panel{padding:12px 14px;border:1px solid var(--demo-line);border-radius:16px;background:var(--demo-surface);box-shadow:0 5px 18px #20382d18}
.demo-dock-panel .panel-help{margin:5px 0 8px;font-size:14px;line-height:1.5}
.demo-dock-panel .field{margin:8px 0}
.demo-bottom .cat-break-card{position:relative;inset:auto;transform:none;margin:0;max-width:none;display:grid;grid-template-columns:1fr;gap:6px;padding:12px 14px;border:1px solid var(--demo-line);border-radius:16px;background:var(--demo-surface);color:var(--demo-ink);box-shadow:0 5px 18px #20382d18;backdrop-filter:none;font:600 14px/1.5 -apple-system,'PingFang TC',system-ui,sans-serif;text-align:center}
.demo-bottom .cat-break-card[hidden]{display:none}
.demo-bottom .cat-break-card strong{font-size:17px}
.demo-bottom .cat-break-card>span{color:var(--demo-muted)}
.demo-bottom .cat-break-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.demo-bottom .cat-break-actions button{min-height:44px;font:inherit;background:var(--demo-soft);border-color:var(--demo-line);color:var(--demo-ink);padding:8px 12px}
.demo-bottom #cat-break-start{background:var(--demo-accent);color:var(--demo-on-accent)}
.action-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.action-heading button{font-size:14px;padding:8px}
.action-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.direction-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.direction-controls button{padding:8px 4px}
#demo-held-controls>button{margin-top:8px;width:100%}
.demo-dock-panel .panel-actions{margin-top:8px}
.keyboard-help{display:block}
.demo-panel h3{font-size:16px;margin:14px 0 6px}
.demo-panel .panel-divider{padding-top:16px;border-top:1px solid var(--demo-line)}
.cat-bed-grip{height:44px;bottom:-8px}
.cat-bed-label{display:none!important}
.cat-bed-grip:focus-visible{outline:3px solid var(--demo-accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:780px){
  .standalone-demo{--demo-panel-top:132px}
  .standalone-demo .demo-header{grid-template-columns:1fr 1fr;gap:6px;padding:6px 8px}
  .standalone-demo .demo-toolbar{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr)}
  .standalone-demo .demo-next{grid-column:2;grid-row:1}
  
  .demo-panel{width:340px}
}
@media(max-width:380px){.demo-header{left:8px;right:8px}.demo-toolbar button{padding:9px 7px}.demo-header a{padding:9px 7px}.demo-panel{max-width:calc(100vw - 16px)}}
@media(prefers-color-scheme:dark){:root{--demo-surface:#202d27;--demo-ink:#edf3ee;--demo-muted:#b5c8ba;--demo-line:#405248;--demo-soft:#314139;--demo-accent:#c0dea8;--demo-on-accent:#1e3518;color-scheme:dark}.desk{background-image:linear-gradient(180deg,#20312f60,#20312f30),url('../img/wall.jpg?2')}.demo-hint{color:var(--demo-ink);background:var(--demo-surface);width:fit-content;max-width:calc(100% - 32px);left:16px;right:16px;margin-inline:auto;padding:4px 8px;border-radius:8px}}
@media(prefers-reduced-motion:reduce){.demo-ui button:active{transform:none}}

.demo-ui :is(button,a,input,select):focus-visible{outline:3px solid var(--demo-ink);outline-offset:3px;box-shadow:0 0 0 2px var(--demo-surface)}
.demo-header a{font-size:14px}
.demo-header .demo-next{white-space:normal;text-align:center}
@media(max-width:380px){.demo-ui{font-size:14px}.demo-toolbar{gap:8px}.demo-toolbar button{padding:9px 4px}.demo-header a{padding:9px 5px}.demo-bottom{left:8px;right:8px}.demo-dock-panel{padding:10px}.action-heading{flex-wrap:wrap}.action-heading button{margin-left:auto}.demo-bottom .cat-break-actions button{padding:8px}.demo-panel{padding:16px}}
@media(prefers-reduced-motion:reduce){.demo-ui *, .cat-bed{transition:none!important;animation:none!important}}

/* The invitation is placed directly in the measured free area. */
.cat.cat-break-active:not(.held){transition:none}

.demo-toolbar button{min-width:0}.demo-panel,.demo-dock-panel{overflow-wrap:anywhere}