/* ---- Candy multi: colour lives only on plates (crisp gradient + fine white grain, plate.js). Text, buttons and cards stay black and white.
   Plates: radius 8, no blur, no shadow. A white card hangs over a plate edge; the plate bleeds to the wrapper edge on its outer side. ---- */
:root{--c-pink:#FF5C93;--c-lilac:#B69CFF;--c-mint:#4FE3C1;--c-lemon:#FFE066;--c-orange:#FFA94F;--c-sky:#7CC8FF;--c-peach:#FFD3A8;--c-rose:#FFB3C8;
  --bleed:max(16px,env(safe-area-inset-right,0px),calc((100vw - 1280px)/2))}
.plate{position:absolute;border-radius:8px;overflow:hidden;z-index:0;pointer-events:none;translate:0 var(--py,0px)}
.plate svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pz{position:relative}
.pz>:not(.plate){position:relative;z-index:1}
.moc,.pz .pebble{display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* ================= home ================= */
/* hero: big plate on the right bleeding to the frame, chat card hangs over its left edge, Mocci sits on its top corner */
.hero>.stage{display:block!important;height:520px!important;padding:0!important;perspective:none}
.hero>.stage::before{display:none}
.hero .stage>.plate{top:0;bottom:0;left:22%;right:calc(1px - var(--inset));border-radius:8px 0 0 8px}
.hero .stage>.tilt{position:absolute!important;top:12px;right:16px;width:200px!important;z-index:2}
.hero .stage>.chat{position:absolute!important;left:0!important;bottom:40px!important;width:min(88%,340px)!important;z-index:3}
@media (max-width:900px){
  .hero>.stage{height:460px!important;margin-top:24px}
  .hero .stage>.plate{left:12%;right:-19px;top:20px;bottom:0}
  .hero .stage>.tilt{top:0;right:4px;width:132px!important}
  .hero .stage>.chat{bottom:20px!important;width:calc(100% - 16px)!important}
}

/* feature panels: plate bleeds to the outer side and the bottom line; the card hangs over the plate's inner edge */
.panel{align-items:stretch}
.panel>.tx{align-self:center}
.art{position:relative;justify-content:center!important;gap:16px!important;padding:24px 0 8px;min-height:420px}
.art>.plate{top:0;bottom:-48px;left:72px;right:calc(1px - var(--inset));border-radius:8px 0 0 0}
.panel.rev .art>.plate{left:calc(1px - var(--inset));right:72px;border-radius:0 8px 0 0}
.art>.pebble{width:128px!important;align-self:flex-end!important;margin-right:24px}
.panel.rev .art>.pebble{align-self:flex-start!important;margin:0 0 0 24px}
html .art>.card{width:min(360px,84%)!important;align-self:flex-start;z-index:2}
html .panel.rev .art>.card{align-self:flex-end}
@media (max-width:900px){
  .panel>.tx{align-self:auto}
  .art{min-height:0;padding:32px 0 0;margin-top:8px}
  .art>.plate{left:28px;right:-19px}
  .panel.rev .art>.plate{left:-19px;right:28px}
  .art>.pebble{width:96px!important;margin-right:12px}
  .panel.rev .art>.pebble{margin-left:12px}
  html .art>.card{width:calc(100% - 28px)!important}
}

/* app strip: tiles become small plates with black letters */
html .mq .app i{color:#0a0a0a}
html .mq .app:nth-child(8n+1) i{background:var(--c-pink)}
html .mq .app:nth-child(8n+2) i{background:var(--c-lilac)}
html .mq .app:nth-child(8n+3) i{background:var(--c-mint)}
html .mq .app:nth-child(8n+4) i{background:var(--c-lemon)}
html .mq .app:nth-child(8n+5) i{background:var(--c-orange)}
html .mq .app:nth-child(8n+6) i{background:var(--c-sky)}
html .mq .app:nth-child(8n+7) i{background:var(--c-peach)}
html .mq .app:nth-child(8n) i{background:var(--c-rose)}

/* closer: one plate under the store badges and the Mocci pile, bleeding to the bottom line */
.closer .cz{margin:36px 0 -36px;padding:40px 24px 0;display:flex;flex-direction:column;align-items:center}
.closer .cz>.plate{inset:0;border-radius:8px 8px 0 0}
.closer .cz .stores{margin-top:0!important}
.closer .cz .pile{width:100%;margin-top:24px}
@media (max-width:820px){.closer .cz{padding:28px 12px 0;margin-top:28px}.closer .cz .pile{margin-top:20px}}

/* ================= sub pages ================= */
/* page head: plate on the right bleeding to the screen edge, Mocci on its lower-left corner */
.ph .php{position:absolute;top:24px;bottom:16px;right:calc(-1 * var(--bleed));width:calc(36% + var(--bleed));z-index:0}
.ph .php>.plate{inset:0;border-radius:8px 0 0 8px}
.ph .php>.moc{position:absolute;left:-44px;bottom:-20px;width:148px}
@media (min-width:1025px){.ph{padding-right:42%}.ph h1{font-size:clamp(40px,6.4vw,92px)}}
@media (max-width:1024px){
  .ph .php{position:relative;top:auto;bottom:auto;right:auto;width:auto;height:150px;margin:12px calc(-1 * var(--bleed)) 0 40px}
  .ph .php>.moc{left:-28px;bottom:-14px;width:108px}
}
/* features: the app window mock sits on a plate that peeks out above and to the right */
/* this section's plate = the content container exactly (no right bleed): symmetric margins, 8px radius */
.awp{padding:48px 32px}
.awp>.plate{top:0;bottom:0;left:0;right:0;border-radius:8px}
.awp>.aw{margin-right:0}
@media (max-width:820px){.awp{padding:28px 16px}}
/* closer: plate fills the label cell (left quarter) with Mocci on it */
.closer>.clp{position:absolute;left:24px;top:24px;bottom:24px;width:calc((100% + var(--gut,16px))/4 - 48px);z-index:0}
.closer>.clp>.plate{inset:0}
.closer>.clp>.moc{position:absolute;right:12px;bottom:-6px;width:min(120px,70%)}
@media (max-width:820px){
  .closer>.clp{position:relative;left:auto;top:auto;bottom:auto;width:auto;align-self:stretch;height:120px;margin-bottom:16px}
  .closer>.clp>.moc{width:96px;right:16px}
}
/* help: step numbers are small plates */
html .steps .c:nth-child(3n+1)::before{background:var(--c-pink)!important;color:#0a0a0a!important}
html .steps .c:nth-child(3n+2)::before{background:var(--c-lilac)!important;color:#0a0a0a!important}
html .steps .c:nth-child(3n)::before{background:var(--c-mint)!important;color:#0a0a0a!important}

.btn{transition:background-color .15s ease,color .15s ease}

/* ================= motion (only with html.fx + plate.js; reduced motion and no-JS get the finished still) ================= */
/* plate: crisp edge reveal from its outer side (once), then the grain draws once */
.fx.pzr .pz .plate{clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.45,0,.25,1)}
.fx.pzr .pz:not(.on) .plate{clip-path:inset(0 0 0 calc(100% + 1px))}
.fx.pzr .pz:not(.on) .plate[data-from="l"]{clip-path:inset(0 calc(100% + 1px) 0 0)}
.fx.pzr .pz:not(.on) .plate[data-from="b"]{clip-path:inset(calc(100% + 1px) 0 0 0)}
.fx.pzr .pz .plate path.ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s ease calc(var(--ld,0ms) + 350ms)}
.fx.pzr .pz.on .plate path.ln{stroke-dashoffset:0}
/* cards spring up onto the plate */
.fx.pzr .pz :is(.card,.chat,.aw,.stores){transition:transform 1s cubic-bezier(.22,.61,.36,1) .3s,opacity .6s ease .3s}
.fx.pzr .pz:not(.on) :is(.card,.chat,.aw,.stores){transform:translateY(24px);opacity:0}
.fx.pzr .pz.done :is(.card,.aw){transition:transform .2s ease}
/* rows drop in top to bottom, 40ms apart */
.fx.pzr .pz .card .it{transition:opacity .5s ease calc(.75s + var(--n,0)*75ms),transform .6s cubic-bezier(.22,.61,.36,1) calc(.75s + var(--n,0)*75ms)}
.fx.pzr .pz:not(.on) .card .it{opacity:0;transform:translateY(-5px)}
/* toggles flip off -> on once */
.fx.pzr .pz .sw{transition:background-color .25s ease 1.15s}
.fx.pzr .pz .sw::after{transition:transform .5s cubic-bezier(.22,.61,.36,1) 1.2s}
.fx.pzr .pz:not(.on) .sw{background:rgba(10,10,10,.16)!important}
html[data-theme="dark"].fx.pzr .pz:not(.on) .sw{background:rgba(255,255,255,.24)!important}
.fx.pzr .pz:not(.on) .sw::after{transform:translateX(-16px)}
/* number badges count up over the real value (the text node never changes) */
.dot.cnt{position:relative;color:transparent!important}
.dot.cnt::after{content:attr(data-c);position:absolute;inset:0;display:grid;place-items:center;color:#0a0a0a}
/* Mocci bounces in from the plate corner (translate/scale only; the float uses transform) */
.fx.pzr .pz :is(.float,.moc,.art>.pebble,.pile .pebble){transition:translate 1.05s cubic-bezier(.22,.61,.36,1) .5s,scale 1.05s cubic-bezier(.22,.61,.36,1) .5s,opacity .6s ease .5s}
.fx.pzr .pz:not(.on) :is(.float,.moc,.art>.pebble,.pile .pebble){translate:14px 20px;scale:.96;opacity:0}
.fx.pzr .pz .pile .p2{transition-delay:.58s}.fx.pzr .pz .pile .p3{transition-delay:.66s}.fx.pzr .pz .pile .p4{transition-delay:.74s}.fx.pzr .pz .pile .p5{transition-delay:.82s}
/* fx.js pop-in (blur) is replaced by the plate motion inside plate zones */
.fx .pz.rv:not(.fxh),.fx .pz .rv:not(.fxh){opacity:1!important;filter:none!important;transform:none!important}
.float{animation:none!important}
.sw::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#D9D9DE;opacity:0;pointer-events:none;transition:opacity .3s ease}
html[data-theme="dark"] .sw::before{background:#3A3A3F}
.sw::after{z-index:1}
/* row marker: a found task / synced device gets a key-colour tick on its left edge and a soft face */
.card .it{position:relative;transition:background-color .3s ease}
.card .it::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--ks);transform:scaleY(0);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card .it.got::before{transform:scaleY(1)}
html[data-theme="light"] .card .it.got{background:#F7F7F9}
html[data-theme="dark"] .card .it.got{background:#141414}
/* idle loops are switched off until one of the three motion options is approved (entrance motion stays) */
/* hover (desktop): cards on plates lift 2px, transform only */
@media (hover:hover) and (min-width:821px) and (prefers-reduced-motion:no-preference){
  .pz.done .card:hover,.pz.done .aw:hover{transform:translateY(-2px)}
}

/* Mocci family (assets/mocci): one distinct character per spot, no CSS recolouring. The crops are ~120-160px, so they are shown near native size */
.hero .stage>.tilt{width:160px!important}
@media (max-width:900px){.hero .stage>.tilt{width:120px!important}}
.art>.pebble{rotate:0deg!important;width:112px!important}
@media (max-width:900px){.art>.pebble{width:88px!important}}
.ph .php>.moc{width:128px}
@media (max-width:1024px){.ph .php>.moc{width:96px}}
.closer>.clp>.moc{width:min(108px,60%)}
.closer .cz .pile{display:flex;justify-content:center;align-items:flex-end;height:auto;padding:28px 0 20px;gap:0}
.closer .cz .pile .pebble{position:relative!important;left:auto!important;bottom:auto!important;rotate:0deg!important;width:clamp(60px,11vw,136px)!important;margin:0 -6px}
.closer .cz .pile .p2,.closer .cz .pile .p4{margin-bottom:22px}
.closer .cz .pile .p3{z-index:2}

/* Mocci sprite box: the base image holds the layout; the frame image sits on the same baseline, centred, scaled per frame */
.mx{display:block;position:relative}
.mx>img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.mx>img.mxf{position:absolute;left:50%;bottom:0;height:auto;max-width:none;transform:translateX(-50%);opacity:0;transition:opacity .15s linear}
.mx:not(.rdy)>img.mxf{display:none}
.mx.rdy>img.mxf.on{opacity:1}
.mx.rdy>img.mxb{visibility:hidden}
/* card events the sprites react to (one-shot each time they fire) */
@keyframes l-bt{0%,100%{transform:none}45%{transform:translateY(-2px) scale(1.05)}}
@media (prefers-reduced-motion:no-preference){.dot.bt{animation:l-bt .8s ease-in-out}}
@media (prefers-reduced-motion:no-preference){
  .fx.pzr .pz.done .sw::after{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
  .fx.pzr .pz.done .it+.it .sw::after,.fx.pzr .pz.done .it+.it .sw::before{transition-delay:.12s}
  .pz.rd-off .sw::after{transform:translateX(-16px)}
  .pz.rd-off .sw::before{opacity:1}
}

/* plate motion layer (plate.js motifs) and the little Moccis riding the my-room wave */
.plate>svg.mo{z-index:1}
.plate>.fam{position:absolute;left:0;top:0;z-index:2;display:block;will-change:transform,opacity}
.plate>.fam>img{display:block;width:100%;height:auto;transition:opacity .15s linear}
.plate>.fam>img+img{position:absolute;left:0;top:0}
.card .it{transition:background-color .5s ease}

/* Mocci sprite sheet layers (assets/mocci2): two layers cross-fade when the action changes; the still image keeps the layout */
.mx>.mxs{position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;opacity:0;pointer-events:none}
.mx>.mxs.on{opacity:1;transition:opacity .12s linear}

/* platform logos in the device rows (monochrome, follow the row text colour) */
.it .pi{display:inline-flex;align-items:center;gap:10px}
.it .pi svg{flex:none;width:20px;height:20px;display:block}
.it .pi svg+svg{margin-left:-2px}

/* ---- features: phone mock beside the app window. Drawn 1:1 from autoquel-mobile origin/feat/space-parity-1102 (dfa337f4).
   First screen after login = dm tab (TabBar.tsx:60 TAB_ORDER[0], DashboardScreen.tsx:155 ROOT_TAB): the conversation card
   (messages.tsx:6323 dm-conversations-page, corners = screen corner radius :1289, 1px edge :6375 drawerCardEdge) with the header
   (DashboardHeader.tsx: left my avatar 44 + name 16/600 styles.ts:144-145, right 44px circles search + inbox styles.ts:129,
   DashboardHeader.tsx:228-256, badge CountBadge), the list (messages.tsx:1870-1895 Mocci row first, :5826-5866 rooms: avatar 44,
   name 17, preview 14, time right, red count badge; DM_ROW tokens.ts:490-503) and the new-chat FAB (messages.tsx:5895, right 16,
   16 above the bar, core/components/Fab.tsx:146). Swiping right slides the card by drawerTravelW = width - 64 (styles.ts:55-57,
   messages.tsx:1471) and shows the people drawer underneath (PeopleDrawer.tsx): wordmark row (DrawerHeaderRow.tsx:7,17) + search
   circle (messages.tsx:6298 x = width - 38), rows apps / space (+ 16:9 room card SpaceInlineCard.tsx:14-22,30-40) / games
   (PeopleDrawer.tsx:741-753, menuRow :166-180), me row :666-690, friend rows with call + video glyphs :200-245, find-by-id FAB
   (messages.tsx:6282). TabBar (TabBar.tsx:203-210): island, 12 side margin, top corners RADII.card, icons only (people / briefcase).
   dp -> px at 288/390: row 64 -> 48, avatar 44 -> 32, header 56 -> 42, name 17 -> 13. Colours = the desktop window tokens
   (face #000 / #fff, line .20 / .12, text #F4F4F4 / #0a0a0a); control fill #111 / #F1F2F6; room = room-core ROOM palette;
   avatars = Mocci stills on candy circles (no photos). ---- */
.ph2{--pbg:#000;--ptx:#F4F4F4;--psub:rgba(244,244,244,.6);--pctl:#111;--pln:rgba(255,255,255,.20);--pfab:#F4F4F4;--pfabfg:#000;
  position:relative;z-index:1;width:288px;height:604px;flex:none;border:1px solid var(--pln);border-radius:44px;background:var(--pbg);color:var(--ptx);overflow:hidden;
  font-size:13px;line-height:1.3;font-family:"Poppins","Noto Sans KR",system-ui,sans-serif;user-select:none;-webkit-user-select:none}
[data-theme="light"] .ph2{--pbg:#fff;--ptx:#0a0a0a;--psub:rgba(10,10,10,.6);--pctl:#F1F2F6;--pln:rgba(10,10,10,.12);--pfab:#0a0a0a;--pfabfg:#fff}
.ph2 svg{display:block;fill:currentColor}
.ph2 img{display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* status bar: 9:41, signal / wifi / battery; the island is a plain black pill */
.ph2 .psb{position:absolute;left:0;right:0;top:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 28px;font-size:12px;font-weight:600;z-index:8}
.ph2 .psb .si{display:flex;align-items:center;gap:5px}.ph2 .psb .si svg{height:11px;width:auto}
.ph2 .isl{position:absolute;left:50%;top:8px;width:76px;height:20px;margin-left:-38px;border-radius:10px;background:#000;border:1px solid var(--pln);z-index:9}
[data-theme="light"] .ph2 .isl{background:#0a0a0a;border-color:#0a0a0a}
/* shared row grammar (DM_ROW): 48 high, 12 gutter, 10 gap, 32 avatar */
.ph2 .prw{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:48px}
.ph2 .prw .ic{width:32px;height:32px;flex:none;display:grid;place-items:center}
.ph2 .prw .ic.g svg{width:34px;height:34px;margin:0 0 -2px -2px}
.ph2 .prw b{flex:1;min-width:0;font-weight:600;font-size:13px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph2 .prw .cv{display:flex;margin-right:-7px}.ph2 .prw .cv span{width:32px;height:32px;display:grid;place-items:center}.ph2 .prw .cv svg{width:17px;height:17px}
.ph2 .av{position:relative;width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;display:block;background:currentColor}
.ph2 .av img{position:absolute;left:50%;top:50%;width:33px;height:auto;transform:translate(-50%,-50%)}
.ph2 .av.p1{color:var(--c-pink)}.ph2 .av.p2{color:var(--c-sky)}.ph2 .av.p3{color:var(--c-lilac)}.ph2 .av.p4{color:var(--c-mint)}.ph2 .av.p5{color:var(--c-lemon)}.ph2 .av.p6{color:var(--c-peach)}.ph2 .av.p7{color:var(--c-rose)}
.ph2 .av.mo{color:var(--pctl)}
.ph2 .dsr{width:32px;height:32px;border-radius:50%;background:var(--pctl);display:grid;place-items:center;flex:none;position:relative}
.ph2 .dsr svg{width:14px;height:14px}
.ph2 .dsr.nb i{position:absolute;top:-4px;right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:#dd2233;color:#fff;font-style:normal;font-size:9px;line-height:14px;font-weight:700;text-align:center;font-family:"Poppins",sans-serif}
.ph2 .fab{position:absolute;right:12px;bottom:37px;width:42px;height:42px;border-radius:50%;background:var(--pfab);color:var(--pfabfg);display:grid;place-items:center;z-index:4}.ph2 .fab svg{width:20px;height:20px}
/* people drawer: under the card, left 240 (drawerTravelW), from under the status bar to the tab bar */
.ph2 .drw{position:absolute;left:0;top:36px;width:240px;bottom:0;overflow:hidden}
.ph2 .dhd{position:absolute;left:0;right:0;top:0;height:60px;padding:0 12px 18px;display:flex;align-items:center;justify-content:space-between;z-index:3;background:linear-gradient(var(--pbg) 62%,transparent)}
.ph2 .dhd .wm{width:115px;height:auto}
.ph2 .dls{position:absolute;left:0;right:0;top:0;padding:48px 0 96px}
.ph2 .spc{position:relative;margin:3px 12px 6px;width:216px;height:122px;border-radius:14px;overflow:hidden;background:var(--pbg)}
.ph2 .spc .rm{width:100%;height:100%}
.ph2 .spc .mc{position:absolute;height:auto}
.ph2 .spc .ex{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:var(--pctl);display:grid;place-items:center}.ph2 .spc .ex svg{width:15px;height:15px}
.ph2 .spc .on{position:absolute;left:6px;bottom:6px;height:20px;padding:0 7px;border-radius:8px;background:var(--pctl);font-size:10px;font-weight:600;line-height:20px}
/* conversation card: the whole screen (count badge = app DANGER #dd2233, tokens.ts:33 / CountBadge.tsx:32); slides right by 240 when the drawer opens (plate.js) */
.ph2 .cvp{position:absolute;left:0;top:0;width:288px;height:604px;border:1px solid var(--pln);border-radius:44px;background:var(--pbg);z-index:5;overflow:hidden;will-change:transform}
.ph2 .chd{position:absolute;left:0;right:0;top:36px;height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;z-index:3}
.ph2 .chd .pme{display:flex;align-items:center;gap:6px;min-width:0;flex:1;margin-right:8px}.ph2 .chd .pme b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph2 .chd .hb{display:flex;gap:6px}
.ph2 .cls{position:absolute;left:0;right:0;top:84px}
.ph2 .cr .ptx{flex:1;min-width:0;display:flex;flex-direction:column}
.ph2 .cr .ptx b{flex:none}.ph2 .cr .ptx small{font-size:11px;line-height:14px;color:var(--psub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph2 .cr.un .ptx small{color:var(--ptx)}
.ph2 .cr .rt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.ph2 .cr time{font-size:10px;line-height:12px;color:var(--psub);font-family:"Poppins",sans-serif}
.ph2 .cr i{min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#dd2233;color:#fff;font-style:normal;font-size:9px;line-height:15px;font-weight:700;text-align:center;font-family:"Poppins",sans-serif}
/* tab bar island + home indicator */
/* no tab bar: the app removed it (DashboardScreen.tsx:1796 "탭바는 없앴다", the pane dots too :78). Each pane fills to the bottom and
   avoids the home indicator itself (:1778); the FAB sits fabBottom = 16 + home inset 34 = 50dp -> 37px (chromeMetrics.ts:70, Fab.tsx:146) */
.ph2 .hi{position:absolute;left:50%;bottom:6px;width:96px;height:4px;margin-left:-48px;border-radius:2px;background:var(--ptx);opacity:.35;z-index:7}
/* 2D layout (also the fallback when the 3D stage does not start): dashboard window + phone side by side on wide screens, stacked below 1024 */
@media (min-width:1025px){.awp{display:flex;align-items:flex-end;justify-content:center;gap:32px}.awp>.aw{flex:1;min-width:0;margin-right:0}.awp>.ph2{margin-right:0}}
@media (max-width:1024px){.awp>.ph2{margin:24px auto 0}}
@media (max-width:820px){.awp>.ph2{margin-top:20px}}
/* 3D stage (stage3d.js): one transparent WebGL canvas (on top, with depth-only holes where the screens are) over a CSS3D layer carrying
   the screens; the stage height is set by JS. Nothing may paint outside the stage: clip + contain + the canvas forced to the stage box.
   The tablet screen IS the dashboard window (.aw) at 800x560; the phone is .ph2. */
.awp.s3d{display:block;position:relative;padding:0;margin-right:0;overflow:clip;contain:paint;isolation:isolate}
.awp.s3d>.plate{left:0;right:0;top:48px;bottom:48px;border-radius:8px}
@media (max-width:820px){.awp.s3d>.plate{top:28px;bottom:28px}}
/* devices (canvas + CSS3D screens + shadows) fade in only after the plate wipe (1.1s) is complete: delay 1.15s */
.awp.s3d>.gl,.awp.s3d>.c3d{position:absolute;left:0;top:0;width:100%!important;height:100%!important;pointer-events:none;background:transparent!important;transition:opacity .4s ease 1.15s}
.fx.pzr .awp.s3d:not(.on)>.gl,.fx.pzr .awp.s3d:not(.on)>.c3d{opacity:0;transition:none}
@media (min-width:1025px){.awp.s3d>.gl,.awp.s3d>.c3d{clip-path:inset(48px 0 round 8px)}}
/* phones (< 768, .nar): the tablet dashboard shows a 2 x 2 table so the phone in front never cuts a column or a row */
.awp.s3d.nar .aw .gr,.awp.ov.nar .aw .gr{grid-template-columns:1fr 1fr}.awp.nar .aw .gr .cd:nth-child(n+5){display:none}
.awp.s3d>.c3d{z-index:2;overflow:hidden}
.awp.s3d>.gl{z-index:3;display:block}
.awp.s3d .aw,.awp.s3d .ph2{margin:0!important;transition:none!important;opacity:1!important;filter:none!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* the dashboard keeps its desktop layout (sidebar + 3-column table) at every width when it is a device screen (3D or 2D overlap) */
.awp.s3d .aw,.awp.ov .aw{width:800px;height:560px;border-radius:12px}
/* sidebar 196 everywhere (en "Planner Personal 3" needs 172px + gutters); the collapse handle follows */
.aw{grid-template-columns:196px minmax(0,1fr)}.aw .hd{left:185px}
/* black theme: a visible 1px edge between the screen face (#000) and the black glass bezel */
html:not([data-theme="light"]) .awp.s3d .aw,html:not([data-theme="light"]) .awp.s3d .ph2{border-color:rgba(255,255,255,.3)}
.awp.s3d .aw .sb2,.awp.ov .aw .sb2{display:flex}
.awp.s3d .aw .gr,.awp.ov .aw .gr{grid-template-columns:repeat(3,minmax(0,1fr))}
.awp.s3d .aw .bd,.awp.ov .aw .bd{padding:12px 22px 20px}.awp.s3d .aw .tl,.awp.ov .aw .tl{height:56px}.awp.s3d .aw .cd,.awp.ov .aw .cd{height:116px;padding:20px}
@media (max-width:1024px){.awp.s3d>.plate{top:0;bottom:0}}
/* 2D overlap (narrow fallback, laid out by stage3d.js flat()): tablet back-left, phone front-right, inside one plate */
.awp.ov{display:block;position:relative;padding:0;overflow:clip}
.awp.ov>.plate{top:0;bottom:0;left:0;right:0}
.awp.ov>.aw,.awp.ov>.ph2{position:absolute;margin:0!important;transform-origin:0 0;transition:none!important;opacity:1!important;filter:none!important}
.awp.ov>.ph2{z-index:2}
/* motion: scroll-driven only (plate.js sets opacity/transform per part from the scroll position); no clock, no entrance transition */

/* help: each "learn more" card carries its own action, pinned to the card bottom */
.cards.more .c{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cards.more .c p{margin-bottom:28px}
.cards.more .c .btn{margin-top:auto}

/* home hero: no outline, same as the sub-page heroes (.ph) */
html .hero,html[data-theme="light"] .hero{border:0!important}
@media (min-width:901px){
  /* same as the sub-page heroes: text on the content edge, plate runs off the right edge of the screen */
  html .hero>:first-child{margin-left:0;margin-right:var(--inset)}
  html .hero>.stage{margin-left:var(--inset);margin-right:0}
  html .hero{overflow:visible!important}
  html .hero .stage>.plate{right:calc(-1 * max(16px, (100vw - 1280px)/2));border-radius:8px 0 0 8px}
}

/* desktop window in the white theme: the same rule as the phone and tablet — white face, .12 line, #0a0a0a text, #F1F2F6 controls */
[data-theme="light"] .aw{--ln:rgba(10,10,10,.12);background:#fff;color:#0a0a0a}
[data-theme="light"] .aw .lr svg,[data-theme="light"] .aw .it{color:#0a0a0a}
[data-theme="light"] .aw .it small,[data-theme="light"] .aw .cd small{color:rgba(10,10,10,.55)}
[data-theme="light"] .aw .gh i,[data-theme="light"] .aw .st2,[data-theme="light"] .aw .hd{color:rgba(10,10,10,.6)}
[data-theme="light"] .aw .hd{background:#fff}
[data-theme="light"] .aw .ch span,[data-theme="light"] .aw .cd i{background:#F1F2F6;color:#0a0a0a}
[data-theme="light"] .aw .ch span.on{background:#0a0a0a;color:#fff}

/* Japanese dashboard cells: break only between phrases. Chrome 156 accepts word-break:auto-phrase but does not segment (verified in the
   user's Chrome), so the ja strings carry <wbr> at phrase boundaries (i18n.json, words unchanged) and keep-all forbids every other break. */
html[lang="ja"] .aw .cd strong{word-break:keep-all!important;overflow-wrap:normal!important} /* !important: dash.css:66 forces word-break:normal!important on every ja element */