.actions{position:fixed;left:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:40;gap:6px;flex-direction:row;align-items:center;padding:4px 4px 4px 9px;border:1px solid var(--border);border-radius:10px;background:var(--bg);box-shadow:0 2px 8px #0000000a}
body,.shell{background-image:none}
.theme-label{font-size:10px;font-weight:500;color:var(--muted)}
.theme{gap:2px;padding:2px;border:0;border-radius:7px;background:var(--soft)}
.theme button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:26px;padding:5px 7px;border-radius:5px;font-size:10px;font-weight:500;white-space:nowrap;transition:background-color .15s,color .15s}
.theme button svg{width:12px;height:12px;flex-shrink:0}
.theme button:hover{color:var(--ink)}
.theme button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #00000014}
.theme button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.legend{bottom:66px}
.viewport{height:100vh;height:100dvh;min-height:0}
.canvas-controls{position:fixed;top:12px;right:12px;bottom:auto;gap:2px;padding:3px;max-width:calc(100% - 24px);border-radius:9px;box-shadow:0 2px 8px #0000000a;cursor:default}
.canvas-controls button{min-height:26px;padding:5px 7px;border-radius:6px;font-size:10px;font-weight:500;white-space:nowrap}
.canvas-controls button:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.zoom-readout{min-width:32px;font-size:10px}
.brand-credit{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:4px;min-height:28px;padding:3px 6px;border-radius:6px;background:var(--bg);color:var(--muted);font-size:10px;text-decoration:none}
.brand-credit img{width:22px;height:22px;object-fit:contain}
.brand-credit:hover{color:var(--ink)}
.brand-credit:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
@media(max-width:460px){.brand-credit{right:12px;bottom:58px;font-size:9px}.canvas-controls button{padding:5px}}
@media(max-width:540px){.actions{left:12px;bottom:max(12px,env(safe-area-inset-bottom))}}

.card{transition:background-color .25s,color .25s;overflow:hidden}
.card-toggle{transition:background-color .2s,transform .2s}
.card-toggle:hover{background:var(--border);transform:scale(1.06)}
.card-toggle:active{transform:scale(.94)}
.card-toggle:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.card:not(.collapsed)>:not(.eyebrow):not(h2):not(.card-toggle){animation:content-reveal .3s ease .09s both}
@keyframes content-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.card,.card-toggle{transition:none}.card:not(.collapsed)>:not(.eyebrow):not(h2):not(.card-toggle){animation:none}}

.zoom-field{display:inline-flex;align-items:center;gap:1px;color:var(--muted);font-size:10px}
.zoom-field .zoom-readout{width:28px;min-width:0;padding:4px 0;border:0;border-radius:4px;background:transparent;color:var(--ink);font:inherit;text-align:right}
.zoom-field .zoom-readout:focus{outline:1px solid var(--pink);background:var(--soft)}

body.dragging-map,body.dragging-map *{user-select:none!important;-webkit-user-select:none!important}
.card :is(h1,h2,p,.eyebrow,.item,.limits,.note,.pillar,.pill,.step){cursor:text}
.card img{user-select:none;-webkit-user-drag:none}