/* styles.css: built by tools_city_css.py from design/old-layout.css, design/city-base.css and
   design/city-screens.css. Do not edit by hand; edit those and run the tool again. */
/* ---- 1. the old layout, without its look ---- */
:root{color-scheme:light;--ontop:#FBF9F1;--paper:#F3EADB;--cream:#FCF6EA;--ink:#1D2119;--forest:#25412A;--green:#5E8C4E;--btn-green:#3F6B36;--sage:#A8BE96;--moss:#7DA063;--red:#B35930;--blue:#377B76;--yellow:#D08A3E;--rose:#D6A58F;--sand:#EBD8BE;--bark:#52584A;--adobe:#C97B4A;--chile:#A8412E;--turq:#3F8C86;--sun:#E8A25A;--glass:rgba(252,246,234,.74);--glass-line:rgba(255,252,246,.9);--barbg:rgba(252,246,234,.84);--barline:rgba(92,64,38,.14);--shadow:0 14px 34px rgba(84,52,28,.12);--shadow-soft:0 6px 18px rgba(84,52,28,.08);--r:28px;--ease:cubic-bezier(.22,.61,.36,1);--leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%235E8C4E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 196C36 172 62 146 86 112 110 78 132 46 160 18'/%3E%3Cpath d='M52 150C44 132 46 116 62 106'/%3E%3Cpath d='M84 114C88 96 102 86 118 86'/%3E%3Cpath d='M30 172C20 158 20 142 32 132'/%3E%3Cpath d='M116 72C112 56 120 42 136 38'/%3E%3C/g%3E%3Cg fill='%23A8BE96'%3E%3Cellipse cx='62' cy='104' rx='19' ry='9' transform='rotate(-38 62 104)'/%3E%3Cellipse cx='120' cy='86' rx='20' ry='9' transform='rotate(-12 120 86)'/%3E%3Cellipse cx='33' cy='131' rx='16' ry='8' transform='rotate(-52 33 131)'/%3E%3Cellipse cx='138' cy='37' rx='17' ry='8' transform='rotate(-25 138 37)'/%3E%3Cellipse cx='88' cy='140' rx='15' ry='7' transform='rotate(30 88 140)'/%3E%3Cellipse cx='150' cy='60' rx='13' ry='6' transform='rotate(48 150 60)'/%3E%3C/g%3E%3Cg fill='%23C99C90'%3E%3Ccircle cx='168' cy='16' r='5'/%3E%3Ccircle cx='102' cy='128' r='4'/%3E%3C/g%3E%3C/svg%3E")}
html[data-theme="dark"] .shapes i{opacity:.28}
html[data-theme="dark"] .v1,html[data-theme="dark"] .v2,html[data-theme="dark"] .v3{opacity:.72}
html[data-theme="dark"] .card,html[data-theme="dark"] .stat,html[data-theme="dark"] .crmrow,
html[data-theme="dark"] .rolodexrow,html[data-theme="dark"] .lawcard,html[data-theme="dark"] .deckcard,
html[data-theme="dark"] .daybox,html[data-theme="dark"] .linkrow,html[data-theme="dark"] .choice,
html[data-theme="dark"] .wheelbox,html[data-theme="dark"] .jumpbar{background:rgba(37,45,37,.66);border-color:rgba(233,228,212,.12)}
html[data-theme="dark"] .moodchip{color:var(--ink)}
html[data-theme="dark"] .wheelcol{background:rgba(233,228,212,.06)}
.themebtn{margin-left:auto;border:1px solid var(--line);background:var(--paper);color:var(--forest);transition:background .3s var(--ease),transform .3s var(--ease)}
.themebtn #themeLbl{font-size:14px;font-family:var(--grot);font-weight:700;text-transform:none}
.themebtn:active{transform:scale(.94)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--grot);font-feature-settings:"cv02","cv03","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:var(--ink);min-height:100vh;min-height:100svh;overflow-x:hidden;line-height:1.6;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--cream)}
.shapes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.shapes i{position:absolute;display:block}
.s1{width:44vw;height:44vw;background:var(--sage);border-radius:50%;top:-16vw;right:-13vw;opacity:.42}
.s2{width:52vw;height:52vw;background:var(--moss);border-radius:52% 48% 44% 56%/50% 44% 56% 50%;bottom:-20vw;left:-18vw;opacity:.24}
.s3{width:34vw;height:34vw;background:var(--sand);top:48vh;right:-6vw;border-radius:46% 54% 58% 42%/52% 46% 54% 48%;opacity:.4}
.s5{width:26vw;height:26vw;background:var(--ink);border-radius:58% 42% 50% 50%/44% 56% 44% 56%;top:118vh;left:-6vw;opacity:.24}
.s6{width:24vw;height:24vw;border:7px solid var(--sage);border-radius:50%;top:80vh;left:46vw;opacity:.32}
.v1,.v2,.v3{background:var(--leaf);opacity:.6}
.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) calc(var(--floor-h, 112px) + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);box-shadow:var(--shadow)}
header.bar{display:flex;align-items:center;padding:12px 14px;margin-bottom:16px;position:sticky;top:calc(8px + env(safe-area-inset-top));z-index:70;flex-wrap:nowrap;gap:10px;border-radius:18px;background:var(--cream);border:1px solid var(--line)}
.mark #brand{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw;display:block}
@media(max-width:420px){.mark .d,.mark .d2,.mark .d3{display:none}}
.mark{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--forest)}
.mark .d{width:13px;height:13px;background:var(--ink);border-radius:50%}
.mark .d2{width:13px;height:13px;background:var(--sage);border-radius:4px}
.mark .d3{width:0;height:0;border-left:6.5px solid transparent;border-right:6.5px solid transparent;border-bottom:12px solid var(--forest)}
nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;align-items:center}
button{font-family:var(--grot);font-size:14px;cursor:pointer}
.tabbar{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:stretch;justify-content:space-around;border-radius:999px;transition:transform .32s var(--ease),opacity .32s var(--ease);will-change:transform;padding:8px 8px;box-shadow:0 12px 30px var(--ink);background:var(--barbg);border:1px solid var(--barline)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--ink);opacity:.75;padding:8px 2px;min-height:56px;position:relative;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tab .ico{width:25px;height:25px;display:block}
.tab .ico svg{width:100%;height:100%}
.tab .lbl{font-size:11px;font-family:var(--grot);font-weight:700;text-transform:none;white-space:nowrap;color:var(--bark)}
@media(max-width:380px){.tab .lbl{font-size:11px}}
.tab .ico{border-radius:999px;padding:0;transition:background .28s var(--ease),transform .28s var(--ease)}
.tab[aria-selected="true"]{opacity:1;font-weight:700}
.tab[aria-selected="true"]::before{content:"";position:absolute;top:2px;width:54px;height:36px;border-radius:999px;background:var(--ink);z-index:0}
.tab[aria-selected="true"]{color:var(--ontop)}
.tab[aria-selected="true"] .lbl{color:var(--forest)}
.tab .ico,.tab .lbl{position:relative;z-index:1}
.tab:active{transform:scale(.94)}
.tab .dot{position:absolute;top:4px;right:calc(50% - 19px);width:9px;height:9px;border-radius:50%;background:var(--sand);border:2px solid var(--barbg);z-index:2;pointer-events:none}
.tabbar.tucked{transform:translateY(115%);opacity:0;pointer-events:none}
.peek{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(6px + env(safe-area-inset-bottom));z-index:44;width:46px;height:5px;border-radius:999px;background:rgba(11,16,48,.45);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.peek.on{opacity:1}
.backchev{border:none;background:transparent;color:var(--ink);font-size:30px;line-height:1;width:38px;height:38px;border-radius:50%;margin-right:-4px}
.backchev:active{background:transparent}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,6.6vw,46px);line-height:1.08;margin:0 0 12px;text-transform:none;color:var(--forest)}
h1 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--var(--bark))}
h2{font-family:var(--serif);font-weight:700;font-size:24px;text-transform:none;margin:0 0 14px;color:var(--forest);line-height:1.22}
h3{font-size:13px;text-transform:uppercase;margin:24px 0 10px;font-weight:700;color:var(--bark)}
p{margin:0 0 12px;max-width:68ch}
.lede{font-family:var(--grot);font-size:16px;font-weight:400;max-width:62ch;line-height:1.68;color:var(--ink)}
.eyebrow{font-family:var(--grot);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--btn-var(--bark));opacity:1;margin-bottom:8px}
.eyebrow::after{content:"";display:inline-block;width:22px;height:1.5px;background:var(--rose);vertical-align:middle;margin-left:9px}
section.panel{padding:26px 24px;margin-bottom:18px;position:relative;overflow:hidden;overflow:clip;animation:settle .5s var(--ease) both}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
section.panel>*{position:relative;z-index:1}
.hidden{display:none !important}
.bubble{position:relative;font-family:var(--grot);font-size:16px;line-height:1.65;padding:20px 24px;margin-bottom:20px;border-radius:999px 999px 999px 8px;background:var(--cream);border:1px solid transparent;box-shadow:var(--shadow-soft)}
.bubble b{font-family:var(--grot);font-weight:700}
.bubble .wait{display:flex;align-items:center;gap:10px;font-family:"IBM Plex Mono","Inter",monospace;font-size:12px;text-transform:uppercase}
.pulse{width:11px;height:11px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 0 var(--line);animation:pl 1.8s infinite}
@keyframes pl{70%{box-shadow:0 0 0 12px rgba(206,154,63,0)}100%{box-shadow:0 0 0 0 rgba(206,154,63,0)}}
.calhead{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.calhead .mo{font-family:var(--serif);font-size:20px}
.nav-btn{border:1px solid var(--line);background:var(--cream);border-radius:50%;width:44px;height:44px;font-size:16px;line-height:1;color:var(--forest);box-shadow:var(--shadow-soft)}
.nav-btn[disabled]{opacity:.3;cursor:not-allowed}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.dow span{font-family:var(--grot);font-size:12px;text-align:center;color:var(--bark);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cell{aspect-ratio:1/1;min-height:48px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:700;padding:2px;transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.cell .num{font-family:var(--grot);font-size:14px;font-weight:700}
.cell .mk{width:9px;height:9px;border-radius:50%}
.cell .lb{font-family:var(--grot);font-size:11px;text-transform:none;opacity:1;font-weight:700;color:var(--bark)}
.charleft{display:block;text-align:right;font-family:var(--grot);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bark);opacity:.65;pointer-events:none;margin:3px 2px 0}
.charleft:empty{display:none}
.charleft.low{opacity:1;color:var(--var(--ontop))}
.charleft.none{color:var(--var(--red))}
button.cell{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;text-align:center}
button.cell:focus-visible{outline:2px solid var(--var(--blue));outline-offset:2px}
button.cell.off{cursor:default}
.cell.open{border-color:var(--var(--line));background:transparent}
.cell.open .mk{background:var(--ink);border-radius:50%}
.cell.booked{border-color:var(--var(--red));background:transparent}
.cell.booked .mk{background:var(--sand);border-radius:4px;width:11px;height:11px;transform:rotate(45deg)}
.cell.blocked{border-color:var(--var(--ink));background:transparent}
.cell.blocked .mk{background:var(--ink);border-radius:0;width:14px;height:5px}
.cell.hold{border-color:var(--var(--line));background:var(--sand)}
.cell.hold .mk{background:none;border-radius:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--var(--line))}
.cell.part{background:var(--sand);border-color:var(--sun)}
.cell.off,.cell.pad{opacity:.3;cursor:default;background:transparent;border-style:dashed}
.cell:not(.off):not(.pad):hover{transform:translateY(-2px)}
.cell.sel{box-shadow:0 0 0 3px var(--ink)}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:16px}
.lg{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:10px 12px;border-radius:12px;background:var(--cream);border:1px solid var(--glass-line)}
.lg i{flex:0 0 auto;margin-top:3px}
.key{width:13px;height:13px;border-radius:50%;display:block}
.key.r{background:var(--sand);border-radius:4px;transform:rotate(45deg)}
.key.g{background:var(--ink);border-radius:50%}
.key.b{background:var(--ink);border-radius:0;height:5px;width:17px;margin-top:8px}
.key.y{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--var(--line));background:none}
.daybox{margin-top:16px;padding:20px;border-radius:999px;background:var(--cream);border:1px solid transparent;box-shadow:var(--shadow-soft)}
.slot{display:flex;gap:10px;align-items:center;padding:13px 16px;border-radius:18px;background:var(--cream);border:1px solid transparent;margin-bottom:8px;font-size:14px;flex-wrap:wrap}
.slot b{font-family:var(--grot);font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-family:var(--grot);font-weight:700;text-transform:none}
.pill.red{background:var(--ink);color:var(--ontop)}
.pill.blue{background:var(--ink);color:var(--ontop)}
.pill.green{background:var(--ink);color:var(--ontop)}
.pill.yellow{background:var(--cream);color:var(--ink)}
.pill.ink{background:var(--ink);color:var(--ontop)}
.pill.grey{background:transparent;color:var(--bark)}
.btn{border:none;background:var(--forest);color:var(--cream);padding:16px 28px;min-height:54px;box-shadow:var(--shadow-soft);transition:opacity .25s var(--ease),transform .25s var(--ease);border-radius:999px;font-weight:700;text-decoration:none;display:inline-block;font-size:16px}
.btn.red{background:var(--ink)}
.btn.blue{background:var(--ink)}
.btn.green{background:var(--ink)}
.btn.danger{background:var(--sand)}
.btn.ghost{background:var(--cream);color:var(--forest);border:1.5px solid var(--line);box-shadow:none}
.btn.sm{padding:11px 18px;min-height:46px;font-size:14px;border-radius:999px}
.btn.big{padding:16px 26px;font-size:16px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:active{transform:scale(.985)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
label{display:block;font-size:14px;text-transform:none;font-weight:700;margin-bottom:8px;color:var(--forest)}
input,select,textarea{width:100%;padding:15px 16px;border:1.5px solid var(--line);border-radius:18px;background:var(--cream);font-family:var(--grot);font-size:16px;color:var(--ink);box-shadow:inset 0 1px 2px var(--ink)}
textarea{min-height:92px;resize:vertical}
.field{margin-bottom:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--cream);padding:12px 18px;min-height:46px;border-radius:999px;font-size:14px;font-weight:700;color:var(--forest);transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease)}
.chip.on{background:var(--ink);color:var(--ontop);border-color:var(--btn-var(--line))}
.chip.col{padding-left:9px;display:inline-flex;align-items:center;gap:7px}
.sw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.hint{font-size:14px;color:var(--bark);opacity:1;margin-top:7px;line-height:1.55}
.err{color:var(--var(--red));font-size:14px;font-weight:700;margin-top:8px}
.total{font-family:var(--grot);font-variant-numeric:tabular-nums;font-size:30px;font-weight:700}
.modal{position:fixed;inset:0;z-index:80;display:flex;padding:16px;overflow-y:auto;background:rgba(11,16,48,.45)}
.sheet{width:100%;max-width:660px;padding:22px;margin:auto;background:var(--cream);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px var(--ink)}
.x{float:right;border:none;background:var(--ink);color:var(--ontop);width:34px;height:34px;border-radius:50%;font-size:16px}
.flowcard{min-height:60vh;display:flex;flex-direction:column}
.prog{height:8px;border-radius:999px;background:transparent;overflow:hidden;margin-bottom:8px}
.progbar{height:100%;background:var(--ink);border-radius:999px;transition:width .55s var(--ease)}
.progrow{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.pstep{font-family:var(--grot);font-size:12px;font-weight:500;text-transform:none;opacity:.8;padding:4px 10px;border-radius:999px;color:var(--ink)}
.pstep.done{opacity:.85;background:var(--sand)}
.pstep.on{opacity:1;background:var(--ink);color:var(--ontop)}
.stepno{font-family:var(--grot);font-size:14px;font-weight:500;text-transform:none;color:var(--bark);margin:0 0 16px}
.saved{font-family:var(--grot);font-size:13px;text-transform:none;color:var(--bark);align-self:center}
.chips.big .chip{min-height:52px;padding:14px 20px;font-size:15px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.chipx{border:none;background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0 0 0 4px;min-height:0}
.boardsel{flex:1;min-height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--cream);padding:0 12px;font:inherit;color:var(--ink)}
.board{border:1.5px solid var(--line);border-radius:18px;background:var(--cream);padding:14px 16px;margin-bottom:12px}
.boardhead{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.boardhead b{font-family:var(--serif);font-size:18px;color:var(--forest)}
.boardperson{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid transparent}
.bpimg{width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:var(--sage);color:var(--ontop);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;overflow:hidden}
.bpimg img{width:100%;height:100%;object-fit:cover;display:block}
.bpbody{flex:1;min-width:0}
.bpbody b{display:block}
.bpbody>span{font-size:13px;color:var(--bark)}
.bpstyles{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.ministyle{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:transparent;color:var(--btn-var(--bark));border:1px solid var(--line)}
.boardcheck{width:20px;height:20px;flex:0 0 auto}
.groupbar{margin-top:14px;padding:14px 16px;border-radius:18px;border:1.5px dashed var(--line);background:transparent}
.moodbar{margin:0 0 16px}
.moodlabel{display:block;font-family:"Inter",sans-serif;font-size:0.7812rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bark);margin-bottom:8px}
.moodtrack{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.moodchip{flex:0 0 auto;border:1.5px solid rgba(46,74,49,.2);background:var(--cream);padding:10px 16px;min-height:44px;border-radius:999px;font:inherit;font-weight:600;font-size:0.875rem;color:var(--ink);cursor:pointer;transition:all .2s var(--ease)}
.moodchip.on{background:var(--rose);border-color:var(--rose);color:#3a241f}
.moodnote{display:block;margin-top:8px;font-size:0.8125rem;color:var(--bark)}
.minivibe{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--sand);color:var(--bark);border:1px solid var(--line)}
html[data-theme="dark"] .moodchip.on{background:var(--rose);color:#241613;border-color:var(--rose)}
.card.ethos{border-left:5px solid var(--rose);background:transparent;font-size:15px;line-height:1.6;margin-bottom:14px}
.sidestrip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px;padding:10px 12px 10px 16px;border-radius:18px;background:var(--cream);color:var(--ink);box-shadow:var(--shadow);font-size:14px;font-weight:700}
.sidestrip.hidden{display:none}
.card.ethos.comwelcome h3{margin:0 0 8px}
.card.ethos.comwelcome p{margin:0 0 8px}
.card.ethos.comwelcome .btn{margin-top:4px}
.colorrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid transparent}
.colorrow label{flex:1;font-weight:700}
.colorswatch{width:28px;height:28px;border-radius:9px;border:1.5px solid rgba(46,74,49,.2);flex:0 0 auto}
.colorrow input[type="color"]{width:52px;height:40px;border:none;background:transparent;border-radius:12px;cursor:pointer;padding:0}
.drawov{position:fixed;inset:0;z-index:140;background:var(--cream)}
.drawbar{position:absolute;top:8px;left:8px;right:8px;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--barbg);border:1px solid var(--barline);border-radius:18px;box-shadow:var(--shadow);overflow-x:auto;flex-wrap:nowrap}
.drawbar input[type="color"]{width:44px;height:38px;border:none;background:transparent;border-radius:8px;cursor:pointer;padding:0}
.drawbar input[type="range"]{flex:0 0 120px}
#dwCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.dwtools{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.dwtool{border:1.5px solid var(--line);background:var(--cream);border-radius:8px;padding:7px 11px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;min-height:38px}
.dwtool.on{background:var(--ink);color:var(--ontop);border-color:var(--btn-var(--line))}
.dwitembar{position:absolute;top:64px;left:8px;right:8px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--cream);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft)}
.spaceov{position:fixed;inset:0;z-index:140;display:flex;flex-direction:column;background:var(--paper)}
.spacestage{position:relative;flex:1;overflow:hidden}
#spDoodle{position:absolute;inset:0;display:block}
#spItems{position:absolute;inset:0}
.spacesticker{position:absolute;width:80px;height:80px;object-fit:contain;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none}
.spacesticker:active{cursor:grabbing}
.stmenu{position:absolute;z-index:6;display:flex;gap:5px;background:var(--cream);border:1.5px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow)}
.spacehint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;color:var(--bark);font-size:0.9375rem;pointer-events:none;max-width:40ch;margin:0 auto}
.stickerpicker{position:absolute;left:50%;top:70px;transform:translateX(-50%);z-index:5;background:var(--cream);border:1.5px solid rgba(46,74,49,.2);border-radius:22px;box-shadow:var(--shadow);padding:16px;max-width:min(92vw,420px);max-height:60vh;overflow-y:auto}
.pickerhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pickergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px}
.pickerthumb{width:72px;height:72px;object-fit:contain;border:1.5px solid var(--line);border-radius:12px;background:var(--cream);cursor:pointer;padding:4px}
.pickerthumb.drawnew{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--btn-var(--bark));font-size:13px}
#bgShapes{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.9}
.selfcareov{position:fixed;inset:0;z-index:170;background:var(--paper);display:flex;flex-direction:column;overflow:hidden}
.schead{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.scintro{padding:0 20px 12px;font-size:0.9375rem;line-height:1.5;max-width:52ch;margin:0 auto;text-align:center}
.sctabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 16px 10px}
.sctab{white-space:nowrap}
.sctab{border:1.5px solid rgba(46,74,49,.2);background:var(--cream);padding:10px 18px;border-radius:999px;font:inherit;font-weight:600;font-size:0.875rem;color:var(--ink);cursor:pointer;transition:all .2s var(--ease)}
.sctab.on{background:var(--btn-green);color:#F2EFE4;border-color:var(--btn-green)}
.eyefield{position:relative;width:100%;height:100%}
.scstage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0 16px}
.scstage>.eyefield{flex:1 1 auto;min-height:240px}
.sgbar{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:4px 4px 10px}
.sgfind{font-size:16px}
.sgfind b{font:700 2rem/1 var(--serif);color:var(--forest);margin-left:6px}
.sgstat{font-size:14px;color:var(--bark);font-variant-numeric:tabular-nums}
.sgfield{border-radius:18px;background:transparent;border:1px dashed var(--line);overflow:hidden}
.sgdone{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center}
.sgdone p{margin:0;font-size:18px}
.sgdone b{font:700 2.5rem/1 var(--serif);color:var(--forest);display:block}
.spotter.sgmiss{border-color:var(--red);background:rgba(179,89,48,.16);color:var(--red)}
.trackball{width:48px;height:48px;border-radius:50%;border:0;padding:0;background:var(--ink);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.spotter{position:absolute;width:44px;height:44px;border-radius:12px;border:1.5px solid rgba(46,74,49,.3);background:var(--cream);color:var(--ink);font:inherit;font-weight:700;font-size:1.125rem;cursor:pointer;transform:translate(-50%,-50%);transition:transform .12s var(--ease)}
.spotter:hover{transform:translate(-50%,-50%) scale(1.1)}
.scscore{font-family:"Fraunces",Georgia,serif;font-size:1.25rem;color:var(--forest);text-align:center;margin-top:10px}
.eyedot{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:var(--ink);box-shadow:0 8px 24px var(--ink)}
.breathewrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.breathec{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--rose),var(--sand));box-shadow:0 10px 30px rgba(201,156,144,.4);transition:transform .1s linear}
.breathet{font-family:"Fraunces",Georgia,serif;font-size:1.375rem;color:var(--forest)}
.sc2020{display:grid;place-items:center;padding:20px}
.sc2020msg{font-family:var(--serif);font-size:clamp(20px,4vw,30px);color:var(--forest);text-align:center;line-height:1.5;max-width:36ch}
.focusdot{width:70px;height:70px;border-radius:50%;background:var(--ink);box-shadow:0 8px 24px var(--ink);transition:transform .6s ease;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1)}
.focuslbl{position:absolute;left:50%;top:calc(50% + 60px);transform:translateX(-50%);font-family:var(--serif);font-size:20px;color:var(--forest);text-align:center}
.scfoot{padding:14px 20px}
.scctl{display:flex;align-items:center;gap:12px;justify-content:center}
.scctl label{display:flex;align-items:center;gap:8px;font-size:0.875rem}
.sctime{font-family:"IBM Plex Mono",monospace;font-size:0.9375rem;color:var(--bark);min-width:60px}
.styleswatches{display:flex;gap:6px;margin:10px 0}
.styleswatch{width:26px;height:26px;border-radius:8px;border:1.5px solid rgba(46,74,49,.2)}
.rolegate{position:fixed;inset:0;z-index:150;background:var(--paper);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:24px}
.rolexplain{font-size:14px;color:var(--bark);max-width:38ch;line-height:1.5;margin:14px auto 0}
.roleinner{max-width:420px;width:100%;text-align:center}
.rolechoices{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.rolechoice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:20px 22px;border-radius:999px;border:1.5px solid var(--line);background:var(--cream);cursor:pointer;font:inherit;transition:all .2s var(--ease)}
.rolechoice:hover{border-color:var(--var(--line));transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.rolechoice b{font-family:var(--serif);font-size:20px;color:var(--forest)}
.rolechoice span{font-size:14px;color:var(--bark)}
.msgbanner{border-left:5px solid var(--yellow);background:rgba(199,154,75,.12);border-radius:6px 18px 18px 6px;padding:14px 16px;font-size:0.9062rem;line-height:1.55;margin-bottom:14px}
.msgthread{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 0;margin-bottom:12px}
.msg{max-width:80%;display:flex;flex-direction:column}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.them{align-self:flex-start;align-items:flex-start}
.msgbody{padding:10px 14px;border-radius:18px;font-size:0.9062rem;line-height:1.45}
.msg.me .msgbody{background:var(--btn-green);color:#FBF9F1;border-bottom-right-radius:6px}
.msg.them .msgbody{background:var(--cream);border:1px solid rgba(46,74,49,.12);border-bottom-left-radius:6px}
.msgmeta{font-size:0.6875rem;color:var(--bark);margin-top:3px;padding:0 4px}
.msginput{display:flex;gap:8px}
.msginput input{flex:1;min-height:46px;border-radius:14px;border:1.5px solid rgba(46,74,49,.2);background:var(--cream);padding:0 14px;font:inherit;color:var(--ink)}
.umbrellatabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.umbrellatab{border:1.5px solid var(--line);background:var(--cream);padding:11px 20px;min-height:46px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;transition:all .2s var(--ease)}
.umbrellatab.on{background:var(--ink);color:var(--ontop);border-color:var(--btn-var(--line))}
.mktbar{margin-bottom:16px}
.modebtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--cream);border-radius:999px;padding:8px 14px;min-height:40px;font:inherit;font-weight:700;font-size:13px;color:var(--btn-var(--bark));cursor:pointer;white-space:nowrap}
.modemenu{position:absolute;z-index:145;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px;min-width:250px}
.modeopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:12px 14px;border:none;background:transparent;border-radius:18px;cursor:pointer;font:inherit;transition:background .15s var(--ease)}
.modeopt:hover{background:transparent}
.modeopt.on{background:transparent}
.modeopt b{font-family:var(--serif);font-size:16px;color:var(--forest)}
.modeopt span{font-size:12px;color:var(--bark)}
.msmodule{border:1.5px solid rgba(46,74,49,.2);border-radius:8px;background:var(--cream);margin-bottom:16px;overflow:hidden;text-align:left}
.msbar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--btn-green);color:#F2EFE4;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1rem}
.msmodule>.msbody{padding:16px}
.msmodule>.msbody>:last-child{margin-bottom:0}
.msprofile{display:flex;gap:16px;align-items:flex-start}
.msavatar{width:92px;height:92px;flex:0 0 auto;border-radius:10px;background:linear-gradient(150deg,var(--sage),var(--green));display:grid;place-items:center;font-size:2.125rem;color:#fff;overflow:hidden;box-shadow:var(--shadow-soft)}
.msavatar img{width:100%;height:100%;object-fit:cover}
.mswho{flex:1;min-width:0}
.mswho h2{margin:0;font-size:1.625rem}
.mswho .hint{margin:2px 0}
.msfriends{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
.msfriend{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;border:none;background:transparent;cursor:pointer;font:inherit}
.msfriend .msfimg{width:66px;height:66px;border-radius:12px;background:linear-gradient(150deg,var(--sage),var(--green));display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.25rem;overflow:hidden}
.msfriend .msfimg img{width:100%;height:100%;object-fit:cover}
.msfriend .msfname{font-size:0.7188rem;font-weight:600;line-height:1.2}
.msfriend .msfrole{font-size:0.6875rem;color:var(--bark)}
.msmodule.blue>.msbar{background:var(--blue);color:#F2EFE4}
.msmodule.rose>.msbar{background:var(--rose);color:var(--ink)}
.msmodule.yellow>.msbar{background:var(--yellow);color:#241C0C}
.msmodule.sage>.msbar{background:var(--sage);color:var(--ink)}
.mspage{position:relative}
.mshero{display:flex;gap:20px;align-items:flex-start;margin-bottom:22px}
.msheroimg{width:150px;height:150px;flex:0 0 auto;border-radius:12px;background:linear-gradient(150deg,var(--sage),var(--green));display:grid;place-items:center;font-size:3.25rem;color:#fff;overflow:hidden;box-shadow:var(--shadow)}
.msheroimg img{width:100%;height:100%;object-fit:cover}
.msheroinfo{flex:1;min-width:0}
.msheroname{margin:0;font-size:1.9375rem;font-family:"Fraunces",Georgia,serif;font-weight:700;color:var(--forest);line-height:1.1}
.msmood{display:inline-flex;align-items:baseline;gap:5px;margin:8px 0;padding:5px 12px;border-radius:999px;background:var(--yellow);color:#241C0C;font-size:0.8125rem;font-weight:600}
.msmood b{color:#241C0C}
.msherobio{margin:0 0 10px;color:var(--bark);font-size:0.9062rem}
.msheropills{display:flex;flex-wrap:wrap;gap:6px}
.msabout{margin:0;font-size:0.9375rem;line-height:1.65;color:var(--ink)}
.msinterests{display:flex;flex-direction:column;gap:14px}
.msintrow{display:flex;gap:12px;align-items:flex-start}
.msintlabel{flex:0 0 64px;padding-top:2px;font-size:0.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--btn-green)}
.mstopfriends .msfriends{margin-top:2px}
@media(max-width:520px){.mshero{gap:14px}
.msheroimg{width:112px;height:112px;font-size:2.375rem}}
.corkboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;padding:22px;border-radius:22px;background:
  radial-gradient(circle at 30% 20%,rgba(160,110,60,.10),transparent 50%),
  repeating-linear-gradient(45deg,rgba(139,99,58,.06) 0 2px,transparent 2px 9px),
  linear-gradient(160deg,#C9A876,#B8946A);
  border:3px solid rgba(120,84,45,.35);box-shadow:inset 0 2px 12px rgba(90,60,30,.18);min-height:200px}
.corknote{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 14px;background:#FBF6DC;border:none;border-radius:3px;
  box-shadow:0 4px 10px rgba(60,40,20,.28);cursor:pointer;font:inherit;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.corknote::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e07070,#a83a3a);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.corknote:hover{transform:scale(1.04) rotate(0deg)!important;box-shadow:0 8px 18px rgba(60,40,20,.34);z-index:2}
.corknote img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;border:1px solid rgba(0,0,0,.08)}
.corknoimg{width:100%;aspect-ratio:1/1;border-radius:2px;background:var(--sage);display:grid;place-items:center;font-family:"Fraunces",Georgia,serif;font-size:2.375rem;color:#fff}
.corktitle{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:0.8438rem;line-height:1.25;color:#3a2c18;text-align:center}
.corkby{font-size:0.6875rem;color:#7A5F3D}
.corkadd{display:flex;align-items:center;justify-content:center;min-height:150px;padding:12px;background:#FBF6DC;border:2px dashed rgba(90,60,30,.55);border-radius:3px;
  color:#6a4f2c;font:inherit;font-weight:700;font-size:0.9375rem;cursor:pointer;transition:background .15s var(--ease)}
.corkadd:hover{background:#FFFDF0}
.joblist{display:flex;flex-direction:column;gap:9px}
.jobrow{width:100%;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:12px 14px;font:inherit;cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.jobrow:hover{border-color:var(--line);box-shadow:0 3px 10px var(--ink)}
.jobrow b{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--forest)}
.jobrow .jobcompany{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--btn-var(--bark))}
.jobrow .jobline{font-size:13px;color:var(--bark);margin-top:3px}
.corkboard.jobcork{position:relative;display:block;overflow:hidden}
.corkboard.jobcork .corknote{position:absolute;width:152px;touch-action:none;user-select:none;-webkit-user-drag:none}
.corkboard.jobcork .corknote.dragging{transition:none;z-index:4}
.corkdesc{font-size:0.6875rem;color:#8a6f4d;text-align:center;line-height:1.35;max-width:132px}
.corknote.paper-mint{background:#E4F2DC}
.corknote.paper-lilac{background:#F1E4F0}
.corknote.paper-blush{background:#F9E6D8}
.tutov{position:fixed;inset:0;z-index:160;pointer-events:none}
.tuttip{position:absolute;pointer-events:auto;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:14px 16px;max-width:290px}
.tuttip b{display:block;font-family:var(--serif);font-size:16px;color:var(--forest);margin-bottom:4px}
.tuttip p{font-size:14px;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.tutmouse{position:absolute;width:34px;height:34px;pointer-events:none;transition:left .4s var(--ease),top .4s var(--ease)}
.rev{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.revl{font-family:var(--grot);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--btn-var(--bark))}
.revv{font-size:16px;margin-top:3px}
.opt{font-family:var(--grot);font-size:12px;text-transform:none;color:var(--bark);font-weight:400}
.terms{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.terms summary{cursor:pointer;font-weight:700;font-size:14px;padding:8px 0}
.qhead{font-family:var(--serif);font-weight:700;font-size:clamp(24px,5vw,32px);text-transform:none;line-height:1.15;margin:0 0 10px;color:var(--forest)}
.flowfoot{display:flex;gap:10px;margin-top:auto;padding-top:20px;border-top:2px solid var(--line);flex-wrap:wrap;align-items:center}
.flowfoot .btn.red{margin-left:auto;order:2}
.flowfoot .saved{order:3;width:100%;text-align:center}
.dial{width:min(70vw,280px);height:min(70vw,280px);border-radius:50%;margin:6px auto 18px;display:grid;place-items:center;background:transparent;--p:0;--ring:var(--red)}
.dial .inner{width:76%;height:76%;border-radius:50%;background:var(--cream);display:grid;place-items:center;border:1px solid var(--line)}
.clock{font-family:"IBM Plex Mono","Inter",monospace;font-size:clamp(34px,10vw,52px);font-weight:700}
.phase{font-family:"IBM Plex Mono","Inter",monospace;font-size:12px;text-transform:uppercase}
.tcount{font-family:"IBM Plex Mono","Inter",monospace;font-size:12px;opacity:.85}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
th{font-family:var(--grot);font-size:12px;font-weight:700;text-transform:none;color:var(--bark)}
td.n,th.n{text-align:right;font-family:"IBM Plex Mono","Inter",monospace}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:8px}
.stat{padding:18px;border-radius:999px;background:var(--cream);border:1px solid transparent;box-shadow:var(--shadow-soft)}
.stat b{display:block;font-family:var(--serif);font-size:30px;font-weight:700;color:var(--forest);margin-bottom:4px}
.stat span{font-size:13px;text-transform:none;color:var(--bark);font-weight:500}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:400;background:var(--ink);color:var(--ontop);padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow);pointer-events:none;max-width:calc(100vw - 48px);text-align:center}
.toast.undo{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;text-align:left}
.toast.undo button{border:none;background:var(--ontop);color:var(--ink);font:inherit;font-weight:700;border-radius:999px;padding:0 18px;min-height:44px;cursor:pointer;flex:0 0 auto}
.rowx{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--bark);font:inherit;font-size:16px;line-height:1;cursor:pointer;flex:0 0 auto}
.rowx::after{content:"";position:absolute;inset:-7px}
.rowx:focus-visible{outline:2px solid var(--var(--blue));outline-offset:2px}
.clearall{display:inline-flex;align-items:center;min-height:44px;margin-left:10px;border:none;background:none;color:var(--bark);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer}
.note{font-size:14px;padding:16px 18px;border-left:5px solid var(--var(--ink));background:transparent;border-radius:8px 18px 18px 8px;margin-bottom:12px}
.note.warn{border-color:var(--var(--line));background:transparent}
.note.bad{border-color:var(--var(--red));background:transparent}
.note.good{border-color:var(--var(--line));background:transparent}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;text-transform:none;font-weight:400;line-height:1.5}
.agree input{width:20px;height:20px;flex:0 0 auto;margin-top:3px}
.legal{font-size:14px;color:var(--ink);opacity:1;line-height:1.7}
.footpanel{margin-top:26px;background:var(--cream)}
.foot{font-size:14px;color:var(--ink);opacity:1;text-align:center;margin:0 auto;max-width:64ch;line-height:1.7}
.msg{border-left:5px solid var(--sage)}
.track{display:flex;align-items:center;margin:14px 0 6px;flex-wrap:wrap}
.tstep{display:flex;align-items:center;gap:7px;font-size:12px;font-family:"IBM Plex Mono","Inter",monospace;text-transform:uppercase;opacity:.6}
.tstep i{width:13px;height:13px;border-radius:50%;border:2px solid var(--ink);display:block}
.tstep.done{opacity:1}
.tstep.done i{background:var(--ink)}
.tstep.now{opacity:1}
.tstep.now i{background:var(--cream);border-color:var(--var(--line))}
.tstep.dead i{background:var(--sand);border-color:var(--var(--red))}
.tsep{width:16px;height:2px;background:rgba(11,16,48,.45);margin:0 6px}
@media(max-width:560px){.tsep{width:9px;margin:0 4px}
.tstep{font-size:11px}}
.card{padding:18px 20px;border-radius:999px;background:var(--cream);border:1px solid transparent;box-shadow:var(--shadow-soft);margin-bottom:12px}
.sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;z-index:130}
.skip:focus{left:16px}
:focus-visible{outline:3px solid var(--btn-var(--blue));outline-offset:3px}
.axfab{border:1px solid var(--line);background:var(--paper);width:44px;height:44px;border-radius:50%;color:var(--forest);line-height:1;box-shadow:var(--shadow-soft);flex:0 0 auto;display:grid;place-items:center}
.axfab.on{background:var(--ink);color:var(--ontop);border-color:var(--btn-var(--line))}
.axtray{position:absolute;top:calc(100% + 12px);right:10px;z-index:120;display:none;flex-direction:column;gap:8px;padding:12px;border-radius:999px;background:var(--cream);border:1px solid var(--line);box-shadow:0 22px 50px var(--ink);min-width:236px}
.axtray.open{display:flex}
.a11ybtn{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--paper);padding:12px 16px;min-height:48px;border-radius:999px;font-size:14px;font-weight:700;color:var(--forest);text-align:left}
.a11ybtn.on{background:var(--ink);color:var(--ontop);border-color:var(--btn-var(--line))}
.a11ybtn .axi{width:20px;height:20px;flex:0 0 auto;display:block}
.a11ybtn .axi svg{width:100%;height:100%;display:block}
html.a11y-big{font-size:118%}
html.a11y-contrast .glass,html.a11y-contrast .card,html.a11y-contrast .checkrow,html.a11y-contrast .expopt{border-width:2px;border-color:var(--forest)}
html.a11y-contrast .shapes{display:none}
html.a11y-nomotion *{animation:none !important;transition:none !important}
html.a11y-underline a{text-decoration:underline !important}
html{scroll-padding-top:88px;scroll-padding-bottom:128px}
html.a11y-contrast{--ink:#000;--forest:#000;--bark:#141414;--paper:#fff;--cream:#fff;--glass:rgba(255,255,255,.95);--glass-line:#000}
.dial.flash{outline:4px solid var(--var(--blue));outline-offset:6px}
@media (forced-colors: active){.shapes,.v1,.v2,.v3,.adleaf{display:none!important}
.pill,.chip{border:1px solid CanvasText}}
.warnbox{border:2px solid var(--forest);border-radius:999px;padding:20px 22px;margin:18px 0;background:var(--cream)}
.warnbox b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(18px,4vw,21px);line-height:1.25;margin-bottom:10px;color:var(--forest)}
.warnbox p{margin:0 0 0;font-size:16px;line-height:1.65;color:var(--ink);max-width:none}
.warnbox.red{border-color:var(--var(--red));background:transparent}
.warnbox.red b{color:var(--var(--red))}
.explist{display:grid;gap:10px}
.expopt{text-align:left;padding:16px 20px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);min-height:58px;color:var(--ink);transition:border-color .25s var(--ease),background .25s var(--ease)}
.expopt b{display:block;font-size:16px;margin-bottom:3px;color:var(--forest)}
.expopt span{font-family:var(--grot);font-size:14px;line-height:1.5;color:var(--bark)}
.expopt.on{border-color:var(--var(--line));border-width:2.5px;background:transparent}
.checkgrid{display:grid;gap:14px}
.checkgroup{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--cream)}
.grouphead{font-family:var(--grot);font-size:12px;font-weight:700;text-transform:uppercase;margin:2px 4px 11px;color:var(--btn-var(--bark))}
.checkgroup .checkrow{margin-bottom:8px}
.checkgroup .checkrow:last-child{margin-bottom:0}
.checkrow{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);min-height:52px;text-transform:none;font-weight:400;font-size:15px;line-height:1.5;cursor:pointer;color:var(--ink)}
.checkrow input{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.checkrow:has(input:checked){border-color:var(--var(--red));border-width:2.5px;background:transparent}
.checkrow.nonerow{margin-top:6px;border-style:dashed}
.checkrow.nonerow:has(input:checked){border-color:var(--var(--line));background:transparent}
.tickcount{font-family:var(--grot);font-size:12px;font-weight:700;color:var(--bark);padding:6px 12px;border-radius:999px;background:transparent}
.tickcount.on{background:var(--ink);color:var(--ontop)}
.tickcount.done{background:var(--ink);color:var(--ontop)}
.tierlist{display:grid;gap:8px}
.tierrow{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;padding:2px 12px 2px 2px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);transition:border-color .2s var(--ease),background .2s var(--ease)}
.tierrow.on{border-color:var(--var(--line));background:transparent}
.tierbtn{flex:1 1 220px;min-width:0;display:flex;gap:12px;align-items:flex-start;text-align:left;background:none;border:0;padding:12px 10px;min-height:48px;color:var(--ink);font:inherit;font-size:15px;line-height:1.45;cursor:pointer;border-radius:18px}
.tierbtn:focus-visible{outline:3px solid var(--var(--blue));outline-offset:-3px}
.tierbtn i{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.tierrow.on .tierbtn i{background:var(--ink);border-color:var(--btn-var(--line))}
.tierrow.on .tierbtn i::after{content:"";width:9px;height:5px;border:2.5px solid var(--line);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.tierrow .linklike{margin-left:44px;margin-bottom:10px}
.figtimes{padding:12px 14px;border-radius:18px;background:transparent}
@media (prefers-reduced-motion:reduce){.tierrow{transition:none}}
.brief{max-height:46vh;overflow-y:auto;padding:4px 14px 4px 4px;border:1px solid var(--line);border-radius:18px;background:var(--cream);margin-bottom:12px}
.briefitem{display:flex;gap:14px;padding:16px 14px;border-bottom:1px solid var(--line)}
.briefno{font-family:"IBM Plex Mono","Inter",monospace;font-size:13px;color:var(--bark);padding-top:2px}
.briefitem b{display:block;font-size:16px;margin-bottom:6px;color:var(--forest);font-family:var(--serif);font-weight:700}
.briefitem p{margin:0;font-size:16px;line-height:1.65;color:var(--ink);max-width:none}
.briefend{padding:18px 14px;font-size:16px;line-height:1.6;color:var(--ink)}
.progwrap{margin-bottom:12px}
.doc{padding:4px}
.doc table{margin-top:10px}
.terms{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.terms summary{cursor:pointer;font-weight:700;font-size:15px;padding:10px 0;color:var(--forest)}
.rev{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.revv{font-size:16px;margin-top:4px;color:var(--ink)}
.opt{font-family:var(--grot);font-size:12px;text-transform:none;color:var(--bark);font-weight:400}
@media print{.invoicepage{padding:0}}
.adpanel{padding:18px 20px}
.adgrid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.adgrid{grid-template-columns:1fr}}
.adcard{display:flex;gap:12px;align-items:center;padding:13px 15px;border-radius:18px;text-decoration:none;color:var(--ink);background:var(--cream);border:1px dashed var(--line)}
.adcard img{width:52px;height:52px;object-fit:cover;border-radius:18px;flex:0 0 auto}
.adleaf{width:52px;height:52px;border-radius:16px;background:var(--leaf) center/contain no-repeat,rgba(168,190,150,.25);flex:0 0 auto}
.adcard b{display:block;font-size:15px;color:var(--forest)}
.adcard span{font-family:var(--grot);font-size:14px;color:var(--bark)}
.chips.scroller{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:none}
.chips.scroller::-webkit-scrollbar{display:none}
.chips.scroller .chip{flex:0 0 auto;scroll-snap-align:start}
.starrow{display:flex;gap:6px;justify-content:center;margin:10px 0 2px}
.starbtn{border:none;background:transparent;font-size:36px;line-height:1;color:transparent;min-width:46px;min-height:46px;transition:color .2s var(--ease),transform .2s var(--ease)}
.starbtn.on{color:var(--var(--ontop))}
.starbtn:active{transform:scale(.9)}
.starstat{font-size:16px;color:var(--var(--ontop))}
.scorewrap{margin:14px 0}
.steps{display:flex;gap:6px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.sdot{width:9px;height:9px;border-radius:50%;background:rgba(11,16,48,.45)}
.sdot.on{background:var(--ink)}
.sdot.done{background:var(--sage)}
.holdbtn{position:relative;overflow:hidden}
.holdbtn.holding::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--cream);transform-origin:left;animation:holdfill 2s linear forwards}
@keyframes holdfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sheet.onboard{max-width:420px;padding:30px 26px 26px;text-align:center}
.onbicon{width:64px;height:64px;margin:6px auto 16px;border-radius:50%;background:var(--ink);color:var(--ontop);display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.onbicon svg{width:30px;height:30px}
.onbtitle{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--forest);margin:0 0 6px}
.onbsub{font-size:14px;color:var(--bark);margin:0 0 22px;line-height:1.5}
.socialbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;font-size:15px;font-weight:700;margin-bottom:10px;border:1.5px solid var(--line)}
.socialbtn.apple{background:var(--ink);color:var(--ontop);border-color:var(--ink)}
.socialbtn.google{background:var(--cream);color:var(--ink)}
.onbdiv{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--bark);font-size:12px}
.onbdiv span{flex:1;height:1px;background:transparent}
.onbdiv b{font-weight:500;white-space:nowrap}
.sheet.onboard .field{text-align:left}
.onbgo{width:100%;margin-top:6px}
.onbswap{width:100%;margin-top:10px}
.gatewrap{min-height:calc(100vh - 220px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 6px}
.tindergate{min-height:calc(100vh - 160px);justify-content:center;gap:0;padding-bottom:30px}
.tindergate .gatemark svg{width:64px;height:64px}
.tindergate .gatetitle{font-size:clamp(48px,13vw,68px);letter-spacing:-.02em;margin:10px 0 6px}
.tindergate .tindersub{font-size:1rem;color:var(--bark);font-style:italic;margin:0 0 12vh}
.tinderstack{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin:0 auto}
.tbtn{width:100%;min-height:54px;border-radius:999px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;border:2px solid var(--forest);background:var(--paper);color:var(--forest);transition:all .18s var(--ease)}
.tbtn:hover{transform:translateY(-1px)}
.tbtn.primary{background:var(--ink);border:none;color:var(--ontop);box-shadow:0 8px 24px var(--ink)}
html[data-theme="dark"] .tindergate .tindersub,html[data-theme="dark"] .tfine{color:rgba(233,228,212,.75)}
.tfine{font-size:12px;color:var(--bark);line-height:1.6;max-width:340px;margin:16px auto 0;opacity:.75}
body.atgate .footpanel{display:none}
.gatemark{display:flex;gap:8px;margin-bottom:22px}
.gatemark .d{width:15px;height:15px;background:var(--sand);border-radius:50%}
.gatemark .d2{width:15px;height:15px;background:var(--ink);border-radius:4px}
.gatemark .d3{width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-bottom:14px solid var(--forest)}
.gatemark.leaf svg{width:60px;height:60px;display:block;overflow:visible}
.gatemark .leaf-brush{fill:var(--green);stroke:var(--forest);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.gatemark .leaf-stem{fill:none;stroke:var(--forest);stroke-width:3;stroke-linecap:round}
.gatemark.paint .leaf-brush{animation:leafdraw 1.6s cubic-bezier(.65,0,.35,1) .15s both}
.gatemark.paint .leaf-stem{animation:stemdraw .7s ease-out .95s both}
@keyframes leafdraw{
  0%{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
  55%{stroke-dashoffset:0;fill-opacity:0}
  100%{stroke-dashoffset:0;fill-opacity:1}
}
@keyframes stemdraw{
  0%{stroke-dasharray:1;stroke-dashoffset:1}
  100%{stroke-dashoffset:0}
}
@media (prefers-reduced-motion: reduce){.gatemark.paint .leaf-brush,.gatemark.paint .leaf-stem{animation:none}}
.gatetitle{font-family:var(--serif);font-weight:700;font-size:clamp(34px,9vw,50px);line-height:1.05;color:var(--forest);margin:0 0 14px}
.gatetitle em{font-style:italic;color:var(--var(--bark))}
.gatesub{font-size:16px;color:var(--bark);max-width:34ch;line-height:1.55;margin:0 0 30px}
.agencyline{font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;color:var(--forest);max-width:34ch;line-height:1.5;margin:-16px 0 24px}
.gatewrap .socialbtn,.gatewrap .gatemail{width:100%;max-width:340px}
.gatemail{margin-bottom:10px;min-height:52px}
.testbar{width:100%;max-width:360px;margin:0 0 20px;padding:16px 18px;border-radius:18px;background:transparent;border:1.5px dashed var(--var(--line));text-align:left}
.testlabel{font-family:var(--grot);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--var(--ontop));margin-bottom:6px}
.testbar p{font-size:14px;line-height:1.5;color:var(--bark);margin:0 0 12px;max-width:none}
.testbtn{width:100%;margin-bottom:8px;min-height:48px}
.testbtn:last-child{margin-bottom:0}
.bmgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.compassgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
.compasstile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:18px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);cursor:pointer;font:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.compasstile:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.compasstile .ctico{font-size:20px;color:var(--btn-var(--bark));margin-bottom:6px}
.compasstile b{font-family:var(--serif);font-size:16px;color:var(--forest)}
.compasstile span{font-size:12px;color:var(--bark)}
.testchip{position:fixed;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:40;background:var(--cream);color:var(--ink);border:none;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;box-shadow:var(--shadow)}
.gatelinks{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap}
.gatelinks button{border:none;background:transparent;color:var(--bark);font-size:14px;font-weight:700;min-height:36px}
.gatelinks span{color:transparent}
.deckwrap{position:relative;max-width:360px;margin:0 auto 18px;min-height:420px}
.deckcard{position:absolute;inset:0;border-radius:30px;overflow:hidden;background:var(--cream);
  box-shadow:0 18px 40px rgba(31,42,32,.22);border:1px solid rgba(46,74,49,.1);
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.deckcard.behind{transform:scale(.95) translateY(10px);opacity:.7;z-index:1}
.deckcard.front{z-index:2}
.deckcard.flyleft{transform:translateX(-140%) rotate(-14deg);opacity:0}
.deckcard.flyright{transform:translateX(140%) rotate(14deg);opacity:0}
.deckimg{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sand);display:block}
.deckimg.noimg{display:flex;align-items:center;justify-content:center;color:var(--sage);font-family:"Fraunces",Georgia,serif;font-size:3.25rem}
.deckbody{padding:16px 18px 18px}
.deckname{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.3125rem;color:var(--forest);margin:0 0 2px}
.deckrole{font-size:0.8125rem;color:var(--bark);margin:0 0 8px}
.deckbio{font-size:0.9062rem;line-height:1.5;color:var(--ink)}
.deckactions{display:flex;gap:16px;justify-content:center;margin-top:16px}
.deckbtn{width:60px;height:60px;border-radius:50%;border:none;display:grid;place-items:center;box-shadow:var(--shadow-soft);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.deckbtn:hover{transform:scale(1.06);box-shadow:var(--shadow)}
.deckbtn:active{transform:scale(.9)}
.deckbtn.pass{background:var(--cream);color:var(--red);border:1.5px solid rgba(180,100,78,.3)}
.deckbtn.like{background:var(--btn-green);color:#FBF9F1}
.deckempty{text-align:center;padding:40px 20px;color:var(--bark)}
.deckwrap.tall{min-height:600px}
.deckwrap.tall .deckimg{aspect-ratio:4/3}
.deckscroll{max-height:290px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.deckgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.talentcard{position:relative;padding:0;text-align:left;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--cream);box-shadow:var(--shadow-soft);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.talentcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.talentcard:active{transform:translateY(0) scale(.99)}
.talentimg{aspect-ratio:1/1;background:var(--sand);display:flex;align-items:center;justify-content:center;color:var(--forest);font-family:var(--serif);font-size:44px}
.talentimg img{width:100%;height:100%;object-fit:cover;display:block}
.talentbody{display:block;padding:12px 14px 14px}
.talentbody b{display:block;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--forest)}
.talentbody>span{display:block;font-size:12px;color:var(--bark);margin-top:2px}
.favbtn{display:grid;place-items:center;width:44px;height:44px;min-width:44px;border-radius:50%;background:var(--cream);border:1.5px solid var(--line);color:var(--bark);font-size:20px;line-height:1;box-shadow:var(--shadow-soft);cursor:pointer;padding:0;flex:0 0 auto;transition:transform .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.favbtn.on{color:var(--var(--ontop));border-color:var(--line)}
.favbtn:hover{transform:scale(1.08);color:var(--var(--ontop))}
.favbtn:active{transform:scale(.9)}
.deckcard .favbtn,.talentcard .favbtn{position:absolute;top:10px;right:10px;z-index:3}
.savedrow .favbtn{flex:none}
@media(max-width:420px){.deckgrid{grid-template-columns:1fr 1fr}}
.traderow{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;margin-top:12px;padding:14px;border-radius:18px;background:transparent}
.tradeside p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.tradecat{font-size:13px;font-weight:700;color:var(--forest);margin-top:3px}
.tradearrow{font-size:20px;color:var(--var(--bark));align-self:center}
@media(max-width:520px){.traderow{grid-template-columns:1fr;gap:10px}
.tradearrow{transform:rotate(90deg);justify-self:center}}
.collabpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--btn-var(--bark));background:transparent;padding:5px 12px;border-radius:999px;margin-right:6px}
.verifiedpill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--ontop);background:var(--ink);padding:5px 12px;border-radius:999px}
.hp{position:absolute;left:-9999px}
.choice{display:block;width:100%;text-align:left;padding:20px 22px;border-radius:999px;border:1px solid var(--line);background:var(--cream);margin-bottom:12px;box-shadow:var(--shadow-soft);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.choice b{display:block;font-family:var(--serif);font-weight:700;font-size:18px;margin-bottom:5px;color:var(--forest);line-height:1.25}
.choice span{font-family:var(--grot);font-size:15px;line-height:1.55;color:var(--ink)}
.choice:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.photostrip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.ph{margin:0;flex:0 0 auto;width:min(62vw,240px);scroll-snap-align:center}
.ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px;display:block;background:transparent}
.ph figcaption{font-family:var(--grot);font-size:14px;color:var(--bark);margin-top:8px;text-align:center}
.svcgrid{display:grid;gap:10px}
.svc{padding:17px 20px;border-radius:999px;background:var(--cream);border:1px solid transparent;box-shadow:var(--shadow-soft)}
.svc b{display:block;font-size:16px;margin-bottom:3px}
.svc span{font-family:var(--grot);font-size:15px;line-height:1.55;color:var(--bark)}
.links{display:grid;gap:10px}
.linkrow{display:flex;flex-direction:column;gap:2px;padding:16px 20px;border-radius:18px;border:1px solid var(--line);background:var(--cream);box-shadow:var(--shadow-soft);text-decoration:none;color:var(--ink);min-height:56px;justify-content:center}
.linkrow b{font-size:16px}
.linkrow span{font-family:var(--grot);font-size:13px;color:var(--bark);word-break:break-all}
.linkrow:hover{border-color:var(--ink)}
.sos{background:var(--ink);color:var(--ontop);border:none;border-radius:999px;padding:18px;font-weight:700;font-size:16px;width:100%;min-height:66px;box-shadow:var(--shadow-soft)}
.demo{border-style:dashed;opacity:.9;margin-top:8px}
.sealwrap{display:flex;justify-content:center;margin:4px 0 14px}
.seal{width:78px;height:78px;border-radius:50%;background:var(--ink);color:var(--ontop);display:grid;place-items:center;font-size:36px;box-shadow:0 10px 26px var(--ink);animation:bloom .7s var(--ease) both}
@keyframes bloom{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
.wheelbox{margin-top:14px;padding:16px;border-radius:26px;background:var(--cream);border:1px solid rgba(46,74,49,.08);box-shadow:var(--shadow-soft)}
.wheelhead{font-family:"Inter",sans-serif;font-size:0.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--bark);margin-bottom:12px;text-align:center}
.wheels{display:flex;gap:10px;justify-content:center}
.wheelcol{height:196px;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
  border-radius:18px;background:rgba(46,74,49,.05);padding:74px 0;min-width:88px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.wheelcol::-webkit-scrollbar{display:none}
.wv{display:block;width:100%;border:none;background:transparent;scroll-snap-align:center;font-family:"IBM Plex Mono","Inter",monospace;font-size:18px;padding:11px 0;color:var(--ink);opacity:.45;min-height:44px;transition:opacity .2s var(--ease),font-size .2s var(--ease)}
.wv.on{opacity:1;font-weight:700;font-size:20px}
.wheels #stateWheel{min-width:min(88vw,320px)}
.wheels #stateWheel .wv{font-family:"Inter",sans-serif;font-size:1rem;font-weight:600}
.wheels #stateWheel .wv.on{font-size:1.1875rem}
.wheelpick{text-align:center;font-family:"IBM Plex Mono","Inter",monospace;font-size:1.1875rem;margin-top:10px}
.jumpbar{display:flex;gap:6px;overflow-x:auto;padding:10px;margin-bottom:14px;border-radius:999px;background:var(--cream);border:1px solid var(--glass-line);position:sticky;top:78px;z-index:15;box-shadow:var(--shadow)}
.jump{white-space:nowrap;border:none;background:transparent;padding:10px 14px;border-radius:999px;font-weight:700;font-size:14px;min-height:44px}
.jump.on{background:var(--ink);color:var(--ontop)}
.jumpgroup{display:flex;gap:4px;align-items:center;padding-right:10px;border-right:1.5px solid var(--line);margin-right:4px}
.jumpgroup:last-child{border-right:none;padding-right:0;margin-right:0}
.grpline{margin:22px 0 6px;font-family:var(--serif);font-size:24px;font-weight:700;color:var(--forest)}
.grpline span{border-bottom:2.5px solid var(--var(--line));padding-bottom:4px}
.jumplabel{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--bark);padding:0 8px;white-space:nowrap}
.crmrow,.rolodexrow{padding:18px;border-radius:999px;background:var(--cream);border:1px solid transparent;box-shadow:var(--shadow-soft);margin-bottom:10px}
.savedrow{position:relative}
.ledgerrow b{font-size:14px;white-space:nowrap}
.lawlist{max-height:430px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-right:4px}
.lawcard{padding:16px 18px;border-radius:18px;background:var(--cream);border:1px solid transparent;box-shadow:var(--shadow-soft)}
.lawcard b{font-size:16px}
.tagbtn{padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);background:transparent;font-size:13px;font-weight:700;min-height:44px;color:var(--ink);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.tagbtn:hover{border-color:var(--btn-var(--line))}
.tagbtn.on{background:var(--ink);color:var(--ontop);border-color:var(--ink)}
@media print{.shapes,header.bar,.noprint{display:none!important}
body{background:var(--cream)}
.glass,.sheet{background:var(--cream);box-shadow:none;border:1px solid var(--line)}
.modal{position:static;background:none;padding:0}}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
@media(max-width:640px){.wrap{padding:12px max(12px,env(safe-area-inset-right)) calc(var(--floor-h, 120px) + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
section.panel{padding:20px 18px;border-radius:999px}
.card{padding:16px;border-radius:18px}
h1{font-size:clamp(26px,7vw,38px)}
.gatetitle{font-size:clamp(30px,9vw,46px)}
.compassgrid{grid-template-columns:1fr 1fr;gap:10px}
.compasstile{padding:14px;min-height:0}
.two{grid-template-columns:1fr}
.sheet{padding:16px;border-radius:18px}
.deckgrid{grid-template-columns:1fr 1fr}
.talentcard{min-height:0}
.corkboard{padding:16px;gap:12px}
.umbrellatabs{gap:6px;flex-wrap:wrap}
.umbrellatab{padding:9px 16px;min-height:44px;font-size:13px}
.msginput input{min-height:44px;font-size:0.9375rem}
input,select,textarea{font-size:16px}
.btn{min-height:48px;padding:14px 22px}
.btn.sm{min-height:44px}
.choice{padding:16px 18px}
.tab .lbl{font-size:11px}
.tab{min-height:52px}
.modebtn{padding:8px 12px;min-height:44px;font-size:12px}
.corknote img{aspect-ratio:1/1}
.toast{max-width:calc(100vw - 24px);font-size:13px;padding:10px 16px}}
.deckcard{min-height:420px}
@media(max-width:640px){.deckcard{min-height:380px;border-radius:26px}
.deckbtn{width:58px;height:58px;font-size:1.5rem}
.deckactions{gap:26px}}
.deckcard.front{touch-action:pan-y;cursor:grab;user-select:none}
.deckcard.front:active{cursor:grabbing}
.confetti{position:fixed;z-index:200;pointer-events:none}
.badgeshelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px}
.badgecard{text-align:center;padding:14px 10px;border-radius:18px;background:var(--cream);border:1.5px solid var(--line)}
.badgeart{width:56px;height:56px;margin:0 auto 8px;display:grid;place-items:center}
.badgeart img{width:56px;height:56px;object-fit:contain}
.badgeleaf{font-size:2.5rem;color:var(--green)}
.badgecard b{display:block;font-family:var(--serif);font-size:15px;color:var(--forest)}
.badgecard span{font-size:12px;color:var(--bark)}
.stickerpick{display:flex;gap:8px;flex-wrap:wrap}
.stickerthumb{width:64px;height:64px;object-fit:contain;border-radius:12px;border:2px solid transparent;cursor:pointer;padding:4px;background:var(--cream)}
.stickerthumb.on{border-color:var(--green)}
.stickerthumb:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.swaprow{display:flex;align-items:center;justify-content:center;gap:12px}
.swaprow figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.swaprow img{width:min(34vw,128px);aspect-ratio:1;object-fit:contain;border-radius:18px;background:var(--cream);border:1.5px solid var(--line);padding:6px}
.swaprow figcaption{font-size:13px;color:var(--bark);font-weight:700}
.swaparrow{font-size:24px;color:var(--forest)}
.collabask{padding:12px 14px;border-radius:18px;background:var(--cream);border:1.5px solid var(--line);margin-bottom:10px}
.collabask p{margin:0 0 8px}
.collabask .row{gap:8px;flex-wrap:wrap}
.stickeroffers{margin-top:12px}
.stickeroffer{display:flex;gap:10px;align-items:center;padding:10px;border-radius:18px;background:var(--cream);border:1.5px solid var(--line);margin-bottom:8px}
.stickeroffer img{width:48px;height:48px;object-fit:contain;flex:0 0 auto}
.stickerofferbody{flex:1;min-width:0}
.stickerofferbody b{display:block;font-family:"Fraunces",Georgia,serif;font-size:0.875rem;color:var(--forest)}
.stickerofferbody span{font-size:0.75rem;color:var(--bark)}
.colorwheelbtn{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--cream);display:grid;place-items:center;cursor:pointer;padding:0;flex:0 0 auto}
.wheeldot{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
#dwWheel{position:fixed;z-index:150;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:12px}
#dwWheel canvas{display:block;border-radius:12px;cursor:crosshair;touch-action:none}
.wheelrow{display:flex;gap:8px;margin-top:10px;align-items:center}
.wheelrow input{flex:1;min-height:38px;border-radius:10px;border:1.5px solid rgba(46,74,49,.2);background:var(--paper);padding:0 10px;font:inherit;font-size:0.8125rem;color:var(--ink);font-family:monospace}
@keyframes confall{to{transform:translateY(112vh) rotate(540deg);opacity:.7}}
:root{--td-grad:linear-gradient(160deg,var(--sage),var(--green));--td-card:var(--cream)}
body{overscroll-behavior-y:none}
.tddeck{position:relative;max-width:420px;margin:0 auto;padding:12px}
.tdcard{position:relative;border-radius:28px;overflow:hidden;background:var(--td-card);box-shadow:0 18px 44px rgba(31,42,32,.22);border:none;
  min-height:66vh;display:flex;flex-direction:column;user-select:none;-webkit-user-drag:none;touch-action:pan-y;cursor:grab;transition:transform .22s ease,box-shadow .2s ease}
.tdcard:active{cursor:grabbing}
.tdcard .tdimg{flex:1;min-height:44vh;background:var(--td-grad);position:relative;overflow:hidden}
.tdcard .tdimg img{width:100%;height:100%;object-fit:cover;display:block}
.tdcard .tdgrad{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.tdcard .tdname{position:absolute;left:16px;bottom:12px;color:#fff;font-family:"Fraunces",Georgia,serif;font-size:1.75rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.tdcard .tdsub{position:absolute;left:16px;bottom:40px;color:#fff;font-size:0.875rem;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5);opacity:.95}
.tdbody{padding:16px 18px}
.tdbody .tdvibes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tdbody .tdstyles{display:flex;flex-wrap:wrap;gap:6px}
.tdstamp{position:absolute;top:22px;font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:1.875rem;letter-spacing:.06em;border:4px solid;border-radius:10px;padding:2px 12px;opacity:0;transform:rotate(-16deg);pointer-events:none;z-index:3}
.tdstamp.yes{left:16px;color:var(--green);border-color:var(--green)}
.tdstamp.no{right:16px;color:var(--red);border-color:var(--red);transform:rotate(16deg)}
.tdactions{display:flex;justify-content:center;gap:26px;padding:16px 0 8px}
.tdbtn{width:62px;height:62px;border-radius:50%;border:none;display:grid;place-items:center;font-size:1.625rem;cursor:pointer;box-shadow:0 8px 20px rgba(31,42,32,.2);transition:transform .15s var(--ease)}
.tdbtn:active{transform:scale(.9)}
.tdbtn.no{background:#fff;color:var(--red);border:2px solid var(--red)}
.tdbtn.super{background:#fff;color:var(--blue);border:2px solid var(--blue);width:52px;height:52px;font-size:1.25rem}
.tdbtn.yes{background:var(--btn-green);color:#fff}
.tdbtn.yes:hover{background:var(--green)}
@media(max-width:640px){.tddeck{padding:8px}
.tdcard{min-height:70vh;border-radius:24px}
.tdcard .tdname{font-size:1.5rem}
.tdactions{gap:20px}}
.tdcard.flyright{transform:translateX(140%) rotate(18deg);transition:transform .4s ease}
.tdcard.flyleft{transform:translateX(-140%) rotate(-18deg);transition:transform .4s ease}
.phoneframe{position:relative;width:min(400px,92vw);margin:0 auto;border-radius:44px;border:10px solid #1a1a1a;box-shadow:0 24px 60px rgba(0,0,0,.3);background:#000;overflow:hidden}
.phoneframe .pnotch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:22px;background:#1a1a1a;border-radius:0 0 16px 16px;z-index:5}
.phoneframe .pscreen{position:relative;height:min(78vh,760px);overflow:hidden;background:var(--paper);border-radius:34px}
@media(max-width:640px){.phoneframe{border:none;border-radius:0;box-shadow:none}
.phoneframe .pnotch{display:none}
.phoneframe .pscreen{height:100vh;border-radius:0}}
.socialbtn{display:none}
.ratingpill{font-family:var(--serif);font-weight:700;color:var(--btn-var(--bark));background:transparent;border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-size:14px}
.decoyed{pointer-events:none;user-select:none;-webkit-user-select:none}
.decoyed img,.decoyed .deckimg{filter:blur(12px) saturate(.7)}
.decoytag{display:inline-block;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;background:var(--cream);color:var(--ink);margin-bottom:14px}
.decoyimg{width:100%;aspect-ratio:4/5;border-radius:999px;display:block}
.castcard{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;padding:18px 20px;border-radius:999px;background:var(--cream);border:1px solid transparent;box-shadow:var(--shadow-soft);margin-bottom:12px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.castcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.castcard:active{transform:translateY(0) scale(.99)}
.breakrow{border:1.5px dashed var(--line);border-radius:18px;padding:14px 16px;margin-bottom:12px;background:var(--cream)}
.rolechips{display:flex;flex-wrap:wrap;gap:6px}
.subrow{display:flex;gap:10px;align-items:center;padding:13px 16px;border-radius:18px;background:var(--cream);border:1px solid transparent;margin-bottom:8px;font-size:14px;flex-wrap:wrap}
.qrwrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:14px 0 4px}
.qrframe{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border-radius:22px;
  padding:14px 14px 12px;box-shadow:var(--shadow-soft);border:1px solid rgba(46,74,49,.1)}
.qrframe canvas{width:180px;height:180px;image-rendering:pixelated;border-radius:8px}
.qrframe b{color:#25412A;font-size:0.875rem;margin-top:6px}
.qrframe span{color:#4A5B45;font-size:0.6875rem}
.qractions{display:flex;flex-direction:column;gap:8px;min-width:200px;flex:1}
.linkchip{font-size:12px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:9px 12px;word-break:break-all;color:var(--bark)}
.invitecard{display:flex;flex-direction:column;gap:4px;background:var(--cream);border-radius:18px;padding:14px 16px;margin:0 auto 16px;max-width:340px;text-align:left;box-shadow:var(--shadow-soft);border:1px solid var(--line)}
.invitecard b{color:var(--forest);font-size:14px}
.invitecard span{color:var(--bark);font-size:12px;line-height:1.5}
@media (max-width:520px){.qrwrap{justify-content:center}
.qractions{min-width:0;width:100%}}
.sigfield input{font-family:var(--serif);font-style:italic;font-size:18px}
.sidepick{display:flex;gap:8px}
.sideopt{flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:12px 14px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);cursor:pointer;font:inherit}
.sideopt b{font-family:var(--serif);font-size:16px;color:var(--forest)}
.sideopt span{font-size:12px;color:var(--bark)}
.sideopt.on{border-color:var(--var(--line));background:transparent;box-shadow:0 0 0 1px var(--var(--ink)) inset}
.sideopt:focus-visible{outline:2px solid var(--var(--blue));outline-offset:2px}
.drawov.studio{display:flex;flex-direction:column;background:var(--ink)}
.studio .stbar{position:relative;top:auto;left:auto;right:auto;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--barbg);border:1px solid var(--barline);flex-wrap:wrap;z-index:3}
.studio .stbar.top{border-radius:0 0 18px 18px}
.studio .stbar.bottom{border-radius:18px 18px 0 0}
.ststage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.stdoc{position:relative;box-shadow:0 20px 60px var(--ink);background-color:var(--cream)}
#stView{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.stslider{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--bark)}
.stslider input[type="range"]{width:110px}
.swatches{display:flex;gap:5px;align-items:center}
.swatches .sw{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.25);cursor:pointer;padding:0}
.stlayers{position:absolute;right:10px;top:64px;width:230px;z-index:5;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:6px}
.strow{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-size:13px}
.strow span{flex:1}
.strow.on{border-color:var(--var(--line));background:transparent}
.dwtool.sm{padding:3px 7px;min-height:28px;font-size:12px}
.postwrap{border-radius:18px;padding:9%;margin:12px 0;min-height:120px}
.postpaper{background:var(--cream);border-radius:12px;padding:16px 18px;line-height:1.65;font-size:15px}
.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.artpick{border:1.5px solid var(--line);background:var(--cream);border-radius:12px;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;font:inherit;font-size:11px;color:var(--bark)}
.artpick img{width:100%;height:96px;object-fit:contain;border-radius:8px;background:var(--cream)}
.crew{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
@media (max-width:520px){.stslider input[type="range"]{width:80px}
.studio .dwtool{padding:6px 8px;font-size:12px;min-height:34px}}
.studio.simple .pro{display:none !important}
.stresume{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;padding:10px 14px;box-shadow:var(--shadow);font-size:13px;max-width:92%}
.stobjbar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:6;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;padding:8px 10px;box-shadow:var(--shadow);max-width:94%}
.ststage{position:relative;touch-action:none}
.stdoc{transform-origin:center center;will-change:transform}
.stphone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);width:min(520px,calc(100% - 24px));box-sizing:border-box;font-size:14px}
.stphone .x{position:absolute;top:8px;right:8px}
.stphoneqr{background:var(--cream);border-radius:12px;padding:10px;box-shadow:0 0 0 1px var(--ink)}
.stphonetxt b{font-size:18px;display:block;margin-bottom:6px;padding-right:28px}
.stphonetxt ol{margin:0 0 10px;padding-left:1.2em;display:grid;gap:4px;line-height:1.35}
.stphonestat{margin:0;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--bark)}
.stphonestat i{width:9px;height:9px;border-radius:50%;background:var(--sand);animation:stpulse 1.4s ease-in-out infinite}
.stphone.live .stphonestat i{background:var(--ink);animation:none}
@keyframes stpulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.stphonestat i{animation:none}}
@media (max-width:560px){.stphone{grid-template-columns:1fr;justify-items:center;text-align:left}}
.stphone canvas{display:block;width:184px;height:184px;image-rendering:pixelated}
.stickerboard{margin-top:6px}
.createpanel .row .btn{margin-bottom:4px}
.omonth{margin:6px 0 16px}
.omgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.omday{position:relative;min-height:46px;border-radius:12px;background:var(--cream);border:1px solid transparent;padding:4px 5px;font-size:12px}
button.omday{display:block;width:100%;text-align:left;font:inherit;font-size:12px;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button.omday:hover{border-color:var(--var(--line))}
button.omday:active{transform:scale(.97)}
button.omday:focus-visible{outline:2px solid var(--var(--blue));outline-offset:2px}
.omday.pad{background:transparent;border-color:transparent}
.omday.off{opacity:.45}
.omday.today{border-color:var(--var(--line));box-shadow:0 0 0 1px var(--var(--ink)) inset}
.omday .num{font-weight:700;color:var(--bark)}
.omdots{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.omdot{display:inline-block;width:9px;height:9px;border-radius:50%}
.omdot.big{width:12px;height:12px;margin-right:6px;flex:none}
.tapstrip{gap:7px;margin-bottom:12px}
.tapstrip .chip{min-height:46px;padding:11px 15px;font-variant-numeric:tabular-nums;font-weight:700}
.cchead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px}
.cchead .mo{font-weight:700;text-transform:uppercase;font-size:13px;color:var(--bark)}
.ccgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ccday{position:relative;min-height:52px;border-radius:12px;background:var(--cream);border:1.5px solid var(--line);padding:5px 6px;display:block;width:100%;text-align:left;font:inherit;font-size:13px;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;transition:transform .12s cubic-bezier(.2,.9,.3,1.2),box-shadow .12s ease,border-color .12s ease}
.ccday.pad{background:transparent;border-color:transparent;pointer-events:none}
.ccday .num{font-weight:700;color:var(--bark)}
.ccday.today{border-color:var(--var(--line));box-shadow:0 0 0 1.5px var(--var(--ink)) inset}
.ccday.has{background:var(--sand)}
.ccday:hover{border-color:var(--var(--line));transform:translateY(-2px);box-shadow:0 6px 14px var(--ink)}
.ccday:active{transform:translateY(0) scale(.96)}
.ccday:focus-visible{outline:3px solid var(--var(--blue));outline-offset:2px}
.ccdots{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.ccdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bark)}
.ccdot.pending{background:var(--cream)}
.ccdot.accepted{background:var(--ink)}
.ccdot.done{background:var(--bark);opacity:.55}
.cclegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--bark)}
.cclegend span{display:inline-flex;align-items:center;gap:5px}
.chip,.btn,.choice,.jump,.sctab,.hangfile,.spf,.omdotbtn,.gbpickbtn,.moodchip,.nav-btn,.tab{
  transition:transform .13s cubic-bezier(.2,.9,.3,1.25),box-shadow .13s ease,
             background-color .16s ease,border-color .16s ease,color .16s ease}
.chip:active,.btn:active,.choice:active,.jump:active,.sctab:active,.spf:active,
.omdotbtn:active,.gbpickbtn:active,.moodchip:active,.nav-btn:active{transform:scale(.94)}
.btn:active{box-shadow:none}
.chip:hover,.moodchip:hover{transform:translateY(-1px)}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px var(--ink)}
.choice:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--ink)}
.chip.on{box-shadow:none}
input[type="color"]{cursor:pointer;border-radius:12px;border:2px solid var(--line);padding:2px;background:var(--cream);box-shadow:none;transition:transform .13s cubic-bezier(.2,.9,.3,1.25),box-shadow .13s ease}
input[type="color"]:hover{transform:translateY(-2px);box-shadow:0 6px 14px var(--ink)}
input[type="color"]:active{transform:translateY(0) scale(.95);box-shadow:inset 0 2px 5px var(--ink)}
input[type="range"]{-webkit-appearance:none;appearance:none;height:34px;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:999px;box-shadow:inset 0 1px 3px var(--ink)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--paper);border:2.5px solid var(--var(--line));box-shadow:0 2px 0 var(--ink),0 4px 10px var(--ink);transition:transform .12s cubic-bezier(.2,.9,.3,1.25),box-shadow .12s ease}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.14);box-shadow:0 2px 0 var(--ink),0 6px 16px var(--ink)}
input[type="range"]::-moz-range-track{height:8px;border-radius:999px;background:var(--sand)}
input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--paper);border:2.5px solid var(--var(--line))}
@media (prefers-reduced-motion: reduce){.chip,.btn,.choice,.jump,.sctab,.hangfile,.spf,.omdotbtn,.gbpickbtn,.moodchip,.nav-btn,.tab,
  .ccday,input[type="color"],input[type="range"]::-webkit-slider-thumb{transition:none}
.chip:active,.btn:active,.choice:active,.jump:active,.sctab:active,.spf:active,.ccday:active,
  .omdotbtn:active,.gbpickbtn:active,.moodchip:active,.nav-btn:active,
  .chip:hover,.btn:hover,.choice:hover,.moodchip:hover,.ccday:hover,
  input[type="color"]:hover,input[type="color"]:active{transform:none}}
.filecab{display:grid;gap:14px;margin:4px 0 6px;padding:16px 12px 12px;border-radius:12px;background:transparent;border:1.5px solid var(--line);box-shadow:inset 0 6px 14px var(--ink)}
.hangfile{position:relative;display:block;width:100%;text-align:left;cursor:pointer;margin-top:13px;padding:14px 16px 13px;border:none;border-radius:4px 4px 12px 12px;background:var(--sand);box-shadow:0 3px 0 var(--ink),0 7px 16px var(--ink);border-top:3px solid var(--line);font:inherit;color:inherit}
.hangfile:hover{transform:translateY(-2px)}
.hangfile:active{transform:translateY(0)}
.hangfile:focus-visible{outline:3px solid var(--var(--blue));outline-offset:3px}
.hftab{position:absolute;top:-13px;padding:3px 13px 4px;border-radius:8px 8px 0 0;background:var(--sand);border:1.5px solid var(--line);border-bottom:none;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--bark);white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.hangfile.t0 .hftab{left:14px}
.hangfile.t1 .hftab{left:36%}
.hangfile.t2 .hftab{right:14px}
.hfbody{display:block}
.hfbody b{display:block;font-size:16px;margin-bottom:2px;color:var(--ink)}
.hfbody>span{display:block;font-size:14px;color:var(--bark);line-height:1.4}
.hfcount{margin-top:7px;font-size:12px;font-weight:700;color:var(--forest)}
.recsect{margin:0 0 6px;padding:12px 14px 4px;border-radius:12px;background:var(--cream);border:1.5px solid var(--line)}
.recsect h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;color:var(--bark)}
.recsect h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.recsect h3 .clearall{text-transform:none;margin-left:auto}
.rbwrap{position:relative}
.rbwrap input,.rbwrap textarea{padding-right:46px}
.rbx{position:absolute;top:7px;right:7px;width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--ink);font-size:20px;line-height:1}
.rbx::after{content:"";position:absolute;inset:-6px}
.rbx[hidden]{display:none}
.recout{width:100%;min-height:15rem;box-sizing:border-box;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;line-height:1.55}
.recdate{flex:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:700;color:var(--bark);min-width:5.4em}
.spheadgo{float:right;border:none;background:transparent;font:inherit;font-size:0.6875rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
  color:inherit;text-decoration:underline;padding:0 0 0 8px}
.spheadx{float:right;border:none;background:transparent;font:inherit;font-size:1rem;line-height:1;cursor:pointer;color:inherit;padding:0 2px 0 10px;min-width:28px;min-height:28px}
.spheadx{position:relative}
.spheadx::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.spstatus .spheadx,.spmood .spheadx{float:none;vertical-align:middle}
.spheadgo:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.arcrank{min-width:1.6em;font-family:"IBM Plex Mono","Inter",monospace;font-weight:700;color:var(--bark);text-align:right;flex:none}
.arcval{font-family:"IBM Plex Mono","Inter",monospace;font-weight:700;white-space:nowrap}
.slot.arcme{background:var(--cream);box-shadow:0 0 0 2px var(--var(--ink)) inset}
.ombar{display:block;height:4px;border-radius:4px;margin-top:3px;opacity:.85}
.omdotbtn{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);box-shadow:0 0 0 1px var(--ink);margin-right:8px;flex:none;cursor:pointer;padding:0}
.omlegend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px;color:var(--bark);margin-top:8px}
.omlegend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle}
.calchips .chip i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.gbentry{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid transparent}
.gbsticker{width:56px;height:56px;object-fit:contain;flex:none}
.stbar #stSaved{flex:0 0 96px;min-width:96px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:420px){.grid,.dow{gap:4px}
.cell{min-height:36px;min-width:0;border-radius:12px;padding:1px}
.cell .num{font-size:13px}
.cell .lb{font-size:11px}
.cell .mk{width:7px;height:7px}}
.flash{animation:flashbox 1.2s ease-out 1}
@keyframes flashbox{0%{box-shadow:0 0 0 0 rgba(180,84,62,.0)}20%{box-shadow:0 0 0 4px rgba(180,84,62,.55)}100%{box-shadow:0 0 0 0 rgba(180,84,62,0)}}
.linklike{border:none;background:none;padding:0;color:var(--forest);text-decoration:underline;font:inherit;cursor:pointer}
#qrLink{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block}
@media(max-width:640px){.jumpbar{flex-wrap:wrap;overflow:visible;border-radius:18px;position:static}
.jumpgroup{flex-wrap:wrap;border-right:none;padding-right:0;margin-right:0}
.jumpgroup .jump{padding:8px 12px;min-height:40px;font-size:13px}}
.agree input{width:24px;height:24px;margin-top:1px}
.agree{min-height:44px;align-items:center;cursor:pointer}
.agree.big{padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--cream)}
.expopt .gateconfirm{display:block;margin-top:8px;padding:8px 10px;border-radius:12px;background:transparent;color:var(--ink);font-size:13px}
.expopt.sure{border-color:var(--var(--line));background:transparent}
.drawbar{flex-wrap:wrap}
.colorlbl{display:inline-flex;flex-direction:column;align-items:center;font-size:11px;line-height:1;gap:2px;color:var(--bark)}
.colorlbl input{width:40px;height:30px}
.pickerhead .x{float:none;flex:0 0 auto}
.sheet .stickyfoot{position:sticky;bottom:0;z-index:4;padding:12px 0 2px;background:var(--paper);box-shadow:0 -10px 14px -6px var(--paper);margin-top:8px}
@media (max-width:560px){.sheet .stickyfoot:has(> button:nth-of-type(3)){position:static;box-shadow:none}}
.corknote img.corkframe{object-fit:contain;background:#fff}
.gbpick{display:flex;gap:8px;flex-wrap:wrap}
.gbpickbtn{width:56px;height:56px;border-radius:12px;border:2px solid transparent;background:var(--cream);padding:4px}
.gbpickbtn img{width:100%;height:100%;object-fit:contain}
.gbpickbtn.on{border-color:var(--forest)}
details.todo summary{cursor:pointer;list-style:none}
details.todo summary::-webkit-details-marker{display:none}
details.todo{margin-top:12px}
.goalrow{margin:8px 0}
.goalbar{height:10px;border-radius:999px;background:transparent;overflow:hidden;margin-top:4px}
.goalbar i{display:block;height:100%;background:var(--ink);border-radius:999px}
.jarwrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:560px){.jarwrap{grid-template-columns:1fr}}
.jar{padding:12px;border-radius:18px;background:var(--cream);border:1px solid var(--line)}
.jar input{min-height:40px;border-radius:12px;border:1px solid var(--line);padding:6px 10px;background:var(--paper);color:var(--ink)}
.tradecard{padding:12px 14px;border-radius:18px;background:var(--cream);border:1px solid var(--line);margin-top:10px}
.tradecard.wanted{border-style:dashed}
@media(max-width:400px){.tab .lbl{font-size:11px}
.tab{gap:2px}}
.selfcareov.night{background:#0b0f0c;color:#e9e4d4}
.selfcareov.night .scstage{filter:brightness(.55) saturate(.6)}
.selfcareov.night .scintro,.selfcareov.night .eyebrow{color:#cfc9b8}
.catpick .chips{margin-bottom:6px}
.catsubs{margin:6px 0 4px;padding:8px 10px;border-radius:12px;background:transparent}
.chip.sm{padding:6px 10px;font-size:12px;min-height:34px}
.catbrowse{margin:8px 0 12px}
.songbox{border-left:5px solid var(--var(--line))}
.gbentry.invite{border-left:4px solid var(--var(--line));padding-left:10px}
#vibeChips .chip b{margin-left:4px;font-weight:700}
.panel,.sheet,.flowcard,#lockBody,.gatewrap{overflow-x:clip}
.two>*{min-width:0}
input,select,textarea{max-width:100%;min-width:0;box-sizing:border-box}
.sthint{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:5;background:var(--ink);color:var(--ontop);padding:6px 12px;border-radius:18px;font-size:12px;white-space:normal;text-align:center;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.favbtn{width:auto;min-width:44px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;gap:4px}
.stats.mini .stat{padding:8px 10px}
.stats.mini .stat b{font-size:18px}
.credrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.cred{font-size:14px;color:var(--bark)}
.cred b{color:var(--ink);font-size:16px;margin-right:3px}
.tallybox{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--cream);border:1px solid var(--line);margin:10px 0 12px}
.tallybox>b{font-size:36px;line-height:1;color:var(--forest);min-width:44px;text-align:center}
.fromline{margin:6px 0;line-height:1.5}
.corner{position:relative;width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);margin-bottom:12px;box-shadow:var(--shadow-soft)}
.cornerdoodle{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.cornersticker{position:absolute;width:64px;height:64px;object-fit:contain;transform-origin:center}
.cornertag{position:absolute;right:10px;bottom:8px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--forest);background:var(--cream);padding:3px 9px;border-radius:999px}
.latestrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.latestnote{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:8px;text-align:left;display:flex;flex-direction:column;gap:4px;transform:rotate(-1deg);min-height:70px}
.latestnote:nth-child(2){transform:rotate(1.2deg);background:var(--cream)}
.latestnote:nth-child(3){transform:rotate(-.6deg);background:var(--cream)}
.latestnote img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.latestnote b{font-size:13px;line-height:1.25}
.ph.hasproc{position:relative}
.procshot{position:absolute;left:6px;bottom:6px;width:44px;height:44px;border-radius:8px;overflow:hidden;border:2px solid var(--line);box-shadow:0 2px 6px var(--ink)}
.procshot img{width:100%;height:100%;object-fit:cover}
.procshot span{position:absolute;left:0;right:0;bottom:0;font-size:11px;text-align:center;background:rgba(11,16,48,.45);color:var(--ontop)}
.madeline{display:block;font-size:12px;color:var(--bark);font-style:italic;margin-top:3px}
.pledge .chips .chip.on{background:var(--forest);color:var(--ontop)}
.ownwords{font-family:var(--serif);font-size:18px;line-height:1.35;margin:6px 0 10px;color:var(--ink)}
.latestguest{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0 0 12px;transform:rotate(-.6deg);box-shadow:0 2px 6px var(--ink)}
.latestguest .gtext{display:block;font-family:var(--serif);font-size:16px;line-height:1.35;margin-top:4px;color:var(--ink)}
.latestguest .gbsticker{width:44px;height:44px;flex:0 0 44px;object-fit:contain}
.gbentry.welcome{background:var(--cream);border-left:4px solid var(--var(--line));padding-left:10px}
.fromline{display:block;width:100%;text-align:left;background:none;border:none;padding:6px 0;font:inherit;color:inherit;border-bottom:1px dashed var(--line);line-height:1.5;cursor:pointer}
.shelfline{font-size:14px;margin-top:4px}
.personline{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:var(--cream);border:1px solid var(--line);margin-bottom:12px}
.personline img,.personinit{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:0 0 56px}
.personinit{display:grid;place-items:center;background:var(--forest);color:var(--ontop);font-family:var(--serif);font-size:24px}
.personline p{margin:4px 0 0;line-height:1.4}
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
input[type=time],input[type=date],input[type=number]{width:100%}
#lockPanel{overflow-x:clip}
.planout{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin:10px 0 14px}
.planrow{display:flex;gap:12px;align-items:baseline;margin:6px 0}
.planrow>b{font-family:var(--serif);font-size:20px;color:var(--forest);flex:0 0 auto;white-space:nowrap}
.planrow>span{flex:1;min-width:0}
.planrow>span{color:var(--bark)}
.studio.simple .dwtool{min-height:46px;padding:9px 13px;font-size:14px}
.studio.simple .stbar .btn.sm{min-height:44px;font-size:14px}
.studio.simple .stslider input[type="range"]{width:140px;height:28px}
.studio.simple .swatches .sw{width:28px;height:28px}
.studio .stobjbar .dwtool{min-height:42px}
.a11ybtn{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px}
.a11ybtn .axw{font-size:11px;line-height:1;font-weight:700;opacity:.85}
.chip.sm{min-height:44px;padding:9px 13px;font-size:14px}
.stickyfoot .err{font-size:14px}
.axfab,.themebtn{display:grid;place-items:center;flex:0 0 auto;width:2.75rem;height:2.75rem;min-height:0;padding:0;border-radius:50%;box-shadow:var(--shadow-soft);line-height:0}
.axfab svg,.themebtn svg{width:1.3rem;height:1.3rem}
.axfab .axw,.themebtn .axw,.themebtn #themeLbl{display:none}
.a11ybtn .axw{display:none}
@media (max-width:520px){.studio .stbar.top .btn.sm{min-height:40px;padding:8px 12px}}
.tab[aria-selected="true"]::before{background:var(--sand)}
.tab[aria-selected="true"] .lbl{color:var(--var(--red))}
.eyebrow::after{background:var(--adobe);height:2px;width:26px}
.grpline span{border-bottom-color:var(--adobe)}
.jump.on{background:var(--ink);color:var(--ontop)}
.pill.ink{background:var(--sand)}
.tallybox b.mono,.stat b{color:var(--forest)}
.planrow>b{color:var(--chile)}
.credrow .cred b{color:var(--chile)}
.shapes .v2{color:var(--adobe);opacity:.34}
.shapes .v3{color:var(--sun);opacity:.30}
.corner{box-shadow:0 10px 30px var(--ink)}
.gbentry{border-left:3px solid var(--adobe)}
.note{border-color:var(--sand)}
.onbmark{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--ontop);display:grid;place-items:center;font-family:var(--serif);font-size:30px;margin:0 auto 10px}
.sheet h3{margin:14px 0 6px}
.jumpbar{gap:6px}
.jump{background:transparent;color:var(--forest)}
.jumpgroup:nth-child(1) .jump{background:var(--sand);color:var(--ink)}
.jumpgroup:nth-child(2) .jump{background:transparent;color:var(--ink)}
.jumpgroup:nth-child(3) .jump{background:transparent;color:var(--forest)}
.jumpgroup:nth-child(1) .jumplabel{color:var(--bark)}
.jumpgroup:nth-child(2) .jumplabel{color:var(--red)}
.jumpgroup:nth-child(3) .jumplabel{color:var(--var(--bark))}
.jump.on{background:var(--ink) !important;color:var(--ontop) !important}
body.atgate #bgShapes{display:none}
body.atgate{background:var(--sand) !important}
.tindergate .tbtn:not(.primary){border-color:var(--turq);color:var(--turq);background:rgba(63,140,134,.06)}
html[data-theme="dark"] .tindergate .tbtn:not(.primary){border-color:#6FB3AC;color:#6FB3AC}
.studio .stbar.sub{padding:4px 10px;gap:6px;border-radius:0;border-top:none;font-size:12px}
.studio .stbar.top{border-radius:0}
.stzoom input[type="range"]{width:min(38vw,170px)}
.stzoom b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;min-width:44px;text-align:right;color:var(--forest)}
.stcanvas{position:absolute;left:10px;right:10px;top:104px;z-index:6;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:12px 14px;max-width:560px;margin:0 auto}
.stcanvas .chip.sm .opt{margin-left:4px}
.studio.simple #stLayersBtn,.studio.simple #stOpacity{display:none}
@media (max-width:520px){.studio .stbar.sub #stSaved{display:none}
.studio .stbar.sub .dwtool.sm{min-height:36px;padding:6px 10px;font-size:12px}}
@media (max-width:520px){.studio .stlbl{display:none}
.studio .stbar.top{gap:6px;padding:6px 8px}
.studio .stbar.top .btn.sm{padding:8px 10px}}
.studio .stbar.extra{padding:4px 10px;gap:6px;border-radius:0;border-top:none;font-size:12px}
.studio.simple .stbar.extra{display:none}
.studio .stbar.extra .dwtool.sm{min-height:36px;padding:6px 10px;font-size:12px}
.studio .stbar.extra .stslider input[type="range"]{width:min(30vw,130px)}
.planout.v2 .planrow{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.planout.v2 .planrow:last-child{border-bottom:none}
.planout.v2 .plk,.planout.v2 .goalrow .plk{font-size:12px;text-transform:uppercase;color:var(--bark);font-weight:700}
.planout.v2 .planrow>b{font-size:24px;line-height:1.1}
.planout.v2 .pls{font-size:14px;color:var(--ink);white-space:normal}
.planout.v2 .goalrow{padding:10px 0;border-bottom:1px solid var(--line)}
.planout.v2 .goalrow .row b{font-family:var(--serif);font-size:20px;color:var(--chile)}
header.bar{transition:transform .28s var(--ease),opacity .28s var(--ease)}
header.bar.tuck{transform:translateY(-130%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){header.bar{transition:none}}
.comhead h1{margin:0 0 6px}
.comcounts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 4px}
.comcount{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:transparent;font-size:13px;font-weight:700;color:var(--bark);border:none;font-family:var(--grot)}
.comcount.hot{background:var(--cream);color:var(--ink);cursor:pointer}
.spacewrap{padding:10px}
@media(min-width:640px){.spacewrap{padding:14px}}
.space{--sp-bg:var(--paper);--sp-box:var(--cream);--sp-text:var(--ink);--sp-link:var(--btn-green);--sp-bar:var(--forest);--sp-bartext:var(--ontop);--sp-line:rgba(46,74,49,.28);--sp-font:"Inter",system-ui,sans-serif;--sp-head:var(--sp-font);
  position:relative;overflow:hidden;border-radius:12px;padding:12px;color:var(--sp-text);background:var(--sp-bg);font-family:var(--sp-font);font-size:0.8438rem;line-height:1.5;border:1px solid var(--sp-line)}
html[data-theme="dark"] .space.th-taos{--sp-line:rgba(233,228,212,.18)}
.space>*{position:relative;z-index:1}
.space.p-image{background-image:var(--sp-img);background-size:cover;background-position:center}
.space a{color:var(--sp-link)}
.splink{border:none;background:none;padding:0;font:inherit;color:var(--sp-link);text-decoration:underline;cursor:pointer;text-align:left;line-height:1.5;min-height:0}
.splink b{color:inherit}
.spdim{font-style:italic}
.spcols{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:12px;position:relative;z-index:1}
.space.p-image::before{content:'';position:absolute;inset:0;background:var(--sp-bg);opacity:var(--sp-fade,0);pointer-events:none;z-index:0}
.speditbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:relative;z-index:2;
  padding:10px 12px;margin:0 0 12px;border:2px solid var(--sp-bar);border-radius:10px;background:var(--sp-box)}
.speditbar .btn{flex:0 0 auto;font-size:0.9375rem}
.spedithint{flex:1 1 150px;min-width:0;font-size:0.75rem;line-height:1.4;color:var(--sp-text)}
.spbgnow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;
  border:1px solid rgba(46,74,49,.18);border-radius:12px;padding:8px;background:var(--cream)}
.spbgnow img{width:96px;height:96px;object-fit:cover;border-radius:8px;display:block}
.spbgpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.spbgthumb{padding:0;border:2px solid rgba(46,74,49,.15);border-radius:10px;overflow:hidden;background:var(--cream);cursor:pointer;min-height:0;aspect-ratio:1}
.spbgthumb img{width:100%;height:100%;object-fit:cover;display:block}
.spbgthumb.on{border-color:var(--btn-green);box-shadow:0 0 0 3px rgba(46,74,49,.18)}
@media (max-width:560px){.spbgnow{grid-template-columns:72px minmax(0,1fr)}
.spbgnow img{width:72px;height:72px}}
@media(max-width:640px){.spcols{grid-template-columns:minmax(0,1fr)}}
.spcol{min-width:0}
.spcdel{display:inline-flex;align-items:center;min-height:44px;font-size:0.75rem;margin-top:2px}
.spname,.spmeta,.spbody,.spbox,.spstatus,.spcmt,.spctext{overflow-wrap:anywhere}
.spname{margin:0 0 8px}
.spn{margin:0;font-family:var(--sp-head);font-size:1.625rem;font-weight:800;line-height:1.1;color:var(--sp-text);letter-spacing:0;text-transform:none;word-break:break-word}
.spstatus{font-size:0.7812rem;font-style:italic;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sppic{width:100%;max-width:290px;aspect-ratio:1;border:1px solid var(--sp-line);background:var(--sp-box);display:grid;place-items:center;overflow:hidden;font-size:4rem;font-weight:800;color:var(--sp-link);margin-bottom:8px}
.sppic img{width:100%;height:100%;object-fit:cover;display:block}
.pointtip{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:200;background:var(--ink);color:var(--ontop);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;text-align:center;font-size:14px;min-height:44px;justify-content:center}
.pointtip span{font-size:12px;opacity:.8}
html.pointing, html.pointing *{cursor:crosshair}
html.pointing .tabbar{opacity:.35}
.qe{border:none;background:none;padding:2px 0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-bottom:1px dotted currentColor;min-height:44px}
.spn .qe{border-bottom-width:2px}
.spmeta .qe,.spstatus .qe{min-height:34px;position:relative}
.spmeta .qe::after,.spstatus .qe::after{content:"";position:absolute;inset:-5px -8px}
.qe:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.qeadd{font-style:italic}
@media (hover:hover){.qe:hover{opacity:.78}}
.quickedit .field{margin-bottom:4px}
.quickedit textarea,.quickedit input[type=text]{font-size:16px}
button.sppic{position:relative;padding:0;font:inherit;color:var(--sp-link);cursor:pointer;-webkit-appearance:none;appearance:none}
button.sppic .ppcue{position:absolute;left:0;right:0;bottom:0;padding:7px 8px;font-family:"Inter",sans-serif;
  font-size:0.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(0,0,0,.62);color:#fff;text-align:center}
button.sppic:focus-visible{outline:2px solid var(--sp-link);outline-offset:2px}
.ppnow{width:100%;max-width:240px;aspect-ratio:1;margin:0 auto;border-radius:18px;overflow:hidden;border:1.5px solid var(--line);background:var(--cream);display:grid;place-items:center;font-size:56px;font-weight:700;color:var(--btn-var(--bark))}
.ppnow img{width:100%;height:100%;object-fit:cover;display:block}
.ppgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:8px}
.ppopt{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:none;aspect-ratio:1;min-height:44px;cursor:pointer}
.ppopt img{width:100%;height:100%;object-fit:cover;display:block}
.ppopt.on{border-color:var(--var(--line))}
.spmeta{font-size:0.7812rem;margin-bottom:10px}
.spmeta>div{margin:2px 0}
.spmood b{font-weight:700}
.sponline{display:inline-flex;align-items:center;gap:6px;font-size:0.6875rem;font-weight:800;letter-spacing:.06em;color:#FBF9F1;background:#15662C;padding:3px 9px;border-radius:99px;margin-top:4px}
.sponline::before{content:"";width:8px;height:8px;border-radius:50%;background:#2ecc40;box-shadow:0 0 0 0 rgba(46,204,64,.6);animation:sponline 1.6s infinite}
@keyframes sponline{70%{box-shadow:0 0 0 7px rgba(46,204,64,0)}100%{box-shadow:0 0 0 0 rgba(46,204,64,0)}}
.spedit{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:0.7812rem;margin-bottom:12px}
.spbox{background:var(--sp-box);border:1px solid var(--sp-line);margin-bottom:12px;color:var(--sp-text);overflow:hidden}
.space.p-image .spbox,.space.p-image .spnet,.space.p-image .sppic{background:color-mix(in srgb,var(--sp-box) calc(var(--sp-boxa,1) * 100%),transparent)}
.space.p-image .sptable th{background:color-mix(in srgb,color-mix(in srgb,var(--sp-bar) 22%,var(--sp-box)) calc(var(--sp-boxa,1) * 100%),transparent)}
.space.p-image .spbox{backdrop-filter:blur(1.5px)}
.sphead{background:var(--sp-bar);color:var(--sp-bartext);font-family:var(--sp-head);font-weight:700;font-size:0.8438rem;padding:5px 9px}
.spbody{padding:8px 10px}
.spbody p{margin:0 0 8px}
.spbody>:last-child{margin-bottom:0}
.spsub{margin:6px 0 2px;font-size:0.75rem;font-weight:800;color:var(--sp-link);text-transform:none;letter-spacing:0}
.spcontact{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:0.7812rem}
.sptable{width:100%;border-collapse:collapse;font-size:0.7812rem}
.sptable th{width:36%;text-align:left;vertical-align:top;padding:5px 8px;background:color-mix(in srgb,var(--sp-bar) 22%,var(--sp-box));color:var(--sp-text);font-weight:700;border-bottom:1px solid var(--sp-box)}
.sptable td{padding:5px 8px;vertical-align:top;border-bottom:1px solid color-mix(in srgb,var(--sp-line) 35%,transparent);word-break:break-word}
.sptable tr:last-child th,.sptable tr:last-child td{border-bottom:none}
.spnet{border:1px solid var(--sp-line);background:var(--sp-box);padding:9px 12px;font-size:0.8438rem;font-weight:700;margin-bottom:12px;text-align:center}
.sptop8{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.spf{border:none;background:none;padding:0;font:inherit;color:var(--sp-link);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.spfimg{width:100%;aspect-ratio:1;border:1px solid var(--sp-line);background:color-mix(in srgb,var(--sp-bar) 18%,var(--sp-box));display:grid;place-items:center;font-weight:800;font-size:1.375rem;overflow:hidden}
.spfimg img{width:100%;height:100%;object-fit:cover;display:block}
.spfname{font-size:0.7188rem;text-decoration:underline;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spcmt{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;border-top:1px solid var(--sp-line);padding:8px 0}
.spcwho{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:0.7188rem;min-width:0;word-break:break-word}
.spcimg{width:56px;height:56px;border:1px solid var(--sp-line);display:grid;place-items:center;font-weight:800;font-size:1.375rem;background:color-mix(in srgb,var(--sp-bar) 18%,var(--sp-box));color:var(--sp-link)}
.spctext{min-width:0;font-size:0.8125rem}
.spctext p{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}
.spcdate{font-size:0.6875rem}
.spcsticker{width:64px;height:64px;object-fit:contain;display:block;margin:4px 0}
.spnew{color:#ff2e2e;font-weight:800}
.fx-blink .spnew{animation:spblink 1s steps(2,start) infinite}
@keyframes spblink{to{visibility:hidden}}
.spsign textarea{width:100%;min-height:70px;margin-top:8px;font:inherit;padding:8px;border:1px solid var(--sp-line);background:var(--sp-box);color:var(--sp-text);border-radius:4px;box-sizing:border-box}
.spfoot{text-align:center;font-size:0.7812rem;margin-top:4px}
.sppost{font-weight:700}
.space.f-plain{--sp-font:Verdana,Tahoma,Geneva,sans-serif;font-size:0.7812rem}
.space.f-soft{--sp-font:"Inter",system-ui,sans-serif;--sp-head:"Fraunces",Georgia,serif}
.space.f-comic{--sp-font:"Comic Neue","Comic Sans MS","Chalkboard SE",cursive;font-size:0.9062rem}
.space.f-pixel{--sp-font:"VT323","Courier New",monospace;font-size:1.125rem;line-height:1.3}
.space.f-pixel .spn{font-size:2.125rem}
.space.f-round{--sp-font:"Nunito","Trebuchet MS","Segoe UI",sans-serif;font-size:0.875rem}
.space.f-fancy{--sp-font:"Fraunces",Georgia,serif;font-size:0.9062rem}
.space.f-type{--sp-font:"IBM Plex Mono","Courier New",monospace;font-size:0.8125rem}
.space.f-chrome{--sp-font:"Nunito","Trebuchet MS",sans-serif;--sp-head:"Bungee","Arial Black",sans-serif;font-size:0.875rem}
.space.f-chrome .sphead{font-weight:400;letter-spacing:.02em}
.fx-glitter .spn{background:linear-gradient(90deg,var(--sp-text) 0%,var(--sp-link) 14%,color-mix(in srgb,var(--sp-link) 30%,#fff) 24%,var(--sp-bar) 38%,var(--sp-text) 50%,color-mix(in srgb,var(--sp-bar) 35%,#fff) 62%,var(--sp-link) 76%,var(--sp-text) 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:spglit 3.2s linear infinite}
@keyframes spglit{to{background-position:300% 0}}
.fx-rainbow .spn{background:linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#00e05a,#00c8ff,#a44dff,#ff004c);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sprb 4s linear infinite}
@keyframes sprb{to{background-position:200% 0}}
.fx-marquee .spstatus{text-overflow:clip}
.fx-marquee .spstatus span{display:inline-block;padding-left:100%;animation:spmq 14s linear infinite}
@keyframes spmq{to{transform:translateX(-100%)}}
.fx-scan::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(11,16,48,.45)}
.fx-gloss .sphead{background-color:var(--sp-bar);background-image:linear-gradient(180deg,color-mix(in srgb,var(--sp-bar) 45%,#fff) 0%,var(--sp-bar) 22%,var(--sp-bar) 80%,color-mix(in srgb,var(--sp-bar) 78%,#000) 100%);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.fx-gloss .spbox,.fx-gloss .spnet,.fx-gloss .sppic{border-radius:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 10px rgba(0,60,120,.16)}
.fx-chrome .sphead{background:linear-gradient(180deg,#f7f8fb 0%,#c9ccd6 46%,#8f93a0 52%,#dfe1e8 100%);color:#15151c;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.fx-chrome .spn{background:linear-gradient(180deg,#fdfdff 0%,#b9bdc9 45%,#6f7383 52%,#e6e8ef 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.fx-rainbowbars .sphead{background:linear-gradient(90deg,#ff3d3d,#ffb400,#ffe600,#3ddc84,#3d8bff,#b04dff);color:#111;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.spk{position:absolute;z-index:6;pointer-events:none;font-size:0.8125rem;line-height:1;color:var(--sp-link);animation:spk .9s ease-out forwards;text-shadow:0 0 4px #fff}
@keyframes spk{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(22px) scale(.4) rotate(40deg)}}
.p-stars::before,.p-hearts::before,.p-checker::before,.p-leopard::before,.p-stripes::before,.p-bubbles::before,.p-grid::before,.p-brokenhearts::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--sp-line);opacity:.2;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.p-stars::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M20 6l3.5 8 8.5.8-6.5 5.7 2 8.5-7.5-4.6-7.5 4.6 2-8.5L8 14.8l8.5-.8z'/%3E%3Cpath d='M66 40l2.6 6 6.4.6-4.9 4.3 1.5 6.4-5.6-3.5-5.6 3.5 1.5-6.4-4.9-4.3 6.4-.6z'/%3E%3Cpath d='M30 70l1.8 4.2 4.5.4-3.4 3 1 4.5-3.9-2.4-3.9 2.4 1-4.5-3.4-3 4.5-.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M20 6l3.5 8 8.5.8-6.5 5.7 2 8.5-7.5-4.6-7.5 4.6 2-8.5L8 14.8l8.5-.8z'/%3E%3Cpath d='M66 40l2.6 6 6.4.6-4.9 4.3 1.5 6.4-5.6-3.5-5.6 3.5 1.5-6.4-4.9-4.3 6.4-.6z'/%3E%3Cpath d='M30 70l1.8 4.2 4.5.4-3.4 3 1 4.5-3.9-2.4-3.9 2.4 1-4.5-3.4-3 4.5-.4z'/%3E%3C/svg%3E");-webkit-mask-size:96px 96px;mask-size:96px 96px;opacity:.3}
.p-hearts::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M24 42C12 32 6 25 6 17a9 9 0 0 1 18-3 9 9 0 0 1 18 3c0 8-6 15-18 25z'/%3E%3Cpath d='M70 84c-8-6.5-12-11-12-16a6 6 0 0 1 12-2 6 6 0 0 1 12 2c0 5-4 9.5-12 16z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M24 42C12 32 6 25 6 17a9 9 0 0 1 18-3 9 9 0 0 1 18 3c0 8-6 15-18 25z'/%3E%3Cpath d='M70 84c-8-6.5-12-11-12-16a6 6 0 0 1 12-2 6 6 0 0 1 12 2c0 5-4 9.5-12 16z'/%3E%3C/svg%3E");-webkit-mask-size:96px 96px;mask-size:96px 96px;opacity:.28}
.p-brokenhearts::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath fill-rule='evenodd' d='M30 50C15 38 8 30 8 20a11 11 0 0 1 22-4 11 11 0 0 1 22 4c0 10-7 18-22 30zM30 18l4 8-5 6 5 8-4 10-1-10 4-8-5-6z'/%3E%3Cpath fill-rule='evenodd' d='M72 88c-9-7-13-12-13-18a7 7 0 0 1 13-2 7 7 0 0 1 13 2c0 6-4 11-13 18zM72 69l2.4 5-3 3.5 3 5-2.4 6-.6-6 2.4-5-3-3.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath fill-rule='evenodd' d='M30 50C15 38 8 30 8 20a11 11 0 0 1 22-4 11 11 0 0 1 22 4c0 10-7 18-22 30zM30 18l4 8-5 6 5 8-4 10-1-10 4-8-5-6z'/%3E%3Cpath fill-rule='evenodd' d='M72 88c-9-7-13-12-13-18a7 7 0 0 1 13-2 7 7 0 0 1 13 2c0 6-4 11-13 18zM72 69l2.4 5-3 3.5 3 5-2.4 6-.6-6 2.4-5-3-3.5z'/%3E%3C/svg%3E");-webkit-mask-size:96px 96px;mask-size:96px 96px;opacity:.3}
.p-checker::before{-webkit-mask-image:linear-gradient(45deg,#000 25%,transparent 25% 75%,#000 75%),linear-gradient(45deg,#000 25%,transparent 25% 75%,#000 75%);mask-image:linear-gradient(45deg,#000 25%,transparent 25% 75%,#000 75%),linear-gradient(45deg,#000 25%,transparent 25% 75%,#000 75%);-webkit-mask-size:28px 28px;mask-size:28px 28px;-webkit-mask-position:0 0,14px 14px;mask-position:0 0,14px 14px;opacity:.22}
.p-stripes::before{-webkit-mask-image:repeating-linear-gradient(45deg,#000 0 14px,transparent 14px 32px);mask-image:repeating-linear-gradient(45deg,#000 0 14px,transparent 14px 32px);opacity:.14}
.p-grid::before{-webkit-mask-image:linear-gradient(#000 1px,transparent 1px),linear-gradient(90deg,#000 1px,transparent 1px);mask-image:linear-gradient(#000 1px,transparent 1px),linear-gradient(90deg,#000 1px,transparent 1px);-webkit-mask-size:24px 24px;mask-size:24px 24px;opacity:.35}
.p-bubbles::before{-webkit-mask-image:radial-gradient(circle at 30% 30%,transparent 0 9px,#000 10px 12px,transparent 13px),radial-gradient(circle at 72% 66%,transparent 0 5px,#000 6px 7.5px,transparent 8.5px),radial-gradient(circle at 80% 18%,transparent 0 2.5px,#000 3px 4px,transparent 5px);mask-image:radial-gradient(circle at 30% 30%,transparent 0 9px,#000 10px 12px,transparent 13px),radial-gradient(circle at 72% 66%,transparent 0 5px,#000 6px 7.5px,transparent 8.5px),radial-gradient(circle at 80% 18%,transparent 0 2.5px,#000 3px 4px,transparent 5px);-webkit-mask-size:84px 84px;mask-size:84px 84px;opacity:.4}
.p-leopard::before{-webkit-mask-image:radial-gradient(ellipse 15px 11px at 22% 26%,transparent 0 52%,#000 56% 78%,transparent 82%),radial-gradient(ellipse 11px 14px at 66% 62%,transparent 0 52%,#000 56% 78%,transparent 82%),radial-gradient(ellipse 9px 7px at 84% 16%,#000 0 70%,transparent 74%),radial-gradient(ellipse 8px 9px at 36% 82%,#000 0 70%,transparent 74%),radial-gradient(ellipse 6px 5px at 8% 70%,#000 0 70%,transparent 74%);mask-image:radial-gradient(ellipse 15px 11px at 22% 26%,transparent 0 52%,#000 56% 78%,transparent 82%),radial-gradient(ellipse 11px 14px at 66% 62%,transparent 0 52%,#000 56% 78%,transparent 82%),radial-gradient(ellipse 9px 7px at 84% 16%,#000 0 70%,transparent 74%),radial-gradient(ellipse 8px 9px at 36% 82%,#000 0 70%,transparent 74%),radial-gradient(ellipse 6px 5px at 8% 70%,#000 0 70%,transparent 74%);-webkit-mask-size:92px 92px;mask-size:92px 92px;opacity:.42}
.p-holo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--sand);animation:spholo 12s ease infinite;opacity:.85}
@keyframes spholo{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.p-glitter::before,.p-glitter::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;animation:sptwinkle 2.6s ease-in-out infinite}
.p-glitter::after{animation-delay:1.3s}
@keyframes sptwinkle{0%,100%{opacity:.25}50%{opacity:.95}}
.p-clouds::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--cream)}
@media (prefers-reduced-motion: reduce){.fx-glitter .spn,.fx-rainbow .spn,.fx-marquee .spstatus span,.fx-blink .spnew,.sponline::before,.p-holo::before,.p-glitter::before,.p-glitter::after{animation:none}
.fx-marquee .spstatus span{padding-left:0}
.spk{display:none}}
.spedmodal .sheet{max-width:720px}
.spthemes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.spthemecard{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border:2px solid rgba(46,74,49,.15);border-radius:14px;background:var(--cream);font:inherit;text-align:left;cursor:pointer;color:var(--ink);min-height:0}
.spthemecard.on{border-color:var(--forest);box-shadow:0 0 0 2px rgba(37,65,42,.15)}
.spthemecard b{font-size:0.875rem}
.spthemecard .hint{margin:0;font-size:0.75rem;line-height:1.35}
.spnew{border-style:dashed}
.spnew .spprev{display:grid;place-items:center;background:var(--cream);border-style:dashed}
.spplus{font:700 30px/1 "Inter",sans-serif;color:var(--ink)}
.spprev{position:relative;overflow:hidden;display:block;height:64px;border-radius:8px;background:var(--c-bg,var(--paper));--sp-line:var(--c-bar,#888);--sp-link:var(--c-bar,#888);--sp-bar:var(--c-bar,#888);border:1px solid rgba(0,0,0,.08)}
.spprev>*{position:relative;z-index:1}
.sppbar{display:block;margin:6px 6px 4px;padding:2px 6px;background:var(--c-bar);color:var(--c-bartext,#fff);font-size:0.6875rem;font-weight:700;border-radius:2px;white-space:nowrap;overflow:hidden}
.sppbox{display:block;margin:0 6px 4px;height:12px;background:var(--c-box,#fff);border:1px solid var(--c-bar);opacity:.9}
.sppbox.short{width:60%}
.sppats{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.sppat{display:flex;flex-direction:column;gap:4px;align-items:center;border:2px solid rgba(46,74,49,.15);border-radius:12px;background:var(--cream);padding:6px;font:inherit;font-size:0.75rem;font-weight:600;color:var(--ink);cursor:pointer;min-height:0}
.sppat .spprev{width:100%;height:44px}
.sppat.on{border-color:var(--forest)}
.lookstrip{display:block;height:6px;border-radius:999px;margin-bottom:6px}
.cardmood{display:block;font-size:12px;color:var(--bark);margin-top:3px;font-style:italic}
#view-home{position:relative}
.modal{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.spaceov,.stwrap{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.spaceov .drawbar{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}
@media (display-mode: standalone){body{overscroll-behavior:none}
.wrap{padding-top:max(10px,env(safe-area-inset-top))}
.installcard{display:none !important}}
@media (display-mode: fullscreen){.installcard{display:none !important}}
.installcard{border-left:5px solid var(--adobe);background:transparent}
.installcard ol{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:1.7;color:var(--ink)}
.installcard li{margin-bottom:2px}
.shareico{display:inline-grid;place-items:center;width:22px;height:22px;vertical-align:-6px;border-radius:8px;background:var(--ink);color:var(--ontop);font-size:13px;line-height:1}
.steps{margin:6px 0 14px;padding-left:20px;font-size:15px;line-height:1.75}
.steps li{margin-bottom:4px}
html.a11y-t1{font-size:118%}
html.a11y-t2{font-size:135%}
html.a11y-t3{font-size:152%}
html.a11y-t2 .btn,html.a11y-t3 .btn{min-height:60px;padding:16px 26px}
html.a11y-t2 .btn.sm,html.a11y-t3 .btn.sm{min-height:52px}
html.a11y-t2 .chip,html.a11y-t3 .chip{min-height:54px}
html.a11y-t2 h1,html.a11y-t3 h1{font-size:clamp(1.75rem,7.4vw,2.5rem)}
html.a11y-t2 .tab .lbl,html.a11y-t3 .tab .lbl{font-size:11px}
html.a11y-simple.a11y-t2 .tab .lbl,html.a11y-simple.a11y-t3 .tab .lbl{font-size:13px}
html.a11y-t3 .mark #brand{max-width:32vw}
html.a11y-simple .tabbar{padding:10px 8px}
html.a11y-simple .tab{padding-left:4px;padding-right:4px}
html.a11y-simple .tab .lbl{font-size:12px}
html.a11y-simple .shapes{opacity:.35}
html.a11y-t2 .mark #brand,html.a11y-t3 .mark #brand{max-width:28vw;font-size:16px}
html.a11y-t2 header.bar,html.a11y-t3 header.bar{gap:6px;padding:10px 10px}
html.a11y-t2 .mark .d,html.a11y-t2 .mark .d2,html.a11y-t2 .mark .d3,
html.a11y-t3 .mark .d,html.a11y-t3 .mark .d2,html.a11y-t3 .mark .d3{display:none}
.space .spstatus{overflow:hidden}
.fx-marquee .spstatus{position:relative;width:100%}
.fx-marquee .spstatus span{white-space:nowrap;will-change:transform}
.chip.on .opt{color:inherit;opacity:.75;display:inline;margin-left:4px}
.chip .opt{display:inline;margin-left:4px;font-weight:700}
.sheet textarea,.spsign textarea{line-height:1.5;padding:11px 12px 13px}
[data-spfont="plain"]{font-family:var(--grot)}
[data-spfont="soft"]{font-family:var(--serif)}
[data-spfont="comic"]{font-family:var(--grot)}
[data-spfont="pixel"]{font-family:"VT323","Courier New",monospace;font-size:18px}
[data-spfont="round"]{font-family:var(--grot)}
[data-spfont="fancy"]{font-family:var(--serif)}
[data-spfont="type"]{font-family:"IBM Plex Mono","Courier New",monospace}
[data-spfont="chrome"]{font-family:var(--grot);font-size:13px}
.spedmodal .chips.scroller{position:relative;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
.space .sppic{aspect-ratio:4/3;font-size:3rem}
.space .btn{background:var(--sp-bar);color:var(--sp-bartext);box-shadow:none}
.space .btn.ghost{background:var(--sp-box);color:var(--sp-link);border:1.5px solid var(--sp-line)}
.space .ratingpill,.space .verifiedpill,.space .collabpill{background:var(--sp-box);color:var(--sp-link);border:1px solid var(--sp-line)}
.space .gbpickbtn{background:var(--sp-box);border-color:var(--sp-line)}
.space .gbpickbtn.on{border-color:var(--sp-link)}
.space .hint,.space .opt{color:var(--sp-text);opacity:1}
.space .note{background:var(--sp-box);border-left-color:var(--sp-link);color:var(--sp-text)}
.space>*{--ink:var(--sp-text);--forest:var(--sp-text);--bark:var(--sp-text);--cream:var(--sp-box);--paper:var(--sp-box)}
:root .space .bubble,:root .space .latestguest,:root .space .linkrow{background:var(--sp-box);color:var(--sp-text);border-color:var(--sp-line)}
:root .space .bubble b,:root .space .latestguest b,:root .space .latestguest .gtext,:root .space .latestguest .hint{color:var(--sp-text)}
:root .space .linkrow b,:root .space .linklike,:root .space .cred b,:root .space .credrow .cred b{color:var(--sp-link)}
:root .space .emotray summary,:root .space .emobtn{background:var(--sp-box);color:var(--sp-text);border-color:var(--sp-line)}
:root .space .emotray[open] summary{background:var(--sp-bar);color:var(--sp-bartext);border-color:var(--sp-bar)}
:root .space .btn{background:var(--sp-bar);color:var(--sp-bartext);border-color:var(--sp-bar)}
:root .space .btn.ghost{background:var(--sp-box);color:var(--sp-link);border-color:var(--sp-line)}
:root .space .chip{background:var(--sp-box);color:var(--sp-text);border-color:var(--sp-line)}
:root .space .chip.on{background:var(--sp-bar);color:var(--sp-bartext);border-color:var(--sp-bar)}
:root .space .ratingpill,:root .space .verifiedpill,:root .space .collabpill{background:var(--sp-box);color:var(--sp-link);border-color:var(--sp-line)}
:root .space .gbpickbtn{background:var(--sp-box);color:var(--sp-text);border-color:var(--sp-line)}
:root .space .gbentry{border-color:var(--sp-line)}
:root .space .note.bad,:root .space .note.warn,:root .space .note.good{background:var(--sp-box);color:var(--sp-text);border-color:var(--sp-link)}
:root .space input,:root .space textarea,:root .space select{background:var(--sp-box);color:var(--sp-text);border-color:var(--sp-line)}
:root .space .workplay{background:var(--sp-bar);color:var(--sp-bartext)}
.spacewrap{background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.spacewrap .space{border-radius:18px}
.pagewall{text-align:center}
.wallface{width:5.5rem;height:5.5rem;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:36px;color:var(--ontop);background:var(--ink);box-shadow:var(--shadow-soft)}
.pagewall .row{justify-content:center}
.handlealts{margin-top:8px}
.handlealts .chips{gap:6px}
.infobody h3{margin:14px 0 4px;font-size:15px}
.infobody p{margin:0 0 8px;line-height:1.55}
.infobody p:last-child{margin-bottom:4px}
.sped input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1.75rem;background:transparent;margin:4px 0 0}
.sped input[type=range]::-webkit-slider-runnable-track{height:0.375rem;border-radius:999px;background:color-mix(in srgb,var(--forest) 22%,var(--cream))}
.sped input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.5rem;height:1.5rem;margin-top:-0.5625rem;border-radius:50%;background:var(--btn-green);border:2px solid var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.sped input[type=range]::-moz-range-track{height:0.375rem;border-radius:999px;background:color-mix(in srgb,var(--forest) 22%,var(--cream))}
.sped input[type=range]::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--btn-green);border:2px solid var(--paper);cursor:pointer}
.sped input[type=range]:focus-visible{outline:2px solid var(--btn-green);outline-offset:3px}
#spedBody{padding-bottom:0.5rem}
.runtotal{margin:2px 0 14px;padding:12px 14px;border-radius:12px;background:var(--ink);border:1px solid color-mix(in srgb,var(--btn-var(--line)) 26%,transparent)}
.runtotal b{display:block;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.runtotal span{display:block;margin-top:4px;font-size:13px;line-height:1.45;opacity:.85}
.standline{display:block;width:100%;text-align:left;border:none;background:none;padding:0;margin:0 0 2px;font:inherit;color:inherit;cursor:pointer;min-height:0}
.standline b{font-size:16px}
.standline span{opacity:.75;font-size:13px}
.standline:hover b,.standline:focus-visible b{text-decoration:underline}
.lovegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:4px}
.lovecard{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;
  padding:8px;border:1px solid rgba(46,74,49,.16);border-radius:12px;background:var(--cream)}
.lovecard img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px}
.lovecard b{font-variant-numeric:tabular-nums;font-size:0.875rem}
.lovecard .hint{margin:0;font-size:0.6875rem;overflow-wrap:anywhere}
.lovecard .btn{width:100%;font-size:0.75rem;padding:6px 8px;min-height:2.25rem}
.lovecard .btn[disabled]{opacity:.65}
html.a11y-t1 .ststage,html.a11y-t2 .ststage,html.a11y-t3 .ststage{min-height:44vh}
html.a11y-t2 .stcanvas,html.a11y-t3 .stcanvas{top:124px}
html.a11y-t2 .stcanvas .btn,html.a11y-t3 .stcanvas .btn,
html.a11y-t2 .stcanvas .btn.sm,html.a11y-t3 .stcanvas .btn.sm{min-height:2.75rem;padding:8px 12px}
html.a11y-t2 .stcanvas .chip,html.a11y-t3 .stcanvas .chip{min-height:2.75rem}
.tradecard h3,.tradecard .tradetitle,.tradetitle{text-transform:none}
.choice:has(.cgly){display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:baseline}
.choice:has(.cgly) .cgly{grid-row:1/span 2;align-self:center;font-size:20px;line-height:1;width:1.5rem;text-align:center;color:currentColor;opacity:.75}
.choice:has(.cgly) > b,.choice:has(.cgly) > span:not(.cgly){grid-column:2}
.choice .cgly{margin-right:10px;color:currentColor;opacity:.75}
.choice .cgly-aa{font-family:var(--serif);font-size:16px;font-weight:700}
.choice .cgly-svg{display:inline-flex;align-items:center;justify-content:center}
.choice .cgly-svg svg{width:1.375rem;height:1.375rem;stroke:currentColor}
.corknoimg{color:#2B2A26}
.chip.on .opt,.chip.on .hint{color:inherit;opacity:.82}
.dangertext{color:var(--red)}
.miniplayer{position:fixed;right:12px;z-index:185;display:flex;flex-direction:column;align-items:flex-end;gap:8px;bottom:calc(var(--tabbar-h, 78px) + env(safe-area-inset-bottom, 0px) + 22px)}
.mpbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);border-radius:999px;padding:9px 15px;min-height:2.75rem;font:inherit;font-weight:700;font-size:14px;box-shadow:var(--shadow);cursor:pointer}
.mpbtn .mpico{font-size:16px;line-height:1}
.miniplayer.open .mpbtn{background:var(--ink);color:var(--ontop);border-color:var(--btn-var(--line))}
.mppanel{width:min(19rem,calc(100vw - 24px));background:var(--cream);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:12px 14px}
.mprow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mprow b{flex:1;font-family:var(--serif);font-size:15px}
.mprow input{flex:1;min-width:0;font:inherit;font-size:14px;padding:9px 11px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}
.mpstage:not(:empty){margin-bottom:10px}
.mpstage audio{width:100%}
@media print{.miniplayer{display:none}}
body:has(#scOv) .miniplayer:not(.open),body:has(.drawov) .miniplayer:not(.open){display:none}
body:has(#modalMount .modal) .miniplayer:not(.open),body.inflow .miniplayer:not(.open),body.insetup .miniplayer:not(.open){display:none}
.mpaway{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px}
.lineaskbtn{margin:2px 0 6px 40px;font-size:13px}
.lineask{margin:2px 0 8px 40px;font-size:13px;color:var(--ink)}
.linesbox{margin:6px 0;border:1.5px solid var(--line);border-radius:18px;padding:4px 12px}
.linesbox summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer}
.linesbox summary .hint{margin:0}
.lineno{font:600 0.75rem/1 var(--grot);color:var(--bark)}
.ccday.marked{outline:3px solid var(--sun);outline-offset:1px}
.tradekinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tradekind{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 12px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.tradekind b{font-size:15px}
.tradekind span{font-size:13px;color:var(--bark)}
.tradekind.on{border-color:var(--btn-var(--line));background:transparent}
.workq{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);min-height:48px;margin:0 0 6px}
.workfams{display:grid;gap:8px}
.workfam{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 14px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.workfam b{flex:1}
.workfam span{font-size:13px;color:var(--bark)}
.workfam i{font-style:normal;font-size:20px;color:var(--bark)}
.workown{border-style:dashed}
.sigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:16px 0 0}
.sigbox{padding:12px 14px;border-radius:18px;border:1.5px dashed var(--line);background:var(--paper)}
.sigbox.on{border-style:solid;border-color:var(--btn-var(--line))}
.sigwho{font:600 0.75rem/1.2 var(--grot);text-transform:uppercase;color:var(--bark);margin-bottom:6px}
.sigline{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink);border-bottom:1.5px solid var(--line);padding-bottom:2px;margin-bottom:6px}
.amendbox{display:grid;gap:6px}
.amendtext{white-space:pre-wrap;padding:8px 10px;border-radius:12px;background:var(--cream);color:var(--ink);font-size:14px}
.amendok{font-weight:700;font-size:13px}
.cnfolder{margin-top:16px;border-top:1.5px solid var(--line);padding-top:10px}
.cnfolder summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;gap:8px}
.cnn{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--paper);border:1.5px solid var(--line);font-size:13px}
.webwrap{position:relative;width:100%;aspect-ratio:1/1.05;max-height:640px;border-radius:22px;background:var(--cream);border:1.5px solid rgba(70,48,28,.12);overflow:hidden}
#webCv{width:100%;height:100%;display:block;cursor:pointer}
.weblegend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:0.8125rem;color:var(--bark);margin:0 0 10px}
.weblegend i{display:inline-block;width:24px;height:0;border-top:3px solid;margin-right:6px;vertical-align:middle}
.weblegend .wl-collab{border-top-color:var(--sun)}
.weblegend .wl-insp{border-top-color:#B0457E;border-top-style:dashed}
.weblegend .wl-idea{border-top-color:#4F7FB0}
html[data-theme="dark"] .weblegend .wl-insp{border-top-color:#E58BC0}
html[data-theme="dark"] .weblegend .wl-idea{border-top-color:#8DB7E0}
.webcard{margin-top:12px;padding:12px 14px;border-radius:16px;border:1.5px solid rgba(70,48,28,.14);background:var(--cream)}
.webcard .flabel{margin:10px 0 6px}
.webadd{flex-wrap:wrap;margin-top:8px}
.webadd input,.webadd select{flex:1 1 150px;min-width:0;font:inherit;padding:10px 12px;border-radius:12px;border:1.5px solid rgba(46,74,49,.2);background:var(--paper);color:var(--ink);min-height:44px}
.webtag{display:inline-flex;align-items:center;gap:4px;padding-right:4px}
.webx{min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;font-size:1.125rem;cursor:pointer}
html[data-theme="dark"] .webwrap,html[data-theme="dark"] .webcard{border-color:rgba(233,228,212,.14)}
html[data-theme="dark"] .webadd input,html[data-theme="dark"] .webadd select{border-color:rgba(233,228,212,.22)}
.emotray{margin:6px 0 0}
.emotray summary{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;cursor:pointer;list-style:none;color:var(--ink)}
.emotray summary::-webkit-details-marker{display:none}
.emotray[open] summary{background:var(--ink);color:var(--ontop);border-color:var(--btn-var(--line))}
.emogrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.emobtn{min-height:44px;min-width:44px;padding:0 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:15px;cursor:pointer;white-space:nowrap}
.mppanel{position:relative}
.mpvid{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:var(--ink)}
.miniplayer.sized .mppanel{display:flex;flex-direction:column;max-width:calc(100vw - 12px);max-height:calc(100vh - 24px);overflow:hidden}
.miniplayer.sized .mpstage{flex:1 1 auto;min-height:80px;display:flex;flex-direction:column}
.miniplayer.sized .mpstage>*{flex:1 1 auto;min-height:0}
.miniplayer.sized .mpvid{height:100%;aspect-ratio:auto;object-fit:contain}
.miniplayer.sized .mphint{display:none}
.miniplayer.resizing iframe,.miniplayer.resizing video{pointer-events:none}
.mpctl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.mpnow{font-size:13px;color:var(--bark);white-space:nowrap}
.mprow b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mplink{flex-wrap:wrap}
.mplink input{flex:1 1 140px}
.mpunsize{white-space:nowrap;padding-inline:12px}
.mpup{margin:0 0 4px}
.mpup summary{cursor:pointer;font-weight:700;font-size:14px;min-height:44px;display:flex;align-items:center}
.mpqueue{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:9.5rem;overflow:auto}
.mpqueue li{display:flex;align-items:center;gap:6px}
.mpq{flex:1;min-width:0;text-align:left;font:inherit;font-size:14px;padding:10px;border-radius:12px;min-height:44px;border:1px solid var(--line);background:var(--paper);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.mpqueue li.on .mpq{border-color:var(--btn-var(--line));font-weight:700}
.mprm{flex:0 0 44px;height:44px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:20px;cursor:pointer}
.mpgrip{position:absolute;right:4px;bottom:4px;width:18px;height:18px;cursor:nwse-resize;touch-action:none}
.mpgrip::after{content:"";position:absolute;inset:-13px}
.breathet{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
.breathet b{font-family:"Fraunces",Georgia,serif;font-size:1.0625rem}
.breathet span{font-variant-numeric:tabular-nums;font-size:1.75rem;font-weight:600;opacity:.85}
.breathec{transition:none}
#ownerBody.rack > section.panel[id^="s-"]{display:none}
#ownerBody.rack > section.panel[id^="s-"].rackon{display:block;animation:rackin .26s var(--ease) both}
#ownerBody.rack > .grpline{display:none}
@keyframes rackin{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.rackhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rackpos{font-variant-numeric:tabular-nums;font-size:13px;opacity:.75;min-width:4.5rem}
.rackrail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 7rem 6px 0}
.rackrail::-webkit-scrollbar{display:none}
.rackrail .jump{flex:0 0 auto}
html.a11y-nomotion #ownerBody.rack > section.panel[id^="s-"].rackon{animation:none}
@media (prefers-reduced-motion: reduce){#ownerBody.rack > section.panel[id^="s-"].rackon{animation:none}}
:root{--accent:#3F6B36;--accent-text:#3A6232;--accent-ink:#FBF9F1;--wash:rgba(94,140,78,.05)}
.tab[aria-selected="true"] .ico{color:var(--accent-text)}
.tab[aria-selected="true"] .lbl{color:var(--accent-text);font-weight:700}
.sctab.on, [data-utab].on{ background:var(--accent)!important; color:var(--accent-ink)!important }
.jump.on{background:var(--accent) !important;color:var(--accent-ink) !important}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.eyebrow{color:var(--accent-text)}
.panel,.panel.glass{border-radius:999px 18px 999px 18px}
.sheet{border-radius:999px 18px 999px 999px}
.card,.board,.slot{border-radius:18px 12px 18px 18px}
.bubble{border-radius:18px 8px 18px 18px}
.eyebrow{display:inline-block;padding:3px 10px 4px;border-radius:4px;text-transform:uppercase;font-size:11px;font-weight:700;box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 18%, transparent)}
@supports not (background: color-mix(in srgb, red 10%, transparent)){.eyebrow{background:transparent;box-shadow:none}}
h2,h3{font-family:var(--serif);font-weight:700}
.wrap{position:relative;z-index:1}
.cell,.ccday,.omday{min-height:46px}
.nav-btn{min-width:44px;min-height:44px}
.linklike{min-height:44px;display:inline-flex;align-items:center}
p.hint .linklike{min-height:0}
.btn,.chip,.jump,.sctab,.nav-btn,.hangfile,.moodchip{ box-shadow:none; background-image:none }
.btn,.chip{position:relative}
.btn:active,.chip:active,.jump:active,.sctab:active,.nav-btn:active,.moodchip:active{ transform:scale(.97); box-shadow:none }
.tabbar{box-shadow:0 4px 14px var(--ink);border:1.5px solid var(--line)}
.tab[aria-selected="true"]{background:none;box-shadow:none}
.panel,.panel.glass{box-shadow:none;border:1.5px solid var(--line)}
.sheet{border:none;box-shadow:0 18px 48px var(--ink)}
.cell,.ccday,.omday{box-shadow:none;border:1.5px solid var(--line)}
.cell:active,.ccday:active,.omday:active{transform:scale(.95);box-shadow:none}
html[data-theme="dark"] .btn,html[data-theme="dark"] .chip,html[data-theme="dark"] .jump,
html[data-theme="dark"] .sctab,html[data-theme="dark"] .nav-btn,html[data-theme="dark"] .hangfile,
html[data-theme="dark"] .moodchip{ box-shadow:none; background-image:none }
.space.p-image.p-tile{ background-size:auto; background-repeat:repeat; background-position:top left }
.space.p-image.fit-top{ background-size:100% auto; background-repeat:no-repeat; background-position:center top }
.space.p-image.fit-whole{ background-size:contain; background-repeat:no-repeat; background-position:center top }
.space.p-image.pos-top{ background-position:center top }
.space.p-image.pos-bottom{ background-position:center bottom }
.space.cur-star,.space.cur-star *{ cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M14 2l3.2 7.6L25 11l-5.6 5.3 1.5 8-6.9-3.9-6.9 3.9 1.5-8L3 11l7.8-1.4z' fill='%23FFD84D' stroke='%237A5B12' stroke-width='1.4' stroke-linejoin='round'/></svg>") 14 14, auto }
.space.cur-heart,.space.cur-heart *{ cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M14 24S3.5 17.4 3.5 10.8A5.8 5.8 0 0 1 14 7.4a5.8 5.8 0 0 1 10.5 3.4C24.5 17.4 14 24 14 24z' fill='%23F36FA0' stroke='%238A2B4E' stroke-width='1.4' stroke-linejoin='round'/></svg>") 14 14, auto }
.space.cur-sparkle,.space.cur-sparkle *{ cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M14 3l2 7 7 2-7 2-2 7-2-7-7-2 7-2z' fill='%23FFFFFF' stroke='%236B4BA8' stroke-width='1.3' stroke-linejoin='round'/><circle cx='22' cy='7' r='2' fill='%23C9A6FF'/><circle cx='6' cy='21' r='1.6' fill='%23C9A6FF'/></svg>") 14 14, auto }
.space.cur-hand,.space.cur-hand *{ cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='28' viewBox='0 0 26 28'><path d='M9 14V5.5a2 2 0 0 1 4 0V13h1V7.5a2 2 0 0 1 4 0V14h1v-3a2 2 0 0 1 4 0v8c0 4-3 7-7 7h-2c-4 0-7-3-7-7v-4a2 2 0 0 1 2-2z' fill='%23FFF3D6' stroke='%23553A12' stroke-width='1.5' stroke-linejoin='round'/></svg>") 8 2, auto }
.space.cur-cross,.space.cur-cross *{ cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11 2v18M2 11h18' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round'/><path d='M11 2v18M2 11h18' stroke='%23222222' stroke-width='1.8' stroke-linecap='round'/></svg>") 11 11, auto }
.space.fr-dotted .spbox{ border:3px dotted var(--sp-line, rgba(0,0,0,.4)) }
.space.fr-dashed .spbox{ border:3px dashed var(--sp-line, rgba(0,0,0,.4)) }
.space.fr-double .spbox{ border:5px double var(--sp-line, rgba(0,0,0,.45)) }
.space.fr-ridge  .spbox{ border:5px ridge  var(--sp-line, rgba(0,0,0,.35)) }
.space.fr-groove .spbox{ border:5px groove var(--sp-line, rgba(0,0,0,.35)) }
.space.fr-inset  .spbox{ border:4px inset  var(--sp-line, rgba(0,0,0,.35)) }
.space.fr-thick  .spbox{ border:4px solid  var(--sp-line, rgba(0,0,0,.55)); box-shadow:4px 4px 0 var(--sp-line, rgba(0,0,0,.3)) }
.space[class*="fr-"] .spbox{ border-radius:0 }
.space[class*="fr-"] .sphead{ border-bottom:2px solid var(--sp-line, rgba(0,0,0,.3)) }
@media (hover: none){.cell:not(.off):not(.pad):hover,.spotter:hover,.rolechoice:hover,.corknote:hover,
  .tbtn:hover,.compasstile:hover,.deckbtn:hover,.talentcard:hover,.favbtn:hover,
  .choice:hover,.castcard:hover,.ccday:hover,.chip:hover,.moodchip:hover,.btn:hover,
  .hangfile:hover,.jump:hover,.sctab:hover,.spf:hover,.nav-btn:hover,.spheadgo:hover,
  button.omday:hover,input[type="color"]:hover,.omdotbtn:hover,.gbpickbtn:hover{
    transform:none !important;
  }
.choice:hover,.talentcard:hover,.castcard:hover,.compasstile:hover,.ccday:hover{box-shadow:none !important}}
button,a,label,summary,.chip,.btn,.choice,.jump,.sctab,.tab,.cell,.ccday,.omday,
.spf,.nav-btn,.hangfile,.moodchip,input[type="checkbox"],input[type="radio"],
input[type="color"],select{ touch-action:manipulation }
input[type="range"]{touch-action:none}
button,a,.chip,.btn,.choice,.tab,.cell,.ccday,.omday{-webkit-tap-highlight-color:rgba(0,0,0,0)}
@media (hover: none){.splink{ padding-block:14px; line-height:1.25; min-height:44px }
.spedit .splink,.spcontact .splink{ display:block; width:100% }
.linklike{min-height:44px;display:inline-flex;align-items:center}
p.hint .linklike{min-height:44px}
.omdotbtn{position:relative}
.omdotbtn::after{content:"";position:absolute;inset:-14px;border-radius:50%}
input[type="checkbox"],input[type="radio"]{width:26px;height:26px}
label.agree,label.checkrow{min-height:44px;display:flex;align-items:center;gap:10px}
.sheet .x{min-width:44px;min-height:44px}
.spheadgo{ position:relative }
.spheadgo::after{ content:""; position:absolute; inset:-15px -10px; z-index:2 }}
.histmonth{border-top:1px solid var(--barline);padding:6px 0}
.histmonth>summary{cursor:pointer;padding:8px 0;min-height:44px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.slot.flash{animation:filedflash 1.8s ease}
@keyframes filedflash{0%,35%{background:rgba(94,140,78,.28)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.slot.flash{animation:none;outline:2px solid var(--var(--blue))}}
.oweek .wday{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;padding:6px 4px;border-top:1px solid var(--barline);border-radius:12px;transition:background .15s}
.oweek .wday.today .wdate b,.oweek .wday.today .wdate span{color:var(--var(--bark))}
.oweek .wday.drop{background:var(--sand)}
.oweek .wdate{display:flex;flex-direction:column;align-items:flex-start;background:none;border:0;padding:6px 4px;min-height:44px;color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.oweek .wdate b{font-size:12px;text-transform:uppercase;font-weight:700}
.oweek .wdate span{font-size:20px;font-weight:700;line-height:1.1}
.oweek .witems{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:44px;min-width:0}
.oweek .wbk{min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--barline);background:var(--cream);color:var(--ink);font:inherit;font-size:14px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;max-width:100%;overflow-wrap:anywhere;text-align:left}
.oweek .wbk.pend{border-color:var(--var(--line));border-width:2px}
.oweek .wbk.lifting{opacity:.35}
.oweek .wblock{padding:6px 10px;border-radius:12px;background:transparent;font-size:13px}
.wghost{position:fixed;z-index:9999;pointer-events:none;box-shadow:var(--shadow);opacity:.95;min-height:44px;padding:8px 12px;border-radius:12px;background:var(--cream);color:var(--ink);border:1px solid var(--barline);font-size:14px}
select.phpos{min-height:44px;border-radius:12px;border:1px solid var(--barline);background:var(--cream);color:var(--ink);padding:0 8px;font:inherit;font-size:14px}
.moreacts{margin-top:8px}
.moreacts>summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:700;font-size:14px;color:var(--forest);list-style:none}
.moreacts>summary::-webkit-details-marker{display:none}
.moreacts>summary::after{content:"\203A";margin-left:6px;transition:transform .2s}
.moreacts[open]>summary::after{transform:rotate(90deg)}
.moreacts .row{flex-wrap:wrap;gap:6px;margin-top:4px}
.vibrow .chips{gap:6px}
.vibrow .chip b{margin-left:4px;font-variant-numeric:tabular-nums}
.chip.ghostchip{background:transparent;border-style:dashed;opacity:.85}
.lovecard .vibrow{margin-top:6px}
.lovecard .vibrow .chips{justify-content:center}
.workvid{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;border:1px solid var(--line);margin:6px 0}
.workplay{width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:var(--ontop);font-size:18px;cursor:pointer;flex:0 0 auto}
.workvid span{display:block}
.workvidon{margin:8px 0;border-radius:18px;overflow:hidden;background:var(--ink);aspect-ratio:16/9}
.workvidon iframe,.workvidon video{width:100%;height:100%;border:0;display:block}
.spstrip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.spstrip figure{flex:0 0 72%;max-width:260px;margin:0;scroll-snap-align:start}
.spstrip img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--sp-line);display:block}
.spstrip figcaption{font-size:0.75rem;margin-top:4px}
body.inflow .tabbar,body.inflow .footpanel,body.insetup .tabbar,body.insetup .footpanel{display:none}
.flowcard{min-height:calc(100dvh - 104px);display:flex;flex-direction:column;padding:12px 16px 0}
.ftop{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.fback{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ink);font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 4px}
.fback:focus-visible{outline:3px solid var(--var(--blue));outline-offset:2px}
.fprog{flex:1;height:6px;border-radius:999px;background:transparent;overflow:hidden}
.fprog i{display:block;height:100%;border-radius:999px;background:var(--ink);transition:width .4s var(--ease)}
.fwho{flex:0 0 auto;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.fwho img{width:100%;height:100%;object-fit:cover}
.fwho .personinit{width:36px;height:36px;flex:0 0 36px;border-radius:50%;font-size:15px}
.fq{font-size:30px;line-height:1.15;margin:2px 0 6px;text-wrap:balance}
.fsub{color:var(--bark);margin:0 0 14px}
.fbody{flex:1 0 auto}
.fbody.fin{animation:fslidein .26s var(--ease)}
.fbody.fout{animation:fslideback .26s var(--ease)}
@keyframes fslidein{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes fslideback{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fbody.fin,.fbody.fout{animation:none}
.fprog i{transition:none}}
.flowcard .flowfoot{position:sticky;bottom:0;z-index:3;margin:auto -16px 0;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:0;background:var(--cream);border-radius:0 0 var(--r) var(--r)}
.flowcard .flowfoot:empty{padding:0 0 calc(10px + env(safe-area-inset-bottom,0px))}
.flowcard .flowfoot .btn.red.fnext{width:100%;min-height:54px;font-size:16px;border-radius:999px;margin:0}
.flabel{font-family:var(--grot);font-size:13px;font-weight:700;text-transform:uppercase;color:var(--bark);margin:18px 0 8px}
.fecho{font-weight:700;margin:16px 0 8px}
.fecho.bad{color:var(--var(--red))}
.fexact{margin:6px 0 10px}
.fexact summary,.fnotes summary{cursor:pointer;font-weight:700;color:var(--btn-var(--bark));min-height:44px;display:flex;align-items:center}
.fsum{display:grid;border:1.5px solid var(--line);border-radius:18px;overflow:hidden;background:var(--cream);margin:4px 0 12px}
.fsumrow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:12px 14px;min-height:52px;border:0;border-top:1px solid var(--line);background:none;font:inherit;color:var(--ink);cursor:pointer}
.fsumrow:first-child{border-top:0}
.fsumrow span{font-size:13px;color:var(--bark);font-weight:700}
.fsumrow b{font-weight:700;overflow-wrap:anywhere}
.fsumrow i{font-style:normal;font-size:20px;color:var(--bark)}
.fsumrow:focus-visible{outline:3px solid var(--var(--blue));outline-offset:-3px}
.fnotes{margin:0 0 12px}
.fnotes textarea{width:100%;margin-top:6px}
.agreelist{display:grid;gap:8px;margin-top:6px}
.agreerow{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;padding:14px 16px;min-height:52px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;font-size:15px;line-height:1.45;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.agreerow i{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.agreerow.on{border-color:var(--var(--line));background:transparent}
.agreerow.on i{background:var(--ink);border-color:var(--btn-var(--line))}
.agreerow.on i::after{content:"";width:9px;height:5px;border:2.5px solid var(--line);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.agreerow:focus-visible{outline:3px solid var(--var(--blue));outline-offset:2px}
.flegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 2px 0;font-size:13px;color:var(--bark)}
.flegend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px;border:1.5px solid transparent}
.flegend .lg-free{background:var(--sand);border-color:var(--var(--line))}
.flegend .lg-part{background:var(--sand);border-color:var(--sun)}
.flegend .lg-ask{background:var(--sand);border-color:var(--var(--line))}
.flegend .lg-no{background:transparent;border-color:var(--line)}
#grid .cell .lb{display:none}
#grid .cell.open:not(.part) .mk{display:none}
#grid .cell.booked,#grid .cell.blocked{background:transparent;border-color:var(--line);opacity:.6}
#grid .cell.booked .mk,#grid .cell.blocked .mk{display:none}
#grid .cell.booked .num,#grid .cell.blocked .num{text-decoration:line-through}
@media (prefers-reduced-motion:reduce){.agreerow{transition:none}}
.inbox{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.inrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;min-height:64px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;cursor:pointer}
.inrow:focus-visible{outline:3px solid var(--var(--blue));outline-offset:2px}
.inrow .fwho,.bkhead .fwho{width:44px;height:44px}
.inrow .fwho .personinit,.bkhead .fwho .personinit{width:44px;height:44px;flex:0 0 44px;font-size:18px}
.inmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.inmain b{font-size:16px}
.inmain span{font-size:14px;line-height:1.35;color:var(--bark);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.inside{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.indot{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--ontop);font-size:12px;font-weight:700;display:grid;place-items:center}
.bkhead{display:flex;align-items:center;gap:12px;margin:0 40px 10px 0;flex-wrap:wrap}
.bkwho{display:flex;flex-direction:column;min-width:0}
.bkwho b{font-family:var(--serif);font-size:20px}
.bkwho span{font-size:14px;color:var(--bark)}
.bkwhen{margin:4px 0 8px;line-height:1.5}
.bkthreadhead{margin:20px 0 8px;font-size:16px}
.clauselist{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.clause{padding:12px 14px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream)}
.clause.editing{border-color:var(--var(--line));border-width:2.5px}
.clause p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.clausehead{display:flex;align-items:center;gap:8px}
.clausehead b{flex:1;min-width:0;overflow-wrap:anywhere}
.clausebtns{display:flex;gap:4px;flex:0 0 auto}
.iconbtn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:16px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.iconbtn::after{content:"";position:absolute;inset:-2px}
.iconbtn[disabled]{visibility:hidden}
.iconbtn:focus-visible{outline:3px solid var(--var(--blue));outline-offset:2px}
.flowcard .calhead .nav-btn[disabled]{visibility:hidden}
.bkacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.bkacts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bkact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px;min-height:68px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;font-size:12px;font-weight:700;line-height:1.2;text-align:center;cursor:pointer}
.bkact span{font-size:20px;line-height:1}
.bkact.bad{color:var(--chile)}
.bkact:focus-visible{outline:3px solid var(--var(--blue));outline-offset:2px}
.chfind{width:100%;min-height:54px;font-size:16px;border-radius:999px}
.chwho{text-align:center;margin:6px 0 18px}
.findpanel .catbrowse .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin-right:-16px;padding-right:16px}
.findpanel .catbrowse .chips::-webkit-scrollbar{display:none}
.findpanel .catbrowse .chip{flex:0 0 auto}
.ffilters{margin:6px 0 8px}
.ffilters summary{cursor:pointer;font-weight:700;color:var(--btn-var(--bark));min-height:44px;display:flex;align-items:center}
.jobread{margin:6px 0 14px;padding:12px 14px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream)}
.jobrows{margin:0;display:grid;gap:8px}
.jobrows div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px}
.jobrows dt{font-size:13px;font-weight:700;color:var(--bark)}
.jobrows dd{margin:0;overflow-wrap:anywhere}
.jobread .note{margin:10px 0 0}
.tcask{padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:transparent;margin:8px 0}
.gaplist{margin:8px 0 0;padding:0 0 0 18px;display:grid;gap:5px}
.gaplist li{line-height:1.45}
.gapnote>b:first-child{display:block}
#view-corner .flabel{margin:16px 0 8px}
.cnrow .inmain b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnrow .cnstat{font-style:normal;align-self:flex-start;margin-top:4px}
#view-corner .flabel:first-of-type{margin-top:4px}
.tabbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:2px 0;flex-wrap:nowrap;margin-left:0}
.tabbar .tab{min-width:0}
.tabbar.hasctl{padding-top:22px}
.barctl{position:absolute;left:14px;top:-17px;display:flex;gap:8px;z-index:3}
.barbtn{position:relative;width:34px;height:34px;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;background:var(--cream);color:var(--forest);border:1.5px solid var(--barline);box-shadow:0 2px 8px var(--ink)}
.barbtn svg{width:18px;height:18px;display:block}
.barbtn::after{content:"";position:absolute;top:-5px;bottom:-5px;left:-5px;right:-5px}
.barbtn:active{transform:scale(.94)}
.tabbar.aside{transform:translateX(calc(-100% - 48px));opacity:0;pointer-events:none}
.barpull{position:fixed;left:0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:46;width:46px;height:56px;padding:0 4px 0 0;cursor:pointer;display:grid;place-items:center;border:1.5px solid var(--barline);border-left:none;border-radius:0 18px 18px 0;background:var(--barbg);color:var(--forest);box-shadow:0 6px 18px var(--ink)}
.barpull svg{width:22px;height:22px;display:block}
body.inflow .barpull,body.insetup .barpull{display:none !important}
.tbsheet .dockrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px;border-radius:18px;background:var(--barbg);border:1.5px solid var(--barline)}
.dslot{min-height:68px;border-radius:18px;display:grid}
.dslot.empty{border:1.5px dashed var(--line)}
.dslot.over{outline:2.5px solid var(--btn-var(--blue));outline-offset:1px}
.tbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px 6px;padding:8px 4px;border-radius:18px;min-height:76px}
.tbgrid.over{outline:2.5px dashed var(--chile);outline-offset:2px}
.dtile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;width:100%;padding:8px 2px;border-radius:18px;border:1.5px solid var(--barline);background:var(--cream);color:var(--ink);font:inherit;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.dtile .ico{width:24px;height:24px;display:block}
.dtile .ico svg{width:100%;height:100%;display:block}
.dtile .lbl{font-size:11px;font-weight:700;color:var(--bark);max-width:100%;white-space:normal;text-align:center;line-height:1.15}
.tbsheet{padding-left:14px;padding-right:14px}
.tbsheet .dockrow .dtile{padding:8px 1px;border-width:1px}
.tbsheet .dockrow .dtile .lbl{font-size:11px}
.dtile .dbadge{position:absolute;top:-6px;right:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;line-height:1;color:var(--ontop);background:var(--ink)}
.dtile .dbadge.add{background:var(--ink)}
.dtile.lifting{opacity:.35}
.dghost{position:fixed;z-index:9999;pointer-events:none;width:68px;box-shadow:0 10px 26px var(--ink);transform:scale(1.06)}
header.bar .mark{min-width:0;flex:0 1 auto;overflow:hidden}
header.bar .mark #brand{max-width:none}
.cbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;font-weight:700;font-size:13px;line-height:1.2;border:1.5px solid var(--barline);color:var(--forest);background:var(--cream)}
.cbadge .cbico{display:block;width:16px;height:16px}
.cbadge .cbico svg{width:100%;height:100%;display:block}
.cbadge.cb-user{border-color:var(--btn-var(--line))}
.cbadge.cb-known{background:var(--ink);border-color:var(--btn-var(--line));color:var(--ontop)}
.cbadge.cb-trusted{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.cbsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px}
.cbstep{text-align:center;font-size:11px;font-weight:700;padding:6px 2px;border-radius:8px;background:transparent;color:var(--bark)}
.cbstep.on{background:var(--sand);color:var(--forest)}
.mytalent .agline{border-top:1px dashed var(--barline);padding:10px 0 4px;margin-top:8px}
.mytalent .agline>span{display:block;font-size:14px;margin-bottom:6px}
.mytalent .linklike{margin-top:4px}
.vibstk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.stkvibe{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:4px 10px 4px 4px;border-radius:14px;
  border:1.5px solid var(--barline);background:var(--cream);color:var(--ink);font:inherit;cursor:pointer}
.stkvibe img{width:36px;height:36px;object-fit:contain;display:block}
.stkvibe b{font-size:0.8125rem}
.stkvibe.on{border-color:var(--btn-green);background:rgba(94,140,78,.14)}
.stkvibe[disabled]{cursor:default}
html[data-theme="dark"] .stkvibe{background:#2C352C;border-color:rgba(233,228,212,.2)}
.langbtn{margin-left:auto;position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);color:var(--forest);border-radius:999px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;flex:0 0 auto;box-shadow:var(--shadow-soft);height:2.75rem;padding:0 14px 0 11px;white-space:nowrap}
.langbtn svg{width:1.3rem;height:1.3rem;flex:0 0 auto}
.langbtn + .themebtn{margin-left:0}
.langbtn[hidden]{display:none !important}
.langbtn[hidden] + .themebtn{margin-left:auto}
body:not(.atgate) .langbtn{width:2.75rem;padding:0;justify-content:center;border-radius:50%}
body:not(.atgate) .langbtn #langCode{position:absolute;right:-4px;bottom:-4px;min-width:1.15rem;height:1.15rem;padding:0 3px;border-radius:999px;background:var(--forest);color:var(--ontop);font-size:11px;line-height:1.15rem;text-align:center;font-weight:700}
.langbtn:active{transform:scale(.95)}
html.i18nwait body{opacity:0;animation:i18nshow 0s linear 3s forwards}
@keyframes i18nshow{to{opacity:1}}
@media (prefers-reduced-motion:reduce){html.i18nwait body{opacity:1}}
.langlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.langopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:10px 14px;border-radius:18px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;text-align:left;cursor:pointer;position:relative}
.langopt b{font-size:16px}
.langopt span{font-size:12px;opacity:.75}
.langopt.on{border-color:var(--forest);box-shadow:0 0 0 2px var(--forest) inset}
.langopt .langtick{position:absolute;right:12px;top:10px;opacity:1;font-size:16px;font-weight:700;color:var(--forest)}
.helpfab{display:none;position:fixed;right:max(16px,env(safe-area-inset-right));z-index:60;align-items:center;gap:6px;bottom:calc(var(--tabbar-h, 78px) + 26px + env(safe-area-inset-bottom));border:none;border-radius:999px;padding:0 18px;min-height:2.75rem;background:var(--ink);color:var(--ontop);font:inherit;font-weight:700;font-size:15px;box-shadow:var(--shadow);cursor:pointer}
body.atgate .helpfab,body.insetup .helpfab{display:inline-flex}
body.insetup .helpfab{bottom:calc(18px + env(safe-area-inset-bottom))}
body:has(#modalMount .modal) .helpfab{display:none}
.helpbtn{border:none;border-radius:999px;padding:6px 14px;min-height:2.25rem;background:var(--ink);color:var(--ontop);font:inherit;font-weight:700;cursor:pointer;margin-left:6px}
.helpgo{background:var(--ink) !important;color:var(--ontop) !important}
@media(max-width:640px){.rackrail{flex-wrap:wrap;overflow:visible;padding:2px 0 8px}}
.moreacts .row,.moreacts > span{flex-wrap:wrap}
.tabbar .tab{min-width:0}
.tabbar .tab .lbl{white-space:normal;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;text-align:center;line-height:1.15;max-width:100%;display:block}
.barhint{position:fixed;left:max(14px,env(safe-area-inset-left));z-index:46;max-width:min(320px,calc(100vw - 28px));bottom:calc(var(--tabbar-h, 78px) + 44px + env(safe-area-inset-bottom));background:var(--ink);color:var(--ontop);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow);font-size:14px;line-height:1.45}
.barhint p{margin:0 0 8px}
#barHint #barHintOk{background:var(--ontop);color:var(--ink);border:none;min-height:2.25rem;padding:0 16px}
body.inflow .barhint,body.insetup .barhint,body:has(#modalMount .modal) .barhint{display:none}
#lockBody .flowfoot{position:sticky;bottom:0;z-index:4;margin:18px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--cream);border-top:2px solid var(--line);border-radius:0 0 18px 18px}
body.insetup .helpfab{display:none}
.tdeal{margin:6px 0 12px;padding:10px 12px;border:1px solid rgba(46,74,49,.14);border-radius:12px}
.tdeal summary{cursor:pointer;list-style:revert}
.tdeal[open] summary{margin-bottom:8px}
.tdealshow{display:grid;grid-template-columns:max-content 1fr;gap:2px 10px;margin:8px 0 0;font-size:13px}
.tdealshow dt{color:var(--bark);font-weight:600}
.tdealshow dd{margin:0}
.warnline{padding:8px 10px;border-radius:12px;background:var(--sand);color:var(--ink);font-size:13px;line-height:1.45}
.cwgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;margin-top:10px}
.cwheel{margin:0}
.cwheel svg{width:100%;max-width:460px;height:auto;display:block;margin:0 auto;overflow:visible}
.cwring{fill:none;stroke:var(--bark);stroke-opacity:.25;stroke-width:1.5}
.cwspoke{stroke:var(--bark);stroke-opacity:.22;stroke-width:1}
.cwhub{fill:var(--btn-green)}
.cwhubline{fill:none;stroke:var(--green);stroke-width:3}
.cwtitle{fill:#FBF9F1;font:700 15px Inter,system-ui,sans-serif}
.cwdot{fill:var(--cream);stroke:var(--ink);stroke-width:2}
.cwdot.on{fill:var(--green);stroke:var(--green)}
.cwheel a:focus-visible .cwdot,.cwheel a:hover .cwdot{stroke:var(--ink);stroke-width:3}
.cwname{fill:var(--ink);font:600 17px Inter,system-ui,sans-serif}
.cwrole{fill:var(--bark);font:500 14px Inter,system-ui,sans-serif}
.cwname.sm{font-size:14px}
.cwrole.sm{font-size:12px}
.cwheel a .cwname{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.cwheel figcaption{margin-top:6px;font-size:14px}
.cwlist{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--bark)}
.weblegend .wl-work{border-top:0;width:10px;height:10px;background:var(--sun);transform:rotate(45deg);border:1px solid var(--ink);margin-right:6px}
.weblegend .wl-trade{border-top-color:var(--green);border-top-style:dashed}
.weblegend .wl-talk{border-top-color:var(--bark);border-top-style:dotted}
.weblist{margin-top:12px}
.weblist summary{cursor:pointer;font-weight:600}
html.booting .tabbar,html.booting .modebtn,html.booting .helpfab,html.booting .footpanel,html.booting #sideStrip,
html.booting #main > :not(header){visibility:hidden}
.tindergate .tindersub .tagwords{font-style:normal;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.tindergate .tindersub:has(+ .tagline2){margin-bottom:10px}
.tindergate .tagline2{font-size:0.9375rem;color:var(--bark);max-width:30ch;margin:0 0 12vh}
html[data-theme="dark"] .tindergate .tagline2{color:rgba(233,228,212,.75)}
.jobmapwrap{margin:6px 0 4px}
.jobmap{width:100%;height:min(62vh,460px);border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--cream)}
.jobmaptools{gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.jmpin{min-width:30px;height:30px;padding:0 8px;border-radius:999px;border:2px solid var(--cream);background:var(--ink);color:var(--ontop);font:700 13px var(--grot);cursor:pointer;box-shadow:0 2px 6px var(--ink)}
.jmpin:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.jmpop{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink)}
.jmpop .linklike{text-align:left}
.maplibregl-popup-content{border-radius:12px;padding:12px 14px}
.webzoom{display:inline-flex;gap:6px;margin-left:auto}
#webCv{touch-action:pan-y}
.sheet.listing{max-width:720px}
.jgal{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:18px;margin:-4px 0 0}
.jgalimg{flex:0 0 100%;scroll-snap-align:center;padding:0;border:0;background:none;cursor:zoom-in;border-radius:18px;overflow:hidden}
.jgalimg img{width:100%;height:min(46vh,340px);object-fit:cover;display:block}
.jgalcount{text-align:right;margin:4px 2px 0}
.jgalnone{height:120px;border-radius:18px;background:var(--sand);display:grid;place-items:center;font:700 44px var(--grot);color:var(--bark)}
.jfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:8px;margin:14px 0 4px}
.jfact{padding:10px 12px;border-radius:12px;background:var(--cream);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.jfact span{font-size:12px;color:var(--bark);text-transform:uppercase}
.jfact b{font-size:15px;overflow-wrap:anywhere}
.jdmap{width:100%;height:200px;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:6px}
.jsim{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px;margin-top:6px}
.jsimcard{display:flex;flex-direction:column;gap:4px;text-align:left;padding:0 0 8px;border:1px solid var(--line);border-radius:12px;background:var(--cream);overflow:hidden;cursor:pointer;color:var(--ink)}
.jsimcard img,.jsimnone{width:100%;height:90px;object-fit:cover;display:grid;place-items:center;background:var(--sand);font-weight:700;color:var(--bark)}
.jsimcard b,.jsimcard span{padding:0 10px;font-size:13px}
.jsimcard span{color:var(--bark)}
.jdfoot{gap:8px;flex-wrap:wrap}
.photoview{background:var(--ink)}
.pvwrap{position:relative;width:100%;height:100%;display:grid;place-items:center}
.pvwrap img{max-width:96vw;max-height:86vh;object-fit:contain;border-radius:8px}
.pvwrap .x{color:var(--ontop)}
.pvnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:var(--cream);color:var(--ontop);font-size:30px;cursor:pointer}
.pvnav.prev{left:10px}
.pvnav.next{right:10px}
.pvcount{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--ontop)}
.jpicrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.jpic{position:relative}
.jpic img{width:72px;height:72px;object-fit:cover;border-radius:12px;display:block}
.jpic .rowx{position:absolute;top:-6px;right:-6px;background:var(--cream)}
.jobstar.on{color:var(--bark);border-color:var(--line)}
.jobstar:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.mtfilters{margin:10px 0 4px}
.mtsplit{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.mtsplit{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.mtlistcol{max-height:72vh;overflow:auto;padding-right:4px}
#mtMap{height:66vh}}
.jmpin.mt-talent{background:var(--ink)}
.jmpin.mt-trades{background:var(--ink)}
.jmpin.mt-saved{background:var(--ink)}
.mtfilt{margin:8px 0 10px}
.mtfilt summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--cream);font-weight:700;list-style:none}
.mtfilt summary::-webkit-details-marker{display:none}
.mtfilt[open] summary{margin-bottom:6px}
.jobcard{position:relative;display:block;padding:0;overflow:hidden;border-radius:18px;transition:transform .15s ease,box-shadow .15s ease}
@media (hover:hover){.jobcard:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--ink)}}
.jobmain{display:flex;gap:12px;align-items:stretch;width:100%;text-align:left;background:none;border:0;padding:10px;color:inherit;font:inherit;cursor:pointer}
.jobpic{position:relative;flex:0 0 112px;height:112px;border-radius:12px;overflow:hidden;background:var(--sand)}
.jobpic img{width:100%;height:100%;object-fit:cover;display:block}
.jobpicnone{display:grid;place-items:center;width:100%;height:100%;font:700 34px var(--grot);color:var(--bark)}
.jobnew{position:absolute;left:6px;top:6px;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--ontop);font:700 11px var(--grot)}
.jobinfo{display:flex;flex-direction:column;gap:3px;min-width:0;padding-right:30px}
.jobpay{font:800 18px var(--grot);color:var(--ink)}
.jobtitle{font-weight:700;font-size:15px;line-height:1.3}
.jobmeta{font-size:13px;color:var(--bark)}
.jobtags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px}
.jobco{font-size:12px;color:var(--bark);text-transform:uppercase}
.jobstar{position:absolute;top:14px;left:92px;width:30px;height:30px;border-radius:50%;border:0;background:var(--cream);color:var(--bark);font-size:16px;cursor:pointer;line-height:1;box-shadow:0 1px 4px var(--ink)}
.joblist{display:grid;grid-template-columns:1fr;gap:10px}
.jmpin{white-space:nowrap;font-size:12px;transition:transform .12s ease}
@media (hover:hover){.jmpin:hover{transform:scale(1.08)}}
.jmpin.face{width:38px;height:38px;min-width:0;padding:0;border:2px solid var(--line);overflow:hidden}
.jmpin.face img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
html[data-view="map"] .wrap{max-width:min(1480px,100%)}
.mthead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.mthead h1{margin:0}
.mthead .hint{margin:0;flex:1;min-width:220px}
.mtchips{margin-bottom:0}
.mtmapbox{position:relative}
.mtlistbtn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:9px 20px;border-radius:999px;border:0;background:var(--ink);color:var(--ontop);font-weight:700;box-shadow:0 4px 14px var(--ink);cursor:pointer}
.mttomap{margin-top:12px}
@media (min-width:900px){.mtsplit{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.mtmapcol{position:sticky;top:12px}
#mtMap{height:calc(100vh - 230px);min-height:420px}
.mtlistcol{max-height:none;overflow:visible}
.mtlistbtn,.mttomap{display:none}}
@media (max-width:899px){#mtMap{height:58vh}}
.mtchips .chip{padding:6px 14px;font-size:14px}
.mtrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.mtrow .mtfilt{margin:0}
.mtperson{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px;border-radius:18px;border:1px solid var(--line);background:var(--cream);color:var(--ink);cursor:pointer;margin-bottom:8px}
.mtperson img,.mtperson .mtini{flex:0 0 52px;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--sand);display:grid;place-items:center;font-weight:700;color:var(--bark)}
.mtperson b{display:block;font-size:15px}
.mtperson span{font-size:13px;color:var(--bark)}
.mtfilt[open]{flex-basis:100%}
.ckphoto{width:100%;max-height:260px;object-fit:contain;border-radius:12px;background:var(--sand);margin:6px 0}
.foldmonth{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px;background:var(--cream)}
.foldmonth summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none}
.foldmonth summary::-webkit-details-marker{display:none}
.corkpicwrap{position:relative;display:block}
.corkpicwrap img{width:100%;display:block}
.corkpicn{position:absolute;right:6px;bottom:6px;padding:2px 8px;border-radius:999px;background:rgba(29,33,25,.78);color:#FBF9F1;font:700 11px Inter,system-ui,sans-serif}
.postgrid{display:grid;gap:6px;margin:12px 0;border-radius:18px;overflow:hidden}
.postgrid.g1{grid-template-columns:1fr}
.postgrid.g2{grid-template-columns:1fr 1fr}
.postgrid.g3{grid-template-columns:2fr 1fr}
.postgrid.g4{grid-template-columns:1fr 1fr}
.postgrid.g3 .postgridimg:first-child{grid-row:span 2}
.postgridimg,.postcarimg{padding:0;border:0;background:var(--sand);cursor:zoom-in;display:block}
.postgridimg img{width:100%;height:100%;min-height:140px;max-height:320px;object-fit:cover;display:block}
.postcar{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:12px 0 4px;border-radius:18px}
.postcarimg{flex:0 0 88%;scroll-snap-align:center;border-radius:18px;overflow:hidden}
.postcarimg img{width:100%;height:min(52vh,380px);object-fit:cover;display:block}
.postcarn{text-align:center;margin:0 0 8px}
.postlinks{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.postask{margin:10px 0}
.nextstep{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:18px;margin:6px 0 14px;background:transparent;border:1px solid var(--line)}
.nextstep b{font-size:18px}
details.later{padding:14px 18px}
details.later summary{display:flex;flex-direction:column;gap:2px;cursor:pointer;list-style:none}
details.later summary::-webkit-details-marker{display:none}
.jthumbs{display:flex;gap:6px;margin:6px 0 0;overflow-x:auto}
.jthumb{flex:0 0 56px;height:56px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:none;cursor:pointer}
.jthumb.on{border-color:var(--btn-var(--line))}
.jthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mtcount{font-weight:700;margin:0 0 6px}
.jmpin.quiet{width:12px;height:12px;min-width:0;padding:0;border-width:2px}
.mtlocask{position:absolute;left:10px;right:10px;top:10px;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:var(--cream);box-shadow:0 6px 18px var(--ink);z-index:2}
.mtlocask span{font-size:13px;color:var(--bark)}
.jobstar.pulse{animation:starpulse .12s ease-out}
@keyframes starpulse{50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.jobstar.pulse{animation:none}
.jobcard,.jmpin{transition:none}}
.miniplayer{bottom:calc(var(--floor-h, 112px) + env(safe-area-inset-bottom, 0px) + 6px)}
.webstep{font-size:12px;color:var(--muted);align-self:center;min-width:7.5em}
.webzoom .btn:disabled{opacity:1;visibility:hidden}
#dwWheel{width:min(340px,calc(100vw - 16px));box-sizing:border-box}
#dwWheel canvas{width:100%;height:auto;aspect-ratio:1}
.wheelpal{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0 8px}
.wheelpal .sw{width:100%;height:auto;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(0,0,0,.28);cursor:pointer;padding:0}
.wheelpal .sw.on{box-shadow:0 0 0 2px var(--ink,#1B1B1B),0 0 0 4px #fff}
.colorwheelbtn{width:52px;height:52px}
.wheeldot{width:34px;height:34px}
.swatches{gap:7px;flex-wrap:wrap}
.swatches .sw,.studio.simple .swatches .sw{width:30px;height:30px}
#dwHex{font-size:16px}
.camsheet .camwrap{border-radius:12px;overflow:hidden;background:var(--ink);margin:6px 0 10px}
.camsheet video{display:block;width:100%;max-height:60vh;object-fit:contain;background:var(--ink)}
.camsheet #camMsg{background:var(--cream);margin:0;padding:14px}
.modal:has(.camsheet){z-index:200}
#stUndo:disabled,#stRedo:disabled{visibility:hidden}
#ownerBody.rack .jumpbar{flex-direction:column;align-items:stretch;gap:4px;border-radius:18px;padding:8px 10px;overflow:visible}
#ownerBody.rack .rackhead{margin-bottom:0}
#ownerBody.rack .rackrail{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 4px}
@media(max-width:640px){#ownerBody.rack .rackrail{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 4px}
#ownerBody.rack .rackrail .jump{padding:8px 12px;min-height:44px}}
.rackall{display:flex;flex-wrap:wrap;gap:6px}
.rackall .jump{background:var(--cream);border:1px solid var(--glass-line)}
.rackall .jump.on{background:var(--ink);color:var(--ontop)}
html[data-view="owner"] .miniplayer{display:none}
.toast{bottom:calc(var(--floor-h, 96px) + env(safe-area-inset-bottom, 0px) + 8px)}
details.later[open]>summary,details.taxfold[open]>summary{display:none}
@media(max-width:420px){.cwrow{grid-template-columns:1fr}}
.soonest{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 0;padding:12px 14px;border-radius:18px;border:1.5px solid var(--glass-line);background:var(--cream);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.soonest span{font-size:13px;color:var(--bark);font-weight:700;text-transform:uppercase}
.soonest b{flex:1}
.soonest i{font-style:normal;font-size:20px}
#ownerBody:not(.rack) > section.panel{content-visibility:auto;contain-intrinsic-size:auto 700px}
#ownerBody.rack .jumpbar{min-width:0;max-width:100%;box-sizing:border-box}
#ownerBody.rack .jumpbar>*{min-width:0;max-width:100%}
html{overflow-x:clip}
.stat{container-type:inline-size}
.stat b{font-size:min(1.8125rem,18cqi);font-variant-numeric:tabular-nums}
.jobstar::after{content:"";position:absolute;inset:-7px}
#navBack.backchev{flex:0 0 44px;width:44px;height:44px}
input,select,textarea{box-shadow:none}
.sthint{text-overflow:clip}
@media (hover:none){.jobcard:hover,.jmpin:hover{transform:none}}
/* ---- 2. the house system ---- */
/* =====================================================================================================
   THE HOUSE SYSTEM for the city look (her mockups in design-options/, chosen 2026-10-17).
   One of each thing, everywhere: paper and navy ink, pink and blue, Instrument Serif for names and titles,
   Space Grotesk for the rest. Type sizes 11 to 56 on one scale; corners 4, 8, 12, 18 or round; spacing
   4, 8, 12, 16, 24, 32, 48. Nothing faded that can be tapped; whatever cannot act is hidden.
   ===================================================================================================== */
:root{
  --paper:#F7F2E8; --cream:#FFFDF8; --ink:#1F2A6B; --ontop:#FFFDF8; --bark:#4E5684; --line:#E3DCCD; --sand:#EFE7D8;
  --pink:#FF4F9A; --pink-text:#C42A6B; --blue:#2F6BFF; --red:#B42318; --green:#1F7A3A; --gold:#B7791F;
  --good-bg:#E6F4EA; --warn-bg:#FFF4DB; --bad-bg:#FDECEA;
  --shadow:0 14px 34px rgba(31,42,107,.12); --shadow-soft:0 3px 10px rgba(31,42,107,.07);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --grot:"Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tap:44px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --paper:#0B1030; --cream:#141B3A; --ink:#EEF0FF; --ontop:#0B1030; --bark:#A7AED3; --line:#26305C; --sand:#1A2147;
  --pink:#FF8AB8; --pink-text:#FF9CC4; --blue:#8FB3FF; --red:#FF8A7A; --green:#7FD39A; --gold:#FFD27A;
  --good-bg:#12301F; --warn-bg:#33290F; --bad-bg:#3A1616;
  --shadow:0 14px 34px rgba(0,0,0,.4); --shadow-soft:0 4px 12px rgba(0,0,0,.3);
  color-scheme:dark;
}

/* ---- the page ---- */
html,body{background:var(--paper)!important;color:var(--ink)}
body{font:400 15px/1.5 var(--grot);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,.fq,.lede.big,.serif{font-family:var(--serif)!important;font-weight:400!important;color:var(--ink);letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(36px,5vw,52px);line-height:1.02;margin:4px 0 12px}
h2{font-size:clamp(26px,3.4vw,34px);line-height:1.08;margin:4px 0 10px}
h3{font:700 15px/1.35 var(--grot)!important;color:var(--ink);margin:18px 0 6px;letter-spacing:0}
h4{font:700 13px/1.35 var(--grot);color:var(--ink);margin:12px 0 4px}
p{margin:0 0 10px}
a{color:var(--ink);text-underline-offset:2px}
b,strong{font-weight:700}
small{font-size:12px}
::selection{background:color-mix(in srgb,var(--pink) 30%,transparent)}
:focus-visible{outline:2px solid var(--blue)!important;outline-offset:2px}
.hidden{display:none!important}

/* ---- words ---- */
.eyebrow{display:block;font:700 11px/1.3 var(--grot)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--pink-text)!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;margin:0 0 4px;transform:none!important}
.eyebrow::before,.eyebrow::after{display:none!important}
.hint,.fsub,.revl{font:500 13px/1.5 var(--grot);color:var(--bark)}
.lede{font:500 15px/1.55 var(--grot);color:var(--ink)}
.flabel{font:700 11px/1.3 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--pink-text);margin:16px 0 8px}
.linklike{background:none!important;border:0!important;padding:0!important;min-height:0!important;font:inherit;color:var(--ink)!important;text-decoration:underline;text-underline-offset:2px;cursor:pointer;box-shadow:none!important}
.dangertext{color:var(--red)!important}

/* ---- sections: flat on the paper; a card only where something is one object ---- */
section.panel,.panel,.panel.glass,.glass{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;transform:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
section.panel{padding:20px 0;border-top:1px solid var(--line)!important}
main>.view>section.panel:first-child,main>section.panel:first-child,.view>section.panel:first-of-type{border-top:0!important}
.card,.slot,.pc,.bubble,.flowcard,.adcard,.lawcard,.invitecard,.installcard,.tallybox,.ethos,.svc,.tradecard,.castcard,.badgecard{background:var(--cream)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important;color:var(--ink)}
.card,.bubble,.flowcard{padding:14px 16px}
.bubble{font:500 14px/1.5 var(--grot)}
.bubble b{font-weight:700}

/* ---- buttons: one shape, three kinds ---- */
.btn,button.btn,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 20px;border-radius:999px!important;border:1.5px solid var(--ink)!important;background:var(--ink)!important;color:var(--ontop)!important;font:700 14px/1.1 var(--grot)!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;cursor:pointer;text-decoration:none;transition:transform .12s ease,background .12s ease;white-space:nowrap}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px!important}
.btn.ghost{background:var(--cream)!important;color:var(--ink)!important;border-color:var(--line)!important}
.btn.red,.btn.primary,.btn.fnext{background:var(--pink)!important;border-color:var(--pink)!important;color:#fff!important}
html[data-theme="dark"] .btn.red,html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .btn.fnext{color:#0B1030!important}
.btn.green,.btn.blue{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--ontop)!important}
.btn.green.ghost{background:var(--cream)!important;color:var(--ink)!important;border-color:var(--line)!important}
.btn.dangertext{color:var(--red)!important}
.btn:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{filter:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 25%,transparent)!important}}
.btn[disabled],.btn:disabled{display:none!important}
.x,button.x{width:40px;height:40px;min-height:40px;border-radius:50%!important;border:1px solid var(--line)!important;background:var(--cream)!important;color:var(--ink)!important;font:400 22px/1 var(--grot)!important;display:grid;place-items:center;padding:0;box-shadow:none!important}
.iconbtn,.themebtn,.langbtn,.helpfab{border:1px solid var(--line)!important;background:var(--cream)!important;color:var(--ink)!important;box-shadow:none!important}
.helpbtn{background:#2457E0!important;color:#fff!important;border:0!important}
html[data-theme="dark"] .helpbtn{background:var(--blue)!important;color:#0B1030!important}

/* ---- chips and pills ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip,.moodchip,.umbrellatab,.tagbtn,.tbtn,.modeopt,.sideopt,.ghostchip,.linkchip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px!important;border:1px solid var(--line)!important;background:var(--cream)!important;color:var(--ink)!important;font:700 13px/1.1 var(--grot)!important;box-shadow:none!important;cursor:pointer;transform:none!important}
.chip.on,.moodchip.on,.umbrellatab.on,.tagbtn.on,.tbtn.on,.modeopt.on,.sideopt.on,.chip[aria-pressed="true"],.umbrellatab[aria-selected="true"]{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--ontop)!important}
.chip .opt{font-weight:500;opacity:.8}
@media (pointer:fine){.chip,.moodchip,.umbrellatab{min-height:34px;padding:0 12px}}
@media (pointer:coarse),(max-width:640px){.btn.sm,.chip,.moodchip,.umbrellatab,.tagbtn,.tbtn,.jump,.jmpin,.x,button.x{min-height:44px}.x,button.x{width:44px;height:44px}}
.pill,.collabpill,.verifiedpill,.ratingpill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px!important;font:700 11.5px/1.3 var(--grot)!important;letter-spacing:.02em;border:0!important;background:var(--sand)!important;color:var(--ink)!important;box-shadow:none!important}
.pill.green,.verifiedpill{background:var(--good-bg)!important;color:var(--green)!important}
.pill.yellow{background:var(--warn-bg)!important;color:#7A4B00!important}
html[data-theme="dark"] .pill.yellow{color:var(--gold)!important}
.pill.red{background:var(--bad-bg)!important;color:var(--red)!important}
.pill.blue,.collabpill{background:color-mix(in srgb,var(--blue) 14%,var(--cream))!important;color:var(--ink)!important}
.pill.grey{background:var(--sand)!important;color:var(--bark)!important}
.pill.ink{background:var(--ink)!important;color:var(--ontop)!important}

/* ---- notes ---- */
.note,.warnbox{background:var(--cream)!important;border:1px solid var(--line)!important;border-left:3px solid var(--blue)!important;border-radius:10px!important;padding:10px 14px!important;color:var(--ink)!important;font:500 14px/1.5 var(--grot);box-shadow:none!important}
.note.good{border-left-color:var(--green)!important;background:var(--good-bg)!important}
.note.warn,.warnbox{border-left-color:var(--gold)!important;background:var(--warn-bg)!important}
.note.bad{border-left-color:var(--red)!important;background:var(--bad-bg)!important}

/* ---- fields ---- */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.field>label,label.lbl,.fieldlabel{font:700 13px/1.3 var(--grot)!important;color:var(--ink)!important;letter-spacing:0!important;text-transform:none!important}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=url],input[type=date],input[type=time],input[type=datetime-local],input[type=month],select,textarea{
  font:500 15px/1.4 var(--grot)!important;color:var(--ink)!important;background:var(--cream)!important;border:1px solid var(--line)!important;border-radius:12px!important;padding:11px 14px!important;min-height:var(--tap);box-shadow:none!important;width:100%;box-sizing:border-box}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink)!important;outline:none!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)!important}
::placeholder{color:color-mix(in srgb,var(--bark) 80%,transparent)!important;opacity:1}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.agree,.checkrow,.agreerow{color:var(--ink)}

/* ---- sheets and pop-ups ---- */
.modal{background:rgba(11,16,48,.42)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.sheet,.modal .sheet{background:var(--paper)!important;color:var(--ink);border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:var(--shadow)!important;padding:22px 22px 20px}
@media(max-width:640px){.sheet,.modal .sheet{border-radius:18px 18px 0 0!important}}
.sheet h2{margin-right:44px}
.toast{background:var(--ink)!important;color:var(--ontop)!important;border:0!important;border-radius:12px!important;box-shadow:var(--shadow)!important;font:600 14px/1.4 var(--grot)!important}
details>summary{cursor:pointer;font:700 14px var(--grot);color:var(--ink)}
.stickyfoot{background:var(--paper)!important;border-top:1px solid var(--line)!important}

/* ---- lists ---- */
.inrow{background:var(--cream)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important;color:var(--ink)}
.personinit{background:var(--sand)!important;color:var(--ink)!important;border:2px solid var(--pink)!important;font-family:var(--serif)!important;font-weight:400!important}
.stat{background:var(--cream)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important}
.stat b{font-family:var(--serif)!important;font-weight:400!important;color:var(--ink)}
table{border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;font-size:14px}
th{font:700 11px var(--grot);letter-spacing:.1em;text-transform:uppercase;color:var(--bark)}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}

/* ---- the bars ---- */
header.bar{background:var(--paper)!important;border:0!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;border-radius:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.jumpbar{background:var(--paper)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
.jump,.jmpin{border-radius:999px!important;border:1px solid var(--line)!important;background:var(--cream)!important;color:var(--ink)!important;box-shadow:none!important;font:700 13px var(--grot)!important}
.jump.on,.jump[aria-current],.jmpin.on{background:var(--ink)!important;color:var(--ontop)!important;border-color:var(--ink)!important}

/* ---- the booking steps: one question a screen ---- */
.fq{font-size:clamp(32px,6vw,44px)!important;line-height:1.05;margin:4px 0 8px}
.choice,.expopt,.tierbtn,.ppopt,.rolechoice{background:var(--cream)!important;border:1px solid var(--line)!important;border-radius:12px!important;color:var(--ink)!important;box-shadow:none!important;font-family:var(--grot)!important}
.choice.on,.expopt.on,.tierrow.on .tierbtn,.ppopt.on,.rolechoice.on,.choice[aria-pressed="true"]{border-color:var(--ink)!important;box-shadow:0 0 0 2px var(--ink)!important;background:var(--cream)!important}
.flowfoot{background:var(--paper)!important;border-top:1px solid var(--line)!important}

/* ---- calendars ---- */
.cell,.ccday,.omday,.wday{color:var(--ink);border-color:var(--line)!important}
.cell.on,.ccday.on,.cell.sel,.ccday.sel{background:var(--ink)!important;color:var(--ontop)!important}
.cell.today,.ccday.today{box-shadow:inset 0 0 0 1.5px var(--pink)!important}
.cell.blocked,.cell.off,.ccday.off{color:color-mix(in srgb,var(--ink) 40%,var(--paper))!important}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- boards keep their own colours (her rule): the board's buttons and links win over the house ones ---- */
.space .btn{background:var(--sp-bar)!important;color:var(--sp-bartext)!important;border-color:var(--sp-bar)!important}
.space .btn.ghost{background:var(--sp-box)!important;color:var(--sp-link)!important;border-color:var(--sp-line)!important}
.space .linklike{color:var(--sp-link)!important}
/* a text link on a phone gets a thumb-sized target without moving the words around it */
@media (pointer:coarse),(max-width:640px){.linklike{padding:12px 2px!important;margin:-12px -2px!important;display:inline-block}}

/* ---- 3. the city screens ---- */
/* =====================================================================================================
   THE CITY LOOK (her redesign, chosen 2026-10-17; mockups in design-options/). One layer over everything:
   paper and navy ink, pink and blue as the two inks, a book face for names and headings, a plain grotesk for
   the rest, no blur, no drifting shapes, no leaves. Boards keep their own colours (.spaceov is left alone).
   ===================================================================================================== */
:root{
  --paper:#F7F2E8; --cream:#FFFDF8; --ink:#1F2A6B; --forest:#1F2A6B; --ontop:#FFFDF8;
  --green:#2E7D32; --btn-green:#1F2A6B; --sage:#E3E9FF; --moss:#2F6BFF; --sand:#EFE7D8; --bark:#4E5684;
  --red:#C2410C; --blue:#2F6BFF; --yellow:#B7791F; --rose:#FF4F9A; --adobe:#FF4F9A; --chile:#C2410C; --turq:#2F6BFF; --sun:#F2B84B;
  --pink:#FF4F9A; --pink-text:#C42A6B; --line:#E3DCCD;
  --glass:#FFFDF8; --glass-line:#E3DCCD; --barbg:#FFFDF8; --barline:#E3DCCD;
  --shadow:0 8px 22px rgba(31,42,107,.08); --shadow-soft:0 3px 10px rgba(31,42,107,.06);
  --accent:#1F2A6B; --accent-text:#C42A6B; --accent-ink:#FFFDF8; --wash:transparent;
  --r:18px;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --grot:"Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-theme="dark"]{
  --paper:#0B1030; --cream:#141B3A; --ink:#EEF0FF; --forest:#EEF0FF; --ontop:#0B1030;
  --green:#7FD39A; --btn-green:#FFD27A; --sage:#1E2750; --moss:#8FB3FF; --sand:#1A2147; --bark:#A7AED3;
  --red:#FF8A6B; --blue:#8FB3FF; --yellow:#FFD27A; --rose:#FF8AB8; --adobe:#FF8AB8; --turq:#8FB3FF; --sun:#FFD27A;
  --pink:#FF8AB8; --pink-text:#FF9CC4; --accent-text:#FF9CC4; --line:#26305C;
  --glass:#141B3A; --glass-line:#26305C; --barbg:#141B3A; --barline:#26305C;
  --shadow:0 10px 26px rgba(0,0,0,.35); --shadow-soft:0 4px 12px rgba(0,0,0,.3);
  --accent:#FFD27A; --accent-text:#FFD27A; --accent-ink:#0B1030;
}
html body,html[data-theme="dark"] body{background:var(--paper)!important;font-family:var(--grot);color:var(--ink)}
.shapes,#bgShapes,body::before,html[data-theme="dark"] body::before,section.panel::after{display:none!important}
h1,h2,.fq,.grpline,.mark,#brand,.stat b,.calhead .mo,.lede.big,.serif{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.005em;font-variation-settings:normal!important}
h1{font-size:clamp(34px,7vw,52px)} h1 em{font-style:italic;color:var(--pink-text)}
h2{font-size:1.75rem;color:var(--ink)}
.eyebrow,html[data-theme="dark"] .eyebrow{background:none!important;padding:0!important;border:0!important;color:var(--pink-text)!important;font-family:var(--grot);font-weight:700;letter-spacing:.14em}
.eyebrow::after,.eyebrow::before{display:none!important}
.glass,html[data-theme="dark"] .glass{background:var(--cream)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)}
.card,.stat,.choice,.bubble,.crmrow,.rolodexrow,.lawcard,.deckcard,.daybox,.linkrow,.wheelbox,.jumpbar,
html[data-theme="dark"] .card,html[data-theme="dark"] .stat,html[data-theme="dark"] .choice,html[data-theme="dark"] .bubble,
html[data-theme="dark"] .crmrow,html[data-theme="dark"] .rolodexrow,html[data-theme="dark"] .jumpbar{background:var(--cream)!important;border-color:var(--line)!important;box-shadow:none}
.sheet,html[data-theme="dark"] .sheet{background:var(--cream)!important;border-color:var(--line)!important}
.sheet .stickyfoot,html[data-theme="dark"] .sheet .stickyfoot{background:var(--cream)!important;box-shadow:0 -10px 14px -6px var(--cream)!important}
header.bar,html[data-theme="dark"] header.bar{background:var(--cream)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-soft)}
.mark .d,.mark .d2,.mark .d3{display:none!important}
.mark,#brand{color:var(--ink)!important;font-size:1.5rem!important}
.btn,.btn.red,.btn.green,.btn.blue,html[data-theme="dark"] .btn.red,html[data-theme="dark"] .btn.green{background:var(--btn-green)!important;color:var(--ontop)!important;box-shadow:none!important}
.btn.ghost,html[data-theme="dark"] .btn.ghost{background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--line)!important}
.btn:hover{filter:brightness(1.08)}
.chip,.jump,.moodchip,.sctab{border-color:var(--line)}
.chip.on,.jump.on,.moodchip.on,.sctab.on,[data-utab].on,html[data-theme="dark"] .chip.on{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
input,select,textarea,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--cream)!important;border:1.5px solid var(--line)!important;color:var(--ink)!important;border-radius:12px}
input:focus,select:focus,textarea:focus{border-color:var(--ink)!important;box-shadow:3px 3px 0 var(--pink)}
.tabbar,html[data-theme="dark"] .tabbar{background:var(--cream)!important;border:1px solid var(--line)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 8px 24px rgba(31,42,107,.10)}
.tab .ico,.tab .lbl{color:var(--bark)}
.tab[aria-selected="true"] .ico,.tab[aria-selected="true"] .lbl{color:var(--pink-text)!important}
.tab[aria-selected="true"]::before{background:color-mix(in srgb,var(--pink) 14%,transparent)!important}
.hint,.small{color:var(--bark)}
a{color:var(--ink)}
.slot,html[data-theme="dark"] .slot{background:color-mix(in srgb,var(--ink) 4%,transparent)}
/* a sticker label, used for pins, stamps and states */
.sticker{display:inline-block;font-family:var(--grot);font-weight:700;font-size:.72rem;letter-spacing:.06em;padding:3px 8px;border-radius:6px;background:var(--pink);color:#fff;box-shadow:2px 2px 0 var(--ink);transform:rotate(-3deg)}
.sticker.blue{background:var(--blue)}
/* taped photos */
.taped{position:relative;background:#fff;padding:6px 6px 22px;box-shadow:0 6px 14px rgba(0,0,0,.14);border-radius:2px}
.taped::before{content:"";position:absolute;top:-8px;left:50%;width:42px;height:14px;margin-left:-21px;background:color-mix(in srgb,var(--pink) 45%,transparent);transform:rotate(-4deg)}
.taped img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
.taped span{position:absolute;left:8px;bottom:4px;font-size:.66rem;color:#5c5a66}
/* Me */
#view-me{display:flex;flex-direction:column;gap:18px}
#view-me.hidden{display:none}
.mehead{display:flex;align-items:center;gap:16px;padding:8px 2px}
.meface{width:76px;height:76px;flex:0 0 76px;border-radius:50%;overflow:hidden;border:3px solid var(--cream);box-shadow:0 0 0 2.5px var(--pink);background:linear-gradient(135deg,#ffc2da,#b8ccff);display:grid;place-items:center}
.meface img{width:100%;height:100%;object-fit:cover}.meface span{font-family:var(--serif);font-size:34px;color:var(--ink)}
.metitle{font-size:clamp(32px,6vw,46px)!important;line-height:1;margin:2px 0 4px}
.mestats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mestats .stat{text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:16px;padding:12px 14px;font:inherit;color:var(--ink)}
.mestats .stat b{font-size:clamp(22px,4.6vw,30px)!important;display:block;line-height:1.1}
.mestats .stat span{font-size:.78rem;color:var(--bark)}
.megroup{display:flex;flex-direction:column;gap:10px}
.metiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.metile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:12px 14px;min-height:92px;font:inherit;color:var(--ink);cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.metile svg{color:var(--pink-text)}
.metile b{font-size:.98rem;font-weight:700}
.metile span{font-size:.78rem;color:var(--bark);line-height:1.3}
@media (hover:hover){.metile:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--pink)}}
@media (hover:none){.metile:hover{transform:none}}
@media(max-width:420px){.metiles{grid-template-columns:repeat(2,minmax(0,1fr))}.mestats .stat{padding:10px}}
/* The city (map home) */
html[data-view="map"] .wrap{max-width:none;padding-left:0;padding-right:0}
html[data-view="map"] header.bar{margin-left:max(12px,env(safe-area-inset-left));margin-right:max(12px,env(safe-area-inset-right))}
.city{position:relative;display:grid;grid-template-columns:1fr;gap:0}
.citymap{position:relative;height:calc(100svh - 190px - var(--floor-h,112px) + 112px);min-height:420px;border-radius:0;overflow:hidden;background:#F6EFE4}
.city.night .citymap{background:#0B1030}
.citymap .jobmap{position:absolute;inset:0;height:100%!important;border-radius:0!important;border:0!important}
.citytop{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:8px;z-index:3;align-items:flex-start}
.citysearch{flex:1;display:flex;align-items:center;gap:8px;background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:0 12px;height:44px;box-shadow:3px 3px 0 var(--pink);color:var(--ink)}
.citysearch input{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;height:40px;flex:1;min-width:0;font:600 .9rem var(--grot);color:var(--ink)}
.citytop .mtfilt{position:relative}
.citytop .mtfilt summary{height:44px;display:flex;align-items:center;padding:0 14px;border-radius:12px;background:var(--cream);border:1.5px solid var(--line);font-weight:700;cursor:pointer;list-style:none;color:var(--ink)}
.citytop .mtfilt[open] .mtfilters{position:absolute;right:0;top:50px;width:min(340px,86vw);background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow);z-index:5}
.citylayers{position:absolute;top:64px;left:12px;right:110px;z-index:3;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.citylayers .chip{background:var(--cream);white-space:nowrap}
.daynight{position:absolute;top:64px;right:12px;z-index:3;display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--cream)}
.daynight button{border:0;background:transparent;padding:6px 11px;font:700 .72rem var(--grot);color:var(--ink);min-height:34px}
.daynight button.on{background:var(--ink);color:var(--paper)}
.city.night .daynight{border-color:#FFD27A}.city.night .daynight button.on{background:#FFD27A;color:#0B1030}
.cityface{border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transform:translateY(-22px)}
.cf{width:46px;height:46px;border-radius:50%;overflow:hidden;border:3px solid #FFFDF8;box-shadow:0 0 0 2.5px #C2410C,0 6px 14px rgba(0,0,0,.22);background:linear-gradient(135deg,#ffc2da,#b8ccff);display:grid;place-items:center}
.cf img{width:100%;height:100%;object-fit:cover}.cf b{font-family:var(--serif);font-weight:400;font-size:22px;color:#1F2A6B}
.cf.big{width:72px;height:72px;flex:0 0 72px}
.clab{font-family:var(--serif);font-size:15px;line-height:1.1;color:#2A2420;background:rgba(251,248,243,.9);padding:1px 7px;border-radius:6px;white-space:nowrap}
.clab em{font-style:normal;font-family:var(--grot);font-weight:700;font-size:10.5px;color:#C2410C}
.cityface.star{transform:none}
.cstar{width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,236,190,.75)}
.cityface.star .clab{font-family:var(--grot);font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:#1a2358;color:#FFD27A;border:1px solid #FFD27A}
.mtlistbtn{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:3}
.citysheet{position:relative;z-index:4;margin-top:-26px;background:var(--paper);border-radius:22px 22px 0 0;padding:8px 16px 16px;box-shadow:0 -8px 22px rgba(0,0,0,.12)}
.city.night .citysheet{background:#141B3A;color:#EEF0FF}
.citysheet .grab{width:44px;height:5px;border-radius:9px;background:var(--line);margin:4px auto 10px}
.citynote{margin:10px 0 0}
.mttomap{display:none}
.tapedrow{display:flex;gap:12px;margin-top:14px}.tapedrow .taped{width:min(240px,70%)}.tapedrow .taped img{height:180px}
@media(min-width:900px){
  .city{grid-template-columns:440px 1fr;height:calc(100svh - 110px)}
  .citysheet{order:-1;margin:0;border-radius:0;box-shadow:none;border-right:1px solid var(--line);overflow:auto;height:100%;padding:18px 22px}
  .citysheet .grab{display:none}
  .citymap{height:100%}
  .mtlistbtn{display:none}
}
/* the city top bar: MyBella, the five places (on a computer), search, the bell and your picture */
html.citynav #modeBtn,html.citynav #themeBtn{display:none!important}
.hsearch{display:none;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);min-width:0}
.hsearch input{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;height:38px;width:100%;font:500 .88rem var(--grot);color:var(--ink)}
.hbell,.havatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);position:relative;padding:0}
.havatar{background:var(--pink);border-color:var(--pink);color:#fff;font:700 15px var(--grot);overflow:hidden}
.havatar img{width:100%;height:100%;object-fit:cover}
.hdot{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--pink);border:2px solid var(--cream)}
html.citynav header.bar{gap:8px}
html.citynav header.bar .mark{margin-right:auto}
.yousheet .yourow{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;padding:11px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.yousheet .yourow b{font-size:.98rem}.yousheet .yourow span{font-size:.8rem;color:var(--bark)}
.yousheet .yourow.on b{color:var(--pink-text)}
@media(min-width:900px){
  html.citynav .wrap{max-width:none;padding-top:0}
  html.citynav header.bar{position:sticky;top:0;margin:0 -16px 18px;border-radius:0!important;border-width:0 0 1px!important;padding:12px 24px;min-height:66px;box-shadow:none!important}
  html.citynav[data-view="map"] header.bar{margin:0 0 0}
  html.citynav .hsearch{display:flex;width:300px}
  /* the five places sit in the top bar on a computer */
  html.citynav .tabbar{position:fixed;top:12px;bottom:auto;left:200px;right:auto;z-index:75;background:transparent!important;border:0!important;box-shadow:none!important;padding:0;gap:6px;display:flex;border-radius:0}
  html.citynav .tabbar .tab{flex:0 0 auto;flex-direction:row;gap:7px;padding:9px 16px;border-radius:999px;min-height:42px}
  html.citynav .tabbar .tab .lbl{font-size:.92rem;font-weight:700;color:var(--bark)}
  html.citynav .tabbar .tab .ico svg{width:18px;height:18px}
  html.citynav .tabbar .tab[aria-selected="true"]{background:var(--ink)}
  html.citynav .tabbar .tab[aria-selected="true"] .lbl,html.citynav .tabbar .tab[aria-selected="true"] .ico{color:var(--paper)!important}
  html.citynav .tabbar .tab[aria-selected="true"]::before{display:none}
  html.citynav .barctl,html.citynav #barPull{display:none!important}
  html.citynav{--floor-h:24px}
  html.citynav .wrap{padding-bottom:40px}
  html.citynav .miniplayer{bottom:20px}
}
/* Listen lives in your picture's menu now: the floating player only shows while something is playing */
html.citynav .miniplayer:not(.open):not(.playing){display:none}
.cityhead{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.citytitle{font-size:clamp(30px,5vw,44px)!important;line-height:1;margin:0!important}
.cityhead .chips{flex-wrap:wrap;gap:6px}
.cityhead .mtfilt{display:inline-block;position:relative}
.cityhead .mtfilt summary{list-style:none;cursor:pointer}
.cityhead .mtfilt[open] .mtfilters{position:absolute;left:0;top:44px;width:min(340px,86vw);background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow);z-index:8}
.cityhead .mtlocask{position:static;margin-top:6px;box-shadow:none;border:1px dashed var(--pink)}
.cityrow{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:transparent;border:0;padding:8px 0;font:inherit;color:var(--ink);cursor:pointer}
.cityphoto{width:112px;height:112px;flex:0 0 112px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#ffc2da,#b8ccff)}
.cityphoto img{width:100%;height:100%;object-fit:cover}
.citymeta{display:flex;flex-direction:column;gap:6px;min-width:0}
.cf.sm{width:30px;height:30px;border-width:2px;box-shadow:0 0 0 2px var(--pink)}.cf.sm b{font-size:15px}
.cityname{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1}
.cityrole{display:block;font-size:.8rem;color:var(--bark)}
.cityfacts{font-size:.8rem;color:var(--bark)}
.cfstack{display:flex}.cfstack .cf{margin-left:-14px}.cfstack .cf:first-child{margin-left:0}
.city .citytop{display:flex}
#mtList h3{font-family:var(--grot);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-text);margin:14px 0 4px!important}
@media(min-width:900px){.city .citytop{display:none}.daynight{top:14px}}
@media(max-width:899px){.daynight{top:12px;right:12px}.citytop{right:110px}}
html.citynav #navBack,html.citynav #navFwd{display:none!important}
.webtag .linklike{color:inherit!important}
@media(max-width:899px){
  .citymap{height:calc(100svh - 360px);min-height:360px}
  .citytop{right:12px}
  .daynight{top:64px;right:12px}
  .citymap .maplibregl-ctrl-top-right{display:none}
  .mtlistbtn{bottom:36px}
}
/* the painted city: paper grain and soft watercolour edges over our own map, under the faces */
.citymap .maplibregl-canvas{filter:url(#paintfx)}
.city.night .citymap .maplibregl-canvas{filter:none}
.citymap .paperfx{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .38 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
   radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(201,180,156,.35) 100%)}
.city.night .citymap .paperfx{display:none}
.citymap .maplibregl-marker{z-index:2}
/* phone: the city opens straight onto the map, like the picture; the top bar lives in Me */
.meyou{margin-left:auto;width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);display:grid;place-items:center}
@media(max-width:899px){
  html.citynav header.bar{display:none!important}
  html.citynav .wrap{padding-top:max(12px,env(safe-area-inset-top))}
  html.citynav[data-view="map"] .wrap{padding-top:0}
  .citymap{height:calc(100svh - 330px - env(safe-area-inset-bottom));min-height:340px}
  html.citynav[data-view="map"] .citytop{top:max(14px,env(safe-area-inset-top))}
  .citystrip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .citystrip .cityrow{flex:0 0 132px;flex-direction:column;scroll-snap-align:start;padding:0}
  .citystrip .cityphoto{width:132px;height:150px;flex-basis:auto}
  .citystrip .citymeta .row .cf{display:none}
  .citystrip .cityfacts{display:none}
  .cityhead .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
@media(min-width:900px){.meyou{display:none}}
/* the lily pond */
.pondpage{display:grid;grid-template-columns:1fr;gap:12px}
.pondart{position:relative}
.pondhead{position:relative;z-index:1}
.pondtitle{font-size:clamp(34px,6vw,48px)!important;line-height:1;margin:0!important}
.pondsvg{display:block;width:100%;height:auto}
.pondsvg .pl1{font:700 10px var(--grot);fill:#1E3A34;letter-spacing:.04em}
.pondsvg .pl2{font:400 14px var(--serif);fill:#1E3A34}
.pondhit{cursor:pointer}.pondhit:focus{outline:none}.pondhit:focus-visible>*{stroke:var(--pink);stroke-width:2}
.pondside{display:flex;flex-direction:column;gap:8px}
.pondtotal{background:linear-gradient(135deg,#ffe3ee,#e3ebff);border-radius:16px;padding:14px 16px}
.pondbig{font-family:var(--serif);font-size:clamp(30px,5vw,44px);line-height:1;color:#1F2A6B}
.pondtotal span{font-size:.85rem;color:#4E5684}
.pondrow{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 2px;font:inherit;color:var(--ink);cursor:pointer}
.pondrow b{font-size:.92rem}.pondrow span{font-size:.8rem;color:var(--bark);text-align:right}
.pondrow.late b,.pondrow.late span{color:var(--pink-text)}
.pondbtns{flex-wrap:wrap;gap:8px;margin-top:6px}
.barrels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.barrel{position:relative;height:120px;border:2px solid var(--ink);border-radius:12px 12px 18px 18px;background:#fff;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px}
.barrel .bwater{position:absolute;left:0;right:0;bottom:0;background:#A9CBEB}
.barrel b,.barrel span,.barrel em{position:relative;z-index:1}
.barrel b{font:400 18px var(--serif);color:#1F2A6B;margin-bottom:auto;margin-top:30px}
.barrel span{font:700 11px var(--grot);color:#1F2A6B}.barrel em{font-style:normal;font-size:10px;color:#4E5684}
.barrel.now{border-color:var(--pink);box-shadow:3px 3px 0 var(--pink)}
.barrel.past{opacity:.75}
@media(min-width:1180px){.pondpage{grid-template-columns:minmax(0,1fr) 420px;align-items:start}
  .pondhead{position:absolute;left:24px;top:14px}.pondside{border-left:1px solid var(--line);padding-left:22px;min-height:70vh}
  html[data-view="money"] .wrap{max-width:1440px}}
/* Sketchbook */
.sketchbook{position:relative;padding:8px 2px 18px}
.sktitle{font-size:clamp(34px,6vw,52px)!important;line-height:1;margin:2px 0 12px!important}
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 18px;margin-top:22px;align-items:start}
.skitem{border:0;cursor:pointer;font:inherit;text-align:left;display:block;width:100%}
.skitem img,.skitem .skblank{display:block;width:100%;aspect-ratio:4/3.2;object-fit:cover;border-radius:2px}
.skitem:nth-child(3n+2) img,.skitem:nth-child(3n+2) .skblank{aspect-ratio:4/2.6}
.skitem:nth-child(3n) img,.skitem:nth-child(3n) .skblank{aspect-ratio:4/3.8}
.skstickers{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.skstickers .sticker{border:0;cursor:pointer;font-size:.8rem;padding:6px 11px}
@media(min-width:900px){.skgrid{grid-template-columns:repeat(4,1fr)}}
html.citynav .footpanel{display:none}
/* Bookings: the week */
.citybk{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px}
.bktitle{font-size:clamp(34px,6vw,48px)!important;line-height:1;margin:0!important}
.cal7wrap{overflow-x:auto;margin-top:12px;border-top:1px solid var(--line)}
.cal7{display:grid;grid-template-columns:52px repeat(7,minmax(84px,1fr));min-width:640px}
.c7h{border:0;background:transparent;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;text-align:center;font:700 .78rem var(--grot);color:var(--ink);cursor:pointer}
.c7h:first-child{border-left:0}
.c7h b{display:block;font:400 1.5rem var(--serif)}
.c7h.today b{color:var(--pink-text)}
.c7times div{height:var(--rh);font-size:.72rem;color:var(--bark);padding:3px 4px;border-bottom:1px solid var(--line)}
.c7col{position:relative;border-left:1px solid var(--line);background:repeating-linear-gradient(transparent 0 calc(var(--rh) - 1px),var(--line) calc(var(--rh) - 1px) var(--rh));cursor:pointer}
.evd{position:absolute;left:4px;right:4px;border:0;text-align:left;border-radius:8px;padding:5px 7px;font:500 .74rem var(--grot);color:#1F2A6B;background:linear-gradient(135deg,#ffd9e8,#dfe8ff);border-left:4px solid var(--pink);overflow:hidden;cursor:pointer;z-index:2}
.evd b{display:block;font-size:.78rem}
.evd.pend{background:#fff;border:1.5px dashed var(--pink);border-left:4px solid var(--pink)}
.citybkside{display:flex;flex-direction:column;gap:8px}
.waitcard{border:1.5px dashed var(--pink)!important}
.comecard{text-align:left;width:100%;cursor:pointer;font:inherit;color:var(--ink)}
@media(min-width:900px){.citybk{grid-template-columns:minmax(0,1fr) 340px}.citybkside{border-left:1px solid var(--line);padding-left:20px}}
/* Inbox: on a computer the conversation sits beside the list */
.inboxtitle{font-size:clamp(34px,6vw,48px)!important;line-height:1}
#view-corner [data-corner].on{box-shadow:3px 3px 0 var(--pink);border-color:var(--ink)!important}
@media(min-width:900px){
  html.citynav[data-view="corner"] #view-corner{max-width:420px}
  html.citynav .modal.inboxdock{position:fixed;left:auto;right:0;top:66px;bottom:0;width:calc(100% - 460px);background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0;z-index:60;display:block}
  html.citynav .modal.inboxdock .sheet{max-width:none!important;width:100%;height:100%;margin:0!important;border-radius:0!important;border-width:0 0 0 1px!important;box-shadow:none!important;overflow:auto}
  html.citynav[data-view]:not([data-view="corner"]) .modal.inboxdock{display:none}
}
.pc{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink)}
.pc b{display:block;font-size:.92rem}.pc p{font-size:.8rem;color:var(--bark);margin:2px 0 0}
/* ---- Jobs, the city look (mockup d10): the list on the left, the open job on the right ---- */
html.citynav #view-jobs{padding:0}
.jobsplit{display:grid;grid-template-columns:1fr;min-height:calc(100svh - 64px)}
.jobside{padding:24px 16px 32px;display:flex;flex-direction:column;gap:14px}
.jobshead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jobshead h1{font-size:clamp(34px,4vw,44px)!important;line-height:1;margin:0!important;color:var(--ink)}
.jobside .eyebrow{margin:0}
.jobside .chips{margin:0;gap:8px}
.jlist{display:flex;flex-direction:column;gap:4px}
.jrow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:14px;padding:10px;cursor:pointer;color:var(--ink)}
.jrow:hover{background:color-mix(in srgb,var(--cream) 70%,transparent)}
.jrow.on{background:var(--cream);border-color:var(--line);box-shadow:var(--shadow-soft)}
.jrowpic{flex:none;width:110px;height:84px;border-radius:8px;overflow:hidden}
.jrowpic img{width:100%;height:100%;object-fit:cover;display:block}
.jrowtx{display:flex;flex-direction:column;gap:3px;min-width:0}
.jrowtx b{font:700 1rem/1.25 var(--grot)}
.jrowtx span{font:500 .82rem/1.35 var(--grot);color:var(--bark)}
.jmine{display:flex;flex-direction:column;gap:8px}
.jobopen{display:none}
@media(min-width:900px){
  .jobsplit{grid-template-columns:minmax(360px,520px) 1fr}
  .jobside{padding:28px 26px 40px;border-right:1px solid var(--line)}
  .jobopen{display:block;padding:22px 26px 40px;position:sticky;top:64px;align-self:start;max-height:calc(100svh - 64px);overflow:auto}
}
.jcover{height:min(300px,34vh);border-radius:14px;overflow:hidden}
.jcover img{width:100%;height:100%;object-fit:cover;display:block}
.jsticker{position:relative;margin:-14px 0 0 0;font-size:.82rem;padding:4px 9px;z-index:1}
.jtitle{font-size:clamp(36px,3.6vw,48px)!important;line-height:1.02;margin:10px 0 6px!important;color:var(--ink)}
.jmeta{font:500 .86rem var(--grot);color:var(--bark);margin:0 0 14px}
.jdesc{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:500 .9rem/1.5 var(--grot);margin:0 0 16px;max-width:none}
.jacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* ---- The community, the city look (mockup d9): a rail beside a wall of taped posts ---- */
html.citynav #view-collab{padding:0}
.comshell{display:grid;grid-template-columns:1fr;min-height:calc(100svh - 64px)}
.comrail{padding:18px 16px 4px;display:flex;flex-direction:column;gap:10px}
.comrail .eyebrow{margin:6px 0 0}
.comitems{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.comitem{flex:none;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:999px;padding:8px 14px;min-height:40px;font:700 .86rem var(--grot);cursor:pointer}
.comitem svg{color:var(--pink)}
.comitem.on{color:var(--pink-text);border-color:var(--pink)}
.comdot{font-style:normal;background:var(--pink);color:#fff;border-radius:999px;font-size:.7rem;padding:1px 7px}
.comtopics{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.comtopics .chip{flex:none}
.commain{padding:10px 16px 40px;min-width:0}
.commain>section.panel{margin-left:0;margin-right:0}
@media(min-width:900px){
  .comshell{grid-template-columns:260px 1fr}
  .comrail{padding:28px 26px;border-right:1px solid var(--line);position:sticky;top:64px;align-self:start;height:calc(100svh - 64px);overflow:auto}
  .comitems{flex-direction:column;gap:0;overflow:visible}
  .comitem{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:12px 4px;min-height:44px;font-size:.95rem}
  .comitem.on{border-bottom-color:var(--line)}
  .comtopics{flex-wrap:wrap;overflow:visible}
  .commain{padding:22px 28px 48px}
}
.boardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.boardhead h1{font-size:clamp(40px,4.4vw,52px)!important;line-height:1;margin:0!important;color:var(--ink)}
.boardkind{margin:0 0 22px}
.wall{columns:4 210px;column-gap:28px}
.wall>button{break-inside:avoid;display:block;width:100%;margin:0 0 30px;cursor:pointer;text-align:left}
.wallpic{border:0;padding:7px 7px 24px}
.wallpic img{height:auto;aspect-ratio:auto;max-height:340px;min-height:160px}
.wallpic span{color:#3b3f63;font:500 .72rem var(--grot)}
.wallcard{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-soft);color:var(--ink);display:flex!important;flex-direction:column;gap:4px}
.wallcard b{font:700 .95rem/1.3 var(--grot)}
.wallcard span{font:500 .8rem var(--grot);color:var(--bark)}
.comrail{flex-direction:column!important;align-items:stretch!important;margin:0!important;flex-wrap:nowrap!important}
.comethos{font:500 .8rem/1.5 var(--grot);color:var(--bark);margin:14px 0 0}
.comhello{display:flex;align-items:center;gap:14px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 18px}
.comhello p{margin:0;font:500 .86rem/1.5 var(--grot);max-width:none}
.comhello .btn{flex:none}
#view-jobs #castChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
#view-jobs #castChips .chip{flex:none}
.jobside .eyebrow,.comrail .eyebrow{border:0!important;text-align:left}
.jobside .eyebrow,.comrail .eyebrow{box-shadow:none!important}
.jobsplit,.comshell{grid-template-columns:minmax(0,1fr)}
.jobside,.commain,.comrail{min-width:0}
@media(min-width:900px){
  .jobsplit{grid-template-columns:minmax(360px,520px) minmax(0,1fr)}
  .comshell{grid-template-columns:260px minmax(0,1fr)}
  .comitem,.comitem.on{background:transparent!important;box-shadow:none!important}
  .comitem.on{color:var(--pink-text)!important}
  .comtopics .chip{padding:6px 12px;min-height:34px;font-size:.8rem}
}
.comitem.on{background:var(--cream)!important;box-shadow:none!important;color:var(--pink-text)!important}
@media(min-width:900px){.comitem.on{background:transparent!important}}
@media(max-width:899px){.wall{columns:2;column-gap:16px}.wall>button{margin-bottom:20px}.jrowpic{width:84px;height:70px}}
/* ---- A talent page, the city look (mockup d11): cover, face, taped work, the booking card beside it ---- */
html.citynav #view-home:has(.tpcity){padding:0}
.tpcity{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cover" "head" "book" "rest"}
.tpcover{grid-area:cover;height:200px;overflow:hidden}
.tpcover img{width:100%;height:100%;object-fit:cover;display:block}
.tphead{grid-area:head;padding:0 16px;min-width:0}
.tpface{width:104px;height:104px;border-radius:50%;border:3px solid var(--pink);background:var(--cream);overflow:hidden;margin-top:-52px;position:relative;display:grid;place-items:center;box-shadow:0 0 0 4px var(--paper)}
.tpface img{width:100%;height:100%;object-fit:cover}
.tpface span{font:400 44px var(--serif);color:var(--ink)}
.tpname{font-size:clamp(40px,5vw,56px)!important;line-height:1;margin:14px 0 8px!important;color:var(--ink)}
.tpmeta{font:500 .88rem var(--grot);color:var(--bark);margin:0 0 8px}
.tphead .ownwords{margin:0 0 10px;max-width:60ch}
.tpwork{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 10px;max-width:900px}
.tpwork .taped{margin:0;padding:6px 6px 26px}
.tpwork .taped img{aspect-ratio:4/3;height:auto}
.tpbook{grid-area:book;padding:16px}
.tprest{grid-area:rest;padding:0 16px 40px;min-width:0}
.tprest>section.panel{margin-left:0;margin-right:0}
.tpcard{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:0 14px 34px rgba(31,42,107,.12)}
.tpcard .eyebrow{margin:0}
.tpcard h2{font-size:34px!important;line-height:1.05;margin:2px 0 12px!important;color:var(--ink)}
.tpsoon{display:flex;align-items:center;justify-content:space-between;width:100%;border:1.5px solid var(--pink);border-radius:12px;background:transparent;padding:11px 12px;font:500 .9rem var(--grot);color:var(--ink);cursor:pointer;text-align:left;min-height:44px}
.tpsoon b{font-weight:700}.tpsoon i{font-style:normal;font-weight:700;font-size:1.2rem}
.tpcal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 4px;margin:16px 0 10px;text-align:center}
.tpdh{font:700 .68rem var(--grot);color:var(--ink);letter-spacing:.08em;padding-bottom:6px}
.tpday{display:grid;place-items:center;height:36px;border-radius:999px;font:700 .86rem var(--grot);color:var(--ink);border:0;background:transparent}
button.tpday{cursor:pointer}
.tpday.open{background:color-mix(in srgb,var(--pink) 18%,var(--cream))}
.tpday.on{background:var(--ink);color:var(--paper)}
.tpday.shut{color:color-mix(in srgb,var(--ink) 38%,var(--cream));font-weight:500}
.tpfoot{font:500 .82rem var(--grot);color:var(--bark);margin:0 0 14px}
.tpbtns{display:flex;flex-wrap:wrap;gap:8px}
@media(min-width:900px){
  .tpcity{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"cover cover" "head book" "rest book"}
  .tpcover{height:300px}
  .tphead{padding:0 40px}
  .tpface{width:112px;height:112px;margin-top:-56px}
  .tpbook{padding:0 40px 0 0;margin-top:-80px;position:relative;z-index:2}
  .tpcard{position:sticky;top:84px}
  .tprest{padding:10px 40px 48px}
}
/* the redesigned screens run edge to edge under the header, as in the mockups */
html.citynav main:has(#view-home:not(.hidden) .tpcity),html.citynav main:has(#view-jobs:not(.hidden) .jobsplit),html.citynav main:has(#view-collab:not(.hidden) .comshell){padding-left:0;padding-right:0}
html.citynav #view-home:not(.hidden) .tpcity,html.citynav #view-jobs:not(.hidden) .jobsplit,html.citynav #view-collab:not(.hidden) .comshell{margin-top:-18px}
html.citynav .eyebrow{box-shadow:none!important}
/* ---- The Studio on a computer (mockup d12): tools left, canvas middle, colour and layers right ---- */
.dwtool .tic{display:none}
.drawov.studio.wide{display:grid;grid-template-columns:92px minmax(0,1fr) 300px;grid-template-rows:auto auto auto minmax(0,1fr);background:#352B27;backdrop-filter:none;-webkit-backdrop-filter:none}
.drawov.studio.wide>.stbar.top{grid-column:2;grid-row:1}
.drawov.studio.wide>.stbar.sub{grid-column:2;grid-row:2}
.drawov.studio.wide>.stbar.extra{grid-column:2;grid-row:3}
.drawov.studio.wide>.ststage{grid-column:2;grid-row:4;min-height:0;padding:28px}
.drawov.studio.wide>.stcanvas{grid-column:2;grid-row:3}
.drawov.studio.wide>.stbar.bottom{grid-column:1;grid-row:1/-1;border-radius:0;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;padding:16px 0;background:#2B2320;border:0;overflow-y:auto;scrollbar-width:none}
.drawov.studio.wide .stbar.top,.drawov.studio.wide .stbar.sub,.drawov.studio.wide .stbar.extra{background:transparent;border:0;border-radius:0;padding:10px 16px 0}
.drawov.studio.wide .stbar .btn.ghost,.drawov.studio.wide .stbar .dwtool{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#F4EDE4}
.drawov.studio.wide .stbar .dwtool.on{background:#FF4F9A;border-color:#FF4F9A;color:#fff}
.drawov.studio.wide .stslider{color:#E6DCD2}
.drawov.studio.wide #stTools{display:flex;flex-direction:column;gap:10px;align-items:center}
.drawov.studio.wide #stTools .dwtool{display:flex;flex-direction:column;align-items:center;gap:3px;width:68px;min-height:60px;padding:8px 2px 6px;border-radius:16px;background:transparent;border:0;color:#E9DFD5;font:600 .66rem var(--grot)}
.drawov.studio.wide #stTools .dwtool .tic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.drawov.studio.wide #stTools .dwtool .tic svg{width:20px;height:20px}
.drawov.studio.wide #stTools .dwtool.on{background:transparent;color:#fff}
.drawov.studio.wide #stTools .dwtool.on .tic{background:#FF4F9A;border-color:#FF4F9A}
.drawov.studio.wide #stTools .dwtool:hover .tic{background:rgba(255,255,255,.14)}
.stside{grid-column:3;grid-row:1/-1;background:#2B2320;color:#F4EDE4;padding:20px 20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.stsidehead{display:flex;align-items:center;justify-content:space-between}
.stsidehead h2{font:400 30px var(--serif)!important;color:#F4EDE4!important;margin:0!important}
.stsidehead #stSave{background:#FF4F9A!important;border-color:#FF4F9A!important;color:#fff!important}
.stsidecol{display:flex;flex-direction:column;gap:14px}
.wide .stsidecol #dwWheel{position:static!important;display:block!important;width:auto;background:transparent;border:0;box-shadow:none;padding:0;left:auto!important;top:auto!important}
.wide .stsidecol #dwWheelCanvas{display:block;width:220px;height:220px;margin:0 auto 12px;border-radius:50%}
.wide .stsidecol #dwPal{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;justify-items:center}
.wide .stsidecol #dwPal .sw{width:34px;height:34px;border-radius:50%;border:2.5px solid #F4EDE4;box-shadow:none}
.wide .stsidecol #dwWheelDone,.wide .stsidecol #dwWheelBtn,.wide .stsidecol #dwWheelWord{display:none}
.wide .stsidecol .wheelrow input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#F4EDE4}
.wide .stsidecol .stslider{color:#E6DCD2;font-size:.8rem}
.wide .stsidecol .stslider input[type=range]{flex:1;width:auto}
.wide .stsidecol .dwtool{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#F4EDE4}
.wide .stsidecol .swatches{flex-wrap:wrap}
.wide .stsidecol #stLayers{position:static;width:auto;background:transparent;border:0;box-shadow:none;padding:0;color:#F4EDE4}
.wide .stsidecol #stLayers>.row b{font:700 .72rem var(--grot);letter-spacing:.14em;text-transform:uppercase;color:#FF8AB8}
.wide .stsidecol #stLayers .strow{border-radius:0;border:0;border-bottom:1px solid rgba(255,255,255,.12);padding:9px 2px;font:700 .86rem var(--grot)}
.wide .stsidecol #stLayers .strow.on{background:rgba(255,79,154,.14)}
.wide .stsidecol #stLayers .btn.ghost{color:#F4EDE4;border-color:rgba(255,255,255,.2);background:transparent}
.drawov.studio.wide .stdoc{border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.drawov.studio.wide .stbar .btn.ghost,.drawov.studio.wide .stbar .btn.ghost *,.wide .stsidecol .btn.ghost,.wide .stsidecol .dwtool{color:#F4EDE4!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.2)!important}
.drawov.studio.wide #stZoomPct,.drawov.studio.wide #stSaved{color:#F4EDE4!important}
.wide .stsidecol #stLayers .strow span{color:#F4EDE4}
/* phone fixes from the phone check: the Bookings week fits the screen, the community buttons fit a thumb,
   and a person's first letter reads on the gold of night mode */
@media(max-width:899px){.citybk{grid-template-columns:minmax(0,1fr)}}
.citybkmain,.citybkside{min-width:0}
.cal7wrap{max-width:100%;overflow-x:auto}
.comitem{min-height:44px}
html.citynav .personinit{color:var(--ontop)!important}
html:not([data-theme="dark"]) .helpbtn{background:#2457E0}
/* ---- Me, as in mockup d7: you and this month in one row, the tiles four across, the soft glow behind ---- */
#view-me,#view-saved,#view-collab{position:relative;isolation:isolate}
#view-me::before,#view-saved::before,.boardhead::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-40px;left:-80px;width:420px;height:300px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pink) 30%,transparent),transparent);filter:blur(8px)}
#view-me::after,#view-saved::after{content:"";position:absolute;z-index:-1;pointer-events:none;top:-40px;right:6%;width:460px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 22%,transparent),transparent);filter:blur(8px)}
.boardhead{position:relative}
.boardhead::before{left:auto;right:10%;top:-60px;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 22%,transparent),transparent)}
html[data-theme="dark"] #view-me::before,html[data-theme="dark"] #view-me::after,html[data-theme="dark"] #view-saved::before,html[data-theme="dark"] #view-saved::after,html[data-theme="dark"] .boardhead::before{opacity:.45}
.mehead{flex-wrap:wrap;row-gap:14px}
.mewho{min-width:0;flex:1 1 220px}
.mesub{margin:0;font:500 .86rem var(--grot);color:var(--bark)}
.mesub .linklike{font:inherit;color:var(--ink);text-decoration:underline}
.meface{width:92px;height:92px;flex:none}
.mehead .mestats{flex:1 1 100%}
.mestats .stat{background:var(--cream)}
@media(min-width:900px){
  #view-me{padding-top:28px}
  .mehead{flex-wrap:nowrap;gap:22px;margin-bottom:10px}
  .meface{width:96px;height:96px}
  .metitle{font-size:52px!important}
  .mehead .mestats{flex:0 1 580px;margin-left:auto;grid-template-columns:repeat(3,minmax(150px,180px));justify-content:end}
  .mestats .stat{padding:14px 14px 12px;min-height:82px;border-radius:12px}
  .mestats .stat b{font-size:30px!important}
  .metiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .metile{min-height:96px;padding:16px 16px 14px;border-radius:12px;gap:6px}
  .metile b{font-size:1.02rem}
  .megroup{gap:12px;margin-top:18px}
  #view-me .nextstep{margin:14px 0 4px}
}
/* ---- Inbox, as in mockup d6: people on the left, the conversation and its booking on the right ---- */
html.citynav #s-corner{background:transparent!important;border:0!important;box-shadow:none!important;padding:24px 4px 24px 0}
html.citynav #s-corner .cnhint{display:none}
html.citynav #s-corner .flabel{font:700 .7rem var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--pink-text);margin:10px 0 6px}
html.citynav .cnrow{position:relative;background:transparent!important;border:1px solid transparent!important;border-radius:14px!important;box-shadow:none!important;padding:12px 56px 12px 12px!important}
html.citynav .cnrow.on,html.citynav #view-corner [data-corner].on{background:var(--cream)!important;border-color:var(--line)!important;box-shadow:var(--shadow-soft)!important}
html.citynav .cnrow .personinit{background:var(--soft)!important;color:var(--ink)!important;border:2.5px solid var(--pink);font-family:var(--serif)!important;font-weight:400!important;width:46px!important;height:46px!important;flex:0 0 46px!important}
html.citynav .cnrow .inmain b{font:700 1rem var(--grot)}
html.citynav .cnrow .cnstat{display:none}
.cnwhen{position:absolute;right:14px;top:16px;font:500 .8rem var(--grot);color:var(--bark)}
html.citynav .cnrow .inside{position:absolute;right:14px;bottom:12px}
@media(min-width:900px){
  html.citynav main:has(#view-corner:not(.hidden)){padding-left:26px}
  html.citynav .modal.mgdock .sheet{display:flex;flex-direction:column;padding:18px 26px 18px!important;background:var(--paper)!important}
  html.citynav .modal.mgdock #mgx{display:none}
  .mghead{display:flex;align-items:center;gap:12px;margin:0 0 12px}
  .mgface{width:50px;height:50px;flex:none;border-radius:50%;border:2.5px solid var(--pink);display:grid;place-items:center;font:400 22px var(--serif);color:var(--ink)}
  .mgwho{display:flex;flex-direction:column;min-width:0;flex:1}
  .mgwho b{font:700 1.05rem var(--grot);color:var(--ink)}
  .mgwho span{font:500 .84rem var(--grot);color:var(--bark)}
  .mgstrip{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:500 .82rem var(--grot);color:var(--bark);margin:0 0 14px}
  html.citynav .modal.mgdock .msgthread{flex:1;min-height:0;overflow:auto;max-height:none!important;display:flex;flex-direction:column;gap:12px;padding:4px 0 12px}
  html.citynav .modal.mgdock .msginput{margin-top:auto;gap:10px}
  html.citynav .modal.mgdock .msginput input{height:46px;border-radius:999px}
  html.citynav .modal.mgdock .msginput+div,html.citynav .modal.mgdock .msginput~p.hint{font-size:.74rem}
}
html.citynav .msg{border:0!important;max-width:min(80%,520px)}
html.citynav .msg .msgbody{padding:10px 14px;border-radius:16px;font:500 .9rem/1.45 var(--grot)}
html.citynav .msg.them .msgbody{background:var(--cream);border:1px solid var(--line);color:var(--ink)}
html.citynav .msg.me{align-self:flex-end;align-items:flex-end}
html.citynav .msg.me .msgbody{background:var(--ink);color:var(--paper)}
html.citynav .msg .msgmeta{font-size:.7rem;color:var(--bark);margin-top:3px;padding:0 4px}
.taped .skblank{position:static;left:auto;bottom:auto}
.skitem{padding:7px 7px 26px}
@media(min-width:900px){#view-saved .sketchbook{padding:28px 30px 18px}.skgrid{gap:34px 30px}}
/* the next step on Me: one calm strip, not a coloured block */
html.citynav #view-me .nextstep{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 16px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px}
html.citynav #view-me .nextstep .eyebrow{flex:1 1 100%;margin:0}
html.citynav #view-me .nextstep b{font-size:1rem}
html.citynav #view-me .nextstep p{margin:0;flex:1 1 260px}
html.citynav #view-me .nextstep .hint{flex:1 1 260px;margin:0}
html.citynav #view-me .nextstep .row{margin-top:0!important}
/* ---- the city, matched to mockups d1, d2 and d3 (2026-10-17, second pass) ---- */
.cf{width:52px;height:52px;border:3px solid #FFFDF8;box-shadow:0 0 0 2.5px #C2410C,0 6px 14px rgba(0,0,0,.2)}
.cf.sm{width:34px;height:34px;flex:0 0 34px;border-width:2px;box-shadow:0 0 0 2px var(--pink)}
.cityface .clab{background:#FFFDF8;color:#2A2420;font-size:16px;padding:2px 8px 3px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cityface .clab em{font-size:11.5px;color:#C2410C;margin-left:2px}
.jmpin.mt-jobs,.jmpin.mt-saved{background:#FFFDF8!important;color:#C2410C!important;border:1px solid #EADFCF!important;border-radius:6px!important;font:700 12.5px/1 var(--grot)!important;padding:8px 11px!important;transform:rotate(-3deg);box-shadow:0 4px 10px rgba(60,40,20,.16)!important;min-height:0!important;white-space:nowrap}
.city.night .jmpin.mt-jobs,.city.night .jmpin.mt-saved{background:#141B48!important;color:#FFD27A!important;border-color:#FFD27A!important}
.maplbl{pointer-events:none;white-space:nowrap;font-family:var(--serif);text-shadow:0 0 3px #F5EFE4,0 0 6px #F5EFE4}
.maplbl.hood{font-size:21px;letter-spacing:.32em;text-transform:uppercase;color:#8A3B1E;opacity:.82}
.maplbl.town{font-size:24px;color:#5B4A3E;opacity:.85}
.maplbl.park{font-size:19px;font-style:italic;color:#4F6B3E}
.maplbl.water{font-size:20px;font-style:italic;color:#4D6A89}
.city.night .maplbl{display:none}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group{border-radius:12px!important;box-shadow:var(--shadow-soft)!important}
.cityrow .cityname{font-size:24px!important}
.cityrow .cityrole{display:block;font:500 13px var(--grot);color:var(--bark)}
.cityrow .cityfacts{display:block;margin-top:10px;font:500 13px var(--grot);color:var(--ink)}
.mtchips{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
.mtchips>*{flex:none}
.mtchips .chip,.mtchips summary.chip{min-height:34px;padding:0 13px;font-size:12.5px!important}
.citytitle{font-size:clamp(36px,4vw,46px)!important;line-height:1.02;margin:2px 0 12px!important}
/* night: the city as constellations */
.cstar{width:12px;height:12px;background:#fff;box-shadow:0 0 10px 4px rgba(255,236,190,.65)}
.cityface.star .clab{background:#141B48;color:#FFD27A;border:1px solid #FFD27A;font-size:10.5px;padding:3px 7px;letter-spacing:.08em;margin-top:6px}
.cityface.star.lit .cstar{width:16px;height:16px;box-shadow:0 0 16px 8px rgba(255,210,122,.8)}
.cityface.star.lit .clab{background:#FFD27A;color:#0B1030}
.nightcard{position:absolute;left:16px;bottom:16px;z-index:3;max-width:380px;background:#121A4A;border:1px solid #2B3670;border-radius:14px;padding:16px 18px;color:#EEF0FF}
.nightcard .eyebrow{color:#FFD27A!important}
.nightcard h2{color:#EEF0FF!important;font-size:30px!important;margin:2px 0 6px!important}
.nightcard p{color:#AEB6E0;font:500 13.5px/1.5 var(--grot);margin:0 0 10px}
.nightcard .btn.ghost{background:transparent!important;color:#EEF0FF!important;border-color:#3A4580!important}
.nightcard .btn:not(.ghost){background:#FFD27A!important;border-color:#FFD27A!important;color:#0B1030!important}
@media(min-width:900px){
  .city{grid-template-columns:460px 1fr}
  .citysheet{padding:24px 26px}
  .nightcard{left:26px;bottom:26px}
}
/* tap a face: their work slides in from the side and the map stays behind (mockup d2) */
.facesheet .fshead{display:flex;gap:16px;align-items:center;margin:0 44px 14px 0}
.facesheet .cf.big{width:84px;height:84px;flex:0 0 84px;box-shadow:0 0 0 2.5px var(--pink),0 6px 14px rgba(0,0,0,.12)}
.facesheet h2{font-size:clamp(34px,4vw,44px)!important;line-height:1;margin:0 0 4px!important}
.fsmeta{margin:0;font:500 13.5px var(--grot);color:var(--bark)}
.fswork{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 12px}
.fswork .taped{margin:0;padding:7px 7px 26px}
.fswork .taped img,.fswork .taped .skblank{display:block;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover}
.fsbio{font:500 14px/1.5 var(--grot);margin:4px 0 6px}
.fsfacts{font:500 13.5px/1.5 var(--grot);color:var(--ink);margin:0 0 16px}
.fsbtns{display:flex;flex-wrap:wrap;gap:8px}
@media(min-width:900px){
  .modal.citysheetm{background:rgba(247,242,232,.28)!important;align-items:stretch;justify-content:flex-end;padding:0}
  .modal.citysheetm .sheet{position:fixed;top:66px;right:0;bottom:0;width:min(560px,46vw);max-width:none!important;max-height:none;margin:0!important;border-radius:0!important;border-width:0 0 0 1px!important;box-shadow:-18px 0 40px rgba(31,42,107,.12)!important;overflow:auto;padding:26px 26px 24px;animation:fsin .25s ease}
  @keyframes fsin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
}
@media(min-width:900px){
  html.citynav main:has(#view-map:not(.hidden) .city){padding-left:0;padding-right:0}
  html.citynav #view-map:not(.hidden) .city{margin-top:-18px;height:calc(100svh - 60px)}
  .modal.citysheetm .sheet{top:60px!important}
}
@media(min-width:900px){.daynight{top:16px;right:16px}.citysheet{padding-top:30px}}
/* search fields that sit inside their own rounded box: one box, never a box inside a box */
.citysearch input,.hsearch input{min-height:0!important;height:38px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;font:600 14px var(--grot)!important}
.citysearch:focus-within,.hsearch:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
.city.night .citysearch{background:#141B48;border-color:#3A4580;box-shadow:none;color:#EEF0FF}
.city.night .citysearch input{color:#EEF0FF!important}
/* phone fixes from the side-by-side (2026-10-17): the search box fits, Day and Night sit under it,
   tab names never break, and the list stays readable at night */
@media(max-width:899px){
  .city .citytop{left:12px;right:12px}
  .city .citysearch{min-width:0}
  .daynight{top:66px!important;right:12px!important}
}
.tabbar .tab .lbl{white-space:nowrap;font-size:11px;letter-spacing:-.01em}
.city.night .citysheet .citytitle,.city.night .citysheet h3,.city.night .cityrow .cityname{color:#EEF0FF!important}
.city.night .citysheet .cityrole,.city.night .citysheet .cityfacts{color:#AEB6E0!important}
@media(max-width:899px){.city{grid-template-columns:minmax(0,1fr)!important}.city>*{min-width:0}}
/* the map's words in the mockup's own inks (sampled from d1) */
.maplbl{text-shadow:0 0 3px #F6EFE4,0 0 7px #F6EFE4,0 0 12px #F6EFE4}
.maplbl.hood{font-size:24px;letter-spacing:.22em;color:#8A5A44;opacity:1}
.maplbl.town{font-size:26px;color:#5C493D;opacity:1}
.maplbl.park{font-size:21px;color:#4E6B45}
.maplbl.water{font-size:22px;color:#4D6A89}
.cityface .clab{color:#2A2420}
/* ---- your QR code, four ways to dress it (mockup 32), and where it goes (mockup 33) ---- */
.qrlook{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.qrlook #qrStyles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.qrlook #qrStyles .chip{flex:none}
.qrstage{display:flex;justify-content:center}
.qrstage canvas{width:min(100%,380px);height:auto;display:block;border-radius:6px}
.qrdesc{text-align:center;font:500 14px/1.5 var(--grot);color:var(--bark);max-width:40ch;margin:0 auto}
.qrlook>.row{justify-content:center}
.qrlook .qractions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:4px}
.qrlook .linkchip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px var(--grot)!important;min-height:0!important;padding:6px 12px!important}
.qpgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.qpitem{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.qpitem p{margin:0;font:500 12.5px/1.4 var(--grot);color:var(--bark)}
.qpthumb{height:150px;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:8px;overflow:hidden}
.qpthumb img{max-width:100%;max-height:150px;object-fit:contain;box-shadow:var(--shadow-soft)}
@media(max-width:520px){.qpgrid{grid-template-columns:1fr}}
/* ---- after a scan (mockup 33): the ticket with the next free times, and the stub once it is sent ---- */
.ticket,.stub{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;box-shadow:var(--shadow-soft)}
.tkhead{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.tkface{width:72px;height:72px;flex:none;border-radius:50%;overflow:hidden;border:2.5px solid var(--pink);display:grid;place-items:center;background:linear-gradient(135deg,#FFC2DA,#B8CCFF)}
.tkface img{width:100%;height:100%;object-fit:cover}.tkface b{font:400 30px var(--serif);color:var(--ink)}
.tkname{font-size:34px!important;margin:0 0 2px!important}
.tkhead .fsub{margin:0}
.tktimes{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}
.tktime{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 14px;min-height:48px;font:700 15px var(--grot);color:var(--ink);cursor:pointer}
.tktime:hover,.tktime.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--pink)}
.stub{margin-bottom:14px;position:relative}
.stubtitle{font-size:32px!important;margin:2px 0 4px!important}
.stubtear{border-top:2px dashed var(--line);margin:14px -18px;position:relative}
.stubtear::before,.stubtear::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--paper)}
.stubtear::before{left:-9px}.stubtear::after{right:-9px}
.stubfoot{display:flex;gap:14px;align-items:center}
.stubfoot canvas{width:84px;height:84px;flex:none;image-rendering:pixelated}
.stubfoot p{margin:0;font:500 13.5px/1.5 var(--grot);color:var(--ink)}
/* ---- the pond's moments on a phone (mockup 31) ---- */
.pondpic{display:block;width:100%;max-width:340px;height:auto;margin:10px auto}
.pondm .sheet h2{font-size:30px!important;margin:2px 0 8px!important}
.invoicecard .invline,.invoicecard .invtotal{display:flex;justify-content:space-between;gap:10px;font:500 13.5px var(--grot);color:var(--ink);padding:4px 0}
.invoicecard .invtotal{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:700}
.invoicecard .invtotal b{font:400 30px var(--serif)}
.bloom h2{text-wrap:balance}
.barrelnow{margin:10px 0}
.barrelnow p{margin:4px 0 0;font:500 13px var(--grot);color:var(--bark)}
.barrel em{white-space:nowrap;font-size:10px!important}
/* ---- the front desk (mockups a1 and a4): queue, message and person side by side; People to find anyone ---- */
html.citynav main:has(#view-admin:not(.hidden)){padding-left:0;padding-right:0}
.admnav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 26px;border-bottom:1px solid var(--line);margin-top:-18px;background:var(--paper)}
.admtabs{display:flex;gap:4px;flex-wrap:wrap}
.admtab{border:0;background:transparent;border-radius:999px;padding:9px 14px;min-height:40px;font:700 14px var(--grot);color:var(--bark);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.admtab.on{background:var(--ink);color:var(--ontop)}
.admtab em{font-style:normal;background:var(--pink);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
.admfind{display:flex!important;margin-left:auto;min-width:min(340px,100%)}
.admfind.wide{margin:8px 0 12px;width:100%}
.admgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.admq,.admmain,.admside{padding:22px 26px;min-width:0}
.admtitle{font-size:clamp(38px,4vw,48px)!important;line-height:1;margin:2px 0 8px!important}
.admlist{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.admitem{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;background:transparent;border:1px solid transparent;border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink)}
.admitem.on{background:var(--cream);border-color:var(--line);box-shadow:3px 3px 0 var(--pink)}
.admitem.person{align-items:center}
.admtx{display:flex;flex-direction:column;gap:2px;min-width:0}
.admtx b{font:700 15px var(--grot)}.admtx span{font:500 13px/1.4 var(--grot);color:var(--bark)}
.admtag{flex:none;font:700 10px/1 var(--grot);letter-spacing:.08em;text-transform:uppercase;color:#fff;border-radius:5px;padding:5px 7px;margin-top:2px}
.admtag.help{background:#2457E0}.admtag.pw{background:#5B6178}.admtag.report{background:#C42A6B}.admtag.review{background:#8A5A12}.admtag.fb{background:#6A3FA0}
html[data-theme="dark"] .admtag{color:#0B1030}html[data-theme="dark"] .admtag.help{background:#8FB3FF}html[data-theme="dark"] .admtag.pw{background:#C9CFF0}html[data-theme="dark"] .admtag.report{background:#FF9CC4}html[data-theme="dark"] .admtag.review{background:#FFD27A}html[data-theme="dark"] .admtag.fb{background:#D7B8FF}
.admstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:20px}
.admstat{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:4px}
.admstat b{font:400 26px/1 var(--serif);color:var(--ink)}.admstat span{font:500 12px/1.4 var(--grot);color:var(--bark)}
.admstat.bad{border-color:var(--red)}.admstat.bad b{color:var(--red)}
.admwho{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.admwho h2{margin:0!important;font-size:34px!important}
.admwho .hint{margin:2px 0 0}
.admface{width:56px;height:56px;flex:none;border-radius:50%;border:2.5px solid var(--pink);display:grid;place-items:center;font:400 24px var(--serif);color:var(--ink)}
.admface.sm{width:40px;height:40px;font-size:18px}.admface.lg{width:76px;height:76px;font-size:32px}
.admname{font-size:44px!important}
.admmsg{margin:0 0 12px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:500 15px/1.5 var(--grot);color:var(--ink)}
.admreply{min-height:110px!important;border:1.5px solid var(--ink)!important}
.admacts{gap:8px;flex-wrap:wrap;margin:12px 0 8px}
.admside .eyebrow{margin-top:16px}
.admcard{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;margin:6px 0}
.admcard b{font:700 14px var(--grot);color:var(--ink)}.admcard span{font:500 12.5px/1.45 var(--grot);color:var(--bark)}
.admcard.sm{font:500 12.5px/1.45 var(--grot);color:var(--ink);padding:9px 12px}
.admcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0 12px}
.admacts2{display:flex;flex-direction:column}
.admact{text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 2px;min-height:44px;font:700 14px var(--grot);color:var(--ink);cursor:pointer}
.admact:hover{color:var(--pink-text)}
.admmain .admacts2{flex-direction:row;flex-wrap:wrap;gap:8px}
.admmain .admact{border:1px solid var(--line);border-radius:999px;background:var(--cream);padding:0 14px;min-height:38px}
.admmain .admact:first-child{background:var(--ink);color:var(--ontop);border-color:var(--ink)}
.admprivacy{border:1.5px dashed var(--line);border-radius:12px;padding:10px 14px;font:500 13px/1.5 var(--grot);color:var(--ink);margin:12px 0}
.admlog summary{font:700 13px var(--grot);margin-top:14px}
.admpeople{display:grid;grid-template-columns:minmax(0,1fr)}
.admsitewrap{padding:22px 26px}
.admsites{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.admsite{text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;cursor:pointer;color:var(--ink);width:100%;margin:4px 0}
.admsite b{font:700 15px var(--grot)}.admsite span{font:500 13px/1.4 var(--grot);color:var(--bark)}
@media(min-width:900px){
  .admgrid{grid-template-columns:400px minmax(0,1fr) 330px;min-height:calc(100svh - 120px)}
  .admq{border-right:1px solid var(--line)}
  .admside{border-left:1px solid var(--line)}
  .admpeople{grid-template-columns:400px minmax(0,1fr);min-height:calc(100svh - 120px)}
}
@media(max-width:640px){.admnav{padding:10px 16px}.admq,.admmain,.admside,.admsitewrap{padding:16px}.admfind{margin-left:0;width:100%}}
.nightcard{max-width:440px}
.nightcard p{margin:0 0 8px}
.nightcard p:last-child{margin-bottom:0}
@media(max-width:899px){.nightcard{left:12px;right:12px;bottom:12px;max-width:none;padding:14px 16px}.nightcard h2{font-size:26px!important}}
/* tapping a face on a computer: the list steps aside so the map and their work share the screen (mockup d2) */
@media(min-width:900px){
  .modal.citysheetm .sheet{width:min(560px,40vw)}
}

/* the list beside the map on every computer screen, day and night, from about a small laptop window up */
@media(min-width:760px){
  .city{grid-template-columns:clamp(320px,34vw,460px) minmax(0,1fr)!important;height:calc(100svh - 60px)}
  .citysheet{order:-1;margin:0;border-radius:0;box-shadow:none;border-right:1px solid var(--line);overflow:auto;height:100%;padding:24px 22px}
  .citysheet .grab,.mtlistbtn{display:none}
  .citymap{height:100%!important;min-height:0}
  html.citynav main:has(#view-map:not(.hidden) .city){padding-left:0;padding-right:0}
  html.citynav #view-map:not(.hidden) .city{margin-top:-18px}
  .citystrip{display:block!important;overflow:visible!important}
  .citystrip .cityrow{flex-direction:row!important;padding:8px 0!important}
  .citystrip .cityphoto{width:112px!important;height:112px!important;flex:0 0 112px!important}
}
.city.night .citysheet{background:#0E1438;border-right-color:#26305C}
.city.night .citysheet .eyebrow{color:#FF9CC4!important}
.nightcard .nclast{font-family:var(--serif);font-style:italic;font-size:19px;color:#FFD27A;margin-top:4px}
/* day, softened (her ask, 2026-10-17): a light wash over the painted map, like watercolour on paper */
.city:not(.night) .citymap .maplibregl-canvas{filter:url(#paintfx) saturate(.92) contrast(.9) brightness(1.03)}
.city:not(.night) .citymap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 40%,rgba(255,250,242,0) 55%,rgba(255,246,236,.45) 100%)}
.maplbl.hood{color:#A9705A}.maplbl.town{color:#7A6658}.maplbl.park{color:#5E8556}.maplbl.water{color:#5D7FA3}
.cf{box-shadow:0 0 0 2.5px #E07A5F,0 6px 14px rgba(0,0,0,.14)}
.cityface .clab em{color:#D0573A}
/* ---- your room, your zine, your sketchbook (2026-10-17): the creative board as a little virtual room ---- */
.rbspace{--rbwall:var(--sp-bg,#CFE3D8);--rbpaper:var(--sp-box,#FFFDF8);--rbink:var(--sp-text,#1F2A6B);--rbtape:var(--sp-bar,#FF4F9A);--rbline:var(--sp-line,#C8A27A);
  background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;color:var(--ink);font-family:var(--grot)}
.rbspace::before,.rbspace::after{display:none!important}
.rbtabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.rbtab{border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:999px;padding:9px 16px;min-height:42px;font:700 14px var(--grot);cursor:pointer}
.rbtab.on{background:var(--ink);color:var(--ontop);border-color:var(--ink)}
.rbclassic{margin-left:auto;font-size:13px!important}
.rbacts{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:14px}.rbacts .chip{flex:none}
.rbview{display:none}.rbview.on{display:block}
.rbback{margin-bottom:10px}
/* the room */
.rbroom{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--rbwall),color-mix(in srgb,var(--rbwall) 82%,#000 6%));color:var(--rbink);min-height:760px;isolation:isolate}
.rbroom::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:#E9D9C3;border-top:6px solid #D9C4A8;z-index:-1}
.rblights{position:relative;height:150px;margin:0 3%;color:#3B3550}
.rblights svg{position:absolute;left:0;right:0;top:0;width:100%;height:110px}
.rbbulb{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;cursor:pointer;font:400 15px var(--serif);color:var(--rbink)}
.rbface{width:52px;height:52px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:400 22px var(--serif);color:#1F2A6B;border:3px solid #fff;box-shadow:0 0 0 2px #FFD27A,0 0 22px 7px rgba(255,210,122,.55)}
.rbface img{width:100%;height:100%;object-fit:cover}.rbface.sm{width:40px;height:40px;font-size:17px;box-shadow:0 0 0 2px var(--pink)}
.rbempty{position:absolute;left:50%;top:40px;transform:translateX(-50%);border:1.5px dashed currentColor;background:transparent;border-radius:999px;padding:8px 14px;font:600 13px var(--grot);color:var(--rbink);cursor:pointer}
.rbhello{position:relative;padding:0 28px;max-width:440px}
.rbname{font:400 clamp(40px,5vw,58px)/1 var(--serif)!important;color:var(--rbink)!important;margin:2px 0 6px!important}
.rbstatus{font:500 14px/1.5 var(--grot);margin:0}
.rbneon{display:inline-block;margin-top:12px;font:italic 400 40px var(--serif);color:#FF4F9A;text-shadow:0 0 6px #fff,0 0 16px rgba(255,79,154,.7)}
.rbmoodadd{display:inline-block;margin-top:10px}
.rbcork{position:relative;margin:18px 28px 0;background:#F6EBDD;border:10px solid var(--rbline);border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.16);padding:22px 18px 18px;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;color:#2E2A4A}
.rbcork .taped{width:min(180px,28%);margin:0}.rbcork .taped img{aspect-ratio:4/5;height:auto}
.rbhand{font:500 22px/1.25 "Caveat",cursive;color:inherit;margin:0}
.rbpin{background:#FFF3A6;border:0;padding:10px 12px 12px;max-width:220px;text-align:left;font:500 19px/1.2 "Caveat",cursive;color:#3b2a0a;box-shadow:0 5px 12px rgba(0,0,0,.12);transform:rotate(2deg);cursor:pointer}
.rbpin b{display:block;font:700 10px var(--grot);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.rbshelf{position:relative;margin:26px 28px 0;display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding-bottom:14px}
.rbplank{position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--rbline);border-radius:4px;box-shadow:0 6px 10px rgba(0,0,0,.12)}
.rbcass{width:130px;height:80px;background:#2B2240;border-radius:9px;border:0;padding:7px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:4px;cursor:pointer}
.rbcass span{grid-column:1/3;background:#FFF7D6;border-radius:3px;padding:3px 6px;font:500 15px/1.1 "Caveat",cursive;color:#3b1d57;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbcass i{justify-self:center;align-self:center;width:24px;height:24px;border-radius:50%;border:4px solid #8E83A8}
.rbbook{width:118px;height:150px;border:0;border-radius:4px 10px 10px 4px;padding:14px 12px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;box-shadow:inset 8px 0 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.15)}
.rbbook b{font:400 22px/1.05 var(--serif);color:#1F2A6B}.rbbook span{font:500 16px "Caveat",cursive;color:#1F2A6B}
.rbbook.zine{background:linear-gradient(135deg,#FBD3E6,#E6C8F2);transform:rotate(-3deg)}
.rbbook.sketch{background:linear-gradient(135deg,#CDEEDB,#FFF1B8);transform:rotate(2deg)}
.rbcorner{max-width:200px}
#spSongStage{margin:10px 28px}
.rbwin{position:absolute;right:28px;top:150px;width:min(330px,34%);display:flex;flex-direction:column;align-items:center;gap:10px}
.rbpane{position:relative;width:100%;aspect-ratio:4/5;border:12px solid #FFFDF8;border-radius:120px 120px 8px 8px;background:linear-gradient(180deg,#141B4A,#2B3A7A);overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.rbpane i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px rgba(255,236,190,.7)}
.rbpane .s1{left:22%;top:20%}.rbpane .s2{left:66%;top:28%}.rbpane .s3{left:40%;top:52%}.rbpane .s4{left:78%;top:62%}
.rbsash{position:absolute;top:0;bottom:0;width:50%;background:rgba(255,253,248,.18);border:6px solid #FFFDF8;transition:transform .7s ease}
.rbsash.l{left:0;border-right-width:3px;transform-origin:left center}.rbsash.r{right:0;border-left-width:3px;transform-origin:right center}
.rbroom.open .rbsash.l{transform:perspective(500px) rotateY(62deg)}.rbroom.open .rbsash.r{transform:perspective(500px) rotateY(-62deg)}
.rbroom.shut .rbsash{background:rgba(255,253,248,.32)}
.rbwinbtn{min-height:40px}
.rbwinsay{font:500 13px/1.4 var(--grot);text-align:center;margin:0;background:var(--rbpaper);border-radius:10px;padding:8px 12px;color:var(--rbink)}
.rbsill{border:0;background:#FFF3A6;border-radius:8px;padding:8px 12px;font:600 13px var(--grot);color:#3b2a0a;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.12)}
/* the boards, floating in through an open window */
.rbfloat{position:absolute;right:calc(28px + min(330px,34%) + 12px);top:150px;width:260px;height:460px;pointer-events:none}
.rbplane{position:absolute;right:0;top:var(--y);width:230px;text-align:left;pointer-events:auto;cursor:pointer;background:#FFFDF8;border:0;border-radius:4px;padding:10px 12px;box-shadow:0 8px 18px rgba(31,42,107,.18);font:500 13px/1.35 var(--grot);color:#1F2A6B;animation:rbfloat 9s ease-in-out var(--d) infinite;clip-path:polygon(0 0,92% 0,100% 18%,100% 100%,0 100%)}
.rbplane b{display:block;font:700 10px var(--grot);letter-spacing:.12em;text-transform:uppercase;color:#C42A6B;margin-bottom:2px}
.rbplane em{display:block;font:500 15px "Caveat",cursive;color:#4E5684;font-style:normal;margin-top:2px}
.rbplane.all{background:#1F2A6B;color:#FFFDF8;font-weight:700;width:auto;clip-path:none;border-radius:999px;padding:9px 14px}
@keyframes rbfloat{0%{transform:translate(40px,8px) rotate(-3deg);opacity:0}12%{opacity:1}50%{transform:translate(-10px,-6px) rotate(2deg)}100%{transform:translate(40px,8px) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.rbplane{animation:none}.rbsash{transition:none}}
.rbmirror{position:relative;margin:24px 28px 28px;display:flex;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#F4F8FB,#DCE8F0);border:6px solid #E9C8A0;border-radius:90px 90px 12px 12px;padding:30px 26px 22px;max-width:620px}
.rbcard{width:150px;background:#fff;border:0;padding:8px 10px;text-align:left;font:500 17px/1.15 "Caveat",cursive;color:#2E2A4A;box-shadow:0 3px 8px rgba(0,0,0,.12);cursor:pointer}
.rbcard b{display:block;font:700 9px var(--grot);letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:2px}.rbcard em{display:block;font:600 10px var(--grot);color:#C42A6B;font-style:normal}
@media(max-width:899px){
  .rbroom{min-height:0;padding-bottom:20px}
  .rblights{height:120px}.rbface{width:40px;height:40px;font-size:17px}.rbbulb{font-size:12px}
  .rbwin{position:relative;right:auto;top:auto;width:auto;margin:20px 28px 0;flex-direction:row;align-items:center;flex-wrap:wrap}
  .rbpane{width:120px;flex:none;border-width:8px}
  .rbfloat{position:relative;right:auto;top:auto;width:auto;height:auto;margin:14px 28px 0;display:flex;flex-direction:column;gap:10px;pointer-events:auto}
  .rbplane{position:relative;top:auto;width:100%;animation:none}
  .rbcork .taped{width:calc(50% - 10px)}
}
/* the zine: a notebook you flip, written on in marker */
.nbook{max-width:720px;margin:0 auto}
.nbpages{position:relative;aspect-ratio:3/4;max-height:78vh;margin:0 auto;perspective:1600px}
.nbpage{position:absolute;inset:0;background:var(--rbpaper);color:var(--rbink);border-radius:4px 14px 14px 4px;box-shadow:0 14px 34px rgba(31,42,107,.16),inset 10px 0 0 rgba(0,0,0,.05);padding:7% 7%;overflow:hidden;opacity:0;pointer-events:none;transform-origin:left center;transform:rotateY(0);transition:transform .55s ease,opacity .3s ease}
.nbpage.on{opacity:1;pointer-events:auto}
.nbpage.gone{transform:rotateY(-80deg);opacity:0}
.nbpage.lined{background:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--rbink) 12%,transparent) 31px 32px),var(--rbpaper)}
.nbnum{position:absolute;right:16px;bottom:12px;font:500 18px "Caveat",cursive;opacity:.6}
.nbblank{position:absolute;left:0;right:0;top:46%;text-align:center;font:500 26px "Caveat",cursive;opacity:.55}
.nbmark{position:absolute;border:0;background:transparent;padding:0;cursor:pointer}.nbmark img{width:100%;height:auto;display:block}
.zcut{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end}
.zcut b{font:400 clamp(30px,5vw,52px)/1 var(--serif);padding:2px 8px 6px;background:#fff;color:#1F2A6B;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.zcut b:nth-child(2n){background:#FFD6E8;transform:rotate(3deg)}.zcut b:nth-child(3n){background:#D9E6FF;transform:rotate(-4deg)}.zcut b:nth-child(5n){background:#FFF1B8;transform:rotate(2deg)}
.zcut .sp{width:14px}
.ztape{display:inline-block;margin-top:18px;background:color-mix(in srgb,var(--rbtape) 45%,#fff);padding:8px 12px;font:500 15px/1.45 "Special Elite","Courier New",monospace;color:#2E2A4A;transform:rotate(-1deg);max-width:90%}
.zstamp{position:absolute;right:8%;top:22%;width:110px;height:110px;border-radius:50%;border:3px dashed currentColor;display:grid;place-items:center;text-align:center;transform:rotate(-12deg);font:700 11px/1.2 var(--grot);letter-spacing:.14em;text-transform:uppercase}
.zstamp em{display:block;font:italic 400 22px var(--serif);letter-spacing:0;text-transform:none}
.zpics{display:flex;gap:16px;margin-top:26px}.zpics .taped{width:30%;margin:0}.zpics .taped img{aspect-ratio:4/5;height:auto}
.zturn{position:absolute;left:7%;right:7%;bottom:5%;font:500 20px "Caveat",cursive;opacity:.7}
.nbnav{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 6px}.nbwhere{font:600 13px var(--grot);color:var(--bark)}
.nbwrite{display:flex;justify-content:center;margin:6px 0}
.nbpages.drawing .nbpage.on{touch-action:none}
.nbcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;cursor:crosshair;touch-action:none}
.nbtools{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:10px 12px;box-shadow:var(--shadow);max-width:calc(100vw - 24px)}
.nbcol{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer}.nbcol.on{box-shadow:0 0 0 3px var(--ink)}
/* the sketchbook: the blog side */
.skspread{display:grid;grid-template-columns:1fr;gap:0;background:var(--rbpaper);color:var(--rbink);border-radius:10px;box-shadow:0 14px 30px rgba(31,42,107,.14);overflow:hidden}
.skpg{padding:28px 30px;background:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--rbink) 9%,transparent) 31px 32px)}
.sktape{display:inline-block;margin-top:12px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--rbtape) 35%,#fff) 0 8px,color-mix(in srgb,var(--rbtape) 18%,#fff) 8px 16px);padding:8px 12px;font:500 15px/1.5 var(--grot);color:#2E2A4A;transform:rotate(-1deg)}
.skh{font:400 26px var(--serif)!important;color:var(--rbink)!important;margin:20px 0 6px!important}
.skhand{font:500 21px/1.3 "Caveat",cursive;margin:0}.skhand.mood{margin-top:14px;color:#C42A6B}
.skstrip{display:flex;gap:10px;flex-wrap:wrap}.skstrip button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;cursor:pointer;font:500 15px "Caveat",cursive;color:var(--rbink)}
.skpost{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid color-mix(in srgb,var(--rbink) 15%,transparent);background:transparent;padding:12px 0;cursor:pointer;color:var(--rbink)}
.skpost b{display:block;font:400 22px var(--serif)}.skpost span{font:500 13px var(--grot);opacity:.7}
.skmargin{margin-top:18px}
.skmargin .spbox{background:var(--rbpaper)!important;border-radius:10px;border:0!important;box-shadow:0 8px 20px rgba(31,42,107,.1)}
.skmargin .spcmt p{font:500 20px/1.25 "Caveat",cursive}
@media(min-width:900px){.skspread{grid-template-columns:1fr 1fr}.skpg.l{border-right:2px dashed color-mix(in srgb,var(--rbink) 18%,transparent)}}
/* the library */
.zlib{margin:0 0 16px}
.zshelf{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:8px 2px 14px;border-bottom:10px solid var(--rbline,#C8A27A);border-radius:0 0 4px 4px}
.zspine{flex:none;width:110px;height:140px;border:0;border-radius:4px 10px 10px 4px;padding:12px 10px;text-align:left;display:flex;align-items:flex-end;cursor:pointer;box-shadow:inset 7px 0 0 rgba(0,0,0,.12),0 5px 12px rgba(0,0,0,.14)}
.zspine b{font:400 19px/1.05 var(--serif);color:#1F2A6B}
.zspine.on{outline:3px solid var(--pink);outline-offset:3px}
.zspine.new{background:transparent;border:2px dashed var(--line);box-shadow:none;align-items:center;justify-content:center;text-align:center}
.zspine.new b{font:700 13px var(--grot)}
.zcov{width:44px;height:56px;border-radius:3px 8px 8px 3px;border:0;cursor:pointer;box-shadow:inset 5px 0 0 rgba(0,0,0,.12)}.zcov.on{outline:3px solid var(--ink);outline-offset:2px}
.nbpage.cover{background:var(--zc,var(--rbpaper))}
.zby{margin-top:10px;font:500 22px "Caveat",cursive;color:#1F2A6B}
.nbwords{position:relative;z-index:1;white-space:pre-wrap;font:500 23px/32px "Caveat",cursive;color:var(--rbink);padding-top:2px}
.nbwrite{gap:8px;flex-wrap:wrap}
.rbbook.more{background:var(--cream);border:2px dashed var(--line);box-shadow:none}
/* the boards float inside the open window */
.rbpanewrap{position:relative;width:100%}
.rbpanewrap .rbfloat{position:absolute;inset:12px;width:auto;height:auto;right:auto;top:auto;left:12px;bottom:12px;pointer-events:none;overflow:hidden;border-radius:110px 110px 4px 4px;z-index:2}
.rbpanewrap .rbplane{right:auto;left:8%;width:84%;font-size:12px;padding:8px 10px}
.rbpanewrap .rbplane.all{left:18%;width:64%;text-align:center}
@keyframes rbfloat{0%{transform:translate(30px,10px) rotate(-4deg);opacity:0}15%{opacity:1}50%{transform:translate(-6px,-4px) rotate(2deg)}85%{opacity:1}100%{transform:translate(30px,10px) rotate(-4deg);opacity:.9}}
@media(max-width:899px){.rbpanewrap{width:auto;flex:1 1 100%}.rbpanewrap .rbpane{width:100%;aspect-ratio:4/3}.rbpanewrap .rbfloat{display:block;position:absolute;margin:0}.rbpanewrap .rbplane{position:absolute}}
.skh{text-transform:none!important;letter-spacing:0!important}
.skmargin .sphead{background:none!important;color:var(--rbink)!important;font:400 26px var(--serif)!important;text-transform:none!important;letter-spacing:0!important;border:0!important;padding:16px 18px 0!important}
.skmargin .spbody{background:transparent!important}
.skmargin .spcmt{border-color:color-mix(in srgb,var(--rbink) 12%,transparent)!important}
.rbpanewrap .rbfloat{top:12px!important;right:12px!important;bottom:12px!important;left:12px!important;width:auto!important;height:auto!important}
@media(min-width:900px){
  .rbhello,.rbcork,.rbshelf{margin-right:calc(min(330px,34%) + 56px)}
  .rbmirror{max-width:560px}
}
.zstamp{top:5%;right:6%;width:96px;height:96px}
.nbpage.cover .zpics{margin-top:40px}
/* the room's words: house colours outside the room, the wall's own readable ink inside it */
.rbspace .rbtab{color:var(--ink)!important;background:var(--cream)!important;min-height:44px}
.rbspace .rbtab.on{color:var(--ontop)!important;background:var(--ink)!important}
.rbspace>.rbtabs .linklike,.rbspace>.rbacts .chip{color:var(--ink)!important}
.rbspace>.rbacts .chip{background:var(--cream)!important;min-height:44px}
.rbroom{color:var(--rbwallink)}
.rbroom .rbhello,.rbroom .rbname,.rbroom .rbstatus,.rbroom .rbbulb,.rbroom .rbempty,.rbroom .rbhello .eyebrow{color:var(--rbwallink)!important}
.rbroom .rbhello .linklike,.rbroom .rbwin .linklike{color:var(--rbwallink)!important}
.rbcork,.rbcork .rbhand,.rbcork .linklike{color:#2E2A4A!important}
.rbmirror .rbhand,.rbmirror .linklike{color:#2E2A4A!important}
@media (pointer:coarse),(max-width:640px){.rbspace .linklike{display:inline-block;padding:12px 2px!important;margin:-12px -2px!important}}
/* the tabs above a room are MyBella's, whatever the board's colours are (boards repaint their own children) */
.rbspace>.rbtabs,.rbspace>.rbacts{--ink:#1F2A6B;--ontop:#FFFDF8;--cream:#FFFDF8;--paper:#F7F2E8;--bark:#4E5684;--line:#E3DCCD;--forest:#1F2A6B}
html[data-theme="dark"] .rbspace>.rbtabs,html[data-theme="dark"] .rbspace>.rbacts{--ink:#EEF0FF;--ontop:#0B1030;--cream:#141B3A;--paper:#0B1030;--bark:#A7AED3;--line:#26305C;--forest:#EEF0FF}
.rbroom{background-color:var(--rbwall)}
.rbpanewrap .rbplane.all{min-height:44px}
.rbbook b,.rbbook span,.zspine b{color:#1F2A6B!important}
.rbcard,.rbcard b{color:#2E2A4A!important}
.rbmirror .rbhand{color:#2E2A4A!important}

.rbbook.sketch{background-color:#CDEEDB}
.rbmirror{background-color:#EAF1F6}
.rbspace .rbclassic{min-height:44px;display:inline-flex;align-items:center}
@media(hover:hover) and (pointer:fine){.rbshelf .rbbook:hover{translate:0 -4px}}
.rbtabs .rbclassic.linklike{min-height:46px!important;padding:12px 4px!important;margin:0 0 0 auto!important}
/* the closed window: a neon sign in it */
.rbneonsign{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-4deg);z-index:3;pointer-events:none;padding:10px 22px 12px;border:3px solid #FF4F9A;border-radius:14px;box-shadow:0 0 12px rgba(255,79,154,.8),inset 0 0 12px rgba(255,79,154,.6)}
.rbneonsign span{font:italic 400 clamp(34px,4vw,48px)/1 var(--serif);color:#FFE3F0;text-shadow:0 0 4px #fff,0 0 10px #FF4F9A,0 0 22px #FF4F9A,0 0 40px #FF4F9A;animation:rbbuzz 4s infinite}
@keyframes rbbuzz{0%,92%,100%{opacity:1}93%{opacity:.55}95%{opacity:1}96%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.rbneonsign span{animation:none}}
.zlock{text-align:center;font:500 13.5px/1.5 var(--grot);color:var(--ink);margin:4px 0 8px}
.zonly{position:absolute;top:8px;right:8px;font:700 9px var(--grot);letter-spacing:.1em;text-transform:uppercase;font-style:normal;background:#1F2A6B;color:#FFFDF8;border-radius:999px;padding:3px 7px}
.zspine{position:relative}
/* open: a smaller neon sign hanging at the top of the window, so the boards floating in stay in view */
.rbneonsign.open{top:-6px;transform:translate(-50%,-50%) rotate(3deg);padding:6px 16px 8px;border-color:#5FE3B5;box-shadow:0 0 12px rgba(95,227,181,.8),inset 0 0 10px rgba(95,227,181,.5);background:rgba(11,16,48,.75);z-index:4}
.rbneonsign.open span{font-size:clamp(24px,2.6vw,32px);color:#E6FFF5;text-shadow:0 0 4px #fff,0 0 10px #5FE3B5,0 0 22px #5FE3B5,0 0 36px #5FE3B5}
/* your room: the middle button, a raised purple MyBella mark (her pick, 2026-10-17) */
.tabbar .tab.roomtab{position:relative}
.tabbar .tab.roomtab .ico{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9B6BFF,#6A3FD0 60%,#4B2A9E);box-shadow:0 6px 16px rgba(106,63,208,.45),0 0 0 4px var(--cream);display:grid;place-items:center;margin-top:-26px;color:#fff!important}
.tabbar .tab.roomtab .rmark{display:flex;flex-direction:column;align-items:center;line-height:1}
.tabbar .tab.roomtab .rmark svg{color:#FFD27A;margin-bottom:-2px}
.tabbar .tab.roomtab .rmark b{font:400 26px/1 var(--serif);color:#fff}
.tabbar .tab.roomtab .lbl{color:#6A3FD0!important;font-weight:700}
.tabbar .tab.roomtab[aria-selected="true"] .ico{box-shadow:0 6px 16px rgba(106,63,208,.55),0 0 0 4px var(--cream),0 0 0 6px #6A3FD0}
.tabbar .tab.roomtab[aria-selected="true"]::before{display:none}
html[data-theme="dark"] .tabbar .tab.roomtab .lbl{color:#C9B3FF!important}
@media(min-width:900px){
  html.citynav .tabbar .tab.roomtab{padding:4px 14px 4px 6px}
  html.citynav .tabbar .tab.roomtab .ico{width:36px;height:36px;margin:0;box-shadow:0 3px 8px rgba(106,63,208,.4)}
  html.citynav .tabbar .tab.roomtab .rmark b{font-size:18px}
  html.citynav .tabbar .tab.roomtab .rmark svg{width:9px;height:9px}
  html.citynav .tabbar .tab.roomtab[aria-selected="true"]{background:#EFE6FF}
  html.citynav .tabbar .tab.roomtab[aria-selected="true"] .lbl{color:#4B2A9E!important}
}
.rbbox{width:120px;height:96px;border:0;border-radius:6px;background:#E9D9C3;background-color:#E9D9C3;box-shadow:inset 0 -10px 0 rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.15);padding:10px;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer}
.rbbox b{font:400 19px/1.05 var(--serif);color:#1F2A6B!important}.rbbox span{font:500 15px "Caveat",cursive;color:#1F2A6B!important}
html.citynav #view-space .spacewrap{background:transparent!important;border:0!important;padding:0!important}
/* the sample city's label, on every screen */
#sampleStrip{position:fixed;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 16px);background:#FF4F9A;color:#fff;border-radius:999px;padding:6px 8px 6px 14px;box-shadow:0 6px 18px rgba(196,42,107,.35);font:500 12.5px/1.3 var(--grot)}
#sampleStrip b{font:700 12px var(--grot);letter-spacing:.08em;text-transform:uppercase}
#sampleStrip button{border:0;border-radius:999px;background:#fff;color:#C42A6B;font:700 12px var(--grot);padding:7px 12px;min-height:34px;cursor:pointer}
@media(max-width:640px){#sampleStrip span{display:none}#sampleStrip button{min-height:44px}}
@media(min-width:641px){#sampleStrip{top:auto;bottom:16px;left:16px;transform:none;max-width:min(560px,calc(100vw - 32px));justify-content:flex-start;border-radius:16px;padding:8px 8px 8px 14px}}
/* constellation mode: the words are one small pill until you want them (her note: the card covered the map) */
.nightpill{position:absolute;left:16px;bottom:16px;z-index:3;border:1px solid #FFD27A;background:#121A4A;color:#FFD27A;border-radius:999px;padding:10px 16px;min-height:44px;font:italic 400 18px var(--serif);cursor:pointer;box-shadow:0 0 14px rgba(255,210,122,.35)}
.nightpill[hidden],.nightcard[hidden]{display:none!important}
.nightcard{max-width:380px}
.nightx{position:absolute;right:10px;top:10px;width:36px!important;height:36px!important;min-height:36px!important;background:transparent!important;border-color:#3A4580!important;color:#EEF0FF!important}
.nightcard h2{margin-right:40px!important}
@media(max-width:899px){.nightpill{left:12px;bottom:12px;font-size:16px}}
/* ---- the control board (Me) and its desks ---- */
.cboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.ckey{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:16px;min-height:150px;cursor:pointer;color:var(--ink);box-shadow:0 6px 16px rgba(31,42,107,.06)}
.ckey b{font:400 24px/1.05 var(--serif);color:var(--ink)}
.cklive{font:600 12.5px/1.35 var(--grot);color:var(--pink-text)}
.ckdot{position:absolute;right:12px;top:12px;background:var(--pink);color:#fff;font:700 11px var(--grot);border-radius:999px;padding:3px 8px}
.dsym{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex:none}
@media (hover:hover){.ckey:hover{border-color:var(--ink)}}
@media(min-width:760px){.cboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.ckey{min-height:190px;padding:20px}.ckey b{font-size:28px}}
html[data-theme="dark"] .ckey{background:var(--cream)}
.desk{padding:8px 0 40px}
.dkback{font:600 14px var(--grot)!important;margin-bottom:12px}
.dkhead{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.dktitle{font-size:clamp(32px,4vw,46px)!important;line-height:1.05;margin:2px 0 0!important}
.dkparts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:760px){.dkparts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.dkparts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dkpart{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px 44px 16px 18px;min-height:84px;cursor:pointer;color:var(--ink)}
.dkpart b{font:400 22px/1.1 var(--serif)}.dkpart span{font:500 13px/1.4 var(--grot);color:var(--bark)}
.dkpart i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:24px;color:var(--bark)}
.dkhero{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:22px}
@media(min-width:900px){.dkhero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.dkletters{display:flex;flex-direction:column;gap:14px}
.dkenv{position:relative;background:#FFFDF8;border-radius:8px;padding:18px 20px;box-shadow:0 8px 18px rgba(31,42,107,.12);color:#1F2A6B;max-width:520px}
.dkenv::before{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;background:linear-gradient(160deg,transparent 49%,rgba(31,42,107,.07) 50%,transparent 51%),linear-gradient(20deg,transparent 49%,rgba(31,42,107,.07) 50%,transparent 51%)}
.dkenv b{display:block;font:400 26px var(--serif);margin-right:56px}.dkenv p{font:500 13.5px/1.45 var(--grot);margin:4px 0 12px;color:#4E5684}
.dkenv .row{position:relative;z-index:1;flex-wrap:wrap}
.dkenv.quiet{transform:none!important;opacity:.95}
.dkstamp{position:absolute;right:16px;top:14px;width:46px;height:54px;background:#FF8AB8;border:3px dotted #fff;display:grid;place-items:center;font:700 9px var(--grot);color:#fff;transform:rotate(4deg)}
.dkday{background:#FFFDF8;border-radius:16px;padding:18px;box-shadow:0 8px 18px rgba(31,42,107,.1);color:#1F2A6B;align-self:start}
.dkday h3{font:400 26px var(--serif)!important;margin:0 0 6px!important;color:#1F2A6B!important}
.dkslot{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed #E3DCCD;font:500 14px var(--grot)}.dkslot b{width:70px;color:#C42A6B;font-weight:700}
.dkpond{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:0;border-radius:18px;padding:20px;margin-bottom:22px;cursor:pointer;background:linear-gradient(135deg,#D9F0E3,#CFE2F2);color:#1F2A6B}
.dkpond.front{background:linear-gradient(135deg,#FDE3EC,#EFE6FF)}
.dkpond b{font:400 30px var(--serif);flex:1}.dkpond em{font:600 13px var(--grot);font-style:normal;color:#1E5B4A}
.deskbar{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.deskbar .linklike{font:600 14px var(--grot)!important;align-self:flex-start}
.dksib{display:flex;gap:8px;flex-wrap:wrap}
html.citynav #ownerBody>.jumpbar,html.citynav #ownerBody>.stats.mini{display:none!important}

/* the pond on a computer fills its column (mockup d8), and a key says what each thing means */
@media(min-width:1180px){.pondpage .pondart{min-height:calc(100svh - 120px)}.pondpage .pondsvg{width:100%;height:auto;max-height:calc(100svh - 110px)}
  html.citynav main:has(#view-money:not(.hidden)){padding-left:0;padding-right:0}.pondpage{margin-top:-18px}.pondside{padding:20px 24px 30px 22px}}
.pondkey{display:flex;flex-direction:column;gap:2px;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin:4px 0 8px}
.pondkey>div{display:grid;grid-template-columns:22px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.pondkey>div:last-child{border-bottom:0}
.pondkey i{grid-row:1/3;width:20px;height:20px;border-radius:50%;display:block}
.pondkey b{font:700 13px var(--grot);color:var(--ink)}.pondkey span{grid-column:2;font:500 12px var(--grot);color:var(--bark)}
.pondkey em{grid-row:1/3;grid-column:3;font:400 20px var(--serif);font-style:normal;color:var(--ink)}
.k-seed{background:radial-gradient(circle at 50% 60%,#9C7A4E 0 6px,transparent 7px),#F1E6D4}
.k-boat{background:linear-gradient(180deg,transparent 55%,#F2C46B 55%),linear-gradient(135deg,transparent 45%,#fff 46%,#fff 60%,transparent 61%),#C3DAEE}
.k-reed{background:repeating-linear-gradient(90deg,#5E8C4E 0 2px,transparent 2px 5px),#C3DAEE}
.k-lily{background:radial-gradient(circle,#F2B84B 0 3px,#FF8AB8 4px 7px,#7FB069 8px)}
.k-barrel{border-radius:5px!important;background:linear-gradient(180deg,#fff 40%,#A8C8E8 40%);border:2px solid #1F2A6B}
.deskbar .linklike,.dkback{min-height:44px;display:inline-flex!important;align-items:center}
#deskBar .linklike{min-height:48px!important;padding:12px 4px!important;margin:0!important}
/* ---- examples: the tiny E? and the holograph look ---- */
.exbtn{display:inline-flex;align-items:center;justify-content:center;gap:0;width:44px;height:44px;border-radius:50%;border:1.5px dashed #8E5BD8;background:rgba(255,253,248,.9);color:#6A3FD0;cursor:pointer;flex:none;padding:0}
.exbtn b{font:400 20px/1 var(--serif)}.exbtn i{font:700 12px/1 var(--grot);font-style:normal;margin:-8px 0 0 1px}
.exbtn.on{border-style:solid;background:linear-gradient(135deg,#C9B3FF,#9FE3E0,#FFC2DA);color:#1F2A6B}
.exnote{font:600 12px/1.35 var(--grot);color:#6A3FD0;max-width:280px}
.exrow{display:flex;align-items:center;gap:10px}
.cityex{position:absolute;right:12px;top:12px;z-index:4;display:flex;align-items:center;gap:8px;flex-direction:row-reverse}
.cityex .exnote{background:rgba(255,253,248,.95);border-radius:10px;padding:6px 10px}
@media(max-width:899px){.cityex{top:116px}}
@media(min-width:900px){.cityex{top:64px}}
.holo{position:relative;opacity:1;filter:saturate(1.2);animation:holo 3.2s ease-in-out infinite}
.holo::after{content:"Example";position:absolute;left:6px;top:6px;z-index:3;font:700 9px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#8E5BD8,#2FB9C4);border-radius:999px;padding:3px 6px;pointer-events:none}
svg .holo::after{content:none}
g.holo{opacity:.9}
.pondrow.holo,.dkenv.holo,.cityrow.holo{box-shadow:0 0 0 1.5px rgba(142,91,216,.55),0 0 18px rgba(47,185,196,.35)!important;border-radius:10px}
.pondrow.holo::after,.cityrow.holo::after{left:auto;right:6px;top:50%;transform:translateY(-50%)}
.cityface.holo::after{left:50%;top:-14px;transform:translateX(-50%)}
.rbbulb.holo::after{display:none}
@keyframes holo{0%,100%{filter:saturate(1.2) hue-rotate(0deg)}50%{filter:saturate(1.35) hue-rotate(18deg)}}
@media (prefers-reduced-motion:reduce){.holo{animation:none}}
/* ===== the room 2.0 (2026-10-17), measured from concepts 1, 2, 3 and 6. Sizes are in cqi of the room, so the room
   is the same picture on a computer and an iPad; under 760px wide it stacks for a phone. The walls, lights, neon
   and writing come from the paint tray only, so the room always looks like the concepts. */
.room2>*{--ink:#1F2A6B;--ontop:#FFFDF8;--cream:#FFFDF8;--paper:#F7F2E8;--bark:#4E5684;--line:#E3DCCD;--forest:#1F2A6B;--pink:#FF4F9A;--pinkt:#C42A6B}
html[data-theme="dark"] .room2>.rtop,html[data-theme="dark"] .room2>.rclassic{--ink:#EEF0FF;--ontop:#0B1030;--cream:#141B3A;--line:#26305C;--bark:#A7AED3}
.room2{position:relative}
.room2 .rtop{display:flex;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.rdoor{display:inline-flex;gap:2px;background:#FFFDF8;border-radius:999px;padding:4px;box-shadow:0 4px 12px rgba(31,42,107,.14)}
.rdoor button{border:0;background:transparent;border-radius:999px;padding:8px 15px;min-height:44px;font:700 13px var(--grot);color:#1F2A6B;cursor:pointer}
.rdoor button.on{background:#1F2A6B;color:#FFFDF8}
.room2 .rex{margin-left:auto}
.room2 .rbview{display:none}.room2 .rbview.on{display:block}
.room2 .rclassic{margin:12px 2px 0;font:500 13px var(--grot);color:var(--bark)}
.room2 .rclassic .linklike{min-height:44px;display:inline-flex;align-items:center;color:var(--ink)!important}
/* the back room */
.rroom{position:relative;border-radius:16px;overflow:hidden;isolation:isolate;background-color:var(--wall1);background-image:linear-gradient(180deg,var(--wall1),var(--wall2));color:var(--rink);font-family:var(--grot);container-type:inline-size}
.rroom::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7.5%;background:#E9D9C3;border-top:.6cqi solid #D9C4A8;z-index:0}
.rroom.night::after{background:#232A63;border-color:#1A2050}
.rfield>*{z-index:1}
.rlights{color:#3B3550}.rroom.night .rlights{color:#B9C0E6}
.rbulb{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.35cqi;border:0;background:transparent;padding:0;cursor:pointer;font:400 max(12px,1.2cqi) var(--rfont,var(--serif));color:var(--rink)}
.room2 .rbface{width:max(34px,3.7cqi);height:max(34px,3.7cqi);border:3px solid #fff;font-size:max(15px,1.6cqi);color:#1F2A6B;box-shadow:0 0 0 2px var(--light),0 0 1.7cqi .55cqi color-mix(in srgb,var(--light) 55%,transparent)}
.rempty{position:absolute;left:50%;top:26%;transform:translateX(-50%);border:1.5px dashed currentColor;background:transparent;border-radius:999px;padding:8px 14px;min-height:44px;font:600 13px var(--grot);color:var(--rink);cursor:pointer}
.rname .eyebrow{color:var(--pinkt)}.rroom.night .rname .eyebrow{color:#FF8AB8}
.rname h2{font:400 max(34px,5cqi)/1 var(--rfont,var(--serif))!important;color:var(--rink)!important;margin:.2cqi 0 0!important;text-transform:none!important;letter-spacing:0!important}
.rname p{font:500 max(13px,1.2cqi)/1.45 var(--grot);color:var(--rsoft);margin:.55cqi 0 0}
.rroom .linklike{color:var(--rink)!important}
.rneon{font:italic 400 max(26px,3.15cqi)/1.1 var(--rfont,var(--serif));color:var(--neon);text-shadow:0 0 6px #fff,0 0 14px color-mix(in srgb,var(--neon) 70%,transparent)}
.rroom.night .rneon{text-shadow:0 0 6px color-mix(in srgb,var(--neon) 80%,#fff),0 0 18px var(--neon)}
.rcork{aspect-ratio:520/220;background:#F6EBDD;border:.93cqi solid #C8A27A;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.16);color:#2E2A4A}
.rcorkin{position:absolute;inset:0;display:flex;gap:2.2%;align-items:flex-start;padding:4% 3%}
.room2 .taped{flex:none;margin:0;padding:1.3% 1.3% 4.4%;padding:max(4px,.65cqi) max(4px,.65cqi) max(14px,2.2cqi)}
.rcork .taped{width:21%}
.room2 .taped img,.room2 .taped .phgrad{display:block;width:100%;aspect-ratio:11/13;height:auto;object-fit:cover;border-radius:2px}
.room2 .taped i{position:absolute;left:8%;right:6%;bottom:2px;font:500 max(9px,.97cqi)/1.5 var(--grot);font-style:normal;color:#5c5a66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpin{flex:none;width:21%;aspect-ratio:11/13;margin-left:auto;border:2.5px dashed #C8A27A;border-radius:4px;background:transparent;display:grid;place-content:center;text-align:center;font:600 max(11px,1.2cqi)/1.3 var(--grot);color:#7A5A38;cursor:pointer}
.rpin b{display:block;font:400 max(26px,3.15cqi)/1 var(--serif)}
.rcork .rhand{font:500 max(18px,2cqi)/1.2 "Caveat",cursive;margin:auto}
.rnote{position:absolute;right:3%;bottom:5%;max-width:46%;border:0;background:#FFF3A6;padding:6px 10px 7px;text-align:left;font:500 max(14px,1.5cqi)/1.15 "Caveat",cursive;color:#3b2a0a;transform:rotate(2deg);box-shadow:0 4px 10px rgba(0,0,0,.12);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:44px}
.rnote b{display:block;font:700 max(9px,.8cqi) var(--grot);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.rshelf{display:flex;align-items:flex-end;gap:2.6cqi;padding:0 .9cqi 1.1cqi}
.rplank{position:absolute;left:0;right:0;bottom:0;height:1.1cqi;min-height:8px;background:#C8A27A;border-radius:4px;box-shadow:0 6px 10px rgba(0,0,0,.1);z-index:-1}
.robj{position:relative;border:0;background:transparent;padding:0 0 4px;display:flex;flex-direction:column;align-items:center;gap:.4cqi;cursor:pointer;min-height:44px;min-width:44px}
.robj span{font:600 max(11px,1.02cqi) var(--grot);color:var(--rsoft);white-space:nowrap}
.robj[data-ract="camera"] svg{width:max(40px,5.4cqi)}.robj[data-ract="post"] svg{width:max(30px,4.1cqi)}.robj[data-ract="paint"] svg{width:max(34px,4.6cqi)}
.robj svg{height:auto;display:block}
.robj.book i{display:block;width:max(56px,8.3cqi);aspect-ratio:90/112;border-radius:4px 10px 10px 4px;box-shadow:inset .65cqi 0 0 rgba(0,0,0,.12);background-color:#FBD3E6}
.robj.book+.robj.book i{background-color:#CDEEDB}
.robj.box i{display:block;width:max(52px,7.4cqi);aspect-ratio:80/60;border-radius:6px;background:#E9D9C3;box-shadow:inset 0 -.75cqi 0 rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.08)}
.robj.cass i{display:block;width:max(56px,8cqi);aspect-ratio:13/8;border-radius:8px;background:radial-gradient(circle at 30% 60%,#8E83A8 0 14%,transparent 15%),radial-gradient(circle at 70% 60%,#8E83A8 0 14%,transparent 15%),#2B2240}
@media(hover:hover) and (pointer:fine){.robj:hover i,.robj:hover svg{translate:0 -3px}.robj i,.robj svg{transition:translate .15s}}
.rwin{display:flex;flex-direction:column;align-items:center;gap:1cqi}
.rpane{position:relative;width:100%;aspect-ratio:300/380;border:1.1cqi solid #FFFDF8;border-radius:11cqi 11cqi 8px 8px;background-color:#141B4A;background-image:linear-gradient(180deg,#141B4A,#2B3A7A);overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.rpane>i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px rgba(255,236,190,.7)}
.rpane .s1{left:22%;top:12%}.rpane .s2{left:70%;top:22%}.rpane .s3{left:46%;top:44%}.rpane .s4{left:80%;top:70%}
.rsash{position:absolute;top:0;bottom:0;width:50%;background:rgba(255,253,248,.22);border:.5cqi solid #FFFDF8;display:none}
.rsash.l{left:0;border-right-width:.25cqi}.rsash.r{right:0;border-left-width:.25cqi}
.rwin.shut .rsash{display:block}
.rneonsign{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-4deg);z-index:3;pointer-events:none;padding:.6cqi 1.8cqi .8cqi;border:3px solid #FF4F9A;border-radius:12px;background:rgba(11,16,48,.8);box-shadow:0 0 12px rgba(255,79,154,.8),inset 0 0 12px rgba(255,79,154,.5)}
.rneonsign span{font:italic 400 max(24px,3cqi)/1 var(--serif);color:#FFE3F0;text-shadow:0 0 4px #fff,0 0 10px #FF4F9A,0 0 22px #FF4F9A}
.rneonsign.open{top:-1.3cqi;transform:translateX(-50%) rotate(3deg);border-color:#5FE3B5;box-shadow:0 0 12px rgba(95,227,181,.7),inset 0 0 10px rgba(95,227,181,.4)}
.rneonsign.open span{font-size:max(20px,2.4cqi);color:#E6FFF5;text-shadow:0 0 10px #5FE3B5,0 0 22px #5FE3B5}
.rwin{position:absolute}
.rfloat{position:absolute;inset:0}
.rplane{position:absolute;left:10%;width:80%;border:0;border-radius:4px;background:#FFFDF8;padding:.75cqi .95cqi;text-align:left;font:500 max(11px,1.1cqi)/1.3 var(--grot);color:#1F2A6B;box-shadow:0 6px 14px rgba(0,0,0,.2);cursor:pointer;animation:rdrift 9s ease-in-out var(--d) infinite;min-height:44px}
.rplane b{display:block;font:700 max(9px,.85cqi) var(--grot);letter-spacing:.12em;text-transform:uppercase;color:#C42A6B;margin-bottom:1px}
.rplane:nth-child(2n){left:16%}
@keyframes rdrift{0%,100%{translate:0 0;rotate:-1deg}50%{translate:-6px -5px;rotate:1.5deg}}
@media (prefers-reduced-motion:reduce){.rplane{animation:none}}
.rwinbtn{min-height:44px}
.rsill{border:0;background:#FFF3A6;border-radius:8px;padding:8px 12px;min-height:44px;font:600 13px var(--grot);color:#3b2a0a;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.rmirror{aspect-ratio:260/120;border:.55cqi solid #E9C8A0;border-radius:6.5cqi 6.5cqi 10px 10px;background-color:#EAF1F6;background-image:linear-gradient(135deg,#F4F8FB,#DCE8F0);padding:2.2cqi 1.7cqi 1.4cqi;display:flex;gap:.75cqi;align-items:center;justify-content:center;cursor:pointer;color:#2E2A4A}
.rcard{display:inline-block;width:44%;background:#fff;padding:6px 8px;font:500 max(13px,1.4cqi)/1.1 "Caveat",cursive;color:#2E2A4A;box-shadow:0 3px 8px rgba(0,0,0,.12);text-align:left;overflow:hidden;max-height:100%}
.rmirror .rhand{font:500 max(16px,1.7cqi)/1.2 "Caveat",cursive;color:#2E2A4A}
.rknock{position:absolute;right:3%;bottom:1.6%;z-index:2;background:#FF4F9A!important;color:#fff!important;border-color:#FF4F9A!important;min-height:44px}
/* move things (concept 6): a dashed line round each thing and a pink dot to pull */
.rroom.moving [data-mv]{outline:2px dashed #FF4F9A;outline-offset:8px;border-radius:10px;cursor:move;touch-action:none;user-select:none}
.rroom.moving [data-mv] *{pointer-events:none}
.rroom.moving [data-mv] .rmh{pointer-events:auto}
.rmh{position:absolute;right:-16px;bottom:-16px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #FF4F9A;cursor:nwse-resize;z-index:4}
.rmh::before{content:"";position:absolute;inset:-14px}
.rmovehint{position:absolute;left:50%;top:1.6%;transform:translateX(-50%);z-index:6;margin:0;background:#1F2A6B;color:#fff;font:600 12.5px/1.35 var(--grot);border-radius:10px;padding:7px 12px;max-width:60%;text-align:center}
@media(min-width:760px){
  .rroom{aspect-ratio:1080/800}
  .rlights{position:absolute;left:2.8%;right:2.8%;top:7%;height:12.5%}
  .rlights svg{position:absolute;inset:0;width:100%;height:80%}
  .rfield{position:absolute;inset:0}
  .rfield>[data-mv],.rfield>.rname,.rfield>.rneon,.rfield>.rcork,.rfield>.rshelf,.rfield>.rwin,.rfield>.rmirror{position:absolute}
  .room2 .rtop{position:absolute;left:24px;top:14px;z-index:7;margin:0;right:24px;pointer-events:none}
  .room2 .rtop>*{pointer-events:auto}
  .room2 .rbview[data-rbview="zine"],.room2 .rbview[data-rbview="sketch"]{padding-top:66px}
}
@media(max-width:759px){
  .rroom{padding:12px 14px 54px}
  .rlights{position:relative;height:96px;margin:0 2%}
  .rlights svg{position:absolute;inset:0;width:100%;height:70px}
  .rfield{display:flex;flex-direction:column;gap:18px}
  .rfield>*{position:relative!important;left:auto!important;top:auto!important;width:auto!important}
  .rname h2{font-size:38px!important}
  .rcork{aspect-ratio:auto;border-width:8px}
  .rcorkin{position:relative;inset:auto;flex-wrap:wrap;gap:12px;padding:16px 12px 56px}
  .rcork .taped,.rpin{width:calc(33.3% - 8px)}
  .rnote{max-width:70%}
  .rshelf{overflow-x:auto;scrollbar-width:none;gap:18px;padding:6px 4px 10px}
  .rshelf::-webkit-scrollbar{display:none}
  .rplank{left:0;right:0}
  .rwin{position:relative!important;align-self:center;width:min(300px,86%)!important;padding-top:16px}
  .rpane{aspect-ratio:300/340;border-width:9px;border-radius:120px 120px 8px 8px}
  .rplane{font-size:12.5px;padding:8px 10px}
  .rneonsign.open{top:0}
  .rmirror{aspect-ratio:auto;min-height:110px;border-width:5px;border-radius:70px 70px 10px 10px;padding:24px 18px 16px}
  .rcard{font-size:16px}
  .rknock{position:relative;right:auto;bottom:auto;display:flex;margin:18px auto 0;width:100%;justify-content:center}
}
/* the front window (concept 2) */
.rstreet{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#F6EFE4 calc(100% - 7cqi),#D9CFC0 calc(100% - 7cqi));background-color:#F6EFE4;container-type:inline-size;padding:9cqi 9.3cqi 7cqi}
.rfacade{position:relative;background:#F3D9CF;border-radius:10px 10px 0 0;box-shadow:0 14px 30px rgba(31,42,107,.12);padding:8.4cqi 3.7cqi 0;min-height:52cqi;display:flex;flex-direction:column;gap:2cqi}
.rawning{position:absolute;left:-1.9cqi;right:-1.9cqi;top:-.6cqi;height:6cqi;min-height:44px;background:repeating-linear-gradient(90deg,#FF4F9A 0 5.6cqi,#FFFDF8 5.6cqi 11.1cqi);background-color:#FF4F9A;border-radius:8px 8px 30px 30px;box-shadow:0 8px 14px rgba(0,0,0,.12);display:grid;place-items:center}
.rawning b{background:#1F2A6B;color:#FFFDF8;font:400 max(20px,2.4cqi) var(--serif);padding:2px 18px;border-radius:999px;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.rglass{position:relative;display:flex;gap:1.9cqi;align-items:center;justify-content:center;min-height:27.8cqi;padding:1.9cqi;background-color:#E6EEF4;background-image:linear-gradient(135deg,rgba(220,232,240,.9),rgba(240,246,250,.95));border:.93cqi solid #1F2A6B;border-radius:6px}
.rglass .taped{width:15.7cqi}
.rglass .rpin{width:16cqi;margin:0;border-color:#9AA8C8;color:#4E5684}
.rglass .rhand{font:500 max(18px,2cqi) "Caveat",cursive;color:#4E5684}
.rtag{position:absolute;right:2.8cqi;top:1.9cqi;border:0;background:#FFF3A6;padding:1cqi 1.3cqi;transform:rotate(4deg);font:500 max(16px,1.85cqi)/1.15 "Caveat",cursive;color:#3b2a0a;box-shadow:0 5px 12px rgba(0,0,0,.14);text-align:left;cursor:default}
button.rtag[data-me]{cursor:pointer}
.rtag b{display:block;font:700 max(10px,1.1cqi) var(--grot);letter-spacing:.1em;text-transform:uppercase}
.rsill2{display:flex;gap:1.3cqi;align-items:center;flex-wrap:wrap;padding-bottom:13cqi}
.rrev{border:0;background:#fff;border-radius:10px;padding:1cqi 1.1cqi;font:500 max(12px,1.2cqi)/1.4 var(--grot);color:#1F2A6B;box-shadow:0 4px 10px rgba(0,0,0,.08);max-width:20.4cqi;text-align:left}
.rrev.wide{max-width:30cqi}
.rrev b{display:block;font:700 max(10px,1cqi) var(--grot);color:#C42A6B;letter-spacing:.06em;text-transform:uppercase}
.rqr{border:0;background:transparent;display:flex;align-items:center;gap:1.2cqi;cursor:pointer;padding:0;font:500 max(12px,1.2cqi) var(--grot);color:#1F2A6B}
.rqr canvas{width:max(64px,7.8cqi)!important;height:auto!important;border:6px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.12);image-rendering:pixelated}
.rdoorway{position:absolute;right:6.5cqi;bottom:0;width:13.9cqi;min-width:120px;aspect-ratio:150/130;background:#1F2A6B;border-radius:70px 70px 0 0;display:grid;place-items:center}
.rdoorway .rbook{background:#FF4F9A!important;color:#fff!important;border-color:#FF4F9A!important;min-height:44px;white-space:nowrap}
@media(max-width:759px){
  .rstreet{padding:22px 12px 0}
  .rfacade{padding:64px 14px 0;min-height:0}
  .rawning{left:-8px;right:-8px;height:52px}
  .rglass{flex-wrap:wrap;padding:46px 12px 14px;min-height:0;gap:12px}
  .rglass .taped,.rglass .rpin{width:calc(33.3% - 8px)}
  .rtag{right:10px;top:-14px}
  .rsill2{padding-bottom:140px}
  .rrev,.rrev.wide{max-width:none;flex:1 1 100%}
  .rdoorway{right:50%;transform:translateX(50%);width:150px}
}
/* the zines (concept 3) */
.zdesk{position:relative;background:#E9D9C3;border-radius:16px;padding:20px 30px 28px;display:grid;grid-template-columns:300px minmax(0,520px) 120px;gap:40px;align-items:start;color:#1F2A6B}
.zdesk>.rback{grid-column:1/-1;justify-self:start;color:#1F2A6B!important;min-height:44px}
.zshelves{display:flex;flex-direction:column;gap:18px}
.zsh h3{font:400 24px var(--serif)!important;color:#1F2A6B!important;margin:0!important;text-transform:none!important;letter-spacing:0!important}
.zsh p{font:500 12px/1.4 var(--grot);color:#4E5684;margin:2px 0 8px}
.zrow{display:flex;gap:10px;border-bottom:9px solid #C8A27A;padding-bottom:4px;flex-wrap:wrap}
.room2 .zspine{width:64px;height:84px;padding:5px;border-radius:3px 8px 8px 3px;align-items:flex-end;box-shadow:inset 6px 0 0 rgba(0,0,0,.12)}
.room2 .zspine b{font:400 12px/1 var(--serif);color:#1F2A6B!important;overflow:hidden;max-height:100%}
.room2 .zspine.on{outline:3px solid #FF4F9A;outline-offset:2px}
.room2 .zspine.new{border:2px dashed #C8A27A;background:transparent;box-shadow:none;align-items:center;justify-content:center}
.room2 .zspine.new b{font:700 10px var(--grot)}
.zbookwrap{display:flex;flex-direction:column;gap:12px}
.zbook{position:relative;aspect-ratio:520/700;background-color:#FFFDF8;background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(31,42,107,.1) 31px 32px);border-radius:4px 14px 14px 4px;box-shadow:0 14px 34px rgba(31,42,107,.18),inset 12px 0 0 rgba(0,0,0,.05);padding:8% 8%;overflow:hidden;cursor:text;color:#1F2A6B;transition:transform .18s ease,opacity .18s}
.zbook.flipf{transform:perspective(1400px) rotateY(-14deg);opacity:.6}.zbook.flipb{transform:perspective(1400px) rotateY(10deg);opacity:.6}
@media (prefers-reduced-motion:reduce){.zbook{transition:none}}
.zbook[data-page="0"]{cursor:default;background-image:none;background-color:#FBE3EE}
.ztyped{position:absolute;font:500 25px/32px "Caveat",cursive;color:#1F2A6B;white-space:pre-wrap;z-index:1}
.zbook .nbblank{font:500 26px "Caveat",cursive;color:#1F2A6B;opacity:.55}
.zbook .nbnum{color:#1F2A6B}
.zcorner{position:absolute;right:0;bottom:0;width:60px;height:60px;border:0;padding:0;background:linear-gradient(135deg,transparent 50%,#E9DCC7 50%);border-radius:0 0 14px 0;cursor:pointer;z-index:4}
.room2 .zturn{position:static;display:flex;justify-content:space-between;align-items:center;font:600 13px var(--grot);opacity:1;color:#1F2A6B}
.room2 .zturn .linklike{color:#1F2A6B!important;min-height:44px}
.zcup{padding-top:180px;display:flex;flex-direction:column;align-items:center}
.zpens{display:flex;justify-content:center;gap:4px;height:130px;align-items:flex-end;width:110px}
.zpen{width:16px;border:0;padding:0;border-radius:5px 5px 2px 2px;position:relative;background:var(--c);cursor:pointer;transition:transform .15s}
.zpen:nth-child(1){height:90px}.zpen:nth-child(2){height:96px}.zpen:nth-child(3){height:84px}.zpen:nth-child(4){height:92px}.zpen:nth-child(5){height:88px}.zpen:nth-child(6){height:86px}
.zpen::before{content:"";position:absolute;top:-10px;left:3px;width:10px;height:12px;border-radius:5px 5px 0 0;background:inherit;filter:brightness(.8)}
.zpen::after{content:"";position:absolute;inset:-14px -4px 0}
.zpen.up{transform:translateY(-26px) rotate(-8deg)}
.zmug{width:110px;height:70px;border-radius:0 0 14px 14px;background:#6A3FD0;display:grid;place-items:center;font:400 18px var(--serif);color:#fff}
.zcuphint{font:600 11px/1.4 var(--grot);color:#3a3f6b;text-align:center;margin:6px 0 0;max-width:130px}
.zcup.off{padding-top:200px}.zcup.off .zcuphint{font-size:12.5px}
.zpentools{display:flex;flex-direction:column;gap:6px;margin-top:10px;align-items:stretch}
.zpentools .chip{min-height:40px;justify-content:center}
.ztype{position:absolute;z-index:5;width:min(300px,60%);display:flex;flex-direction:column;gap:6px}
.ztype textarea{width:100%;border:0;border-left:2px solid #FF4F9A;background:rgba(255,253,248,.92);font:500 25px/32px "Caveat",cursive;color:#1F2A6B;padding:0 6px;resize:vertical;outline:none}
.zbook.drawing{cursor:crosshair}
.zbook .zcut{margin-top:14%}
.zbook .zby{color:#1F2A6B}
.zbook .zpics .taped{width:34%}
@media(max-width:1099px) and (min-width:760px){.zdesk{grid-template-columns:220px minmax(0,1fr) 110px;gap:22px;padding:18px}}
@media(max-width:759px){
  .zdesk{grid-template-columns:1fr;gap:18px;padding:16px 14px 22px}
  .zcup,.zcup.off{padding-top:0;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}
  .zcup .zpens{height:110px}.zmug{width:96px;height:56px}
  .zcuphint{max-width:none;flex-basis:100%}
  .zpentools{flex-direction:row;flex-wrap:wrap;justify-content:center;flex-basis:100%}
  .ztyped{font-size:21px;line-height:28px}
}
/* the sketchbook keeps its page look; the room's own words */
.room2 .skspread{--rbpaper:#FFFDF8;--rbink:#1F2A6B;--rbtape:#FF4F9A}
.room2 .rbname{color:#1F2A6B!important}
/* the paint tray (concept 6) */
.rtray{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:300;background:#FFFDF8;border-radius:22px;padding:12px 16px;box-shadow:0 12px 30px rgba(31,42,107,.22);display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px);color:#1F2A6B}
.rtgrp{display:flex;flex-direction:column;gap:6px}
.rtgrp>b{font:700 10px var(--grot);letter-spacing:.12em;text-transform:uppercase;color:#C42A6B}
.rtsw{display:flex;gap:8px}
.rtsw button{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer;padding:0;position:relative}
.rtsw button::after{content:"";position:absolute;inset:-6px}
.rtsw button.on{box-shadow:0 0 0 3px #1F2A6B}
.rtsw button[data-rt="font"]{width:auto;height:38px;border-radius:10px;border:1px solid #E3DCCD;box-shadow:none;background:#FFFDF8;color:#1F2A6B;font-size:17px;padding:0 10px}
.rtsw button[data-rt="font"].on{border-color:#1F2A6B;box-shadow:0 0 0 2px #1F2A6B}
.rtray>.btn{min-height:44px;background:#1F2A6B!important;color:#FFFDF8!important}
@media(max-width:759px){.rtray{gap:12px;padding:10px 12px;border-radius:18px}.rtsw{gap:6px}}
/* say hi: one sheet of big choices */
.knocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:6px}
.knock{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);background:var(--cream);border-radius:14px;padding:14px;text-align:left;cursor:pointer;color:var(--ink);min-height:96px}
.knock svg{color:var(--pinkt,#C42A6B)}
.knock b{font:700 14px var(--grot)}.knock span{font:500 12.5px/1.35 var(--grot);color:var(--bark)}
/* the whole room fits on the screen, as in the concepts */
@media(min-width:760px){
  .room2{max-width:calc((100dvh - 92px) * 1.35);margin-inline:auto}
  .room2 .rtop{left:20px;right:20px}
  .rlights{top:9.5%;height:12%}
  .zbook{width:min(100%,calc((100dvh - 310px) * 520 / 700));margin-inline:auto}
  .zbookwrap .zturn{width:min(100%,calc((100dvh - 310px) * 520 / 700));margin-inline:auto}
  .rwin .rwinbtn{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);z-index:3;white-space:nowrap}
  .rwin .rsill{position:absolute;left:50%;top:calc(100% + 34px);transform:translateX(-50%);white-space:nowrap;z-index:3}
}
.zpentools[hidden]{display:none!important}
.robj{flex:none}
.room2 .rclassic .linklike{display:inline-block;padding:12px 2px}
.rmovehint{left:auto;right:9%;transform:none;max-width:32%}
@media(max-width:759px){
  .rnote{position:relative;right:auto;bottom:auto;flex-basis:100%;max-width:100%;margin-top:4px}
  .rcorkin{padding-bottom:16px}
  .zbook .zcut b{font-size:26px}
}
/* an iPad or small laptop: the search shrinks to its glass until you tap it, so it never runs into the tabs */
@media(min-width:900px) and (max-width:1199px){
  html.citynav .hsearch{width:44px;padding:0 13px;overflow:hidden;position:relative;z-index:80;transition:width .2s}
  html.citynav .hsearch:focus-within{width:260px}
  html.citynav .hsearch input{opacity:0}html.citynav .hsearch:focus-within input{opacity:1}
}
.room2 [hidden]{display:none!important}
.zcut{gap:4px 16px}.zcut .zw{display:inline-flex;gap:4px;align-items:flex-end;white-space:nowrap}
.zbook .zcut b{font-size:clamp(24px,3.6vw,46px)}
.robj span{white-space:normal;text-align:center;line-height:1.2;max-width:max(64px,9cqi)}
@media(min-width:760px){.rshelf{gap:2cqi}.robj.book i{width:max(44px,7.6cqi)}}
@media(min-width:900px) and (max-width:1199px){html.citynav .hsearch svg{flex:none}html.citynav .hsearch input{width:0}html.citynav .hsearch:focus-within input{width:100%}}
/* phone check: readable words and thumb-sized links in the room */
.rneon{color:var(--neonink,var(--neon))}
.rroom .rname .eyebrow{color:#A3195A!important}.rroom.night .rname .eyebrow{color:#FF9CC6!important}
.room2 .rname .linklike,.room2 .rclassic .linklike{display:inline-block;padding:14px 2px!important;margin:-14px -2px!important;line-height:18px}
.room2 .rclassic{line-height:46px}
/* phone check: solid colours behind gradients, and days off read as off without fading their numbers */
.evd{background-color:#FFE3EE}
.cf{background-color:#FFD9E8}
.omday.off{opacity:1;color:var(--bark);background-color:var(--paper);background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--line) 70%,transparent) 6px 7px)}
.zbook .nbnum{opacity:1;color:#4E5684}.zbook .nbblank{opacity:1;color:#4E5684}
.comdot{background:#C42A6B;color:#fff}
/* ===== everyone gets the new look (2026-10-17): guests, clients from a QR code, and "only the basics" ===== */
html.guestnav .tabbar{display:none!important}
html.guestnav .hsearch,html.guestnav #hBell,html.guestnav #hAvatar{display:none!important}
html.guestnav body{padding-bottom:0}
/* the purple M, wherever the old leaf was */
.gatemark.mmark{width:78px;height:78px;border-radius:24px;margin:0 auto 14px;background:radial-gradient(circle at 35% 30%,#9B6BFF,#6A3FD0 60%,#4B2A9E);background-color:#6A3FD0;box-shadow:0 10px 26px rgba(106,63,208,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:none!important}
.gatemark.mmark svg{width:18px;height:18px;color:#FFD27A;margin-bottom:-3px;stroke:none!important}
.gatemark.mmark b{font:400 44px/.9 var(--serif);color:#fff}
.gatemark.mmark::before,.gatemark.mmark::after{display:none!important}
/* the front door */
.guestdoor{position:relative;min-height:calc(100dvh - 120px);display:grid;place-items:center;padding:28px 0 40px;isolation:isolate}
.gdcity{position:absolute;inset:0 -16px;z-index:-1;overflow:hidden;border-radius:0;background-color:#F6EFE4;
  background-image:repeating-linear-gradient(28deg,transparent 0 46px,rgba(255,255,255,.75) 46px 50px),repeating-linear-gradient(-62deg,transparent 0 70px,rgba(255,255,255,.6) 70px 73px)}
html[data-theme="dark"] .gdcity{background-color:#0E1438;background-image:repeating-linear-gradient(28deg,transparent 0 46px,rgba(159,179,255,.08) 46px 50px),repeating-linear-gradient(-62deg,transparent 0 70px,rgba(159,179,255,.06) 70px 73px)}
.gdcity i{position:absolute;border-radius:40% 55% 45% 60%}
.gdcity .p1{left:4%;top:10%;width:26%;height:30%;background:#CFE6DA}.gdcity .p2{right:6%;bottom:8%;width:22%;height:26%;background:#DDF0E6}
.gdcity .w1{left:-6%;bottom:-10%;width:48%;height:34%;background:#D6E6F5;border-radius:50% 50% 0 0}
.gdcity .h1{right:14%;top:8%;width:14%;height:14%;background:#FBE3EE}.gdcity .h2{left:36%;top:4%;width:10%;height:10%;background:#FFF1D6}.gdcity .h3{left:62%;bottom:24%;width:9%;height:11%;background:#E7DDFB}
html[data-theme="dark"] .gdcity i{opacity:.14}
.gdpin{position:absolute;width:30px;height:30px;border-radius:50%;border:3px solid #FFFDF8;box-shadow:0 0 0 2px #FF4F9A,0 6px 14px rgba(31,42,107,.2)}
.gdpin.n0{left:14%;top:46%}.gdpin.n1{right:18%;top:30%}.gdpin.n2{left:24%;bottom:18%}.gdpin.n3{right:28%;bottom:30%}.gdpin.n4{left:48%;top:12%}
.gdcard{width:min(460px,100%);background:var(--cream);border:1px solid var(--line);border-radius:26px;padding:30px 28px 22px;box-shadow:0 20px 50px rgba(31,42,107,.16);text-align:center}
.gdtitle{font:400 clamp(46px,7vw,60px)/1 var(--serif)!important;margin:0 0 8px!important;color:var(--ink)}
.gdtag{margin:0 0 18px;display:flex;flex-direction:column;gap:2px}.gdtag b{font:700 15px var(--grot);color:var(--ink)}.gdtag em{font:italic 400 19px var(--serif);color:var(--bark)}
.gdsides{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.gdsides li{display:flex;gap:12px;align-items:center}
.gdsym{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#1F2A6B}
.gdsides b{display:block;font:700 14.5px var(--grot);color:var(--ink)}.gdsides span:not(.gdsym){font:500 13px/1.4 var(--grot);color:var(--bark)}
.gddoors{display:flex;flex-direction:column;gap:10px}.gddoors .btn{width:100%;justify-content:center;min-height:50px;font-size:15px}
.gdfine{margin:12px 0 0;font:500 12.5px/1.45 var(--grot);color:var(--bark)}
.gdfine .linklike{font-weight:700;color:var(--ink)!important;display:inline-block;padding:12px 2px;margin:-12px -2px}
@media(max-width:640px){.guestdoor{padding:10px 0 24px;min-height:0}.gdcard{padding:24px 18px 18px;border-radius:22px}.gdpin{display:none}}
/* a talent page for someone signed out, as mockup 24 */
.gwall{max-width:520px;margin:0 auto 30px;background:var(--cream);border:1px solid var(--line);border-radius:22px;overflow:hidden;padding:0 22px 22px;text-align:left}
.gwcover{height:170px;margin:0 -22px;background-color:#E7DDFB}
.gwface{width:92px;height:92px;border-radius:50%;margin:-48px 0 10px;border:4px solid var(--cream);box-shadow:0 0 0 3px #FF4F9A;display:grid;place-items:center;font:400 40px var(--serif);color:#1F2A6B;background-color:#FFD9E8}
.gwname{font:400 clamp(34px,6vw,44px)/1 var(--serif)!important;margin:0 0 4px!important;color:var(--ink)}
.gwsub{margin:0 0 16px;font:500 14px var(--grot);color:var(--bark)}
.gwwork{display:flex;gap:12px;margin:6px 0 18px}
.gwwork .taped{flex:1;margin:0}.gwwork .taped span{display:block;aspect-ratio:4/5;filter:blur(1px) saturate(1.1)}
.gwwork .taped i{font-size:10px}
.gwnote{font:500 13.5px/1.5 var(--grot);color:var(--ink);margin:0 0 16px}
.gwdoors{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}.gwdoors .btn{width:100%;justify-content:center;min-height:50px;font-size:15px}
.gwall .hint{text-align:center}
.gwwork .taped span{position:static!important;display:block;width:100%;aspect-ratio:4/5;left:auto;bottom:auto;background-color:#E7DDFB}
/* the pond in plain words (2026-10-17): what each thing means comes first, the pond's name for it second */
.pondsay{margin:6px 0 0;max-width:360px;font:500 15px/1.45 var(--grot);color:var(--ink)}
.pondkeyh{font:400 22px/1.1 var(--serif)!important;margin:4px 0 4px!important;color:var(--ink)}
.pondkey{padding:10px 14px}
.pondkey>div.pk{position:relative;grid-template-columns:30px 1fr auto;padding:9px 0}
.pondkey .pk i{width:26px;height:26px}
.pondkey .pk b{font:700 15px var(--grot)}
.pondkey .pk span:not(.pkn){font:500 13.5px/1.4 var(--grot);color:var(--bark)}
.pondkey .pk em{font-size:22px}
.pondkey .pkn{position:absolute;left:-6px;top:4px;width:18px;height:18px;border-radius:50%;background:#1F2A6B;color:#fff;font:700 11px/18px var(--grot);text-align:center;grid-column:auto}
.pondkey .pk.step+.pk:not(.step){margin-top:6px;border-top:2px solid var(--line)}
/* the window shuts where it is (2026-10-18): the panes slide in, the notes drift out, the sign changes */
.rsash{display:block!important;transform:scaleX(0);transition:transform .6s ease}
.rsash.l{transform-origin:left center}.rsash.r{transform-origin:right center}
.rwin.shut .rsash{transform:scaleX(1)}
.rfloat{transition:opacity .4s ease}
.rwin.shut .rfloat{opacity:0;pointer-events:none}
.rwin.shut .rneonsign.open,.rwin.open .rneonsign:not(.open){display:none}
.rneonsign{animation:rsignon .5s ease}
@keyframes rsignon{0%{opacity:0}30%{opacity:.8}40%{opacity:.2}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.rsash,.rfloat{transition:none}.rneonsign{animation:none}}
/* your top 8 */
.t8sheet h2{margin:0 0 4px}
.t8now{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;margin:12px 0 6px}
.t8slot{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.t8slot b{font:600 13px var(--grot);color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t8slot.empty .rbface{background:transparent!important;border:2px dashed var(--line)!important;box-shadow:none!important}
.t8sheet .rbface{width:52px;height:52px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:400 22px var(--serif);color:#1F2A6B;border:3px solid #fff;box-shadow:0 0 0 2px #FFD27A}
.t8sheet .rbface img{width:100%;height:100%;object-fit:cover}
.t8sheet .rbface.sm{width:40px;height:40px;font-size:17px;flex:none;box-shadow:0 0 0 2px var(--pink)}
.t8acts{display:flex;gap:2px}
.t8b{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--cream);color:var(--ink);font:700 15px/1 var(--grot);cursor:pointer;padding:0;position:relative}
.t8b::after{content:"";position:absolute;inset:-7px -1px}
.t8b:disabled{visibility:hidden}
.t8h{font:400 22px var(--serif)!important;margin:16px 0 8px!important;text-transform:none!important;letter-spacing:0!important}
.t8sheet input[type=search]{width:100%;font-size:16px!important;min-height:46px}
.t8list{display:flex;flex-direction:column;gap:6px;margin:10px 0 14px;max-height:42vh;overflow-y:auto}
.t8row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--cream);border-radius:14px;padding:8px 12px;cursor:pointer;text-align:left;min-height:56px;color:var(--ink)}
.t8row span:not(.rbface){flex:1;min-width:0}.t8row b{display:block;font:700 14.5px var(--grot)}.t8row em{font:500 12.5px var(--grot);font-style:normal;color:var(--bark)}
.t8row i{font:700 13px var(--grot);font-style:normal;color:#fff;background:var(--ink);border-radius:999px;padding:6px 12px}
.t8done{width:100%;justify-content:center;min-height:48px}
/* the map box is the city's, never the old fixed height */
#mtMap{min-height:0!important}
.city #mtLayers{flex-wrap:wrap;overflow:visible}
#mtNearest{margin-top:4px}
/* wallpaper sits on the wall colour */
.rroom{background-image:var(--rpaper,none),linear-gradient(180deg,var(--wall1),var(--wall2));background-size:var(--rpsize,auto),auto}
/* Paint my room: one tray for everything (2026-10-18) */
.rtray{flex-direction:column;align-items:stretch;gap:12px;width:min(760px,calc(100vw - 24px));max-height:min(78vh,620px);overflow-y:auto}
.rttop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rttitle{font:400 24px var(--serif);color:#1F2A6B;margin-right:auto}
.rttabs{display:inline-flex;gap:2px;background:#F3EEE4;border-radius:999px;padding:4px}
.rttabs button{border:0;background:transparent;border-radius:999px;padding:8px 16px;min-height:42px;font:700 13.5px var(--grot);color:#1F2A6B;cursor:pointer}
.rttabs button.on{background:#1F2A6B;color:#FFFDF8}
.rtrow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.rthint{margin:0;font:500 13px/1.4 var(--grot);color:#4E5684}
.rtwords{display:flex;flex-direction:column;gap:10px}
.rtfield{display:flex;flex-direction:column;gap:5px}
.rtfield>b{font:700 10.5px var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--pink-text)}
.rtfield input,.rtfield textarea,.rtfield select{width:100%;font:500 16px var(--grot)!important;color:#1F2A6B;background:#FFFDF8;border:1.5px solid #E3DCCD;border-radius:12px;padding:10px 12px;min-height:46px}
.rtfield textarea{resize:vertical}
.rtsugg{display:flex;gap:6px;flex-wrap:wrap;margin-top:-4px}
.rtthings{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rtthing{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:1.5px solid #E3DCCD;background:#FFFDF8;border-radius:16px;padding:12px;cursor:pointer;color:#1F2A6B;min-height:68px}
.rtthing span{grid-row:1/3;width:42px;height:42px;border-radius:14px;background:#E7DDFB;display:grid;place-items:center;color:#4B2A9E}
.rtthing b{font:700 14.5px var(--grot)}.rtthing em{font:500 12.5px/1.35 var(--grot);font-style:normal;color:#4E5684}
.rtfoot{display:flex;justify-content:flex-end;position:sticky;bottom:-12px;background:#FFFDF8;padding:8px 0 2px}
.rtfoot .btn{min-height:46px;padding:0 26px;background:#1F2A6B!important;color:#FFFDF8!important}
@media(max-width:759px){.rtray{left:8px;right:8px;transform:none;width:auto;bottom:calc(8px + env(safe-area-inset-bottom));max-height:72vh}.rttabs{width:100%}.rttabs button{flex:1;padding:8px 6px}}
/* the room's post sheet */
.rpost{display:flex;flex-direction:column;gap:12px}
.rpost h2{margin:0}
.rppics{display:flex;gap:8px;flex-wrap:wrap}.rppics:empty{display:none}
.rpwho{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rpw{display:flex;flex-direction:column;gap:3px;text-align:left;border:1.5px solid var(--line);background:var(--cream);border-radius:14px;padding:12px;cursor:pointer;color:var(--ink);min-height:72px}
.rpw b{font:700 14.5px var(--grot)}.rpw span{font:500 12.5px/1.35 var(--grot);color:var(--bark)}
.rpw.on{border-color:#1F2A6B;box-shadow:0 0 0 2px #1F2A6B}
.rpgo{width:100%;justify-content:center;min-height:50px;font-size:15px}
@media(max-width:420px){.rpwho{grid-template-columns:1fr}}
.rnote.fresh{animation:rfresh 1.6s ease 2}
@keyframes rfresh{0%,100%{box-shadow:0 4px 10px rgba(0,0,0,.12)}50%{box-shadow:0 0 0 4px #FF4F9A,0 4px 10px rgba(0,0,0,.12)}}
/* iPhone: a text box under 16px makes Safari zoom in when it is tapped, and the page stays zoomed */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}}
/* laptop sizing (2026-10-18, "the sizing is weird on laptop", "photos too small"): the room keeps a comfortable size on
   a short laptop window instead of shrinking to the window's height, and the zine page sizes by width */
@media(min-width:760px){
  .room2{max-width:max(900px,calc((100dvh - 92px) * 1.35))}
  .zbook,.zbookwrap .zturn,.zbookwrap .ztools{width:min(100%,560px)!important;margin-inline:auto}
}
@media(min-width:1100px){.zdesk{grid-template-columns:260px minmax(0,560px) 120px}}
@media(max-width:1099px) and (min-width:760px){.zdesk{grid-template-columns:200px minmax(0,1fr) 100px}}
.rcork .taped,.rcork .rpin{width:27%}
.rcorkin{gap:3%;padding:3.4% 3%}
.rglass .taped{width:19cqi}
@media(max-width:759px){.rcork .taped,.rcork .rpin{width:calc(50% - 6px)}}
/* your own photos and words can be tapped */
.rpicown{cursor:pointer}
@media(hover:hover) and (pointer:fine){.rpicown:hover{outline:2px dashed #FF4F9A;outline-offset:3px}.ztyped.mine:hover{outline:2px dashed rgba(255,79,154,.6);outline-offset:4px;border-radius:4px}}
.ztyped.mine{cursor:pointer}
.photosheet{text-align:center}.photosheet img{max-width:100%;max-height:70vh;border-radius:6px;display:block;margin:0 auto 14px}
/* the zine tools under the page */
.ztools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ztools .btn{min-height:44px}
.zturn .zdel{color:#B42318!important}
/* a zine made on paper: each page is a photo, shown whole */
.zbook.scan .nbmark{inset:0;width:100%!important;height:100%;left:0!important;top:0!important}
.zbook.scan .nbmark img{width:100%;height:100%;object-fit:contain;background:#FFFDF8}
/* the colour wheel in the cup */
.zpen.wheel{background:conic-gradient(#FF4F9A,#F2994A,#F2B84B,#1F9D6B,#2F6BFF,#8E5BD8,#FF4F9A)!important;height:80px}
.zpen.wheel::before{background:var(--c,#FF4F9A);filter:none}
.zpens{width:auto}
/* up close */
.zzoomm{padding:0!important;align-items:stretch!important}
.zzoom{position:fixed;inset:0;background:#2B2240;display:flex;flex-direction:column}
.zzbar{display:flex;gap:8px;align-items:center;justify-content:center;padding:10px;padding-top:calc(10px + env(safe-area-inset-top));background:#FFFDF8}
.zzbar .btn{min-height:44px;min-width:44px;font-size:18px}.zzbar span{font:700 14px var(--grot);color:#1F2A6B;min-width:54px;text-align:center}
.zzbar #zzX{margin-left:18px;font-size:14px}
.zzscroll{flex:1;overflow:auto;touch-action:pan-x pan-y pinch-zoom;cursor:grab;padding:12px}
.zzpage{margin:0 auto}.zzpage .zbook{width:100%!important;cursor:default}
/* digitize */
.zscan{display:flex;flex-direction:column;gap:12px}.zscan h2{margin:0}
.zsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.zsshot{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.zsshot img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.14)}
.zsshot span{position:absolute;left:4px;top:4px;background:#1F2A6B;color:#fff;border-radius:999px;font:700 11px/1 var(--grot);padding:4px 7px}
.zsacts{display:flex;gap:2px}
.zsadd{aspect-ratio:3/4;border:2px dashed var(--line);border-radius:6px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:700 12.5px/1.3 var(--grot);color:var(--ink);cursor:pointer;text-align:center;padding:6px}
.zsadd b{font:400 32px/1 var(--serif)}.zsadd em{font:500 11px var(--grot);font-style:normal;color:var(--bark)}
.zspine.scan{background:#FFF3A6!important;border-color:#C8A27A}
.rtray{flex-wrap:nowrap!important}
.rtsw button[data-rt="paper"]{border-radius:50%}
.rtray{max-height:min(620px,calc(100dvh - 110px))}
/* the box you type in stays inside the page */
.zbook .ztype{width:min(300px,calc(100% - 16px))}
.zbook .ztype textarea{font-size:22px!important;line-height:28px}
.zbook .ztype .row{flex-wrap:wrap}
/* the eraser in the cup */
.zpen.eraser{background:linear-gradient(180deg,#FFB3C8 0 62%,#2F6BFF 62% 70%,#F7F2E8 70%)!important;height:58px;border-radius:5px}
.zpen.eraser::before{display:none}
/* the door sign says who each side is for, in plain words */
.rdoor button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;padding:6px 15px}
.rdoor button small{font:500 10.5px var(--grot);opacity:.75;margin-top:2px}
/* iPhone: nothing pokes past the right edge */
.guestdoor{overflow-x:clip}
#mtLayers,.mtchips{flex-wrap:wrap!important;overflow:visible!important}
/* the key inside the picture (narrower windows): the heading sits above it, never on it */
.pondart:has(> .pondkey) .pondhead{position:static!important}
/* a booking's extra actions open as a full row under it, never a column squeezed off the right edge (2026-10-18) */
.slot{flex-wrap:wrap}
.slot details.moreacts{flex-basis:100%;width:100%}
details.moreacts>summary{display:inline-flex;align-items:center;min-height:40px;cursor:pointer;font:700 13px var(--grot);color:var(--ink)}
details.moreacts>.row{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:6px;margin-top:6px}
/* the city's controls live in the side panel, never on top of the map (her ask, 2026-10-18: "the tabs block the map,
   shift it all to the side"). Only + and − stay on the map. */
.citytools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.citytools .citytop,.citytools .daynight,.citytools .cityex{position:static!important;top:auto!important;right:auto!important;left:auto!important;z-index:auto}
.citytools .citytop{flex:1 1 100%;display:flex}
.citytools .citysearch{flex:1}
.citytools .daynight button{min-height:40px;padding:6px 14px;font-size:.8rem}
.citytools .cityex{margin-left:auto;flex-direction:row}
.city .mtlistbtn{display:none!important}
@media(min-width:900px){.citytools .citytop{display:none!important}}
@media(max-width:899px){.citysheet .citytools{margin-top:4px}}
/* your calendars */
.calcard{margin-bottom:12px}
.callist{display:flex;flex-direction:column;gap:6px}
.calrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--cream)}
.calrow div{flex:1;min-width:0}.calrow b{display:block;font:700 14px var(--grot)}.calrow em{font:500 12px var(--grot);font-style:normal;color:var(--bark)}
.caldot{width:12px;height:12px;border-radius:50%;background:#2F6BFF;flex:none}
.calapps{display:flex;gap:8px;flex-wrap:wrap}.calapps .btn{min-height:46px}
.calraw{margin-top:10px}.calraw summary{cursor:pointer;font:700 13px var(--grot);color:var(--ink);min-height:40px;display:inline-flex;align-items:center}
.calkinds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.calkind{border:1.5px solid var(--line);background:var(--cream);border-radius:14px;padding:16px 12px;min-height:64px;cursor:pointer;color:var(--ink);text-align:left}
.calkind b{font:700 15px var(--grot)}
.calsteps{margin:4px 0 12px;padding-left:22px;font:500 14.5px/1.5 var(--grot);color:var(--ink)}.calsteps li{margin-bottom:4px}
/* laptop layout fixes from the bug hunt (2026-10-18) */
html,body{overflow-x:clip!important}             /* hidden stopped the header from sticking; clip keeps it */
#view-flow section.panel,#view-flow .flowcard{padding-left:clamp(16px,4vw,32px)!important;padding-right:clamp(16px,4vw,32px)!important}
@media(min-width:760px){#view-flow .flowcard,#view-flow>section.panel{max-width:680px;margin-left:auto!important;margin-right:auto!important}}
@media(min-width:900px) and (max-width:1100px){
  html.citynav .tabbar{left:150px!important;gap:2px!important}
  html.citynav .tabbar .tab{padding:8px 10px!important}
  html.citynav .tabbar .tab .lbl{font-size:.84rem!important}
}
.room2 .btn:not(.ghost),.zdesk .btn:not(.ghost),.skspread .btn:not(.ghost){background:#1F2A6B!important;color:#FFFDF8!important;border-color:#1F2A6B!important;opacity:1}
/* the artist sheet starts under the header, whatever height the header is */
@media(min-width:900px){.modal.citysheetm .sheet{top:var(--hdr-h,75px)!important}}
@media(min-width:760px){.city{height:calc(100dvh - var(--hdr-h,75px))!important}}
html.citynav header.bar{background:var(--paper)!important;background-color:var(--paper)!important;z-index:70}
/* the tax disclaimer: big, plain, impossible to miss (2026-10-18) */
.taxnote{border:2px solid #B7791F;background:#FFF4DB;background-color:#FFF4DB;border-radius:14px;padding:12px 14px;margin:10px 0 14px;color:#4A3008}
.taxnote>b{display:block;font:700 15.5px var(--grot);color:#4A3008;margin-bottom:4px}
.taxnote p{margin:0 0 6px;font:500 14px/1.5 var(--grot);color:#4A3008}.taxnote p:last-child{margin-bottom:0}
.taxnote.sm{border-width:1.5px;padding:8px 10px;margin:8px 0 0;font:500 12.5px/1.4 var(--grot)}
.taxnote.sm b{display:inline;font-size:12.5px}
html[data-theme="dark"] .taxnote{background:#33290F;background-color:#33290F;border-color:#FFD27A;color:#FFF4DB}
html[data-theme="dark"] .taxnote>b,html[data-theme="dark"] .taxnote p,html[data-theme="dark"] .taxnote.sm b{color:#FFF4DB}
/* the constellation pill lives in the side panel too; its card still opens over the map, where you can close it */
.citytools .nightpill.side{position:static!important;order:5;flex:1 1 100%;text-align:left;justify-content:flex-start;min-height:40px}
.exsheetnote{margin:0 0 12px;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,#EFE6FF,#E3F6F7);background-color:#EFE6FF;font:500 13px/1.4 var(--grot);color:#3B2A6B}
.exsheetnote b{color:#4B2A9E}
/* the street of windows: a sign for each window along the top */
.rsigns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 2.4cqi}
.rsigns button{border:2px solid #1F2A6B;background:#FFFDF8;color:#1F2A6B;border-radius:10px 10px 4px 4px;padding:8px 14px;min-height:44px;font:700 max(13px,1.15cqi) var(--grot);cursor:pointer;box-shadow:0 3px 0 #1F2A6B}
.rsigns button em{font-style:normal;font-weight:500;color:#C42A6B}
.rsigns button.on{background:#1F2A6B;color:#FFFDF8}.rsigns button.on em{color:#FFD27A}
.rwdesc{margin:0;font:500 max(13px,1.25cqi)/1.45 var(--grot);color:#1F2A6B;text-align:center}
/* the chalkboard menu */
.rmenu{display:block;width:100%;background:#2F3B33;background-color:#2F3B33;border:.9cqi solid #8A5A34;border-radius:8px;padding:1.6cqi 2.2cqi;color:#F4F1E6;box-shadow:inset 0 0 22px rgba(0,0,0,.35),0 6px 14px rgba(0,0,0,.12);text-align:left}
button.rmenu{cursor:pointer;min-height:64px}
.rmenuh{display:block;font:500 max(20px,2.2cqi) "Caveat",cursive;color:#FFF3A6;margin-bottom:.4cqi}
.rmenu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:3cqi}
.rmenu li button{display:flex;align-items:baseline;gap:8px;width:100%;border:0;background:transparent;color:#F4F1E6;padding:6px 0;min-height:40px;cursor:pointer;text-align:left;font:500 max(17px,1.75cqi) "Caveat",cursive}
.rmenu .rmd{flex:1;border-bottom:2px dotted rgba(244,241,230,.45);transform:translateY(-4px)}
.rmenu .rmp{font-weight:700;color:#FFD6E8}
@media(hover:hover) and (pointer:fine){.rmenu li button:hover .rmn{text-decoration:underline}}
.rmslide{margin:.6cqi 0 0;font:500 max(15px,1.5cqi) "Caveat",cursive;color:#C9F2DF}
.rmenu.empty span{display:block;font:500 max(13px,1.2cqi)/1.4 var(--grot);color:#F4F1E6}
/* prices in the services editor, and the sliding scale */
.svcslot{flex-wrap:wrap;gap:8px;align-items:center}
.svcrate{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--grot);color:var(--bark)}
.svcrate input{width:90px;min-height:40px;font-size:16px}
.slidefield .slideval{display:block;font:400 30px var(--serif);color:var(--ink);margin-bottom:4px}
.slidefield input[type=range]{width:100%;accent-color:#FF4F9A;min-height:40px}
.slideends{display:flex;justify-content:space-between;font:600 12px var(--grot);color:var(--bark)}
.svcp{font-style:normal;font-weight:600;color:var(--pink-text);margin-left:6px}
/* your windows sheet */
.wsrow{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0;background:var(--cream)}
.wspics{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-top:8px}
.wspic{padding:0;border:3px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:1/1;background:#eee}
.wspic img{width:100%;height:100%;object-fit:cover;display:block}.wspic.on{border-color:#FF4F9A}
.rdoorway{width:auto!important;min-width:max(120px,13.9cqi);padding:0 2.4cqi}
/* the turntable in the front window */
.rturn{display:flex;align-items:center;gap:2cqi;background:#FFFDF8;background-color:#FFFDF8;border-radius:14px;padding:1.4cqi 1.8cqi;box-shadow:0 4px 10px rgba(0,0,0,.08);color:#1F2A6B;text-align:left}
button.rturn{border:0;cursor:pointer;width:100%;min-height:64px}
.rplatter{position:relative;flex:none;width:max(84px,9cqi);aspect-ratio:1/1;border:0;border-radius:12px;background:#E9D9C3;background-color:#E9D9C3;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.rvinyl{display:grid;place-items:center;width:82%;aspect-ratio:1/1;border-radius:50%;background:repeating-radial-gradient(circle,#1b1b22 0 2px,#2a2a33 2px 4px);background-color:#1b1b22;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.rlabel{display:block;width:36%;aspect-ratio:1/1;border-radius:50%;background:var(--neon,#FF4F9A);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.rlabel::after{content:"";display:block;width:16%;aspect-ratio:1/1;margin:42% auto 0;border-radius:50%;background:#E9D9C3}
.rarm{position:absolute;right:8%;top:10%;width:6%;height:52%;background:#9AA3C7;border-radius:4px;transform-origin:50% 8%;transform:rotate(-24deg);transition:transform .5s ease}
.rturn.playing .rarm{transform:rotate(-4deg)}
.rturn.playing .rvinyl{animation:rspin 1.8s linear infinite}
@keyframes rspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rturn.playing .rvinyl{animation:none}.rarm{transition:none}}
.rrecinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.rrecinfo>b{font:700 max(10px,1cqi) var(--grot);letter-spacing:.1em;text-transform:uppercase;color:#C42A6B}
.rrectitle{font:400 max(18px,2cqi)/1.15 var(--serif);color:#1F2A6B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrecnav{display:flex;align-items:center;gap:8px;font:600 12.5px var(--grot);color:#4E5684}.rrecnav .linklike{font-size:20px;min-width:36px;min-height:36px}
.rturn.empty b{display:block;font:700 14.5px var(--grot)}.rturn.empty>span:not(.rplatter){font:500 12.5px var(--grot);color:#4E5684}
.rturn.empty .rvinyl{opacity:.35}
/* your records sheet */
.reclist{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.recrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--cream)}
.recrow b{flex:1;min-width:0;font:700 14px var(--grot);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recdisc{width:30px;height:30px;border-radius:50%;flex:none;background:radial-gradient(circle,#FF4F9A 0 22%,#1b1b22 23%)}
.recadd{display:flex;flex-direction:column;gap:10px}
/* the doorbell */
.rbell{display:flex;align-items:center;gap:12px;width:100%;border:2px dashed #C8A27A;background:#FFFDF8;background-color:#FFFDF8;border-radius:14px;padding:1.2cqi 1.6cqi;cursor:pointer;color:#1F2A6B;text-align:left;min-height:56px;flex-wrap:wrap}
.rbell b{font:700 max(14px,1.3cqi) var(--grot)}.rbell>span:not(.rbellico){font:500 max(12px,1.1cqi) var(--grot);color:#4E5684;flex-basis:100%;padding-left:46px;margin-top:-10px}
.rbellico{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFD27A 0 46%,#E0A93B 47% 60%,transparent 61%);background-color:transparent;position:relative;flex:none}
.rbellico::after{content:"";position:absolute;left:50%;bottom:3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#B7791F}
.rbell.mine{border-style:solid;border-color:#FFD27A}
.rbellqa{background:#FFFDF8;border-radius:12px;padding:10px 12px;margin-top:8px;font:500 13.5px/1.45 var(--grot);color:#1F2A6B;width:100%}
.rbellqa p{margin:0 0 4px}.rbellqa b{display:block;font:700 11px var(--grot);letter-spacing:.08em;text-transform:uppercase;color:#C42A6B}
.rbellqa .ans b{color:#1F7A3A}.rbellqa .wait{color:#4E5684;font-style:italic}
.atdoor .bellq{margin:8px 0}.atdoor .bq{font:500 15px/1.45 var(--grot);color:var(--ink);margin:4px 0 8px}.atdoor .ba{font:500 14px/1.45 var(--grot);color:var(--ink)}
/* the front window at the top of an artist's page, for clients */
.tpfront{margin:0 0 18px}
.tpfront .room2 .rtop{position:static!important;margin-bottom:10px}
.tpfront .rclassic{display:none}
/* start fresh */
.freshrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px;margin:8px 0;background:var(--cream)}
.freshrow div{flex:1;min-width:0}.freshrow b{display:block;font:700 14.5px var(--grot);color:var(--ink)}.freshrow span{font:500 12.5px/1.4 var(--grot);color:var(--bark)}
.freshrow .btn{flex:none;min-height:44px}
.freshall{margin-top:14px}.freshbtn{width:100%;justify-content:center;min-height:48px;background:#B42318!important;border-color:#B42318!important;color:#fff!important}
.freshsheet .btn.freshbtn{background:#B42318!important;border-color:#B42318!important;color:#fff!important}
@media(min-width:760px){.rfacade .rbell,.rfacade .rbellqa{width:calc(100% - max(130px,15cqi) - 2cqi)}}
/* a client sees only the front, so the door sign is not needed on an artist's page */
.tpfront .room2 .rtop .rdoor{display:none}
@media(max-width:759px){.rdoorway{position:relative!important;right:auto!important;transform:none!important;margin:14px auto 0}.rsill2{padding-bottom:12px!important}}
.svcvary{margin:0;font-size:13px}
.rbell.vary{border-style:solid;border-color:#FF4F9A}
/* the sample city's label: a small pill in the bottom corner, out of the way (her ask, 2026-10-18) */
#sampleStrip{left:12px!important;right:auto!important;top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;transform:none!important;padding:4px 4px 4px 12px!important;gap:8px!important;border-radius:999px!important;max-width:calc(100vw - 24px);box-shadow:0 4px 12px rgba(31,42,107,.25)}
#sampleStrip span{display:none!important}
#sampleStrip b{font-size:11px}
#sampleStrip button{min-height:36px!important;padding:6px 12px}
@media(max-width:899px){#sampleStrip{bottom:calc(104px + env(safe-area-inset-bottom))!important}}
/* the room, from her marks (2026-10-18) */
.rcork .taped,.rcork .rpin{width:22%}
.rcorkin{gap:2.4%;padding:3% 2.6%}
.rshelf{gap:1.5cqi}
.robj span{max-width:6.8cqi;font-size:max(10px,.95cqi)}
@media(min-width:760px){.robj.book i{width:max(40px,6.4cqi)}.robj.box i{width:max(44px,6.4cqi)}.robj.cass i{width:max(48px,6.8cqi)}}
.rmirlabel{position:absolute;left:50%;top:-1.4cqi;transform:translateX(-50%);white-space:nowrap;background:#1F2A6B;color:#FFFDF8;font:700 max(11px,1.05cqi) var(--grot);padding:5px 12px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.18);z-index:2}
.rmirror{position:relative}
@media(min-width:760px){.rfield>.rmirror{position:absolute}}
@media(max-width:759px){.rmirlabel{top:-12px}}
.rmovehint{display:flex;align-items:center;gap:10px}
.rmovehint .btn{flex:none;background:#FF4F9A!important;border-color:#FF4F9A!important;color:#fff!important;min-height:40px}
/* the layer that places things in the room lets taps through to the string of lights under it */
.rfield{pointer-events:none}
.rfield>*{pointer-events:auto}
/* universe mode: a spinning globe of our Earth, stars over cities, threads between people */
.univbtn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #1F2A6B;background:#141B4A;background-color:#141B4A;color:#FFE6A8;border-radius:999px;padding:6px 14px;min-height:40px;font:700 .8rem var(--grot);cursor:pointer}
.univbtn i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9FB3FF,#2B3A7A 60%,#0B1238);box-shadow:0 0 8px 2px rgba(255,230,168,.6)}
.universe{position:fixed;inset:0;z-index:78;display:flex;flex-direction:column;color:#EEF0FF;opacity:0;transition:opacity .35s ease;
  background-color:#05071A;background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 32%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 78%,#FFE6A8,transparent),radial-gradient(1px 1px at 88% 66%,#fff,transparent),radial-gradient(1px 1px at 26% 52%,#cfd6ff,transparent),radial-gradient(1.2px 1.2px at 58% 9%,#fff,transparent),radial-gradient(1px 1px at 6% 86%,#fff,transparent),radial-gradient(1px 1px at 94% 12%,#FFE6A8,transparent),radial-gradient(ellipse at 50% 120%,#1A2358 0,#05071A 60%)}
.universe.on{opacity:1}
@media (prefers-reduced-motion:reduce){.universe{transition:none}}
.unihead{display:flex;align-items:flex-start;gap:16px;padding:14px 18px 6px;padding-top:max(14px,env(safe-area-inset-top));flex-wrap:wrap}
.unihead>div:first-child{flex:1;min-width:220px}
.unihead .eyebrow{color:#FF9CC6}.unihead h2{margin:2px 0 4px!important;font:400 clamp(26px,3.4vw,38px)/1.05 var(--serif)!important;color:#FFFDF8!important}
.unihead p{margin:0;font:500 14px/1.45 var(--grot);color:#C9CEEC}
.unibtns{display:flex;gap:8px;flex-wrap:wrap}.unibtns .btn{min-height:44px}
.unibtns .btn.ghost{background:transparent!important;color:#EEF0FF!important;border-color:#4A5CB8!important}
.unibtns .btn:not(.ghost){background:#FFD27A!important;color:#0B1030!important;border-color:#FFD27A!important}
.unimap{flex:1;min-height:0;position:relative}
.unimap .maplibregl-canvas{outline:none}
.unimap .maplibregl-ctrl-attrib{background:rgba(5,7,26,.6)!important;color:#9AA3C7}.unimap .maplibregl-ctrl-attrib a{color:#C9CEEC}
.unifoot{display:flex;align-items:center;gap:14px;padding:10px 18px;padding-bottom:max(12px,env(safe-area-inset-bottom));flex-wrap:wrap;background:linear-gradient(0deg,rgba(5,7,26,.9),rgba(5,7,26,0))}
.uniplay{width:44px;height:44px;border-radius:50%;border:1.5px solid #FFD27A;background:transparent;color:#FFD27A;font:700 14px var(--grot);cursor:pointer;flex:none}
.unigrow{flex:1;min-width:220px;display:flex;align-items:center;gap:10px}
.unigrow label{font:600 13px var(--grot);color:#C9CEEC;white-space:nowrap}
.unigrow input{flex:1;accent-color:#FFD27A;min-height:40px}
.unigrow span{font:600 13px var(--grot);color:#FFE6A8;min-width:96px;text-align:right}
.uniex{display:flex;align-items:center;gap:8px;font:500 13px var(--grot);color:#C9CEEC;min-height:44px}
.unistory{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));background:#FFFDF8;color:#1F2A6B;border-radius:18px;padding:16px 18px;box-shadow:0 14px 34px rgba(0,0,0,.4);z-index:2}
.unistory h3{margin:2px 0 6px;font:400 24px var(--serif);color:#1F2A6B}.unistory p{margin:0;font:500 14.5px/1.5 var(--grot)}
.unistory .x{position:absolute;right:10px;top:10px}
html.inuniverse .tabbar{visibility:hidden}
@media(max-width:640px){.unigrow label{display:none}.unihead p{font-size:13px}}
.uniex{white-space:nowrap}
.unitrue{margin-top:4px!important;font:500 12.5px/1.4 var(--grot)!important;color:#FFE6A8!important}

/* Where people can find me (2026-10-18) */
.findsheet{max-width:560px}
.findsheet .fmblock{margin-top:16px;display:grid;gap:6px}
.findsheet .fmblock .lbl{font-weight:600;font-size:15px}
.findsheet .fmblock input[type=text]{width:100%}
.findsheet .checkrow{display:flex;gap:10px;align-items:flex-start;padding:6px 0;line-height:1.35}
.findsheet .checkrow input{margin-top:3px;flex:none}
.findsheet .fmoff{margin-top:10px;width:100%}
.rpblock{margin-top:14px;padding-top:12px;border-top:1px solid var(--line,rgba(0,0,0,.1));display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.findsheet input[type=radio]{appearance:auto;-webkit-appearance:radio;width:20px;height:20px;accent-color:var(--rose,#E0457B);background:transparent;border:0;box-shadow:none}
/* Top 8 sheet in night mode: the Add pill and the initials were the same colour as what is behind them (Dee, 2026-10-18) */
.t8row i{color:var(--ontop)!important}
/* a sheet opened from Paint my room comes up on top of it, and the tray waits underneath until it closes (Dee, 2026-10-18) */
body:has(#modalMount .modal) .rtray{visibility:hidden}
/* a screen that drops the page's side padding must not leave the top bar reaching 16px past both edges (iPad sideways, 2026-10-18) */
html.citynav main:has(#view-home:not(.hidden) .tpcity)>header.bar,html.citynav main:has(#view-jobs:not(.hidden) .jobsplit)>header.bar,
html.citynav main:has(#view-collab:not(.hidden) .comshell)>header.bar,html.citynav main:has(#view-admin:not(.hidden))>header.bar{margin-left:0!important;margin-right:0!important}
@media(min-width:1180px){html.citynav main:has(#view-money:not(.hidden))>header.bar{margin-left:0!important;margin-right:0!important}}
/* the booking total: its own quiet box in both themes (it was pale text on a pale box at night, Dee 2026-10-18) */
.runtotal{background:var(--sand)!important;color:var(--ink)!important;border:1px solid var(--line)}
.runtotal b,.runtotal span{color:var(--ink)!important}
/* the letters and the day card are cream paper in both themes, so what sits on them keeps the day colours (Dee, 2026-10-18) */
.dkenv,.dkday{--ink:#1F2A6B;--bark:#5B6178;--line:#E3DCCD;--cream:#FFFDF8;--ontop:#FFFDF8}
.dkenv .btn.ghost,.dkenv .linklike,.dkday .hint,.dkday .linklike{color:#1F2A6B!important;border-color:#C9BFAE!important;background:transparent!important}
/* navy on pink reads; white on pink did not */
.havatar,.ckdot,.dkstamp{color:#0B1030!important}
.dkstamp{border-color:#1F2A6B}
/* universe, round two (2026-10-18): a glow while it loads, a clear examples switch */
.uniload{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1;transition:opacity .6s ease}
.uniload i{width:min(56vh,56vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 35%,#24307A,#121A4C 62%,#0B1238);box-shadow:0 0 60px 10px rgba(74,92,184,.35);animation:unibreath 2.4s ease-in-out infinite}
.uniload span{position:absolute;font:500 14px var(--grot);color:#C9CEEC}
.uniload.done{opacity:0}
@keyframes unibreath{50%{box-shadow:0 0 80px 18px rgba(74,92,184,.5)}}
@media(prefers-reduced-motion:reduce){.uniload i{animation:none}}
button.uniex{border:1.5px solid #4A5CB8;background:transparent;color:#EEF0FF;border-radius:999px;padding:8px 14px;min-height:44px;cursor:pointer;font:600 13px var(--grot)}
button.uniex.on{background:#FFD27A;border-color:#FFD27A;color:#0B1030}
.unimap .maplibregl-ctrl-bottom-right{bottom:6px}
/* examples are light, see-through blue (her ask, 2026-10-19): stand-ins that show how MyBella looks as it grows, never real people */
.holo{animation:none!important;filter:none!important;opacity:.82}
.holo::after{background:rgba(143,179,255,.92)!important;color:#0B1030!important}
.cityrow.holo,.pondrow.holo,.dkenv.holo,.lovecard.holo,.jcard.holo,.tcard.holo{background-image:linear-gradient(rgba(143,179,255,.18),rgba(143,179,255,.18))!important;box-shadow:0 0 0 1.5px rgba(143,179,255,.75)!important}
.cityface.holo .clab{background:rgba(143,179,255,.28)!important;border-color:rgba(143,179,255,.85)!important}
.cityface.holo .cf{box-shadow:0 0 0 2px rgba(143,179,255,.85)!important;opacity:.85}
.cityface.holo .cstar{background:#9EC2FF!important;box-shadow:0 0 10px 3px rgba(143,179,255,.6)!important}
.jmpin.holo{background:rgba(143,179,255,.3)!important;border-color:rgba(143,179,255,.85)!important}
.privsheet{max-width:600px}.privrow{padding:10px 0;border-bottom:1px solid var(--line)}.privrow b{display:block;font:700 15px var(--grot);color:var(--ink)}.privrow p{margin:4px 0 0;font:500 14px/1.5 var(--grot);color:var(--ink)}
.privsheet .btn{margin-top:14px;width:100%}
.unipriv{color:#FFD27A!important;text-decoration:underline}
.unikey{display:flex;align-items:center;gap:8px;font:500 13px var(--grot);color:#C9CEEC}.unikey i{width:10px;height:10px;border-radius:50%;background:#B9D2FF;box-shadow:0 0 8px 2px rgba(143,179,255,.7);opacity:.8}
.gdpin{cursor:pointer}
/* At a laptop's width the tabs sit in the top bar's row but are their own fixed strip, so when the bar tucked away on
   scroll the tabs stayed behind, floating over the room, the zine and the pond with no bar under them (Dee and the bug
   hound, 2026-10-18/19). There the bar stays put; on a phone it still steps out of the way. */
@media(min-width:900px){html.citynav header.bar.tuck{transform:none!important;opacity:1!important;pointer-events:auto!important}}
/* private messages between artists (2026-10-19) */
.dmsheet{max-width:560px}.dmsheet .msgthread{max-height:46vh;overflow:auto;display:grid;gap:8px;margin-top:8px}
.dmsheet .msg{max-width:84%;padding:10px 12px;border-radius:14px;background:var(--sand);color:var(--ink)}.dmsheet .msg.me{justify-self:end;background:#1F2A6B;color:#FFFDF8}
.dmsheet .msg.me .msgmeta,.dmsheet .msg.me .eyebrow{color:#C9CEEC}.dmsheet .msgmeta{font:500 11.5px var(--grot);margin-top:4px;color:var(--bark)}
.dmsheet textarea{width:100%}.dmrow .pill{font-size:11px}
#rpKind .chip.on{background:#1F2A6B!important;color:#FFFDF8!important;border-color:#1F2A6B!important}
@media(min-width:900px){.mttomap{display:none!important}}
@media(max-width:600px){.rshelf .robj span,.robj span{display:block;max-width:64px;margin:0 auto;line-height:1.15;word-break:normal;overflow-wrap:anywhere}.rshelf{gap:6px}}
/* the artist page, said once (her yes, 2026-10-19): the front window, then About beside the booking card */
.tpcity.tp2{grid-template-areas:"head" "book" "rest"}
.tpabout{grid-area:head;padding:18px 16px 4px;min-width:0}
.tpaboutrow{display:flex;gap:14px;align-items:center}
.tpface.sm{width:64px;height:64px;margin:0!important;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#FFF4DB;border:3px solid #fff;box-shadow:0 0 0 2px var(--pink)}
.tpface.sm img{width:100%;height:100%;object-fit:cover}.tpface.sm span{font:400 28px var(--serif);color:#1F2A6B}
.tpabout .tpname{margin:0!important;font:400 clamp(30px,4vw,44px)/1.05 var(--serif)!important}
.tpabout .tpmeta{margin:4px 0 0;font:500 14px var(--grot);color:var(--bark)}
.tpabout .ownwords{margin:12px 0 0;max-width:62ch}
.tpfacts{margin:10px 0 0;font:600 13px var(--grot);color:var(--ink)}
.tpfoot2{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 8px}
.tpbar{display:none}
@media(min-width:900px){
  .tpcity.tp2{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"head book" "rest book"}
  .tp2 .tpabout{padding:28px 40px 4px}
  .tp2 .tpbook{margin-top:20px;position:sticky;top:90px;align-self:start}
}
@media(max-width:899px){
  .tpbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;align-items:center;gap:12px;
    background:#FFFDF8;border:1px solid var(--line);border-radius:18px;padding:10px 12px;box-shadow:0 10px 26px rgba(31,42,107,.18)}
  .tpbar .btn{flex:none;min-height:46px}.tpbar span{font:600 14px var(--grot);color:#1F2A6B}
  #view-home:has(.tpbar){padding-bottom:90px}
  .tp2 .tpbook{display:none}
}
/* the booking side's next booking, or the way to book (2026-10-19) */
.nextup{margin:0 0 16px;padding:20px 22px;border-radius:22px;background:linear-gradient(135deg,#FFE3EF,#E3E9FF);color:#1F2A6B;border:1px solid #F3D6E3}
.nextup .eyebrow{color:#C42A6B}.nextup h2{margin:4px 0 6px!important;font:400 clamp(28px,4vw,40px)/1.05 var(--serif)!important;color:#1F2A6B!important}
.nuwhen{margin:0;font:600 16px var(--grot)}.nuwhat{margin:4px 0 0;font:500 14px/1.5 var(--grot);color:#3A4580}
.nukept{display:flex;gap:12px;flex-wrap:wrap}
.nuface{display:grid;justify-items:center;gap:6px;background:none;border:0;cursor:pointer;color:#1F2A6B;font:600 13px var(--grot)}
.nuface img,.nuface span{width:58px;height:58px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#FFFDF8;border:2px solid #fff;box-shadow:0 0 0 2px #FF8AB8;font:400 24px var(--serif)}
#view-mine #s-inbox:not(:has(.note,.inbox,.row)){display:none}
/* the bell card stops short of the door, so the door never sits on it (Dee, 2026-10-18) */
@media(min-width:760px){.room2 .rbell{max-width:calc(100% - max(150px,13.9cqi) - 10cqi)}}
.tpplain #installCard{display:none!important}   /* not on an artist page: that is for booking */
/* on a phone the Book bar at the bottom is the one way in; the door's own button would be a second */
@media(max-width:899px){.tpfront .rdoorway{display:none!important}}
/* the Next up card is light in both themes, so its words stay dark in both */
html .nextup h2,html[data-theme="dark"] .nextup h2{color:#1F2A6B!important}
html[data-theme="dark"] .nextup,html[data-theme="dark"] .nextup .nuwhen{color:#1F2A6B}
html[data-theme="dark"] .nextup .nuwhat{color:#3A4580}
html[data-theme="dark"] .nextup .btn.ghost{color:#1F2A6B!important;border-color:#B9B3D6!important;background:transparent!important}
html[data-theme="dark"] .nextup .flabel{color:#C42A6B}
html[data-theme="dark"] .nuface{color:#1F2A6B}
.nextup{background-color:#F3E8F6}
html .nextup .eyebrow,html[data-theme="dark"] .nextup .eyebrow{color:#B0245F!important}
.pscred{margin:8px 0;font:500 13.5px/1.45 var(--grot);color:var(--ink);text-align:center}
/* the research-tool note on every money, tax and law screen (2026-10-19) */
.guidenote{background:#FFF4DB;border:1.5px solid #E2C77E;border-radius:14px;padding:12px 14px;margin:0 0 14px;color:#1F2A6B;font:500 14px/1.5 var(--grot)}
.guidenote b{font-weight:700}.guidenote .linklike{color:#1F2A6B!important;font-weight:700;text-decoration:underline}
.guidenote.sm{padding:8px 12px;font-size:13px;margin:8px 0}
html[data-theme="dark"] .guidenote{background:#FFF4DB;color:#1F2A6B;border-color:#E2C77E}
.guidesheet{max-width:560px}.guidesheet p{font:500 15px/1.55 var(--grot)}

/* the three sides, one tap apart, under your name on Me (2026-10-19) */
.sideswitch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#EDE5D6;border-radius:18px;padding:4px;margin:4px 0 14px}
.sideswitch button{border:0;background:transparent;border-radius:14px;min-height:52px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;color:#1F2A6B;font-family:var(--grot)}
.sideswitch button b{font-size:14px;font-weight:700}
.sideswitch button span{font-size:11.5px;font-weight:500;color:#3A3F6B}
.sideswitch button.on{background:#1F2A6B;color:#FFFDF8}
.sideswitch button.on span{color:#DDE1F5}
.sideswitch button:focus-visible{outline:3px solid #FF4F9A;outline-offset:2px}
:root[data-theme="dark"] .sideswitch{background:#1A2358}
:root[data-theme="dark"] .sideswitch button{color:#EEF0FF}
:root[data-theme="dark"] .sideswitch button span{color:#C9CEEC}
:root[data-theme="dark"] .sideswitch button.on{background:#FFFDF8;color:#1F2A6B}
:root[data-theme="dark"] .sideswitch button.on span{color:#3A3F6B}

/* Who's free? (2026-10-19) */
.wfsheet .lbl{font:700 13px var(--grot);color:#1F2A6B;margin:14px 0 6px}
.wfsheet .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wfsheet input[type=date],.wfsheet select{min-height:44px;border-radius:12px;border:1.5px solid #D9CFBE;background:#FFFDF8;color:#1F2A6B;padding:0 12px;font:500 14px var(--grot)}
.wfrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#FFFDF8;border:1px solid #E8DFCF;border-radius:16px;padding:10px 12px;margin-top:8px;cursor:pointer;color:#1F2A6B;font-family:var(--grot);min-height:60px}
.wfrow:focus-visible{outline:3px solid #FF4F9A;outline-offset:2px}
.wfface{width:46px;height:46px;border-radius:50%;background:#FBD3E6;display:grid;place-items:center;font:400 20px var(--serif);overflow:hidden;flex:none}
.wfface img{width:100%;height:100%;object-fit:cover}
.wfmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wfmain b{font-size:15px}.wfmain span{font-size:12.5px;color:#3A3F6B}
.wfprice{font-weight:700;font-size:15px;text-align:right;display:flex;flex-direction:column}
.wfprice small{font-weight:500;font-size:11.5px;color:#5B6178}
:root[data-theme="dark"] .wfsheet .lbl{color:#EEF0FF}
:root[data-theme="dark"] .wfrow{background:#1A2358;border-color:#2B3A7A;color:#EEF0FF}
:root[data-theme="dark"] .wfmain span,:root[data-theme="dark"] .wfprice small{color:#C9CEEC}
:root[data-theme="dark"] .wfsheet input[type=date],:root[data-theme="dark"] .wfsheet select{background:#1A2358;color:#EEF0FF;border-color:#2B3A7A}
.chip.hpurgent{border-color:#B42318;color:#8A1F1F;font-weight:700}
.chip.hpurgent.on{background:#B42318;color:#FFFFFF;border-color:#B42318}
:root[data-theme="dark"] .chip.hpurgent{color:#FFB4A8;border-color:#FFB4A8}
:root[data-theme="dark"] .chip.hpurgent.on{background:#FFB4A8;color:#3A0D08}

/* the first second on a phone used to be a blank page (Jade, 2026-10-19): the M sits in the middle until the app is ready */
html.booting body::after{content:"M";position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;background:#6A3FD0;color:#FFFFFF;font:400 40px 'Instrument Serif',Georgia,serif;z-index:9999;
  animation:mbboot 1.4s ease-in-out infinite;box-shadow:0 10px 30px rgba(106,63,208,.25)}
@keyframes mbboot{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion: reduce){html.booting body::after{animation:none}}

/* every fold-out shows it folds: one small chevron that turns when it opens (rage tester, "fold-outs with no arrow") */
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary:not(.chip)::after{content:"";display:inline-block;flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:10px;vertical-align:3px;transition:transform .15s ease}
details[open]>summary:not(.chip)::after{transform:rotate(-135deg);vertical-align:-1px}
@media (prefers-reduced-motion: reduce){details>summary::after{transition:none}}
/* artist page extras and last-minute (2026-10-19) */
.tplook{margin:12px 0 0;display:flex;gap:10px;align-items:flex-end}
.tplook img{width:110px;height:138px;object-fit:cover;border-radius:14px;border:2px dashed #9AA8C8}
.tplook figcaption{font:600 12.5px var(--grot);color:#3A3F6B}
.tptotal{margin-top:12px;background:#FFFDF8;border:1px solid #E8DFCF;border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;font:500 14px var(--grot);color:#1F2A6B}
.tptotal>div{display:flex;justify-content:space-between;gap:10px}
.tptotal .btn{margin-top:6px}
.tpbring{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:#FFFDF8;border:1px solid #E8DFCF;border-radius:16px;padding:12px 14px;font:500 13.5px var(--grot);color:#3A3F6B}
.tpbring b{display:block;color:#1F2A6B}
.tprange{margin-top:8px}
.wflast{display:inline-block;margin-top:2px;font-style:normal;font-size:11.5px;font-weight:700;color:#134A3B;background:#D9F0E3;border-radius:999px;padding:2px 8px;align-self:flex-start}
.lmsheet .chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.lmsheet .lmpick{position:relative;cursor:pointer}
.lmsheet .lmpick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.lmdays{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.lmlook{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 14px}
.lmlook img{width:96px;height:120px;object-fit:cover;border-radius:12px}
.lmlook span{font:600 12.5px var(--grot);color:#3A3F6B}
:root[data-theme="dark"] .tptotal,:root[data-theme="dark"] .tpbring{background:#1A2358;border-color:#2B3A7A;color:#EEF0FF}
:root[data-theme="dark"] .tpbring b{color:#EEF0FF}
:root[data-theme="dark"] .tplook figcaption,:root[data-theme="dark"] .lmlook span{color:#C9CEEC}
.wfstale{font-size:11.5px!important;color:#8A5A12!important;font-weight:600}
.wklist{background:#FFFDF8;border:1px solid #E8DFCF;border-radius:16px;overflow:hidden;margin:10px 0 14px}
.wkrow{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid #F0E8DA;font:500 14px var(--grot);color:#1F2A6B}
.wkrow:last-child{border-bottom:0}.wkrow span{color:#3A3F6B;text-align:right}
:root[data-theme="dark"] .wklist{background:#1A2358;border-color:#2B3A7A}
:root[data-theme="dark"] .wkrow{color:#EEF0FF;border-color:#2B3A7A}:root[data-theme="dark"] .wkrow span{color:#C9CEEC}
:root[data-theme="dark"] .wfstale{color:#FFD27A!important}
.safelevels{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#FFFDF8;border:1px solid #E8DFCF;border-radius:16px;padding:12px 14px;margin:0 0 12px;font-family:var(--grot);color:#1F2A6B}
.safelevels span{display:block;font-size:13px;color:#3A3F6B;margin-top:2px}
.bellflag{background:#FBE1EA;color:#8A1F45;border-radius:10px;padding:8px 10px;font-size:13px;margin:6px 0}
:root[data-theme="dark"] .safelevels{background:#1A2358;border-color:#2B3A7A;color:#EEF0FF}:root[data-theme="dark"] .safelevels span{color:#C9CEEC}
:root[data-theme="dark"] .bellflag{background:#4B1528;color:#FFD3E1}
/* the side pills on sign-up kept navy words on a navy fill once chosen (Jade, 2026-10-19) */
.sideopt.on b,.sideopt.on span{color:#FFFFFF!important}
.gdpromises{list-style:none;margin:6px 0 16px;padding:0;display:flex;flex-direction:column;gap:6px;font:500 14px/1.4 var(--grot);color:#1F2A6B}
.gdpromises li{padding-left:24px;position:relative}
.gdpromises li::before{content:"";position:absolute;left:4px;top:5px;width:9px;height:5px;border-left:2.5px solid #1F7A3A;border-bottom:2.5px solid #1F7A3A;transform:rotate(-45deg)}
:root[data-theme="dark"] .gdpromises{color:#EEF0FF}:root[data-theme="dark"] .gdpromises li::before{border-color:#5FE3B5}
.wfshow{font-size:12px!important;color:#134A3B!important;font-weight:700}
.tpshow{color:#134A3B;font-weight:600}
:root[data-theme="dark"] .wfshow,:root[data-theme="dark"] .tpshow{color:#5FE3B5!important}
.recmiss{margin:8px 0;padding:12px 14px;border:1.5px solid #FF8AB8;border-radius:16px;background:#FFFDF8}
.shownotes{margin-top:8px;font:500 13px var(--grot);color:#3A3F6B}.shownotes p{margin:6px 0 0}
:root[data-theme="dark"] .recmiss{background:#1A2358}:root[data-theme="dark"] .shownotes{color:#C9CEEC}