:root{
  --noise: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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* colours, type, shape, elevation and motion: css/tokens.css */
/* Settings: UI picker cards */
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}
#seo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--primary)}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}

#desk{position:relative;height:100%;overflow:hidden;background:var(--bg)}
.wall,.grain{position:absolute;inset:0;pointer-events:none}
.wall svg{width:100%;height:100%;display:block}
.grain{background-image:var(--noise);mix-blend-mode:overlay;opacity:var(--grain,.45)}
#desk[data-grain="off"] .grain{display:none}
#desk[data-grain="strong"]{--grain:.8}
.lb{padding:2px calc(6 * var(--u));border-radius:var(--r-pill)}
.dicon .lb{text-shadow:0 0 6px var(--surface),0 0 2px var(--surface)}
.walls .lb{background:var(--surface)}
.walls button{position:relative;overflow:hidden;padding:0}
.walls button svg{position:absolute;inset:0;width:100%;height:100%}
.walls button span{position:absolute;left:6px;bottom:4px;font-size:var(--fs-1);font-weight:var(--fw-b)}
/* top bar */
.topbar{position:relative;z-index:50;display:flex;align-items:center;justify-content:flex-start;gap:calc(8 * var(--u));padding:calc(10 * var(--u)) calc(18 * var(--u));font-size:var(--fs-4);font-weight:var(--fw-m)}
.status{display:flex;align-items:center;gap:calc(12 * var(--u))}
.status svg{width:16px;height:16px}
.pill{background:var(--surface);padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:var(--r-pill)}

/* desktop icons */
.icons{position:absolute;top:56px;left:18px;bottom:130px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,100px);grid-auto-columns:92px;gap:calc(12 * var(--u)) calc(8 * var(--u));z-index:2;align-content:start}
.icons{--tw:92px;--th:100px;--gx:8px;--gy:12px}
#desk[data-isize=small] .icons{--tw:78px;--th:86px}#desk[data-isize=large] .icons{--tw:114px;--th:126px}
#desk[data-isize=small] .icons .dicon .ico{width:46px;height:46px}#desk[data-isize=large] .icons .dicon .ico{width:78px;height:78px}
#desk[data-isize=small] .icons .dicon{font-size:var(--fs-2)}#desk[data-isize=large] .icons .dicon{font-size:var(--fs-4)}
@media (min-width:761px){.icons{grid-template-rows:repeat(auto-fill,var(--th));grid-auto-columns:var(--tw);gap:var(--gy) var(--gx)}
  /* placed: icons sit wherever they were put (Snap to grid or Free) */
  .icons.placed{display:block;right:18px;pointer-events:none}
  .icons.placed .dicon{position:absolute;width:var(--tw);pointer-events:auto;transition:left .22s cubic-bezier(.2,.9,.25,1),top .22s cubic-bezier(.2,.9,.25,1)}
  .icons.placed .dicon.dragging{transition:none;z-index:5}
  .icons.placed .snap-ghost{position:absolute;width:var(--tw);height:var(--th);border-radius:var(--r-6);background:color-mix(in srgb,var(--primary) 14%,transparent);outline:2px dashed color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:-4px;pointer-events:none}}
@media (max-width:760px){#desk[data-isize=small] .icons{grid-template-columns:repeat(5,1fr)}#desk[data-isize=large] .icons{grid-template-columns:repeat(3,1fr)}}
.dicon{background:none;border:0;padding:calc(8 * var(--u)) calc(4 * var(--u));border-radius:var(--r-6);display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u));font-size:var(--fs-3);font-weight:var(--fw-m)}
.dicon:hover{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.ico{display:block;width:60px;height:60px;transition:transform var(--d-3) var(--ease-spring)}
.dicon .ico{transition:transform var(--d-3) var(--ease-spring)}
.dicon:hover .ico,.dicon:focus-visible .ico{transform:scale(1.1) translateY(-2px)}
.dicon:hover{background:none}
.ico [class^="g-"]{transform-box:fill-box;transition:transform var(--d-3) var(--ease-spring),opacity var(--d-3)}
.ico .g-face{transform-origin:50% 40%;transition:transform .5s var(--ease-spring)}
.dicon:hover .g-face{transform:scale(1.14)}
.ico.photo{transition:transform var(--d-3) var(--ease-spring)}
.dicon:hover .ico.photo{transform:scale(1.18) translateY(-3px)}
.ico .g-flap{transform-origin:50% 100%}
.dicon:hover .g-flap{transform:skewX(-10deg) scaleY(.72)}
.ico .g-paper{transform:translateY(2px)}
.dicon:hover .g-paper{transform:translateY(-2.5px) rotate(-4deg)}
.ico .g-ribbon{transform:translateY(-3px)}
.dicon:hover .g-ribbon{transform:translateY(2px)}
.dicon:hover .g-sun{transform:translateY(-2px) scale(1.3)}
.dicon:hover .g-hill{transform:translateY(-1px)}
.ico .g-letter{transform:translateY(2px)}
.dicon:hover .g-letter{transform:translateY(-4px)}
.ico .g-eflap{transform-origin:50% 0}
.dicon:hover .g-eflap{transform:scaleY(-1)}
.dicon:hover .g-spin{transform:rotate(120deg)}
.ico .g-spin{transform-origin:center;transition-duration:.8s}
.dicon:hover .g-lift{transform:translateY(-1.5px) rotate(-4deg)}
.ico .g-pen{transform-origin:20% 90%}
.dicon:hover .g-pen{animation:scrib .5s ease-in-out 2}
@keyframes scrib{25%{transform:rotate(-10deg) translateX(-1px)}75%{transform:rotate(6deg) translateX(1.5px)}}
.ico .g-draw{stroke-dasharray:14;stroke-dashoffset:0}
.dicon:hover .g-draw{animation:draw .6s ease-out both}
.dicon:hover .g-draw.d2{animation-delay:.15s}
@keyframes draw{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
.ico{position:relative}
.ico>svg{position:relative;width:100%;height:100%;display:block;overflow:visible}


/* widgets */
.widgets{position:absolute;top:60px;right:28px;display:flex;flex-direction:column;gap:calc(16 * var(--u));align-items:flex-end;z-index:1}
.widgets .wcard,.widgets .wclock{box-sizing:border-box}.widgets .wcard{width:260px;max-width:260px}
/* award badge: hangs from the top centre of the desktop */
/* the name and Owner mode sit on the left, everything else on the right, so nothing reaches the centre */
.topbar>#who:not(:has(+#ownPill)),.topbar>#ownPill{margin-right:auto}
.topbar>.ftpill{margin-left:0}
@media (max-width:1400px) and (min-width:761px){.musicpill{max-width:150px}.musicpill .mp-t{max-width:70px}#tDate{display:none}}
@media (max-width:1180px) and (min-width:761px){.musicpill .mp-t{display:none}}
@media (max-width:760px){.topbar{gap:calc(4 * var(--u))}.topbar>#who{min-width:0;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}.topbar>#ownPill{padding:0 calc(9 * var(--u))!important}}
.award{position:absolute;top:0;left:50%;z-index:5;width:80px;transform:translateX(-50%);transform-origin:50% 0;filter:drop-shadow(0 10px 22px rgba(0,0,0,.2));transition:transform var(--d-2) var(--ease);-webkit-tap-highlight-color:transparent}
.award img{display:block;width:100%;height:auto;-webkit-user-drag:none}
.award:hover{transform:translateX(-50%) scale(1.05)}
.award:focus-visible{outline:3px solid var(--primary);outline-offset:4px;border-radius:0 0 50% 50%}
.wclock{position:relative;width:220px;height:220px;display:grid;place-items:center}
.wclock svg{position:absolute;inset:0;width:100%;height:100%}
.wclock svg path{fill:var(--c1)}
.wclock .t{position:relative;text-align:center;line-height:.9}
.wclock .h{font-size:var(--fs-13);font-weight:var(--fw-x);letter-spacing:-.03em}
.wclock .d{font-size:var(--fs-4);font-weight:var(--fw-m);color:var(--ink2);margin-top:calc(8 * var(--u))}
.wcard{background:var(--surface);border-radius:var(--r-8);padding:calc(16 * var(--u)) calc(20 * var(--u));max-width:260px;box-shadow:var(--shadow)}
.wcard .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--sdot,var(--ok));margin-right:calc(8 * var(--u));box-shadow:0 0 0 4px color-mix(in srgb,var(--sdot,var(--ok)) 25%,transparent)}
.wcard b{font-size:var(--fs-5)}.wcard p{margin:calc(6 * var(--u)) 0 0;color:var(--ink2);font-size:var(--fs-4);line-height:1.45}

/* windows */
.win{position:absolute;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-win);box-shadow:var(--shadow);overflow:hidden;min-width:300px;min-height:220px}
.win.popin{animation:pop var(--d-2) var(--ease-spring)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}}
.win.min{display:none}
.rz{position:absolute;z-index:5;touch-action:none}
.rz.e{top:24px;bottom:24px;right:-4px;width:10px;cursor:ew-resize}
.rz.w{top:24px;bottom:24px;left:-4px;width:10px;cursor:ew-resize}
.rz.s{left:24px;right:24px;bottom:-4px;height:10px;cursor:ns-resize}
.rz.se{right:0;bottom:0;width:26px;height:26px;cursor:nwse-resize}
.rz.sw{left:0;bottom:0;width:26px;height:26px;cursor:nesw-resize}
.rz.se::after{content:"";position:absolute;right:9px;bottom:9px;width:9px;height:9px;border-right:2.5px solid var(--line);border-bottom:2.5px solid var(--line);border-radius:0 0 var(--r-2) 0}
.win:hover .rz.se::after{border-color:var(--ink2)}
.win.max .rz,.win.resizing .body{pointer-events:none}.win.max .rz{display:none}
.win.resizing{user-select:none;transition:none}
/* no scrollbars in app windows: the bottom edge fades out while there is more to read below (see watchScroll) */
.body,.jed-scroll{scrollbar-width:none}.body::-webkit-scrollbar,.jed-scroll::-webkit-scrollbar{display:none}
.body.more-b,.jed-scroll.more-b{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),rgba(0,0,0,.08));mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),rgba(0,0,0,.08))}
.win.max{left:12px!important;top:48px!important;width:calc(100% - 24px)!important;height:calc(100% - 140px)!important;border-radius:var(--r-win-max)}
.bar{display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(18 * var(--u));cursor:grab;user-select:none;touch-action:none}
.win.max .bar{cursor:default}
.bar .ttl{flex:1;font-weight:var(--fw-b);font-size:var(--fs-5)}
.bar .ico{width:26px;height:26px}
.wb{width:34px;height:34px;border:0;border-radius:50%;background:var(--surface2);display:grid;place-items:center}
.wb:hover{background:var(--line)}
.wb.x:hover{background:var(--danger);color:#fff}
.wb svg{width:14px;height:14px}
.body{flex:1;overflow:auto;padding:calc(4 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u))}
.win:not(.top) .bar{opacity:.7}

/* shelf */
.shelf{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:900;display:flex;align-items:flex-end;gap:calc(6 * var(--u));padding:calc(10 * var(--u));height:82px;border-radius:var(--r-pill)!important;background:var(--surface);border-radius:var(--r-9);box-shadow:var(--shadow)}
.sbtn{position:relative;border:0;background:none;padding:calc(4 * var(--u));border-radius:var(--r-6)}
.sbtn .ico{width:54px;height:54px;will-change:width,height}
.sbtn.on::after{content:"";position:absolute;left:50%;bottom:-3px;width:14px;height:4px;margin-left:-7px;border-radius:var(--r-2);background:var(--primary)}
.sbtn .tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);font-size:var(--fs-2);font-weight:var(--fw-m);padding:calc(4 * var(--u)) calc(10 * var(--u));border-radius:var(--r-pill);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--d-2)}
.sbtn:hover .tip,.sbtn:focus-visible .tip{opacity:1}
.launch{flex:none;width:52px;height:52px;margin:calc(5 * var(--u));border:0;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center}
.launch svg{width:22px;height:22px}
.sep{width:1px;height:32px;background:var(--line);margin:0 calc(4 * var(--u));align-self:center;transition:opacity var(--d-2)}
.shelf.solo .sep{display:none}
.closeall{position:relative;align-self:center;flex:none;width:34px;height:34px;margin:0 calc(4 * var(--u)) 0 2px;border:0;border-radius:50%;background:var(--surface2);color:var(--ink2);display:grid;place-items:center;cursor:pointer;animation:dock-in var(--d-3) var(--ease-spring);transition:background var(--d-2),color var(--d-2),transform var(--d-2)}
.closeall svg{width:14px;height:14px;transition:transform var(--d-3) var(--ease-spring)}
.closeall:hover{background:var(--danger);color:#fff}.closeall:hover svg{transform:rotate(90deg)}
.closeall .tip{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);font-size:var(--fs-2);font-weight:var(--fw-m);padding:calc(4 * var(--u)) calc(10 * var(--u));border-radius:var(--r-pill);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--d-2)}
.closeall:hover .tip{opacity:1}
.shelf{transition:padding var(--d-3)}
.sbtn.fresh{animation:dock-in var(--d-3) var(--ease-spring)}
@keyframes dock-in{from{transform:translateY(24px) scale(.4);opacity:0}}
.sbtn.minned .ico{opacity:.72}
.sbtn.on::after{transition:width var(--d-2)}.sbtn.minned::after{width:6px;margin-left:-3px}

/* launcher */
.launcher{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);width:min(520px,calc(100% - 24px));z-index:950;background:var(--surface);border-radius:var(--r-9);padding:calc(22 * var(--u));box-shadow:var(--shadow)}
.launcher.in{animation:l-in var(--d-3) var(--ease-spring)}
.launcher.out{animation:l-out var(--d-2) ease-in forwards;pointer-events:none}
@keyframes l-in{from{opacity:0;transform:translateX(-50%) scale(.12)}60%{opacity:1}}
@keyframes l-out{to{opacity:0;transform:translateX(-50%) scale(.12)}}
.launcher[hidden]{display:none}
.launcher h2{margin:0 0 calc(4 * var(--u));font-size:var(--fs-10);font-weight:var(--fw-x);letter-spacing:-.02em}
.launcher .sub{margin:0 0 calc(16 * var(--u));color:var(--ink2)}
.search{width:100%;border:0;background:var(--surface2);border-radius:var(--r-pill);padding:calc(14 * var(--u)) calc(20 * var(--u));font:inherit;font-size:var(--fs-6);color:var(--ink);margin-bottom:calc(16 * var(--u))}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:calc(8 * var(--u))}
.lgrid .dicon .ico{width:54px;height:54px}

/* content styles */
.body h1{font-size:var(--fs-11);line-height:1.05;letter-spacing:-.03em;margin:calc(8 * var(--u)) 0 calc(10 * var(--u));font-weight:var(--fw-x)}
.body h3{margin:calc(22 * var(--u)) 0 calc(8 * var(--u));font-size:var(--fs-7)}
.body p{line-height:1.6;max-width:62ch;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u))}
.chip{background:var(--surface2);border-radius:var(--r-pill);padding:calc(7 * var(--u)) calc(14 * var(--u));font-size:var(--fs-4);font-weight:var(--fw-m)}
.hero{display:flex;gap:calc(20 * var(--u));align-items:center;flex-wrap:wrap}
.avatar{width:96px;height:96px;flex:none}
.avatar path{fill:var(--c3)}
.fm{display:flex;gap:calc(16 * var(--u));min-height:100%}
.side{flex:none;width:150px;display:flex;flex-direction:column;gap:calc(4 * var(--u));padding-top:calc(6 * var(--u))}
.side button{border:0;background:none;text-align:left;padding:calc(10 * var(--u)) calc(14 * var(--u));border-radius:var(--r-pill);font-weight:var(--fw-m);font-size:var(--fs-4)}
.side button.on{background:var(--c1)}
.pgrid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:calc(12 * var(--u));align-content:start}
.pcard{border:0;text-align:left;background:var(--surface2);border-radius:var(--r-7);padding:calc(14 * var(--u));display:flex;flex-direction:column;gap:calc(10 * var(--u));transition:transform var(--d-2)}
.pcard:hover{transform:translateY(-2px)}
.pcard .thumb{height:90px;border-radius:var(--r-5);display:grid;place-items:center}
.pcard .thumb svg{width:44px;height:44px}
.pcard b{font-size:var(--fs-5)}.pcard small{color:var(--ink2)}
.back{border:0;background:var(--surface2);border-radius:var(--r-pill);padding:calc(8 * var(--u)) calc(16 * var(--u));font-weight:var(--fw-m);margin-bottom:calc(8 * var(--u))}
.big-thumb{height:200px;border-radius:var(--r-7);margin:calc(10 * var(--u)) 0;display:grid;place-items:center}
.big-thumb svg{width:80px;height:80px}
.row{display:flex;justify-content:space-between;gap:calc(12 * var(--u));padding:calc(14 * var(--u)) 0;border-bottom:1px solid var(--line)}
.row small{color:var(--ink2);white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:calc(8 * var(--u));border:0;border-radius:var(--r-ctl);padding:calc(12 * var(--u)) calc(20 * var(--u));font-weight:var(--fw-b);text-decoration:none;background:var(--primary);color:var(--on-primary)}
.btn.tonal{background:var(--surface2);color:var(--ink)}
.links{display:flex;flex-wrap:wrap;gap:calc(10 * var(--u));margin-top:calc(16 * var(--u))}
html.standalone #desk,html.standalone #boot,html.standalone .topbar{display:none!important}
html.standalone,html.standalone body{height:100%;overflow:hidden;background:var(--bg)}
#standalone{position:fixed;inset:0;overflow:auto;overscroll-behavior:contain;padding:0!important;background:var(--bg)}
#standalone .hub{min-height:100%}

/* Timeline editor */
.tle h1{margin-top:0}.tle-top{display:flex;align-items:center;gap:calc(8 * var(--u));margin:calc(4 * var(--u)) 0 calc(14 * var(--u));flex-wrap:wrap}.tle-top .sp{flex:1}
.tle-clear{border:0;background:none;color:var(--ink2);font:inherit;font-size:var(--fs-4);cursor:pointer;padding:calc(8 * var(--u)) calc(10 * var(--u));border-radius:var(--r-pill)}.tle-clear:hover{background:var(--tint,rgba(127,127,127,.12));color:var(--ink)}
.tle-list{display:flex;flex-direction:column;gap:calc(8 * var(--u))}
.tle-row{background:var(--surface2);border-radius:var(--r-6);padding:calc(8 * var(--u))}
.tle-main{display:flex;align-items:center;gap:calc(8 * var(--u));flex-wrap:wrap}
.tle-s{flex:none;background:var(--surface)}.tle-s button{padding:calc(6 * var(--u)) calc(12 * var(--u));font-size:var(--fs-3)}
.tle-t{flex:1;min-width:140px}.tle-d{width:132px;flex:none}
.tle-main input,.tle-more textarea,.tle-more input[type=text],.tle-two input:not([type=range]){background:var(--surface)!important;border:0;border-radius:var(--r-4);font:inherit;font-size:var(--fs-4);color:var(--ink);padding:calc(9 * var(--u)) calc(12 * var(--u))}
.tle-ib{flex:none;width:32px;height:32px;border:0;background:none;color:var(--ink2);border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background var(--d-1),transform var(--d-2)}.tle-ib:hover{background:var(--tint,rgba(127,127,127,.15));color:var(--ink)}.tle-ib.on{transform:rotate(180deg)}
.tle-more{display:flex;flex-direction:column;gap:calc(8 * var(--u));padding:calc(8 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u))}.tle-more[hidden]{display:none}.tle-more textarea{width:100%;resize:vertical;box-sizing:border-box}
.tle-two{display:flex;gap:calc(8 * var(--u));align-items:center;flex-wrap:wrap}.tle-two>input{flex:1;min-width:120px}.tle-p{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:var(--fs-3);color:var(--ink2)}.tle-p.off{opacity:.35;pointer-events:none}.tle-p input{width:120px}.tle-p output{min-width:3ch}
.tle-mv{display:flex;gap:calc(6 * var(--u))}.tle-mv button{border:0;background:var(--surface);color:var(--ink2);font:inherit;font-size:var(--fs-3);border-radius:var(--r-pill);padding:calc(5 * var(--u)) calc(10 * var(--u));cursor:pointer;display:inline-flex;gap:4px;align-items:center}.tle-mv button:hover{color:var(--ink)}
.tl-edit{margin:0 0 calc(10 * var(--u))}
/* tiling */
#tiles{position:absolute;inset:0;pointer-events:none;z-index:4}
html.focus-mode #tiles{display:none}
.tile-div{position:absolute;pointer-events:auto;touch-action:none;z-index:6;display:grid;place-items:center;outline:0}
.tile-div i{display:block;border-radius:99px;background:var(--primary);opacity:0;transition:opacity var(--d-2)}
.tile-div.row{cursor:col-resize}.tile-div.row i{width:4px;height:44px}
.tile-div.col{cursor:row-resize}.tile-div.col i{height:4px;width:44px}
.tile-div:hover i,.tile-div:focus-visible i{opacity:.45}.tile-div.on i{opacity:1}
.tile-slot{position:absolute;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8 * var(--u));border-radius:var(--r-win);color:var(--ink2);font-weight:var(--fw-m);font-size:var(--fs-4);background:var(--surface);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 16%,transparent);transition:background var(--d-2),left var(--d-3) var(--ease),top var(--d-3) var(--ease),width var(--d-3) var(--ease),height var(--d-3) var(--ease)}
.tile-slot:hover{background:var(--surface2)}
.tile-slot .add{width:52px;height:52px;border:0;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:transform var(--d-2) var(--ease-spring)}.tile-slot .add:hover{transform:scale(1.08)}.tile-slot .add svg{width:22px;height:22px}
.tile-slot .x{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity var(--d-2)}.tile-slot:hover .x,.tile-slot .x:focus-visible{opacity:1}.tile-slot .x svg{width:14px;height:14px}
.tile-ghost{position:absolute;z-index:3000;pointer-events:none;display:grid;place-items:center;border-radius:var(--r-win);background:color-mix(in srgb,var(--primary) 16%,transparent);box-shadow:inset 0 0 0 3px var(--primary);transition:left var(--d-2) var(--ease),top var(--d-2) var(--ease),width var(--d-2) var(--ease),height var(--d-2) var(--ease)}
.tile-ghost[hidden]{display:none}.tile-ghost b{background:var(--primary);color:var(--on-primary);font-size:var(--fs-3);padding:calc(5 * var(--u)) calc(12 * var(--u));border-radius:var(--r-pill)}
.win.tiled{min-width:0;min-height:0;border-radius:var(--r-6);transition:left var(--d-3) var(--ease),top var(--d-3) var(--ease),width var(--d-3) var(--ease),height var(--d-3) var(--ease)}
.win.tiled .rz{display:none}.win.tabhid{display:none!important}
html.tile-live .win.tiled,html.tile-live .tile-slot,html.tile-dragging .win{transition:none!important}
html.tile-live,html.tile-live *,html.tile-dragging,html.tile-dragging *{user-select:none!important;-webkit-user-select:none!important}
.bar .ttl.tabs{display:flex;gap:2px;min-width:0;flex:1;overflow:hidden}
.bar .tab{border:0;background:none;color:var(--ink2);font:inherit;font-size:var(--fs-4);padding:calc(4 * var(--u)) calc(11 * var(--u));border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.bar .tab:hover{background:var(--tint)}.bar .tab.on{background:var(--surface2);color:var(--ink);font-weight:var(--fw-m)}
/* ===== Music corner: a cosy record player ===== */
.mw.mu-host,.mu-appwrap{--mu-ink:#3A2A1B;--mu-ink2:#7A6049;--mu-cream:#FFF4DE;--mu-cream2:#FBE2BA;--mu-accent:#D9822B;padding:0;overflow:hidden;cursor:default;border-radius:var(--r-7);background:linear-gradient(165deg,var(--mu-cream),var(--mu-cream2));color:var(--mu-ink);box-shadow:0 8px 28px rgba(120,80,30,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mw.mu-host,:root:not([data-theme="light"]) .mu-appwrap{--mu-ink:#F6E7D0;--mu-ink2:#C7A98A;--mu-cream:#34261B;--mu-cream2:#1C1C1C;box-shadow:0 8px 28px rgba(0,0,0,.4)}}
:root[data-theme="dark"] .mw.mu-host,:root[data-theme="dark"] .mu-appwrap{--mu-ink:#F6E7D0;--mu-ink2:#C7A98A;--mu-cream:#34261B;--mu-cream2:#1C1C1C;box-shadow:0 8px 28px rgba(0,0,0,.4)}
.mu-full{display:flex;flex-direction:column;gap:calc(6 * var(--u));padding:calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u))}
.mu-mini{display:none}
.mw.min.mu-host{border-radius:var(--r-pill);padding:calc(7 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u))}
.mw.min.mu-host .mu-full{display:none}
.mw.min.mu-host .mu-mini{display:flex;align-items:center;gap:calc(10 * var(--u))}
.mu-disc{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--mu-c,#E4572E) 0 22%,#202020 24%);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.mu[data-s="playing"] .mu-disc{animation:mu-spin 2.4s linear infinite}
.mu-mt{display:flex;flex-direction:column;min-width:0;max-width:140px}.mu-mt b{font-size:var(--fs-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-mt small{font-size:var(--fs-2);color:var(--mu-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-mp{border:0;background:var(--mu-accent);color:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}.mu-mp svg{width:15px;height:15px}
.mu-head{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:var(--fs-2);letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-b);color:var(--mu-ink2)}
.mu-head .sp{flex:1}
.mu-head button{border:0;background:color-mix(in srgb,var(--mu-ink) 8%,transparent);color:var(--mu-ink);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background var(--d-1)}.mu-head button:hover,.mu-head button.on{background:color-mix(in srgb,var(--mu-accent) 28%,transparent)}.mu-head button svg{width:15px;height:15px}
.mu-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;opacity:0;transition:opacity var(--d-2)}.mu-eq i{display:block;width:3px;height:30%;border-radius:2px;background:var(--mu-accent)}
.mu[data-s="playing"] .mu-eq,.musicpill .mu-eq.on{opacity:1}.mu[data-s="playing"] .mu-eq i,.musicpill .mu-eq i{animation:mu-eq .9s ease-in-out infinite}.mu-eq i:nth-child(2){animation-delay:.18s!important}.mu-eq i:nth-child(3){animation-delay:.36s!important}
.mu-scene{border-radius:var(--r-5);overflow:hidden}.mu-svg{display:block;width:100%;height:auto}
.mu-engine{position:fixed;left:14px;bottom:104px;width:min(320px,calc(100vw - 28px));z-index:2900;border-radius:var(--r-5);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);background:var(--surface)}
.mu-engine[hidden]{display:none}
.mu-engine .mu-yt{position:absolute;left:-9999px;top:0;width:240px;height:135px;pointer-events:none}.mu-engine .mu-yt iframe{width:100%;height:100%;border:0}
.mu-engine.showvid .mu-yt{position:relative;left:auto;width:100%;height:auto;aspect-ratio:16/9;pointer-events:auto;background:#000}
.mu-engine .mu-sp iframe{display:block;border:0}
.mu-seek{display:flex;align-items:center;gap:8px;font-size:var(--fs-2);color:var(--mu-ink2);font-variant-numeric:tabular-nums}.mu-seek span{min-width:30px}.mu-td{text-align:right}
.mu-sk,.mu-vol{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--mu-accent) var(--p,50%),color-mix(in srgb,var(--mu-ink) 16%,transparent) var(--p,50%));outline:none;cursor:pointer;flex:1;min-width:0;touch-action:none}
.mu-sk::-webkit-slider-thumb,.mu-vol::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--mu-accent);border:3px solid var(--mu-cream);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.mu-sk::-moz-range-thumb,.mu-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--mu-accent);border:3px solid var(--mu-cream)}
.mu-sk:disabled{opacity:.45;cursor:default}
.mu-appwrap{min-height:100%;border-radius:0;overflow:auto}.mu-appwrap .mu-full{padding:calc(16 * var(--u))}.mu-appwrap .mu-t{font-size:var(--fs-8)}
.mu-appwrap .mu-shelf{flex-wrap:wrap;overflow:visible;gap:calc(14 * var(--u)) calc(12 * var(--u));padding-top:calc(22 * var(--u))}
.mu-glow{opacity:.14;transition:opacity 1s var(--ease)}.mu[data-s="playing"] .mu-glow{opacity:.85;animation:mu-glow 3.4s ease-in-out infinite}
.mu-spin{animation:mu-spin 2.4s linear infinite;animation-play-state:paused}.mu[data-s="playing"] .mu-spin{animation-play-state:running}.mu[data-s="loading"] .mu-spin{animation-play-state:running;animation-duration:5s}
.mu-label{transition:fill .5s}
.mu-arm{transform:rotate(-26deg);transition:transform 1s var(--ease)}.mu[data-s="playing"] .mu-arm,.mu[data-s="loading"] .mu-arm{transform:rotate(2deg)}
.mu-notes .n1,.mu-notes .n2{opacity:0}.mu[data-s="playing"] .mu-notes .n1{animation:mu-note 3.2s ease-in-out infinite}.mu[data-s="playing"] .mu-notes .n2{animation:mu-note 3.2s ease-in-out 1.5s infinite}
.mu-now{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0 calc(2 * var(--u))}.mu-t{font-size:var(--fs-6);font-weight:var(--fw-b);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-a{font-size:var(--fs-3);color:var(--mu-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-ctl{display:flex;align-items:center;gap:calc(6 * var(--u))}
.mu-b{border:0;background:none;color:var(--mu-ink);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background var(--d-1),transform var(--d-2) var(--ease-spring)}.mu-b:hover{background:color-mix(in srgb,var(--mu-ink) 9%,transparent)}.mu-b svg{width:17px;height:17px}
.mu-big{width:46px;height:46px;background:var(--mu-accent);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--mu-accent) 45%,transparent)}.mu-big:hover{background:var(--mu-accent);transform:scale(1.07)}.mu-big svg{width:20px;height:20px}
.mu[data-s="loading"] .mu-big svg{animation:mu-pulse 1s ease-in-out infinite}
.mu-vol{margin-left:calc(6 * var(--u));padding:0!important;box-shadow:none!important}
.mu-shelf{display:flex;gap:calc(12 * var(--u));overflow-x:auto;padding:calc(16 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));margin:0 calc(-4 * var(--u));scrollbar-width:none;scroll-snap-type:x proximity}.mu-shelf::-webkit-scrollbar{display:none}
.mu-rec{position:relative;flex:none;width:54px;height:54px;border:0;background:none;padding:0;cursor:pointer;scroll-snap-align:start;touch-action:manipulation}
.mu-vinyl{position:absolute;left:7px;top:-9px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,var(--mu-c) 0 17%,#202020 19%);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:top var(--d-3) var(--ease)}
.mu-sleeve{position:absolute;inset:0;border-radius:var(--r-3);overflow:hidden;background:var(--mu-c);display:grid;place-items:center;color:#fff;box-shadow:0 3px 10px rgba(80,50,20,.28);transition:transform var(--d-3) var(--ease),box-shadow var(--d-2)}.mu-sleeve img{width:100%;height:100%;object-fit:cover;display:block}.mu-sleeve b{font-size:var(--fs-8)}
.mu-rec:hover .mu-sleeve{transform:translateY(-3px)}.mu-rec:hover .mu-vinyl{top:-13px}
.mu-rec.on .mu-vinyl{top:-17px}.mu-rec.on .mu-sleeve{transform:translateY(-3px);box-shadow:0 0 0 2.5px var(--mu-accent),0 8px 16px rgba(80,50,20,.3)}
.mu-rec:focus-visible .mu-sleeve{box-shadow:0 0 0 2.5px var(--mu-ink)}
.mu-empty{text-align:center;padding:calc(6 * var(--u)) 0}.mu-empty p{margin:0 0 6px;color:var(--mu-ink2);font-size:var(--fs-3)}.mu-ext{display:flex;gap:10px;justify-content:center}.mu-ext a{color:var(--mu-accent);font-weight:var(--fw-m);font-size:var(--fs-3)}
.musicpill{display:inline-flex;align-items:center;gap:calc(7 * var(--u));max-width:210px}.musicpill .mp-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.musicpill .mp-i svg{width:13px;height:13px;display:block}
.musicpill .mu-eq{opacity:1;height:11px}.musicpill .mu-eq i{background:var(--primary)}
@keyframes mu-spin{to{transform:rotate(360deg)}}@keyframes mu-eq{0%,100%{height:25%}50%{height:100%}}@keyframes mu-glow{0%,100%{opacity:.7}50%{opacity:1}}@keyframes mu-pulse{50%{opacity:.4}}
@keyframes mu-note{0%{opacity:0;transform:translate(0,8px)}20%{opacity:.9}100%{opacity:0;transform:translate(8px,-26px)}}
#desk[data-motion="off"] .mu *,#desk[data-motion="off"] .musicpill *{animation:none!important}
@media (prefers-reduced-motion:reduce){.mu *,.musicpill *{animation:none!important}}
.mu-man{width:min(480px,92vw);max-height:84vh;overflow:auto}.mu-man-h{display:flex;justify-content:space-between;align-items:center}.mu-x{border:0;background:var(--surface2);width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--ink)}.mu-x svg{width:14px;height:14px}
.mu-add{display:flex;gap:8px}.mu-add input{flex:1;min-width:0}.mu-st{min-height:1.2em;margin:4px 0}
.mu-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.mu-row{display:grid;grid-template-columns:44px 1fr auto;grid-template-areas:"th ed rb" "th sm rb";gap:2px 10px;align-items:center;background:var(--surface2);border-radius:var(--r-5);padding:8px}
.mu-th{grid-area:th;width:44px;height:44px;border-radius:var(--r-3);overflow:hidden;background:var(--mu-c);display:block}.mu-th img{width:100%;height:100%;object-fit:cover;display:block}
.mu-ed{grid-area:ed;display:flex;flex-direction:column;gap:4px;min-width:0}.mu-ed input{width:100%;box-sizing:border-box;background:var(--surface)!important;border:0;border-radius:var(--r-3);padding:6px 10px;font:inherit;font-size:var(--fs-3);color:var(--ink)}
.mu-row small{grid-area:sm;color:var(--ink2);font-size:var(--fs-2)}.mu-rb{grid-area:rb;display:flex;gap:2px}.mu-rb button{border:0;background:none;color:var(--ink2);width:28px;height:28px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font:inherit}.mu-rb button:hover{background:var(--surface)}.mu-rb button:disabled{opacity:.3}.mu-rb .danger{color:var(--danger)}.mu-rb svg{width:14px;height:14px}
/* owner: edit app dialog */
.ae-card{width:min(460px,92vw);max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.ae-h{display:flex;align-items:center;gap:calc(12 * var(--u))}.ae-h>div{flex:1;min-width:0;display:flex;flex-direction:column}.ae-h small{color:var(--ink2);font-size:var(--fs-2)}
.ae-prev .ico{width:52px;height:52px;display:block}.ae-prev svg{width:100%;height:100%}
.ae-x{border:0;background:var(--surface2);width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.ae-l{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-3);color:var(--ink2);font-weight:var(--fw-m)}
.ae-l input,.ae-l textarea{font:inherit;color:var(--ink);background:var(--surface2);border:0;border-radius:var(--r-4);padding:10px 12px;resize:vertical}
.ae-cols{display:flex;gap:8px;flex-wrap:wrap}.ae-col{width:30px;height:30px;border-radius:50%;border:3px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.ae-col.on{border-color:var(--ink)}
.ae-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-height:210px;overflow:auto;padding:2px}
.ae-grid button{height:44px;border:0;border-radius:var(--r-4);background:var(--surface2);color:var(--ink);display:grid;place-items:center;cursor:pointer}.ae-grid button:hover{background:var(--surface3)}.ae-grid button.on{outline:2px solid var(--primary)}
.ae-up{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.wcard.st .wedit{opacity:1;top:auto;bottom:8px;right:8px}
/* tiling groups: locked, and full screen */
.win.lifting{z-index:970;box-shadow:0 24px 60px rgba(0,0,0,.28);transition:none!important}
html.grp-full .topbar,html.grp-full .award,html.grp-full #shelf,html.grp-full .widgets,html.grp-full #icons,html.grp-full .cat,html.grp-full .jar,html.grp-full .dock-handle,html.grp-full #musicPill{display:none!important}
html.grp-full .win:not(.tiled){visibility:hidden;pointer-events:none}
.grp-exit{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:3500;border:0;opacity:.0;transition:opacity var(--d-3);font-weight:var(--fw-m);cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.grp-exit:hover,.grp-exit:focus-visible,html.grp-full #desk:hover .grp-exit{opacity:.92}
@media (hover:none){.grp-exit{opacity:.92}}
/* app drawer: window bar */
.lwin{display:flex;align-items:center;gap:calc(8 * var(--u));flex-wrap:wrap;margin:calc(10 * var(--u)) 0 calc(4 * var(--u))}
.lwin[hidden]{display:none}.lw-n{font-size:var(--fs-2);color:var(--ink2);font-weight:var(--fw-b);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.lw-b{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--r-pill);padding:calc(7 * var(--u)) calc(12 * var(--u));background:var(--surface2);color:var(--ink);font:inherit;font-size:var(--fs-3);font-weight:var(--fw-m);cursor:pointer;transition:background var(--d-1)}
.lw-b:hover{background:var(--surface3)}.lw-b.danger{color:var(--danger)}.lw-b svg{width:16px;height:16px}
.ft-snd{display:flex;flex-direction:column;gap:calc(8 * var(--u));margin-top:calc(14 * var(--u));text-align:left}
.ft-sl{display:flex;align-items:center;gap:10px;font-size:var(--fs-3);color:var(--ink2);font-weight:var(--fw-m)}.ft-sl>span{width:60px;flex:none}
.ft-sl select{flex:1;min-width:0;font:inherit;color:var(--ink);background:var(--surface2);border:0;border-radius:var(--r-4);padding:8px 10px}
.ft-vol{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--primary) var(--p,50%),var(--surface3) var(--p,50%));cursor:pointer}
.ft-vol::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.ft-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--primary);border:3px solid var(--surface)}
button.sel{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));width:100%;min-height:calc(40 * var(--u));padding:0 calc(12 * var(--u)) 0 calc(14 * var(--u));border:0;border-radius:var(--r-5);background:var(--surface2);color:var(--ink);font:inherit;font-size:var(--fs-4);font-weight:var(--fw-m);cursor:pointer;text-align:left;transition:background var(--d-1)}
button.sel:hover{background:var(--surface3)}button.sel>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.sel svg{flex:none;width:16px;height:16px;color:var(--ink2);transition:transform var(--d-2) var(--ease)}button.sel[aria-expanded=true] svg{transform:rotate(180deg)}
select[data-enh]{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important}
.selmenu{position:fixed;z-index:99999;max-height:min(300px,60vh);overflow:auto;padding:calc(6 * var(--u));background:var(--surface);border-radius:var(--r-5);box-shadow:var(--shadow);animation:selin var(--d-1) var(--ease)}
.selmenu button{display:flex;align-items:center;justify-content:space-between;gap:calc(14 * var(--u));width:100%;padding:calc(9 * var(--u)) calc(12 * var(--u));border:0;border-radius:var(--r-3);background:none;color:var(--ink);font:inherit;font-size:var(--fs-4);font-weight:var(--fw-m);text-align:left;cursor:pointer}
.selmenu button:hover,.selmenu button:focus-visible{background:var(--surface2);outline:0}.selmenu button[aria-selected=true]{font-weight:var(--fw-b)}.selmenu svg{flex:none;width:16px;height:16px;color:var(--ink)}
@keyframes selin{from{opacity:0;transform:translateY(-4px)}}
.seg{display:inline-flex;background:var(--surface2);border-radius:var(--r-ctl);padding:calc(4 * var(--u));gap:calc(4 * var(--u))}
.seg button{border:0;background:none;padding:calc(8 * var(--u)) calc(16 * var(--u));border-radius:var(--r-ctl);font-weight:var(--fw-m)}
.seg button.on{background:var(--primary);color:var(--on-primary)}
.walls{display:flex;gap:calc(12 * var(--u));flex-wrap:wrap}
.walls button{width:110px;height:70px;border-radius:var(--r-6);border:3px solid transparent}
.walls button.on{border-color:var(--primary)}

#desk[data-motion="off"] .wall *,.walls button svg *{animation:none!important}
#desk[data-motion="off"] .ico,#desk[data-motion="off"] .ico *:not([transform]){transition:none!important;animation:none!important;transform:none!important}
#desk[data-motion="off"] .dicon:hover .g-pen,#desk[data-motion="off"] .dicon:hover .g-draw{animation:none!important}
@media (prefers-reduced-motion:reduce){.wall *{animation:none!important}}

/* status widget hide */
.wcard.st{position:relative}
.wx{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;background:var(--surface2);display:grid;place-items:center;opacity:0;transition:opacity var(--d-2)}
.wx svg{width:12px;height:12px}
.wcard.st:hover .wx,.wx:focus-visible{opacity:1}
#desk[data-status="off"] .wcard.st{display:none}
/* music widget: drag, minimise, hide */
.mw{position:relative;cursor:grab;touch-action:none;user-select:none;transition:box-shadow var(--d-2),padding var(--d-3),border-radius var(--d-3)}
.mw.dragging{cursor:grabbing;box-shadow:0 24px 60px rgba(0,0,0,.25);transition:none;z-index:960}
.mw.floating{position:fixed;margin:0;z-index:5}
.mw-ctl{position:absolute;top:-11px;right:-8px;display:flex;gap:calc(4 * var(--u));opacity:0;transition:opacity var(--d-2);z-index:2}
.mw:hover .mw-ctl,.mw:focus-within .mw-ctl{opacity:1}
.wb2{width:26px;height:26px;border:0;border-radius:50%;background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.18);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.wb2:hover{background:var(--line)}.wb2 svg{width:11px;height:11px}
.mw.min{padding:calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));border-radius:var(--r-pill)}
.mw.min .art{width:36px;height:36px;border-radius:50%}.mw.min .art svg{width:18px;height:18px}
.mw.min .mini,.mw.min #mArtist,.mw.min .meta{display:none}
.mw.min .wmusic{gap:calc(10 * var(--u))}
.mw.min #mSong{font-size:var(--fs-4)}
.mw.min br{display:none}.mw.min .wmusic>div:last-child{padding-right:calc(4 * var(--u))}
#desk[data-music="off"] .mw{display:none}
/* quick panel */
.status{border:0;cursor:pointer;color:var(--ink);font-weight:var(--fw-m)}
.status:hover{background:var(--surface)}
.qs{position:absolute;top:52px;right:14px;z-index:960;width:min(380px,calc(100% - 28px));max-height:calc(100% - 96px);overflow:auto;overscroll-behavior:contain;background:var(--surface);border-radius:var(--r-9);padding:calc(20 * var(--u));box-shadow:var(--shadow);animation:drop var(--d-2) var(--ease-spring);transform-origin:top right}
.qs[hidden]{display:none}
@keyframes drop{from{opacity:0;transform:scale(.9) translateY(-8px)}}
.qt{font-size:var(--fs-12);font-weight:var(--fw-x);letter-spacing:-.04em;line-height:1}
.qd{color:var(--ink2);font-weight:var(--fw-m);margin:calc(6 * var(--u)) 0 calc(16 * var(--u))}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:calc(8 * var(--u))}
.tiles .tile:last-child:nth-child(odd){grid-column:1/-1}
.tile{display:flex;align-items:center;gap:calc(10 * var(--u));border:0;border-radius:var(--r-7);padding:calc(14 * var(--u));background:var(--surface2);text-align:left;font-weight:var(--fw-b);font-size:var(--fs-4)}
.tile small{display:block;font-weight:500;color:var(--ink2);font-size:var(--fs-2)}
.tile.on{background:var(--primary);color:var(--on-primary)}.tile.on small{color:inherit;opacity:.8}
.tile svg{width:20px;height:20px;flex:none}
.tile.spin svg{animation:spin360 .8s linear infinite}@keyframes spin360{to{transform:rotate(360deg)}}
.sysrow{display:flex;gap:calc(8 * var(--u));margin:calc(12 * var(--u)) 0}
.sysrow>div{flex:1;background:var(--surface2);border-radius:var(--r-6);padding:calc(10 * var(--u)) calc(14 * var(--u));font-size:var(--fs-3);font-weight:var(--fw-m)}
.sysrow small{display:block;color:var(--ink2);font-weight:500}
.bar2{height:6px;border-radius:var(--r-3);background:var(--line);margin-top:calc(6 * var(--u));overflow:hidden}.bar2 i{display:block;height:100%;background:var(--primary)}
.cal{background:var(--surface2);border-radius:var(--r-7);padding:calc(14 * var(--u))}
.cal-h{display:flex;align-items:center;gap:calc(2 * var(--u));margin-bottom:calc(8 * var(--u))}.cal-h b{margin:0}.cal-h .sp{flex:1}
.cal-n,.cal-t{border:0;background:none;color:var(--ink);cursor:pointer;border-radius:50%;width:calc(28 * var(--u));height:calc(28 * var(--u));display:grid;place-items:center;padding:0;transition:background var(--d-1)}.cal-n svg{width:16px;height:16px}.cal-n:hover,.cal-t:hover{background:var(--tint,rgba(127,127,127,.15))}
.cal-t{width:auto;border-radius:var(--r-pill);padding:0 calc(10 * var(--u));font:inherit;font-size:var(--fs-3);font-weight:var(--fw-m)}
.cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(2 * var(--u));text-align:center;font-size:var(--fs-3)}
.cal .g span{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;position:relative}
.cal .g .e{pointer-events:none}.cal .g .dy.ev::after{content:"";position:absolute;bottom:14%;width:4px;height:4px;border-radius:50%;background:var(--primary)}.cal .g .today.ev::after{background:var(--on-primary)}
.cal .g .h{aspect-ratio:auto;height:calc(22 * var(--u));color:var(--ink2);font-weight:var(--fw-b);font-size:var(--fs-1)}
.cal-ev{display:flex;flex-direction:column;gap:calc(2 * var(--u));margin-top:calc(10 * var(--u))}.cal-ev button{display:flex;align-items:center;gap:calc(10 * var(--u));border:0;background:none;color:var(--ink);text-align:left;padding:calc(7 * var(--u)) calc(8 * var(--u));border-radius:var(--r-4);cursor:pointer;font:inherit}.cal-ev button:hover{background:var(--tint,rgba(127,127,127,.12))}
.cal-ev i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink3,#999)}.cal-ev i.now{background:var(--primary)}.cal-ev b{display:block;font-size:var(--fs-4);font-weight:var(--fw-m)}.cal-ev small{color:var(--ink2);font-size:var(--fs-2)}
.cal .g .today{background:var(--primary);color:var(--on-primary);font-weight:var(--fw-x)}

/* avatar */
.avwrap{position:relative;width:132px;height:132px;flex:none}
.avwrap svg{position:absolute;inset:0;width:100%;height:100%}
.avclip{transform-box:view-box;transform-origin:50px 50px;animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* journal */
.jhead p{margin-top:0}
.feat{display:flex;flex-direction:column;gap:calc(8 * var(--u));width:100%;border:0;text-align:left;border-radius:var(--r-8);padding:calc(24 * var(--u));margin:calc(6 * var(--u)) 0 calc(10 * var(--u));color:var(--glyph);transition:transform var(--d-2)}
.feat:hover{transform:translateY(-2px)}
.feat small{font-weight:var(--fw-b);font-size:var(--fs-3);opacity:.75}
.feat b{font-size:clamp(22px,3vw,30px);line-height:1.1;letter-spacing:-.02em;max-width:22ch}
.feat span{line-height:1.5;max-width:56ch;opacity:.85}
.feat i{font-style:normal;font-weight:var(--fw-b);font-size:var(--fs-4);margin-top:calc(6 * var(--u));align-self:flex-start;background:var(--surface);color:var(--ink);padding:calc(8 * var(--u)) calc(14 * var(--u));border-radius:var(--r-pill)}
.post{display:flex;gap:calc(14 * var(--u));align-items:flex-start;width:100%;text-align:left;border:0;background:none;padding:calc(16 * var(--u)) calc(8 * var(--u));border-bottom:1px solid var(--line);border-radius:0}
.post:hover b{text-decoration:underline;text-underline-offset:3px}
.pdot{flex:none;width:14px;height:14px;border-radius:50%;margin-top:calc(4 * var(--u))}
.post b{font-size:var(--fs-7);display:block;margin:2px 0 calc(4 * var(--u));line-height:1.25}
.post small,.meta{color:var(--ink2);font-size:var(--fs-3);font-weight:var(--fw-m)}
.post span{display:block;color:var(--ink2);line-height:1.5}
.abar{position:sticky;top:-4px;z-index:3;margin:0 -24px calc(8 * var(--u));padding:calc(8 * var(--u)) calc(24 * var(--u)) 0;background:var(--surface);box-shadow:0 -24px 0 var(--surface)}
.abar .back{margin-bottom:calc(8 * var(--u))}
.rprog{height:2px;margin:0 -24px;overflow:hidden}
.upd{display:inline-block;font-style:normal;font-size:var(--fs-2);font-weight:var(--fw-b);background:color-mix(in srgb,var(--primary) 14%,var(--surface));color:var(--ink);padding:calc(4 * var(--u)) calc(10 * var(--u));border-radius:var(--r-pill);margin-top:calc(6 * var(--u))}
.car{margin:calc(26 * var(--u)) auto;max-width:440px;outline-offset:6px}
.car .vp{position:relative;overflow:hidden;border-radius:var(--r-7);aspect-ratio:var(--ar,4/5);background:#000;touch-action:pan-y;cursor:grab;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.car .tr{display:flex;height:100%;transition:transform var(--d-3) var(--ease)}
.car img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.cb{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);font-size:var(--fs-9);line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.2);transition:opacity var(--d-2)}
.cb.pv{left:10px}.cb.nx{right:10px}.cb:disabled{opacity:0;pointer-events:none}
.cnt{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;font-size:var(--fs-2);font-weight:var(--fw-b);padding:calc(4 * var(--u)) calc(10 * var(--u));border-radius:var(--r-pill)}
.car .dots{display:flex;justify-content:center;gap:calc(6 * var(--u));margin-top:calc(12 * var(--u))}
.car .dots button{width:8px;height:8px;padding:0;border:0;border-radius:var(--r-3);background:var(--line);transition:width var(--d-2),background var(--d-2)}
.car .dots button.on{width:22px;background:var(--primary)}
.pthumb{flex:none;width:52px;height:65px;border-radius:var(--r-4);object-fit:cover}
.pthumb.wide{width:104px;height:59px}
.fimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-6);margin-bottom:calc(8 * var(--u))}
.ahero{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-7);margin:calc(4 * var(--u)) 0 calc(18 * var(--u))}
.afoot{display:flex;flex-wrap:wrap;gap:calc(10 * var(--u))}
.rprog i{display:block;height:100%;width:0;background:var(--primary);border-radius:0 var(--r-2) var(--r-2) 0}
.article{max-width:64ch;margin:0 auto calc(20 * var(--u))}
.article h1{font-weight:var(--fw-x);font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-.025em;margin:calc(6 * var(--u)) 0 calc(12 * var(--u))}
.journal{max-width:66ch;margin:0 auto}
.jh h1{font-weight:var(--fw-x);font-size:clamp(36px,5vw,48px);letter-spacing:-.03em;line-height:1;margin:calc(10 * var(--u)) 0 calc(8 * var(--u))}
.body .jh p{margin:0 0 calc(18 * var(--u));font-size:var(--fs-6)}
.jtags{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u));padding-bottom:calc(6 * var(--u))}
.jtags button{border:1px solid var(--line);background:none;border-radius:var(--r-4);padding:calc(7 * var(--u)) calc(14 * var(--u));font-weight:var(--fw-m);font-size:var(--fs-4)}
.jtags button span{color:var(--ink2);font-weight:500;margin-left:2px}
.jtags button.on{background:color-mix(in srgb,var(--primary) 16%,var(--surface));color:var(--ink);border-color:transparent}.jtags button.on span{color:inherit;opacity:.7}
.jm{font-size:var(--fs-4);font-weight:var(--fw-b);color:var(--primary);margin:calc(28 * var(--u)) 0 calc(4 * var(--u))}
.jl{list-style:none;margin:0;padding:0}
.jl li{border-bottom:1px solid var(--line)}
.je{display:flex;gap:calc(18 * var(--u));width:100%;border:0;background:none;text-align:left;padding:calc(18 * var(--u)) 0;align-items:flex-start}
.jd{flex:none;width:42px;text-align:center;padding-top:calc(4 * var(--u))}
.jd b{display:block;font-size:var(--fs-9);font-weight:var(--fw-x);line-height:1;letter-spacing:-.02em}
.jd small{display:block;font-size:var(--fs-2);font-weight:var(--fw-m);color:var(--ink2);margin-top:calc(3 * var(--u))}
.jb{display:flex;flex-direction:column;gap:calc(5 * var(--u));min-width:0}
.jt{font-size:clamp(18px,2vw,20px);font-weight:var(--fw-b);line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.je:hover .jt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.jx{color:var(--ink2);line-height:1.5;font-size:var(--fs-5)}
.jmeta{font-size:var(--fs-3);font-weight:var(--fw-m);color:var(--ink2)}
.jmeta em{font-style:normal;color:var(--primary)}
.body .article .lead{font-size:var(--fs-8);line-height:1.55;color:var(--ink2);margin:0 0 calc(18 * var(--u))}
.article hr{border:0;border-top:1px solid var(--line);margin:0 0 calc(8 * var(--u))}
.body .article p,.article li{font-size:var(--fs-6);line-height:1.75;color:var(--ink)}
.article h2{font-size:var(--fs-9);letter-spacing:-.015em;line-height:1.2;margin:calc(38 * var(--u)) 0 calc(8 * var(--u))}
.article h3{font-size:var(--fs-7);margin:calc(28 * var(--u)) 0 calc(4 * var(--u))}
.article ul,.article ol{padding-left:calc(22 * var(--u));margin:calc(12 * var(--u)) 0}
.article li{margin:calc(6 * var(--u)) 0}.article li::marker{color:var(--primary);font-weight:var(--fw-b)}
.article blockquote{margin:calc(28 * var(--u)) 0;padding:calc(22 * var(--u)) calc(24 * var(--u));border-radius:var(--r-8) var(--r-8) var(--r-8) var(--r-3);background:color-mix(in srgb,var(--primary) 12%,var(--surface));border-left:4px solid var(--primary);border-radius:var(--r-3) var(--r-7) var(--r-7) var(--r-3);color:var(--ink);font-size:clamp(19px,2.4vw,23px);font-weight:var(--fw-b);line-height:1.35;letter-spacing:-.01em}
.article strong{font-weight:750}
.callout{display:flex;align-items:center;justify-content:space-between;gap:calc(14 * var(--u));flex-wrap:wrap;background:var(--surface2);border-radius:var(--r-7);padding:calc(18 * var(--u)) calc(20 * var(--u));margin:calc(32 * var(--u)) 0 calc(12 * var(--u))}
.body .callout p{margin:0;line-height:1.5}
.afoot{margin:calc(24 * var(--u)) 0}
.nextp{display:flex;flex-direction:column;gap:calc(4 * var(--u));width:100%;border:0;text-align:left;border-radius:var(--r-7);padding:calc(18 * var(--u)) calc(20 * var(--u));background:var(--surface2);color:var(--ink)}
.nextp small{font-weight:var(--fw-b);opacity:.75}.nextp b{font-size:var(--fs-7);line-height:1.25}
/* photos: a scrapbook of printed photos, taped to a dotted board */
.sb{--paper:#FAFAFA;--ink-hand:#363636;--tape:rgba(246,232,186,.78);margin:0 calc(-6 * var(--u));padding:calc(6 * var(--u))}
.win[data-app="photos"] .body{padding:0;display:flex;flex-direction:column}
.win[data-app="photos"] .body>.nt-head,.win[data-app="photos"] .body>.hint,.win[data-app="photos"] .body>.sb-note{margin-left:calc(24 * var(--u));margin-right:calc(24 * var(--u))}
.win[data-app="photos"] .body>.nt-head{padding-top:calc(4 * var(--u))}
.win[data-app="photos"] .sb{flex:1;display:flex;flex-direction:column;margin:calc(8 * var(--u)) 0 0;padding:0}
.win[data-app="photos"] .sb-board{flex:1;border-radius:0;border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent);padding:calc(28 * var(--u)) calc(22 * var(--u)) calc(36 * var(--u));gap:30px 24px}
:root[data-theme="dark"] .sb{--paper:#E8E8E8;--tape:rgba(214,198,150,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sb{--paper:#E8E8E8;--tape:rgba(214,198,150,.7)}}
.sb-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 20px;align-items:start;padding:calc(18 * var(--u)) calc(10 * var(--u)) calc(28 * var(--u));border-radius:var(--r-7);background-color:var(--surface2);background-image:radial-gradient(color-mix(in srgb,var(--ink) 13%,transparent) 1px,transparent 1.4px);background-size:18px 18px}
.sb-print{position:relative;display:flex;flex-direction:column;width:100%;border:0;margin:0;padding:9px 9px 0;background:var(--paper);color:var(--ink-hand);border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 22px -8px rgba(0,0,0,.28);transform:rotate(var(--t,0deg));transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.sb-print::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;transform:translateX(-50%) rotate(var(--tt,-3deg));background:var(--tape);box-shadow:0 1px 2px rgba(0,0,0,.08);z-index:1}
.sb-print .sb-ph{display:block;width:100%;background:color-mix(in srgb,var(--ink-hand) 10%,var(--paper));overflow:hidden;aspect-ratio:var(--ar,4/5)}
.sb-print img{display:block;width:100%;height:100%;object-fit:cover}
.sb-ph svg{display:none}.sb-print .sb-del svg{display:block!important}
.sb-cap{display:block;min-height:38px;padding:6px 6px 9px;font-family:"Caveat",var(--font,cursive);font-size:21px;line-height:1.1;font-weight:600;color:var(--ink-hand);overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.sb:not(.arranging) .sb-print:hover{transform:rotate(0deg) translateY(-4px) scale(1.03);box-shadow:0 2px 4px rgba(0,0,0,.12),0 18px 34px -10px rgba(0,0,0,.35);z-index:2}}
.sb-print:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
.sb.arranging .sb-print{--t:0deg;cursor:grab;touch-action:none;user-select:none}
.sb.arranging .sb-print.lift{cursor:grabbing;z-index:5;transition:box-shadow .2s ease;transform:rotate(-1.5deg) scale(1.05);box-shadow:0 26px 44px -12px rgba(0,0,0,.45)}
.sb-del{position:absolute;top:-10px;right:-10px;z-index:3;width:30px;height:30px;display:none;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}
.sb.arranging .sb-del{display:grid}
.sb-bar{display:flex;align-items:center;gap:calc(8 * var(--u));flex-wrap:wrap}
.sb-arr.on{background:var(--primary);color:var(--on-primary)}
.sb-note{margin:0 0 calc(12 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u));border-radius:var(--r-6);background:var(--surface2);display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));flex-wrap:wrap;font-size:var(--fs-4)}
.sb-drop{outline:3px dashed var(--primary);outline-offset:-6px}
@media (max-width:520px){.sb-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;padding:16px 8px}.sb-cap{font-size:18px;min-height:32px}.sb-print{padding:7px 7px 0}.sb-print::before{width:56px;height:18px}}
/* the photo viewer: one photo at a time over a dark backdrop */
.sb-view{position:absolute;left:0;right:0;z-index:20;display:flex;flex-direction:column;background:#121212;color:#EFEFEF;opacity:0;transition:opacity .22s ease}
.sb-view.in{opacity:1}
.sb-vtop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.sb-vtop small{opacity:.75;font-variant-numeric:tabular-nums}
.sb-vb{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:inherit;cursor:pointer}.sb-vb:hover{background:rgba(255,255,255,.2)}.sb-vb:disabled{opacity:.3;cursor:default}
.sb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px;touch-action:pan-y}
.sb-stage img{max-width:calc(100% - 112px);max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5);transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.sb-stage img{transform:translateX(var(--dx,0px))}.sb-stage img.out{opacity:0;transform:translateX(var(--dx,0px)) scale(.98)}
@media (prefers-reduced-motion:reduce){.sb-stage img,.sb-stage img.out{transform:none}}
.sb-vcap{min-height:44px;padding:10px 16px 4px;text-align:center;font-family:"Caveat",cursive;font-size:26px;line-height:1.15}
.sb-vown{display:flex;gap:8px;padding:6px 12px 14px}
.sb-vown input{flex:1;min-width:0;font:inherit;padding:9px 12px;border-radius:var(--r-4);border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:inherit}
.sb-vown button{border:0;border-radius:var(--r-pill);padding:0 16px;background:rgba(255,255,255,.12);color:inherit;font:inherit;cursor:pointer}.sb-vown .ed-del{background:#b3261e;color:#fff}
@media (max-width:520px){.sb-stage img{max-width:100%}.sb-stage .sb-vb{position:absolute;bottom:8px;z-index:2}.sb-stage .sb-vb.p{left:12px}.sb-stage .sb-vb.n{right:12px}}
/* notes */
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:calc(16 * var(--u));padding:calc(6 * var(--u)) calc(4 * var(--u))}
.note{border-radius:var(--r-7) var(--r-7) var(--r-7) var(--r-3);padding:calc(18 * var(--u));min-height:160px}
.note:nth-child(odd){transform:rotate(-1.2deg)}.note:nth-child(even){transform:rotate(1deg)}
.note b{display:block;margin-bottom:calc(8 * var(--u));font-size:var(--fs-6)}
.note p{margin:0;color:var(--glyph)!important;line-height:1.55;font-size:var(--fs-5);white-space:pre-line}
.nt-head{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));flex-wrap:wrap}
.nt-tools{display:flex;align-items:center;gap:calc(8 * var(--u))}.nt-status{font-size:var(--fs-3);opacity:.7;min-width:4ch}
.nt-tools button,.own-row button{border:0;border-radius:var(--r-pill);padding:calc(8 * var(--u)) calc(14 * var(--u));font:inherit;font-size:var(--fs-4);cursor:pointer;background:var(--surface2,#eee);color:inherit}
.notes.editing .note{transform:none!important}
.notes.editing [contenteditable]{outline:none;border-radius:var(--r-3);cursor:text}
.notes.editing [contenteditable]:focus{box-shadow:0 0 0 2px var(--glyph)}
.nt-row{display:flex;align-items:center;gap:calc(6 * var(--u));margin-top:calc(12 * var(--u))}
.nt-c{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.nt-c.on{border-color:var(--glyph)}
.nt-del{margin-left:auto;border:0;background:none;font:inherit;font-size:var(--fs-2);color:var(--glyph);opacity:.75;cursor:pointer}
.nt-hint{opacity:.6}
.ownpill{display:inline-flex;align-items:center;gap:calc(7 * var(--u));cursor:pointer;font:inherit;font-weight:var(--fw-m);border:0;color:inherit}.ownpill i{width:9px;height:9px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.28)}
/* hidden from visitors: the owner sees it at full strength, with a small "Hidden" tag */
.hid-tag{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-1);font-weight:var(--fw-b);line-height:1;padding:3px calc(7 * var(--u));border-radius:var(--r-pill);background:var(--ink);color:var(--surface);white-space:nowrap;vertical-align:middle}.hid-tag svg{width:11px;height:11px}
.dicon{position:relative}.dicon .hid-tag{position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:1;box-shadow:0 1px 4px rgba(0,0,0,.2)}
/* Settings: sections on the left, one at a time on the right; on a phone, the list first, then a section with a back button */
.win[data-app="settings"] .body:has(> .st2){padding:0;overflow:hidden;display:flex}
.st2{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(220px,260px) 1fr}
.st2-nav{min-height:0;overflow-y:auto;padding:calc(6 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));border-right:1px solid var(--line);background:color-mix(in srgb,var(--surface2) 55%,var(--surface));scrollbar-width:thin}
.st2-nav h1{font-size:var(--fs-9);margin:calc(4 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u))}
.st2-q{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-4);padding:calc(10 * var(--u)) calc(14 * var(--u));border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);margin-bottom:calc(10 * var(--u))}
.st2-q:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.st2-nav nav{display:flex;flex-direction:column;gap:2px}
.st2-nav nav button{display:flex;align-items:center;gap:calc(12 * var(--u));width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:calc(9 * var(--u)) calc(10 * var(--u));border-radius:var(--r-pill);cursor:pointer;font:inherit}
.st2-nav nav button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.st2-nav nav button.on{background:color-mix(in srgb,var(--primary) 18%,var(--surface));color:var(--ink)}
.st2-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--primary);box-shadow:inset 0 0 0 1px var(--line)}
.st2-nav nav button.on .st2-ic{background:var(--primary);color:var(--on-primary);box-shadow:none}
.st2-t{display:flex;flex-direction:column;min-width:0}.st2-t b{font-size:var(--fs-5);font-weight:var(--fw-m)}.st2-t small{font-size:var(--fs-2);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st2-nav nav button.on .st2-t b{font-weight:var(--fw-b)}
.st2-own{display:flex;align-items:center;gap:8px;font-size:var(--fs-2);color:var(--ink2);margin:calc(14 * var(--u)) calc(10 * var(--u)) 0}.st2-own i{width:8px;height:8px;border-radius:50%;background:#2ecc71;flex:none}
.st2-main{min-width:0;min-height:0;overflow-y:auto;padding:0 calc(28 * var(--u)) calc(28 * var(--u));scrollbar-width:thin}
.st2-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(12 * var(--u)) 0 calc(8 * var(--u));background:var(--surface)}
.st2-h{margin:0;font-size:var(--fs-8);flex:1;min-width:0}
.st2-st{font-size:var(--fs-2);color:var(--ink2)}
.st2-back{display:none;align-items:center;gap:4px;border:0;background:none;color:var(--primary);font:inherit;font-weight:var(--fw-m);padding:6px 6px 6px 0;cursor:pointer}
.st2-grp{padding:calc(2 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));margin:0 0 calc(12 * var(--u));border-radius:var(--r-7);background:color-mix(in srgb,var(--surface2) 45%,var(--surface));border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.st2-grp>h3:first-child{margin-top:calc(14 * var(--u))}
.st2-grp[hidden]{display:none}
.st2.narrow{grid-template-columns:1fr}
.st2.narrow .st2-nav{border-right:0;background:none}
.st2.narrow .st2-main{display:none}
.st2.narrow.in-cat .st2-nav{display:none}.st2.narrow.in-cat .st2-main{display:block;padding:0 calc(16 * var(--u)) calc(24 * var(--u))}
.st2.narrow .st2-back{display:inline-flex}
.st2.narrow .st2-grp{padding:calc(2 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u))}
.st2.narrow .st2-nav nav button{border-radius:var(--r-6);padding:calc(12 * var(--u)) calc(10 * var(--u))}
/* the icon library picker */
.lip{width:min(460px,calc(100vw - 24px));max-height:min(78vh,620px);display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.lip-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.lip-h b{font-size:var(--fs-7)}
.lip-q{font:inherit;font-size:var(--fs-5);padding:calc(10 * var(--u)) calc(14 * var(--u));border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.lip-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;padding:2px;scrollbar-width:thin}
.lip-grid button{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:var(--r-4);background:transparent;color:var(--ink);cursor:pointer}
.lip-grid button:hover{background:var(--surface2)}.lip-grid button.on{background:var(--primary);color:var(--on-primary)}
/* owner mode: lists you can drag */
.own-sortable [data-i]{-webkit-touch-callout:none}
#desk.owner .own-sortable>[data-i],#desk.owner .own-sortable>li[data-i]{cursor:grab}
.own-dragging{user-select:none;-webkit-user-select:none}
.own-drag{position:relative;z-index:5;cursor:grabbing!important;opacity:.92;box-shadow:0 14px 30px -10px rgba(0,0,0,.4)!important;transform:scale(1.02);transition:transform .15s ease,box-shadow .15s ease}
.ed-list{display:flex;flex-direction:column}
.ct-links .btn{gap:calc(8 * var(--u))}.ct-i{display:inline-grid;place-items:center}
.tl-ic{display:inline-grid;place-items:center;color:var(--primary)}.tl-dot.has-ic svg{width:14px;height:14px}
.tle-media{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u));margin:calc(8 * var(--u)) 0}
.tle-mb{display:inline-flex;align-items:center;gap:calc(6 * var(--u));border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-3);padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:var(--r-pill);cursor:pointer}
.tle-mb:hover{background:var(--surface2)}.tle-mb img{width:22px;height:22px;object-fit:cover;border-radius:4px}
.gs-steps{margin:calc(6 * var(--u)) 0;padding-left:calc(20 * var(--u));font-size:var(--fs-4);line-height:1.55}.gs-steps li{margin:calc(6 * var(--u)) 0}.gs-steps code,.gs-box code{font-size:var(--fs-2);word-break:break-all;background:var(--surface2);padding:1px 5px;border-radius:6px}
.gs-box .gs-err,.gs-box .gs-err b{color:#c5221f!important;font-size:var(--fs-4)}:root[data-theme="dark"] .gs-box .gs-err,:root[data-theme="dark"] .gs-box .gs-err b{color:#f28b82!important}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gs-box .gs-err,:root:not([data-theme="light"]) .gs-box .gs-err b{color:#f28b82!important}}.gs-box .ow-app small{color:var(--ink2)}
.own-sec{margin-top:calc(26 * var(--u));padding-top:calc(6 * var(--u));border-top:1px solid rgba(127,127,127,.3)}.own-sec h2{margin:calc(14 * var(--u)) 0 2px}.ow-top{display:flex;justify-content:space-between;gap:calc(10 * var(--u));margin:0 0 calc(4 * var(--u));opacity:.8}.ow-st{font-size:var(--fs-3);min-width:6ch;text-align:right}
.ow-f{display:flex;flex-direction:column;gap:calc(4 * var(--u));font-size:var(--fs-3);margin:calc(8 * var(--u)) 0;opacity:.95}.ow-f input{font:inherit;font-size:var(--fs-5);padding:calc(9 * var(--u)) calc(12 * var(--u));border-radius:var(--r-4);border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit}
.ow-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:calc(6 * var(--u)) calc(12 * var(--u));margin:calc(10 * var(--u)) 0}.ow-app{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:var(--fs-5);padding:calc(6 * var(--u)) 2px;cursor:pointer}.ow-app input{width:18px;height:18px;accent-color:#2ecc71}
.ow-row{margin:calc(16 * var(--u)) 0 calc(8 * var(--u))}
.ed-btn{float:right;position:sticky;top:0;z-index:5;border:0;border-radius:var(--r-pill);padding:calc(8 * var(--u)) calc(16 * var(--u));font:inherit;font-weight:var(--fw-b);cursor:pointer;background:var(--primary);color:var(--on-primary);margin:0 0 calc(8 * var(--u)) calc(8 * var(--u));box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ed-card{border:1px solid rgba(127,127,127,.35);border-radius:var(--r-6);padding:calc(6 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));margin:calc(10 * var(--u)) 0}.ed-ctl{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u));margin-top:calc(8 * var(--u))}.ed-ctl button{font:inherit;font-size:var(--fs-3);padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:var(--r-pill);border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit;cursor:pointer}.ed-ctl button:disabled{opacity:.35;cursor:default}.ed-ctl .ed-del{margin-left:auto;color:#d33}
.ed-add{margin:calc(6 * var(--u)) 0}.ed-act{position:sticky;bottom:calc(-12 * var(--u));display:flex;gap:calc(10 * var(--u));justify-content:flex-end;margin:calc(8 * var(--u)) calc(-24 * var(--u)) calc(-12 * var(--u));padding:calc(14 * var(--u)) calc(24 * var(--u));background:var(--surface,#fff);box-shadow:0 -14px 14px -10px var(--surface,#fff)}
.ed textarea,.ed select{font:inherit;font-size:var(--fs-5);padding:calc(9 * var(--u)) calc(12 * var(--u));border-radius:var(--r-4);border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit;width:100%}
.ph-st{font-size:var(--fs-3);opacity:.75}.ph-add{cursor:pointer;padding:calc(9 * var(--u)) calc(16 * var(--u));font-size:var(--fs-4)}.ph-own{gap:calc(8 * var(--u));padding-top:0}.ph-own .ph-cap{flex:1;min-width:0;font:inherit;font-size:var(--fs-5);padding:calc(8 * var(--u)) calc(12 * var(--u));border-radius:var(--r-4);border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit}
.ph-own button{font:inherit;padding:calc(8 * var(--u)) calc(12 * var(--u));border-radius:var(--r-pill);border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit;cursor:pointer}.ph-own button:disabled{opacity:.35;cursor:default}.ph-own .ed-del{color:#d33}
.pcard.hid,.dc-card.hid{position:relative}.pcard>.hid-tag,.dc-card>.hid-tag{position:absolute;top:10px;right:10px}
.mi-card{border:1px solid rgba(127,127,127,.35);border-radius:var(--r-6);padding:calc(12 * var(--u)) calc(14 * var(--u));margin:calc(10 * var(--u)) 0}.mi-card.new{border-color:#2ecc71}.mi-h{display:flex;align-items:baseline;gap:calc(8 * var(--u))}.mi-h small{margin-left:auto;opacity:.65}.mi-new{background:#2ecc71;color:#06361a;border-radius:var(--r-pill);font-size:var(--fs-1);font-weight:var(--fw-b);padding:2px calc(8 * var(--u))}
.mi-m,.mi-o{margin:calc(6 * var(--u)) 0}.mi-m small,.mi-o small{display:block;opacity:.6;font-size:var(--fs-2)}.mi-o{opacity:.85;font-size:var(--fs-4)}.mi-e{margin:calc(4 * var(--u)) 0}.mi-card summary{cursor:pointer;opacity:.75;font-size:var(--fs-4);margin-top:calc(6 * var(--u))}
.ow-fix{margin:0 0 14px;padding:14px 16px;border-radius:var(--r-6);background:color-mix(in srgb,var(--primary) 12%,var(--surface));display:flex;flex-direction:column;gap:6px}.ow-fix ul{margin:0;padding-left:18px;color:var(--ink2);font-size:var(--fs-3)}.ow-fix .btn{align-self:flex-start}
.own-dlg{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:rgba(0,0,0,.35)}
.own-card{background:var(--surface,#fff);color:inherit;border-radius:var(--r-7);padding:calc(22 * var(--u));width:min(320px,90vw);display:flex;flex-direction:column;gap:calc(10 * var(--u));box-shadow:0 20px 60px rgba(0,0,0,.25)}
.own-card input{font:inherit;padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:var(--r-4);border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit}
.own-err{margin:0;font-size:var(--fs-3);min-height:1em;opacity:.8}.own-row{display:flex;justify-content:flex-end;gap:calc(8 * var(--u))}
.dc-vh{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u))}
.own-dot{width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2);flex:none}
.own-dot:active{transform:scale(.92)}
.abar .j-edit,.abar .j-share{border:0;border-radius:var(--r-pill);padding:calc(6 * var(--u)) calc(12 * var(--u));font:inherit;font-size:var(--fs-3);cursor:pointer;background:var(--surface2,#eee);color:inherit;margin-left:calc(6 * var(--u))}
.j-draft{font-style:normal;font-size:var(--fs-2);padding:2px calc(8 * var(--u));border-radius:var(--r-pill);background:var(--c4);color:var(--glyph);margin-right:calc(4 * var(--u))}
.j-ed label{display:flex;flex-direction:column;gap:calc(6 * var(--u));margin:0 0 calc(14 * var(--u));font-size:var(--fs-4);font-weight:var(--fw-m)}
.j-ed label small{font-weight:400;opacity:.65}
.j-ed input,.j-ed textarea{font:inherit;font-weight:400;font-size:var(--fs-5);padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:var(--r-4);border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;resize:vertical}
.j-ed textarea#jeB{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-4);line-height:1.6}
.j-row{display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--u))}
.j-help{font-size:var(--fs-3);opacity:.7;margin:-6px 0 calc(14 * var(--u))}
.j-ed .j-chk{flex-direction:row;align-items:center;font-weight:500}
.j-act{display:flex;gap:calc(8 * var(--u));justify-content:flex-end;flex-wrap:wrap;padding-bottom:calc(8 * var(--u))}
.j-act button{border:0;border-radius:var(--r-pill);padding:calc(9 * var(--u)) calc(16 * var(--u));font:inherit;font-size:var(--fs-4);cursor:pointer;background:var(--surface2,#eee);color:inherit}
.j-act .j-save{background:var(--glyph);color:var(--surface,#fff)}.j-act .j-del{margin-right:auto}
/* icon arranging */
.icons .dicon{touch-action:none;will-change:transform}
.icons .dicon.dragging{z-index:10;cursor:grabbing;transition:none!important}
.icons .dicon.dragging .ico{filter:drop-shadow(0 12px 18px rgba(0,0,0,.22));transform:none!important}
.icons .dicon.dragging .lb{opacity:.6}
.icons.arranging .dicon:not(.dragging) .ico{animation:none}
.icons.arranging .dicon:not(.dragging):hover .ico{transform:none}
.icons .dicon.dropping{z-index:10}
/* window motion */
.win.opening{animation:win-open var(--d-3) var(--ease-spring)}
@keyframes win-open{from{opacity:0;transform:scale(.18)}60%{opacity:1}}
.win.closing{animation:win-close var(--d-2) ease-in forwards;pointer-events:none}
@keyframes win-close{to{opacity:0;transform:scale(.92) translateY(6px)}}
.win.minimizing{animation:win-min var(--d-3) var(--ease) forwards;pointer-events:none}
@keyframes win-min{to{opacity:0;transform:translate(var(--mx),var(--my)) scale(.12)}}
.win.restoring{animation:win-open var(--d-3) var(--ease-spring)}
.win.resizing-anim{transition:left var(--d-3) var(--ease),top var(--d-3) var(--ease),width var(--d-3) var(--ease),height var(--d-3) var(--ease),border-radius var(--d-3)}
#toast{position:absolute;left:50%;bottom:calc(112px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:3500;background:var(--ink);color:var(--surface);font-size:var(--fs-4);font-weight:var(--fw-m);padding:calc(12 * var(--u)) calc(18 * var(--u));border-radius:var(--r-5);box-shadow:var(--shadow);pointer-events:none;transition:opacity var(--d-2),transform var(--d-3) var(--ease-spring)}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){
  .topbar{padding:calc(8 * var(--u)) calc(10 * var(--u));font-size:var(--fs-3)}.topbar .pill{white-space:nowrap}#tDate{display:none}
  .shelf .sbtn:nth-of-type(n+6){display:none}
  .pal .pal-sw{flex-direction:column;height:auto}.pal .sw{flex-direction:row;padding:calc(10 * var(--u)) calc(14 * var(--u));min-height:58px;gap:calc(8 * var(--u))}.pal .sw:hover{flex:1}.pal .sw-aa{font-size:var(--fs-8);flex:1}.pal .sw-aa small{display:inline;margin-left:calc(6 * var(--u))}
  .ftpill{display:none!important}
}
@media (prefers-reduced-motion:reduce){.win.opening,.win.closing,.win.minimizing,.win.restoring{animation-duration:var(--d-1)}}
/* layered icons */
:root{--icbg:#F1F3F4;--ik:#3F3F3F;--igy:#636363}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--icbg:#2E2E2E;--ik:#636363;--igy:#9F9F9F}}
:root[data-theme="dark"]{--icbg:#2E2E2E;--ik:#636363;--igy:#9F9F9F}
.ico.lay .icbg{fill:var(--icbg)}
.ico.lay .art>*{transform-box:fill-box;transform-origin:center;transition:transform var(--d-3) var(--ease-spring)}
.ico.lay:not([data-ic]) .art .flap{transform-origin:50% 100%}
.sbtn .ico.lay{filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}
/* timeline */
.tl{max-width:62ch;margin:0 auto}
.tl h1{margin-bottom:calc(6 * var(--u))}
.tl-h{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:var(--fs-4)!important;font-weight:var(--fw-b);margin:calc(26 * var(--u)) 0 calc(10 * var(--u))!important}
.tl-h span:not(.tl-live){font-size:var(--fs-2);font-weight:var(--fw-b);color:var(--ink2);background:var(--surface2);border-radius:var(--r-pill);padding:2px calc(8 * var(--u))}
.tl-live{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,190,122,.5);animation:tl-pulse 2s infinite}
@keyframes tl-pulse{70%{box-shadow:0 0 0 8px rgba(61,190,122,0)}100%{box-shadow:0 0 0 0 rgba(61,190,122,0)}}
.tl-now{background:var(--surface2);border-radius:var(--r-7);padding:calc(16 * var(--u)) calc(18 * var(--u));margin-bottom:calc(10 * var(--u))}
.tl-now b{display:block;font-size:var(--fs-7);margin:calc(8 * var(--u)) 0 2px}.body .tl-now p{margin:2px 0 0;font-size:var(--fs-5)}
.tl-top{display:flex;justify-content:space-between;align-items:center}.tl-top small,.tl-pc{color:var(--ink2);font-size:var(--fs-3);font-weight:var(--fw-m)}
.tl-tag{font-size:var(--fs-2);font-weight:var(--fw-b);background:color-mix(in srgb,var(--primary) 16%,var(--surface));color:var(--ink);border-radius:var(--r-3);padding:calc(3 * var(--u)) calc(9 * var(--u))}
.tl-bar{height:8px;border-radius:var(--r-3);background:var(--line);margin:calc(14 * var(--u)) 0 calc(6 * var(--u));overflow:hidden}.tl-bar i{display:block;height:100%;border-radius:var(--r-3);background:var(--primary)}
.tl-next{display:flex;gap:calc(12 * var(--u));align-items:flex-start;border:1.5px dashed var(--line);border-radius:var(--r-6);padding:calc(14 * var(--u)) calc(16 * var(--u));margin-bottom:calc(8 * var(--u))}
.tl-next svg{flex:none;width:22px;height:22px;color:var(--ink2);margin-top:1px}
.tl-next b{display:block;font-size:var(--fs-6)}.body .tl-next p{margin:2px 0 calc(4 * var(--u));font-size:var(--fs-4)}.tl-next small{color:var(--ink2);font-size:var(--fs-3);font-weight:var(--fw-m)}
.tl-done{list-style:none;margin:0;padding:0;position:relative}
.tl-done::before{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:2px;background:var(--line)}
.tl-item{display:flex;gap:calc(14 * var(--u));width:100%;text-align:left;border:0;background:none;padding:calc(9 * var(--u)) 0;border-radius:var(--r-5);position:relative}
button.tl-item:hover b{text-decoration:underline;text-underline-offset:3px}
.tl-dot{flex:none;width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;box-shadow:0 0 0 4px var(--surface)}
.tl-dot svg{width:15px;height:15px}
.tl-item small{display:block;color:var(--ink2);font-size:var(--fs-3);font-weight:var(--fw-m)}.tl-item b{display:block;font-size:var(--fs-5);line-height:1.3;margin-top:2px}
.body .tl-item p{margin:2px 0 0;font-size:var(--fs-4)}
/* timeline icon hover */
.ico .g-t1,.ico .g-t2,.ico .g-t3{transform-origin:center}
.dicon:hover .g-t1,.dicon:hover .g-t2,.dicon:hover .g-t3{animation:tl-pop .5s ease-out both}
.dicon:hover .g-t2{animation-delay:.12s}.dicon:hover .g-t3{animation-delay:.24s}
@keyframes tl-pop{40%{transform:scale(1.6)}}
/* messages (Google Messages style) */
.win[data-app="contact"] .body{padding:0;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size}
.cn{display:flex;flex-direction:column;flex:1;min-height:0}
.cn-tabs{flex:none;align-self:flex-start;max-width:calc(100% - 28px);margin:calc(10 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u));overflow-x:auto;scrollbar-width:none}
.cn-tabs button{white-space:nowrap;flex:none}
@container (max-width:440px){.cn-tabs button{padding:calc(8 * var(--u)) calc(11 * var(--u));font-size:var(--fs-3)}}
.cn-pane{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.cn-pane.cn-more{overflow-y:auto;padding:0 calc(18 * var(--u)) calc(18 * var(--u))}
.cn-pane>.gm,.cn-pane>.bk{flex:1;min-height:0;height:auto}
.gm{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.gm-bar{display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(6 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));border-bottom:1px solid var(--line)}
.gm-bar img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#C2FF73}
.gm-who{flex:1;min-width:0;display:flex;flex-direction:column}.gm-who b{font-size:var(--fs-6)}.gm-who small{color:var(--ink2);font-size:var(--fs-3)}
.gm-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}.gm-ic:hover{background:var(--surface2)}.gm-ic svg{width:20px;height:20px}
.gm-list{flex:1;overflow-y:auto;padding:calc(12 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u));display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.gm-day{align-self:center;font-size:var(--fs-2);font-weight:var(--fw-m);color:var(--ink2);margin:calc(4 * var(--u)) 0 calc(10 * var(--u))}
.gm-row{display:flex;align-items:flex-end;gap:calc(8 * var(--u));max-width:86%;animation:gm-in var(--d-3) var(--ease-spring)}
.gm-row.me{align-self:flex-end;flex-direction:row-reverse}
.gm-row.cont{margin-top:-0px}
.gm-av{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;background:#C2FF73}span.gm-av{background:none}
.gm-b{padding:calc(10 * var(--u)) calc(14 * var(--u));font-size:var(--fs-5);line-height:1.4;border-radius:var(--r-6);white-space:pre-wrap;word-break:break-word}
.gm-row.him .gm-b{background:var(--surface2);color:var(--ink);border-bottom-left-radius:var(--r-3)}
.gm-row.me .gm-b{background:color-mix(in srgb,var(--primary) 20%,var(--surface));color:var(--ink);border-bottom-right-radius:var(--r-3)}
.gm-row.him+.gm-row.him .gm-b{border-top-left-radius:var(--r-3)}.gm-row.me+.gm-row.me .gm-b{border-top-right-radius:var(--r-3)}
.gm-meta{font-size:var(--fs-2);color:var(--ink2);margin:calc(3 * var(--u)) 0 calc(10 * var(--u))}.gm-meta.him{padding-left:calc(36 * var(--u))}.gm-meta.me{align-self:flex-end}
.gm-typing{display:flex;gap:calc(4 * var(--u));padding:calc(14 * var(--u)) calc(16 * var(--u))}.gm-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink2);animation:gm-dot 1s ease-in-out infinite}
.gm-typing i:nth-child(2){animation-delay:.15s}.gm-typing i:nth-child(3){animation-delay:.3s}
.gm-comp{display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u))}
.gm-field{flex:1;display:flex;align-items:center;background:var(--surface2);border-radius:var(--r-pill);padding:0 calc(16 * var(--u));min-height:46px}
.gm-field input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs-5);color:var(--ink);outline:none}
.gm-field:focus-within{box-shadow:0 0 0 2px var(--primary)}
.gm-send{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;transition:transform var(--d-2),opacity var(--d-2)}
.gm-send svg{width:20px;height:20px}.gm-send:disabled{opacity:.35}.gm-send:not(:disabled):active{transform:scale(.92)}
@keyframes gm-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes gm-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
/* messages: the contact form and the owner's inbox */
.ct-wrap{gap:calc(8 * var(--u))}
.ct{display:flex;flex-direction:column;gap:2px;background:var(--surface2);border-radius:var(--r-7);padding:calc(6 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));margin:calc(6 * var(--u)) 0 calc(4 * var(--u))}
.ct .ow-f{margin:calc(6 * var(--u)) 0;font-weight:var(--fw-m)}.ct .ow-f small{font-weight:400;color:var(--ink2)}
.ct .ow-f input,.ct .ow-f select,.ct .ow-f textarea{font:inherit;font-size:var(--fs-5);font-weight:400;padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:var(--r-4);border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
.ct .ow-f textarea{resize:vertical;min-height:110px}
.ct .ow-f input:focus,.ct .ow-f select:focus,.ct .ow-f textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:0 calc(12 * var(--u))}.ct-two[hidden]{display:none}
@container (max-width:460px){.ct-two{grid-template-columns:1fr}}
.ct-topic{border:0;padding:0;margin:calc(8 * var(--u)) 0 calc(4 * var(--u))}.ct-topic legend{font-size:var(--fs-3);font-weight:var(--fw-m);padding:0;margin-bottom:calc(6 * var(--u))}
.ct-chips{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u))}
.ct-chip input{position:absolute;opacity:0;pointer-events:none}
.ct-chip span{display:inline-block;padding:calc(7 * var(--u)) calc(14 * var(--u));border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-size:var(--fs-4);font-weight:var(--fw-m);cursor:pointer}
.ct-chip input:checked+span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.ct-chip input:focus-visible+span{box-shadow:0 0 0 2px var(--primary)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ct-err{color:var(--danger,#d93025)!important;margin:calc(4 * var(--u)) 0}
.ct-row{display:flex;gap:calc(8 * var(--u));flex-wrap:wrap;margin:calc(8 * var(--u)) 0}
.ct-link{border:0;background:none;padding:0;font:inherit;color:var(--primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ct-sum{background:var(--surface2);border-radius:var(--r-6);padding:calc(10 * var(--u)) calc(14 * var(--u))}.ct-sum small{color:var(--ink2);font-size:var(--fs-2)}.ct-sum p{margin:calc(4 * var(--u)) 0 0;white-space:pre-wrap;word-break:break-word}
.ct-top{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--u));flex-wrap:wrap;margin-bottom:calc(4 * var(--u))}.ct-top small{color:var(--ink2)}.ct-top .btn{padding:calc(8 * var(--u)) calc(14 * var(--u))}
.ct-card{border:1px solid var(--line);border-radius:var(--r-6);padding:calc(12 * var(--u)) calc(14 * var(--u));background:var(--surface)}.ct-card.new{border-color:#2ecc71}.ct-card.done{opacity:.7}
.ct-h{display:flex;align-items:baseline;gap:calc(8 * var(--u));flex-wrap:wrap}.ct-h small{margin-left:auto;color:var(--ink2)}
.ct-st{background:var(--surface2);border-radius:var(--r-pill);font-size:var(--fs-1);font-weight:var(--fw-b);padding:2px calc(8 * var(--u))}
.ct-msg{white-space:pre-wrap;word-break:break-word;margin:calc(8 * var(--u)) 0;line-height:1.45}
.ct-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:calc(6 * var(--u)) calc(12 * var(--u));margin:calc(8 * var(--u)) 0;font-size:var(--fs-3)}
.ct-dl dt{color:var(--ink2);font-size:var(--fs-2)}.ct-dl dd{margin:0;word-break:break-word}
.ct-card .ed-ctl{display:flex;gap:calc(6 * var(--u));flex-wrap:wrap;align-items:center}.ct-card .ed-ctl .btn{padding:calc(7 * var(--u)) calc(14 * var(--u))}
/* call popover (desktop) */
.gm{position:relative}
.gm-callpop{position:absolute;right:12px;top:64px;z-index:20;width:min(320px,calc(100% - 24px));background:var(--surface);color:var(--ink);border-radius:var(--r-7);padding:calc(18 * var(--u));box-shadow:0 12px 40px rgba(0,0,0,.25);animation:pop var(--d-2) var(--ease-spring)}
.gm-callpop b{font-size:var(--fs-7)}.gm-num{font-size:var(--fs-10);font-weight:var(--fw-b);margin:calc(6 * var(--u)) 0 calc(8 * var(--u));letter-spacing:.3px}
.gm-callpop ol{margin:0 0 calc(12 * var(--u));padding-left:calc(20 * var(--u));font-size:var(--fs-4);line-height:1.5;color:var(--ink2)}
.gm-callbtns{display:flex;gap:calc(8 * var(--u));flex-wrap:wrap}.gm-callpop small{display:block;margin-top:calc(10 * var(--u));color:var(--ink2);font-size:var(--fs-2)}
/* messages icon hover: typing dots */
.ico [class^="g-d"]{transform-box:fill-box}
.dicon:hover .g-d1,.dicon:hover .g-d2,.dicon:hover .g-d3{animation:gm-dot 0.9s ease-in-out infinite}
.dicon:hover .g-d2{animation-delay:.15s}.dicon:hover .g-d3{animation-delay:.3s}
.ico .g-d1,.ico .g-d2,.ico .g-d3{stroke-width:3}
/* links page */
.lkp{max-width:400px;margin:0 auto;padding:calc(10 * var(--u)) 0 calc(8 * var(--u));text-align:center}
.lk-av{width:112px;height:112px;margin:calc(6 * var(--u)) auto calc(12 * var(--u))}
.lkp h1{font-size:var(--fs-10);margin:0}
.body .lk-r{margin:calc(4 * var(--u)) 0 calc(12 * var(--u))}
.lk-s{display:inline-flex;align-items:center;font-size:var(--fs-3);font-weight:var(--fw-m);background:var(--surface2);padding:calc(6 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u));border-radius:var(--r-pill)}
.lk-s .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sdot,var(--ok));margin-right:calc(8 * var(--u));box-shadow:0 0 0 3px color-mix(in srgb,var(--sdot,var(--ok)) 25%,transparent)}
.lk-list{display:flex;flex-direction:column;gap:calc(8 * var(--u));margin-top:calc(8 * var(--u));text-align:left}
.lk-g{font-size:var(--fs-2)!important;font-weight:var(--fw-b);color:var(--ink2);text-transform:uppercase;letter-spacing:.08em;margin:calc(18 * var(--u)) calc(4 * var(--u)) 2px!important}
.lk{display:flex;align-items:center;gap:calc(14 * var(--u));width:100%;border:0;background:var(--surface2);color:var(--ink);text-decoration:none;text-align:left;border-radius:var(--r-7);padding:calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));transition:transform var(--d-3) var(--ease-spring),background var(--d-2)}
.lk:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--ink) 7%,var(--surface2))}
.lk:active{transform:scale(.98)}
.lk-i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;transition:border-radius var(--d-3)}
.lk:hover .lk-i{border-radius:var(--r-5)}
.lk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lk-t b{font-size:var(--fs-6)}.lk-t small{color:var(--ink2);font-size:var(--fs-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-c{flex:none;width:18px;height:18px;color:var(--ink2);transition:transform var(--d-2)}
.lk:hover .lk-c{transform:translate(2px,-2px)}
button.lk:hover .lk-c{transform:translateX(3px)}
.lk.pri{background:var(--primary);color:var(--on-primary)}
.lk.pri small,.lk.pri .lk-c{color:inherit;opacity:.85}
.lk.pri:hover{background:color-mix(in srgb,var(--primary) 88%,#000)}
.lk-share{margin-top:calc(20 * var(--u));border:0;background:none;color:var(--ink2);font-weight:var(--fw-m);font-size:var(--fs-3);text-decoration:underline;text-underline-offset:3px}
/* links icon hover: chain links clip together */
.ico .g-l1{transform:translate(1.5px,-1.5px)}.ico .g-l2{transform:translate(-1.5px,1.5px)}
.dicon:hover .g-l1,.dicon:hover .g-l2{transform:none}
/* guestbook */
.gbf{display:flex;flex-direction:column;gap:calc(10 * var(--u));background:var(--surface2);padding:calc(16 * var(--u));border-radius:var(--r-7);margin:calc(10 * var(--u)) 0 calc(18 * var(--u))}
.gbf input,.gbf textarea{font:inherit;font-size:var(--fs-5);border:0;border-radius:var(--r-5);padding:calc(12 * var(--u)) calc(14 * var(--u));background:var(--surface);color:var(--ink);resize:vertical}
.gb-anon{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:var(--fs-4);color:var(--ink2);cursor:pointer;width:max-content}.gbf .gb-anon input{width:auto;padding:0;accent-color:var(--primary)}.gbf input[hidden]{display:none}
.gbf .r{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));flex-wrap:wrap}
.gbf input,.gbf textarea{box-sizing:border-box;width:100%;max-width:100%}
.gbf .sw{display:flex;flex-direction:row;flex:none;align-items:center;justify-content:flex-start;gap:calc(8 * var(--u));padding:0;background:none;transition:none}.gbf .sw button{flex:none}.gbf .sw:hover{flex:none}
.sw{display:flex;gap:calc(6 * var(--u))}.sw button{width:28px;height:28px;border-radius:50%;border:3px solid transparent}
.sw button.on{border-color:var(--ink)}
.gbl{columns:2 200px;column-gap:calc(12 * var(--u))}
.gbe{break-inside:avoid;margin-bottom:calc(12 * var(--u));border-radius:var(--r-7);padding:calc(14 * var(--u)) calc(16 * var(--u))}
.gbe b{display:block}.gbe small{color:var(--glyph);opacity:.7;font-size:var(--fs-2)}
.gbe p{margin:calc(6 * var(--u)) 0 0;color:var(--glyph)!important;line-height:1.5;white-space:pre-line;word-break:break-word}
.hint{background:var(--surface2);border-radius:var(--r-6);padding:calc(12 * var(--u)) calc(16 * var(--u));font-size:var(--fs-4)}
/* music widget */
.wmusic{display:flex;gap:calc(14 * var(--u));align-items:center}
.art{width:64px;height:64px;flex:none;border-radius:var(--r-6);background:linear-gradient(135deg,var(--c6),var(--c3));display:grid;place-items:center}
.art svg{width:30px;height:30px}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;margin-right:calc(6 * var(--u))}
.eq i{width:3px;background:var(--primary);border-radius:var(--r-1);animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.4s}.eq i:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.mini{display:flex;gap:calc(6 * var(--u));margin-top:calc(10 * var(--u))}
.mini a{font-size:var(--fs-2);font-weight:var(--fw-b);text-decoration:none;padding:calc(6 * var(--u)) calc(10 * var(--u));border-radius:var(--r-pill);background:var(--surface2);color:var(--ink)}
/* context menu */
.ctx{position:absolute;z-index:2000;min-width:220px;background:var(--surface);border-radius:var(--r-6);padding:calc(6 * var(--u));box-shadow:var(--shadow);animation:pop var(--d-1) ease-out}
.ctx[hidden]{display:none}
.ctx button{display:flex;align-items:center;gap:calc(10 * var(--u));width:100%;border:0;background:none;text-align:left;padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:var(--r-5);font-weight:var(--fw-m);font-size:var(--fs-4)}
.ctx button:hover,.ctx button:focus-visible{background:var(--surface2)}
.ctx hr{border:0;border-top:1px solid var(--line);margin:calc(4 * var(--u)) calc(8 * var(--u))}.ctx button.danger{color:var(--danger)}
/* lock screen */
.lock{position:absolute;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10 * var(--u));background:var(--bg);transition:transform .5s var(--ease),opacity .5s;cursor:pointer;text-align:center}
.lock.off{transform:translateY(-100%)!important;opacity:0!important;pointer-events:none}
.lock.swipe{touch-action:none;cursor:default}
.lock.swipe .lh::before{content:"";display:block;width:22px;height:22px;margin:0 auto calc(6 * var(--u));background:currentColor;opacity:.7;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;animation:lkUp 1.6s ease-in-out infinite}
@keyframes lkUp{0%,100%{transform:translateY(4px);opacity:.3}50%{transform:translateY(-4px);opacity:.9}}
.lock.nudge{animation:lkNudge .5s ease}
/* lock screen: a soft living backdrop, big gradient clock, ringed portrait */
.lock{background:linear-gradient(180deg,color-mix(in srgb,var(--w3) 62%,var(--bg)),var(--bg));overflow:hidden;isolation:isolate}
.lk-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lk-art i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;animation:lkOrb 18s ease-in-out infinite alternate}
.lk-art i:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:var(--w1)}
.lk-art i:nth-child(2){width:40vmax;height:40vmax;right:-12vmax;top:18%;background:var(--w2);animation-duration:23s;animation-delay:-6s}
.lk-art i:nth-child(3){width:36vmax;height:36vmax;left:22%;bottom:-18vmax;background:var(--w4);animation-duration:27s;animation-delay:-11s}
@keyframes lkOrb{to{transform:translate(6vmax,-4vmax) scale(1.18)}}
.lock .lg{font-size:var(--fs-4);font-weight:var(--fw-b);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);opacity:.9}
.lock .lt{font-weight:var(--fw-x);letter-spacing:-.06em;background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--primary) 70%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 8px 30px color-mix(in srgb,var(--primary) 22%,transparent))}
.lock .ld{letter-spacing:.02em}
.lock .lav{position:relative;display:grid;place-items:center;margin-top:calc(34 * var(--u));width:88px;height:88px;border-radius:50%;background:conic-gradient(from 0deg,var(--primary),var(--w2),var(--w4),var(--w1),var(--primary));animation:spin 14s linear infinite}
.lock .lav img{margin:0;width:80px;height:80px;border:4px solid var(--bg);animation:spin 14s linear infinite reverse;box-sizing:border-box}
.lock button.lh{margin-top:calc(14 * var(--u));padding:calc(10 * var(--u)) calc(22 * var(--u));border-radius:var(--r-pill);background:var(--surface);box-shadow:0 4px 18px rgba(0,0,0,.08);color:var(--ink);font-weight:var(--fw-m)}
.lock::after{content:"";position:absolute;left:50%;bottom:14px;width:120px;height:5px;margin-left:-60px;border-radius:3px;background:var(--ink);opacity:.28}
/* the clock is painted with a gradient: give the glyphs room so nothing is clipped */
.lock .lt{line-height:1!important;padding:.06em .09em .04em;margin:-.06em -.09em -.04em;white-space:nowrap}
.lock .lk-card,.lock .lk-who{display:contents}
/* lock screen styles (Settings > Lock screen): classic, stack, expressive, gemini, glass, minimal */
.lock[data-ls=stack]{align-items:flex-start;justify-content:flex-end;text-align:left;padding:0 7vw 11vh}
.lock[data-ls=stack] .lk-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lock[data-ls=stack] .lt{display:flex;flex-direction:column;font-size:clamp(120px,24vh,280px)!important;line-height:.88!important;letter-spacing:-.04em}
.lock[data-ls=stack] .lkc{display:none}.lock[data-ls=stack] .lkm{-webkit-text-fill-color:color-mix(in srgb,var(--primary) 75%,var(--ink));color:color-mix(in srgb,var(--primary) 75%,var(--ink))}
.lock[data-ls=stack] .lk-who{display:flex;align-items:center;gap:12px;margin-top:18px}.lock[data-ls=stack] .lav{margin:0;width:56px;height:56px}.lock[data-ls=stack] .lav img{width:50px;height:50px;border-width:3px}
.lock[data-ls=stack] button.lh{margin-top:4px;padding-left:0}.lock[data-ls=stack] .lmsg{padding:0}
.lock[data-ls=glass] .lk-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 46px 26px;border-radius:40px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.18)}
.lock[data-ls=glass] .lt{font-size:clamp(76px,13vw,140px)!important}.lock[data-ls=glass] .lk-who{display:flex;flex-direction:column;align-items:center;gap:6px}.lock[data-ls=glass] .lav{margin-top:14px}
/* Expressive (Material 3): the hours and minutes sit in big rounded tonal shapes */
.lock[data-ls=expressive] .lt{display:flex;gap:.12em;background:none;-webkit-text-fill-color:currentColor;filter:none;font-size:clamp(84px,15vw,170px)!important;letter-spacing:-.03em}
.lock[data-ls=expressive] .lkc{display:none}
.lock[data-ls=expressive] .lkh,.lock[data-ls=expressive] .lkm{display:inline-grid;place-items:center;padding:.06em .2em .1em;border-radius:.48em;line-height:1}
.lock[data-ls=expressive] .lkh{background:#D3E3FD;color:#0B57D0;border-radius:.62em .3em .62em .3em}.lock[data-ls=expressive] .lkm{background:#FFD8E4;color:#B3261E;border-radius:.3em .62em .3em .62em}
:root[data-theme="dark"] .lock[data-ls=expressive] .lkh{background:#0842A0;color:#D3E3FD}:root[data-theme="dark"] .lock[data-ls=expressive] .lkm{background:#8C1D18;color:#FFD8E4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lock[data-ls=expressive] .lkh{background:#0842A0;color:#D3E3FD}:root:not([data-theme="light"]) .lock[data-ls=expressive] .lkm{background:#8C1D18;color:#FFD8E4}}
/* Gemini: the clock in Gemini's gradient, with the sparkle */
.lock[data-ls=gemini] .lt{background:linear-gradient(100deg,#4285F4 10%,#9B72CB 55%,#D96570 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 10px 40px rgba(155,114,203,.35));font-weight:600;letter-spacing:-.03em}
.lock[data-ls=gemini] .lg::before{content:"";display:block;width:26px;height:26px;margin:0 auto 10px;background:linear-gradient(135deg,#4285F4,#9B72CB,#D96570);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C50 28 72 50 100 50 72 50 50 72 50 100 50 72 28 50 0 50 28 50 50 28 50 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C50 28 72 50 100 50 72 50 50 72 50 100 50 72 28 50 0 50 28 50 50 28 50 0Z'/%3E%3C/svg%3E") center/contain no-repeat;animation:spin 12s linear infinite}
.lock[data-ls=gemini] .lk-art i:nth-child(1){background:#4285F4}.lock[data-ls=gemini] .lk-art i:nth-child(2){background:#9B72CB}.lock[data-ls=gemini] .lk-art i:nth-child(3){background:#D96570}.lock[data-ls=gemini] .lk-art i{opacity:.45}
.lock[data-ls=minimal]{background:color-mix(in srgb,var(--bg) 88%,transparent)}.lock[data-ls=minimal] .lk-art{display:none}
.lock[data-ls=minimal] .lt{font-weight:300!important;letter-spacing:-.03em;font-size:clamp(84px,15vw,160px)!important;background:none;-webkit-text-fill-color:var(--ink);filter:none}
.lock[data-ls=minimal] .lg{letter-spacing:.32em;font-weight:500}.lock[data-ls=minimal] .lav{background:none;animation:none}.lock[data-ls=minimal] .lav img{animation:none;border-color:transparent}
@media (max-width:760px){.lock[data-ls=stack]{padding:0 7vw 16vh}.lock[data-ls=glass] .lk-card{padding:28px 26px 22px;margin:0 16px}}
#desk[data-motion="off"] .lock *{animation:none!important}
/* lock screen picker in Settings: a small sample of each style */
.ls-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:10px}
.lsp{border:0;padding:0;background:none;color:var(--ink);font:inherit;display:flex;flex-direction:column;gap:6px;cursor:pointer;text-align:center}
.lsp .lsp-v{position:relative;height:84px;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(140deg,var(--w1),var(--w3) 55%,var(--w2));outline:2px solid transparent;outline-offset:2px}
.lsp.on .lsp-v{outline-color:var(--primary)}.lsp .lb{font-size:var(--fs-3);font-weight:var(--fw-m)}
.lsp i{font-style:normal;font-size:7px;color:var(--ink2);letter-spacing:.06em}.lsp i.g{text-transform:uppercase;letter-spacing:.2em;font-weight:700}
.lsp b{font-size:30px;line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--ink);display:flex}.lsp em{font-style:normal}
.lsp-stack .lsp-v{align-items:flex-start;justify-content:flex-end;padding:0 0 8px 12px}.lsp-stack b{flex-direction:column;font-size:24px;line-height:.85}.lsp-stack em,.lsp-stack i{display:none}.lsp-stack b span:last-child{color:var(--primary)}
.lsp-glass b{font-size:24px}.lsp-glass .lsp-v::before{content:"";position:absolute;inset:12px 20px;border-radius:12px;background:var(--surface);border:1px solid var(--line);z-index:0}.lsp-glass .lsp-v>*{position:relative}
.lsp-expressive b{gap:3px;font-size:24px}.lsp-expressive em{display:none}.lsp-expressive b span{padding:1px 5px 2px;border-radius:9px 4px 9px 4px;background:#D3E3FD;color:#0B57D0}.lsp-expressive b span:last-child{background:#FFD8E4;color:#B3261E;border-radius:4px 9px 4px 9px}
.lsp-gemini .lsp-v{background:radial-gradient(60% 70% at 20% 20%,rgba(66,133,244,.35),transparent),radial-gradient(60% 70% at 85% 80%,rgba(217,101,112,.35),transparent),#F7F7F7}.lsp-gemini b{font-weight:600;background:linear-gradient(100deg,#4285F4,#9B72CB,#D96570);-webkit-background-clip:text;background-clip:text;color:transparent}
.lsp-minimal .lsp-v{background:var(--surface2)}.lsp-minimal b{font-weight:300}
@media (prefers-reduced-motion:reduce){.lock *{animation:none!important}}

@keyframes lkNudge{0%,100%{transform:none}40%{transform:translateY(-26px)}}
.lock .lt{font-size:clamp(88px,18vw,180px);font-weight:var(--fw-x);letter-spacing:-.05em;line-height:.9}
.lock .ld{font-size:var(--fs-8);font-weight:var(--fw-m);color:var(--ink2)}
.lock img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-top:calc(36 * var(--u))}
.lock .ln{font-weight:var(--fw-b);font-size:var(--fs-7)}
.lock button.lh{background:none;border:0;font:inherit;font-size:var(--fs-4);padding:calc(6 * var(--u)) calc(12 * var(--u))}
.lock .lfs{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.12);touch-action:manipulation}
.lock .lfs svg{width:20px;height:20px}
.lock .lmsg{max-width:300px;min-height:18px;font-size:var(--fs-3);color:var(--ink2);line-height:1.4;padding:0 calc(16 * var(--u))}
.lock .lh{color:var(--ink2);font-size:var(--fs-4);margin-top:calc(6 * var(--u));animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.4}}
.topbtn{border:0;font-weight:var(--fw-m)}
.lhead{display:flex;align-items:center;gap:calc(14 * var(--u));margin-bottom:calc(14 * var(--u))}
.lhead img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.lhead div{flex:1}.lhead h2,.lhead .sub{margin:0}

@media (max-width:760px){
  .widgets{display:none}
  .award{top:auto;left:18px;bottom:calc(30px + env(safe-area-inset-bottom,0px));width:50px;transform:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
  .award:hover{transform:none}
  @media (max-height:700px){.award{bottom:calc(10px + env(safe-area-inset-bottom,0px));left:12px;width:40px}}
  .icons{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;left:12px;right:12px;bottom:auto}
  .win{left:8px!important;top:48px!important;width:calc(100% - 16px)!important;height:calc(100% - 140px)!important;min-width:0;border-radius:var(--r-7)}
  .bar{cursor:default}
  .wb.mx{display:none}
  .rz{display:none}
  .gbl{columns:1}.avwrap{width:110px;height:110px}
  .fm{flex-direction:column}.side{width:auto;flex-direction:row;overflow-x:auto}
  .sbtn .ico{width:40px;height:40px}.launch{width:38px;height:38px;margin:calc(5 * var(--u))}
  .shelf{gap:2px;height:auto}
  .body h1{font-size:var(--fs-10)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:760px){.cat{width:112px;height:112px;bottom:92px}.jar{right:140px;bottom:96px;width:36px;height:44px}}
@media (prefers-reduced-motion:reduce){.cat *{animation:none!important}}
.avwrap.pop{height:auto!important;aspect-ratio:1555/2128}
.avwrap.av-shape img{display:block;width:100%;height:100%;object-fit:cover;background:#C2FF73}
.avwrap.av-circle img{border-radius:50%}.avwrap.av-square img{border-radius:24%}
.avwrap.pop .avpop{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.10))}
.lk-av.pop{width:120px}
.dc{padding:2px 2px calc(8 * var(--u))}.dc h1{margin:calc(4 * var(--u)) 0 calc(4 * var(--u))}.dc h2{margin:calc(6 * var(--u)) 0 2px;font-size:var(--fs-9);font-weight:var(--fw-x)}
.dc-sub{margin:0 0 calc(14 * var(--u));color:var(--ink2);font-size:var(--fs-4);line-height:1.5}
.dc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:calc(12 * var(--u));margin-bottom:calc(6 * var(--u))}
.dc-card{background:var(--surface2);border-radius:var(--r-7);padding:calc(14 * var(--u));display:flex;flex-direction:column;gap:calc(12 * var(--u));align-items:center;text-align:center}
.dc-qr{width:100%;max-width:170px;aspect-ratio:1;border-radius:var(--r-5);overflow:hidden;background:#fff}.dc-qr svg{display:block;width:100%;height:100%}
.dc-empty{display:grid;place-items:center;font-weight:var(--fw-x);font-size:var(--fs-10);color:var(--ink2);background:transparent;border:2px dashed var(--line)}
.dc-off{opacity:.7}
.dc-meta{display:flex;flex-direction:column;gap:2px}.dc-meta b{font-size:var(--fs-5)}.dc-meta small{color:var(--ink2)}
.dc-open{margin-top:calc(8 * var(--u));display:inline-block;background:var(--primary);color:var(--on-primary);border-radius:var(--r-pill);padding:calc(8 * var(--u)) calc(16 * var(--u));font-weight:var(--fw-b);font-size:var(--fs-3);text-decoration:none}
.dc-vault{width:100%;display:flex;align-items:center;gap:calc(14 * var(--u));border:0;background:var(--surface2);border-radius:var(--r-7);padding:calc(14 * var(--u)) calc(16 * var(--u));text-align:left;color:var(--ink)}
.dc-vi{width:44px;height:44px;border-radius:50%;background:var(--c4);display:grid;place-items:center;flex:none}
.dc-pad{display:flex;flex-direction:column;align-items:center;text-align:center}.dc-pad .dc-back{align-self:flex-start}
.dc-back,.dc-lockb{border:0;background:var(--surface2);color:var(--ink);border-radius:var(--r-pill);padding:calc(8 * var(--u)) calc(14 * var(--u));font-weight:var(--fw-m);font-size:var(--fs-3)}
.dc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(6 * var(--u))}.dc-lockb{display:inline-flex;gap:calc(6 * var(--u));align-items:center}
.dc-lk{width:60px;height:60px;border-radius:50%;background:var(--c4);display:grid;place-items:center;margin:calc(8 * var(--u)) 0 calc(4 * var(--u))}
.dc-dots{display:flex;gap:calc(14 * var(--u));margin:calc(6 * var(--u)) 0 calc(18 * var(--u))}.dc-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink2);transition:background var(--d-1)}
.dc-dots i.on{background:var(--ink);border-color:var(--ink)}.dc-dots.bad{animation:dcshake var(--d-3)}.dc-dots.bad i{border-color:var(--danger);background:var(--danger)}
@keyframes dcshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.dc-keys{display:grid;grid-template-columns:repeat(3,72px);gap:calc(12 * var(--u));justify-content:center}
.dc-keys button{width:72px;height:72px;border-radius:50%;border:0;background:var(--surface2);color:var(--ink);font-size:var(--fs-9);font-weight:var(--fw-b);touch-action:manipulation}.dc-keys button:active{background:var(--line)}
.dc-notes{display:flex;flex-direction:column;gap:calc(10 * var(--u))}.dc-note{background:var(--surface2);border-radius:var(--r-6);padding:calc(14 * var(--u)) calc(16 * var(--u))}.dc-note b{display:block;margin-bottom:calc(4 * var(--u))}.dc-note p{margin:0;white-space:pre-wrap;line-height:1.5;color:var(--ink2);font-size:var(--fs-4)}
.dc-del{margin-top:calc(8 * var(--u));border:0;background:none;color:var(--danger);font-weight:var(--fw-b);font-size:var(--fs-3);padding:0}
.dc-add{display:flex;flex-direction:column;gap:calc(8 * var(--u));margin-bottom:calc(10 * var(--u))}.dc-add input,.dc-add textarea{border:0;background:var(--surface2);border-radius:var(--r-5);padding:calc(12 * var(--u)) calc(14 * var(--u));font:inherit;font-size:var(--fs-6);color:var(--ink);resize:vertical}
.dc-newnote{border:0;background:var(--primary);color:var(--on-primary);border-radius:var(--r-pill);padding:calc(10 * var(--u)) calc(18 * var(--u));font-weight:var(--fw-b);cursor:pointer;margin-bottom:calc(6 * var(--u))}.vn{display:flex;flex-direction:column;gap:calc(10 * var(--u));background:var(--surface2);border-radius:var(--r-6);padding:calc(12 * var(--u)) calc(14 * var(--u))}.vn-t{border:0;background:var(--surface);border-radius:var(--r-5);padding:calc(12 * var(--u)) calc(14 * var(--u));font:inherit;font-size:var(--fs-6);font-weight:var(--fw-b);color:var(--ink)}.vn-b{background:var(--surface);border-radius:var(--r-5);padding:calc(10 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u));min-height:140px}
.dc-meter{display:flex;gap:calc(4 * var(--u));margin:-2px 0}.dc-meter i{flex:1;height:5px;border-radius:var(--r-2);background:var(--line)}.dc-meter i.l1{background:var(--danger)}.dc-meter i.l2{background:#F5A524}.dc-meter i.l3,.dc-meter i.l4{background:var(--ok)}
.dc-file{display:inline-block;cursor:pointer;border-radius:var(--r-pill);padding:calc(10 * var(--u)) calc(18 * var(--u));font-weight:var(--fw-b);background:var(--surface2);color:var(--ink)}.dc-pw .dc-lk{display:grid;place-items:center;margin:calc(8 * var(--u)) 0}.dc-pw h2{margin:calc(6 * var(--u)) 0 calc(4 * var(--u))}
.dc-add button{align-self:flex-start;border:0;background:var(--primary);color:var(--on-primary);border-radius:var(--r-pill);padding:calc(10 * var(--u)) calc(18 * var(--u));font-weight:var(--fw-b)}
.dc-badge{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));color:#fff;font-weight:var(--fw-b);font-size:var(--fs-4);border-radius:var(--r-pill);padding:calc(7 * var(--u)) calc(12 * var(--u))}
.dc-bi{width:20px;height:20px;display:inline-grid;place-items:center}.dc-bi svg{width:100%;height:100%}
button.dc-qr{position:relative;border:0;padding:0;cursor:zoom-in;box-shadow:0 0 0 1px var(--line);touch-action:manipulation}
.dc-zoom{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.62);color:#fff;font-size:var(--fs-1);font-weight:var(--fw-m);padding:calc(4 * var(--u)) 0;opacity:0;transition:opacity var(--d-2)}
.dc-qr:hover .dc-zoom,.dc-qr:focus-visible .dc-zoom{opacity:1}
@media (hover:none){.dc-zoom{opacity:1}}
.qrbig{position:absolute;inset:0;z-index:1500;display:grid;place-items:center;padding:calc(12 * var(--u));background:rgba(10,12,11,.72);animation:qbin var(--d-2) ease-out;overflow:auto}
.qrbig.out{opacity:0;transition:opacity var(--d-2)}
@keyframes qbin{from{opacity:0}}
.qb-card{width:min(400px,100%);background:#fff;color:#161816;border-radius:var(--r-9);overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 calc(16 * var(--u));box-shadow:0 20px 60px rgba(0,0,0,.35);animation:qbpop var(--d-3) var(--ease-spring)}
@keyframes qbpop{from{transform:scale(.92);opacity:0}}
.qb-head{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));color:#fff;font-weight:var(--fw-x);font-size:var(--fs-8);padding:calc(16 * var(--u))}
.qb-ico{width:30px;height:30px;display:inline-grid;place-items:center}.qb-ico svg{width:100%;height:100%}
.qb-qr{width:min(76vw,52vh,330px);aspect-ratio:1;margin:calc(16 * var(--u)) auto calc(8 * var(--u))}.qb-qr svg{display:block;width:100%;height:100%}
.qb-who{display:flex;flex-direction:column;gap:1px;margin-top:calc(4 * var(--u))}.qb-who b{font-size:var(--fs-7)}.qb-who span{font-size:var(--fs-3);color:#5F5F5F}
.qb-handle{margin-top:calc(8 * var(--u));font-weight:var(--fw-b);font-size:var(--fs-5)}
.qb-url{margin-top:2px;font-size:var(--fs-2);color:#5F5F5F;word-break:break-all;padding:0 calc(18 * var(--u))}
.qb-hint{margin:calc(8 * var(--u)) 0 calc(6 * var(--u));font-size:var(--fs-3);color:#5F5F5F}
.qb-nav{display:flex;align-items:center;gap:calc(14 * var(--u));margin:calc(4 * var(--u)) 0 calc(10 * var(--u));font-size:var(--fs-3);color:#5F5F5F}
.qb-nav button{width:40px;height:40px;border-radius:50%;border:0;background:#eef1ee;color:#161816;font-size:var(--fs-9);line-height:1}
.qb-x{border:0;background:#161816;color:#fff;border-radius:var(--r-pill);padding:calc(10 * var(--u)) calc(26 * var(--u));font-weight:var(--fw-b);font-size:var(--fs-4)}
.ct h1{margin:calc(4 * var(--u)) 0 calc(4 * var(--u))}
.ct-tabs{display:flex;gap:calc(8 * var(--u));margin:2px 0 calc(14 * var(--u));flex-wrap:wrap}
.ct-tabs button{display:inline-flex;align-items:center;gap:calc(8 * var(--u));border:0;background:var(--surface2);color:var(--ink);border-radius:var(--r-pill);padding:calc(7 * var(--u)) calc(14 * var(--u)) calc(7 * var(--u)) calc(8 * var(--u));font-weight:var(--fw-b);font-size:var(--fs-4)}
.ct-tabs button.on{background:var(--ink);color:var(--surface)}
.ct-ti{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;padding:calc(4 * var(--u))}.ct-ti svg{width:100%;height:100%}
.ct-empty{background:var(--surface2);border-radius:var(--r-7);padding:calc(26 * var(--u)) calc(20 * var(--u));text-align:center;display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u))}
.ct-eb{width:64px;height:64px;border-radius:var(--r-6);display:grid;place-items:center;padding:calc(14 * var(--u));margin-bottom:calc(6 * var(--u))}.ct-eb span{display:block;width:100%;height:100%}.ct-eb svg{width:100%;height:100%}
.ct-empty p{margin:0;max-width:34ch;color:var(--ink2);font-size:var(--fs-4);line-height:1.5}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:calc(12 * var(--u))}
.ct-card{display:flex;flex-direction:column;gap:calc(6 * var(--u));background:var(--surface2);border-radius:var(--r-7);padding:calc(10 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));text-decoration:none;color:var(--ink)}
.ct-th{position:relative;aspect-ratio:16/9;border-radius:var(--r-5);background-size:cover;background-position:center;display:grid;place-items:center;overflow:hidden}
.ct-ph{width:34px;height:34px;opacity:.9}.ct-ph svg{width:100%;height:100%}
.ct-play{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:var(--fs-1);padding-left:2px}
.ct-card b{font-size:var(--fs-5);line-height:1.3;padding:0 calc(4 * var(--u))}.ct-card small{color:var(--ink2);padding:0 calc(4 * var(--u))}.ct-w{font-size:var(--fs-3);font-weight:var(--fw-b);color:var(--primary);padding:0 calc(4 * var(--u))}
.ct-ch{margin-top:calc(16 * var(--u))}
/* phone: auto-hiding dock */
@media (max-width:760px){
  .launcher{display:flex;flex-direction:column;max-height:calc(100% - 160px);overflow:hidden}
  .launcher .lgrid{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;-webkit-overflow-scrolling:touch}
  .launcher .search{flex:none}
  .launcher.kb{position:fixed;bottom:auto;max-height:none;padding:calc(16 * var(--u));border-radius:var(--r-7)}
  .launcher.kb .lhead{display:none}
  .launcher.kb .search{margin-bottom:calc(12 * var(--u))}
}
.launcher[hidden]{display:none!important}

.dock-handle{display:none}
@media (max-width:760px){
  .shelf{transition:transform var(--d-3) var(--ease),opacity var(--d-3),padding var(--d-3)}
  html.dock-auto .shelf{transform:translate(-50%,calc(100% + 30px));opacity:0;pointer-events:none}
  html.dock-auto .win,html.dock-peek .win{height:calc(100% - 48px - 34px - env(safe-area-inset-bottom,0px))!important}
  .dock-handle{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:160px;height:calc(32px + env(safe-area-inset-bottom,0px));padding:0 0 env(safe-area-inset-bottom,0px);border:0;background:none;z-index:960;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
  html.dock-auto .dock-handle{display:block}
  .dock-handle span{display:block;width:72px;height:5px;margin:0 auto;border-radius:var(--r-pill);background:var(--ink);opacity:.4}
}

/* plant shelf */
.shelfw{position:relative;width:260px;align-self:flex-end;margin-top:calc(4 * var(--u))}
.shelfw svg{width:100%;display:block;overflow:visible}
@media (max-height:880px){.shelfw{display:none}}
.shelfw .plank{fill:#C89B6E}
.shelfw .plank-shadow{fill:rgba(0,0,0,.12)}
.shelfw .bracket{fill:#A57A52}
.shelfw .pot,.shelfw .rim{stroke:none}
.shelfw .terra{fill:#D9774B}.shelfw .terra-d{fill:#C4623A}.shelfw .cream{fill:#EFEFEF}.shelfw .cream-d{fill:#E3DCCF}.shelfw .teal{fill:#5AA9A0}.shelfw .teal-d{fill:#428F86}
.shelfw .lf{fill:#3C9A5F}
.shelfw .l-b,.shelfw .l-d{fill:#4CAF6E}
.shelfw .slit{stroke:#F0F0F0;stroke-width:1.6;stroke-linecap:round;fill:none}
.shelfw .cac{fill:#6BAF6B}.shelfw .arm-o{display:none}.shelfw .arm{fill:none;stroke:#6BAF6B;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.shelfw .spines{stroke:#F0F0F0;stroke-width:1.4;stroke-linecap:round}
.shelfw .lf2,.shelfw .vl{fill:#58B368}.shelfw .lf2:nth-child(2n){fill:#4AA35C}
.shelfw .vine{fill:none;stroke:#3C8A4E;stroke-width:2.2;stroke-linecap:round}
.shelfw .plant{cursor:pointer;outline:none}
.shelfw .plant:focus-visible .pot{filter:drop-shadow(0 0 3px var(--primary))}
.shelfw .leaves{transform-box:view-box;--gs:1;animation:pl-sway 5s ease-in-out infinite}
.shelfw [data-p="spike"] .leaves{animation-duration:7s}.shelfw [data-p="pete"] .leaves{animation-delay:-2s}
.shelfw .plant:hover .leaves{animation-duration:1.4s}
.shelfw .plant[data-g="1"] .leaves{--gs:1.06}.shelfw .plant[data-g="2"] .leaves{--gs:1.12}.shelfw .plant[data-g="3"] .leaves{--gs:1.18}
.shelfw .plant[data-g="0"] .g1,.shelfw .plant[data-g="0"] .g2,.shelfw .plant[data-g="0"] .g3,.shelfw .plant[data-g="1"] .g2,.shelfw .plant[data-g="1"] .g3,.shelfw .plant[data-g="2"] .g3{display:none}
.shelfw .vines[data-g="0"] .v2,.shelfw .vines[data-g="0"] .g2,.shelfw .vines[data-g="0"] .v1,.shelfw .vines[data-g="1"] .v2,.shelfw .vines[data-g="1"] .g2{display:none}
.shelfw .vines{animation:pl-vine 6s ease-in-out infinite;transform-origin:206px 132px;transform-box:view-box}
@keyframes pl-sway{0%,100%{transform:scale(var(--gs)) rotate(-1.6deg)}50%{transform:scale(var(--gs)) rotate(1.6deg)}}
@keyframes pl-vine{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.2deg)}}
.shelfw .plant{transform-box:view-box;transition:transform var(--d-3)}
.shelfw .plant.grow{animation:pl-grow .6s var(--ease-spring)}
.shelfw .plant.shake{animation:pl-shake var(--d-3) ease-in-out}
.shelfw [data-p="monty"]{transform-origin:52px 126px}.shelfw [data-p="spike"]{transform-origin:130px 126px}.shelfw [data-p="pete"]{transform-origin:206px 126px}
@keyframes pl-grow{40%{transform:scale(1.1,.94)}70%{transform:scale(.97,1.05)}}
@keyframes pl-shake{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.shelfw .can{transition:opacity var(--d-3)}
.shelfw .drop{fill:#6FB6F2;animation:pl-drop .5s ease-in infinite}
@keyframes pl-drop{from{transform:translateY(0);opacity:1}to{transform:translateY(58px);opacity:0}}
.plant-bub{position:absolute;top:-6px;transform:translateX(-50%);background:var(--surface);color:var(--ink);font-size:var(--fs-3);font-weight:var(--fw-b);padding:calc(5 * var(--u)) calc(10 * var(--u));border-radius:var(--r-4);box-shadow:0 4px 14px rgba(0,0,0,.15);white-space:nowrap;pointer-events:none}
.plant-bub.show{animation:pop var(--d-3) var(--ease-spring)}
:root[data-theme="dark"] .shelfw .plank{fill:#8A6446}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shelfw .plank{fill:#8A6446}}
/* boot */
#boot{position:fixed;inset:0;z-index:6000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6 * var(--u));transition:opacity .6s ease,transform .6s ease}
#boot.out{opacity:0;transform:scale(1.04);pointer-events:none}
.bt-mark{position:relative;width:120px;height:120px;margin-bottom:calc(16 * var(--u));animation:bt-in .7s var(--ease-spring)}
.bt-mark svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 8s linear infinite}.bt-mark svg path{fill:#C2FF73}
.bt-mark img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);border-radius:50%;object-fit:cover}
.bt-name{font-size:var(--fs-10);font-weight:var(--fw-x);letter-spacing:-.02em;animation:bt-up .6s var(--d-2) both var(--ease)}
.bt-role{color:var(--ink2);font-weight:var(--fw-m);animation:bt-up .6s var(--d-3) both var(--ease)}
.bt-bar{width:160px;height:4px;border-radius:var(--r-2);background:var(--line);margin-top:calc(22 * var(--u));overflow:hidden}.bt-bar i{display:block;height:100%;width:0;background:var(--primary);border-radius:var(--r-2);animation:bt-load 1.3s var(--ease) forwards}
@keyframes bt-in{from{transform:scale(.4) rotate(-40deg);opacity:0}}
@keyframes bt-up{from{transform:translateY(14px);opacity:0}}
@keyframes bt-load{to{width:100%}}
@media (prefers-reduced-motion:reduce){#boot{display:none}}