/* action ai · Home + capture morph styles (REDESIGN-R2-HOME-CAPTURE-2026-10-06).
   LIFTED from BUILD HANDOVER 2026-10-05: mockups/Home + Capture flow + Constellation Sky (review round 4).html
   (its page CSS, src/home-capture/morph.css and src/kit/perf.css). Every value is the mockup's.
   Adapted for the app only:
   - every rule is scoped under the Home root .hc (the mockup's body>X rules become .hc>X), so nothing here can
     touch another screen; the morph's body classes lis / ltx / lout are hc-lis / hc-ltx / hc-lout;
   - custom properties carry an hc prefix (--bg -> --hcbg ...) and keyframes an hc- prefix, so no name collides
     with the app's own (KIT-1 rule); spin / perfrot / --a are the R1 kit's existing kx-spin / perfrot / --a;
   - the mockup's .sheet / .sheetbg are .hcsheet / .hcsheetbg (the app already owns .sheet), .dock is the app's .tab-bar;
   - mockup-only parts are left out: the Constellation Sky explore view, search, event page, profile, the review
     "Proposed wording" tag and the settings panel (the Sky view ships after V1; Settings is outside this step).
   The last block (APP) styles the existing Home controls the mockup does not draw, restyled with these same rules. */
.hc,.lisui{--hcbg:#0C0C0D;--hcs1:#141416;--hcs2:#1C1C1E;--hcs3:#262628;--hcline:rgba(255,255,255,.09);--hcline2:rgba(255,255,255,.16);--hct1:#F4F4F5;--hct2:rgba(255,255,255,.74);--hct3:rgba(255,255,255,.56); --hccoral:#FF7676;--hcamber:#FDCB6E;--hcmint:#55EFC4;--hcsky:#74B9FF;--hcperi:#A29BFE;--hcedge:linear-gradient(95deg,#FF7676,#FDCB6E,#55EFC4,#74B9FF,#A29BFE); --hcconic:conic-gradient(from var(--a,0deg),#FF7676,#FDCB6E,#55EFC4,#74B9FF,#A29BFE,#FF7676)}
.hc .hcb,.lisui .hcb{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html .hc svg.ic{width:20px;height:20px;flex:none}
.hc .eb{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--hct3)}
.hc .cta,.lisui .cta{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#0b0b12;font-weight:800;font-size:18px;border-radius:18px;min-height:56px;position:relative;isolation:isolate;box-shadow:0 0 0 2px var(--hcbg),0 18px 40px -16px rgba(162,155,254,.6)}
.hc .cta::after,.lisui .cta::after{content:"";position:absolute;inset:-3px;border-radius:21px;padding:2.5px;background:var(--hcconic);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:kx-spin 4s linear infinite;pointer-events:none}
.hc .field{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border-radius:16px;background:var(--hcs2);border:1px solid var(--hcline);color:var(--hct3);font-size:16px}
.hc .field span{flex:1}
.hc .top{display:flex;justify-content:space-between;align-items:center;padding:16px calc(var(--space-4) + var(--space-1)) 0 var(--space-4)}
.hc .top .ev{font-size:22px;font-weight:800;letter-spacing:-.02em}
.hc .mid{text-align:center;padding:18px 20px 0}
.hc .mid .eb{display:inline-flex;align-items:center;gap:8px}
html .hc .mid .eb svg.ic{width:14px;height:14px;color:var(--hcperi)}
.hc .mid h1{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:38px;line-height:1;letter-spacing:-.03em;margin-top:8px}
.hc .orbit{position:relative;width:310px;height:310px;margin:10px auto 0}
.hc .ring{position:absolute;inset:34px;border-radius:50%;border:1px dashed rgba(255,255,255,.14)}
.hc .ring2{position:absolute;inset:34px;border-radius:50%;padding:1.5px;background:conic-gradient(from var(--a),transparent 0 300deg,#FF7676 320deg,#FDCB6E 335deg,#55EFC4 345deg,#74B9FF 352deg,#A29BFE 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:kx-spin 5s linear infinite}
.hc .core{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;background:#fff;color:#0b0b12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:18px;box-shadow:0 0 0 6px var(--hcbg),0 0 0 8px rgba(162,155,254,.5),0 20px 60px -10px rgba(162,155,254,.7)}
html .hc .core svg.ic{width:34px;height:34px}
.hc .sat{position:absolute;width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--hct2);transform:translate(-50%,-50%);opacity:0;animation:hc-pop .6s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes hc-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%)}}
.hc .sat .c{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--hcs2);border:1px solid var(--hcline2);color:var(--hct1)}
.hc .s1{left:12%;top:24%}
.hc .s2{left:88%;top:24%;animation-delay:.1s}
.hc .s3{left:50%;top:calc(88% + 45.3px);animation-delay:.2s}
.hc .orbit{margin-bottom:54px}
.hc .cmd{margin:26px 16px 0}
.hc .cmd .field{border-radius:16px;background:var(--hcs1);border:1px solid var(--hcline2);box-shadow:0 0 0 4px rgba(162,155,254,.06)}
.hc .cmd .kbd{font-size:14px;color:var(--hct3);border:1px solid var(--hcline2);border-radius:6px;padding:0 6px}
.hc .list{margin:16px 16px 120px;border-top:1px solid var(--hcline)}
.hc .li{display:flex;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--hcline);font-size:16px}
.hc .li .lic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--hcs2);color:var(--hct2);flex:none}
html .hc .li .lic svg.ic{width:16px;height:16px}
.hc .li .sub{font-size:14px;color:var(--hct3)}
.hc .li .ch{margin-left:auto;color:var(--hct3)}
html .hc .li .ch svg.ic{width:16px;height:16px}
.hc .li b{font-size:20px;font-weight:800;margin-right:6px}
html .hc svg.prog{position:absolute;inset:0;pointer-events:none}
.hc .prog circle{fill:none;stroke-linecap:round;transform:rotate(-90deg);transform-origin:155px 155px;transition:stroke .3s}
.hc .ibt{width:44px;height:44px;margin:-14px 0 -14px -6px;display:inline-grid;place-items:center;color:var(--hcperi)}
html .hc .mid .eb .ibt svg.ic{width:20px;height:20px}
.hc .li .grow{flex:1;min-width:0;padding:10px 0}
.hc .laps{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.hc .laps i{width:8px;height:8px;border-radius:50%}
.hc .hcsheetbg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s;z-index:80}
.hc .hcsheet{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#141416;border-radius:28px 28px 0 0;padding:10px 18px 28px;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hc.info .hcsheetbg{opacity:1}
.hc .hcsheet.open{transform:none}
.hc .hcsheet .grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin:0 auto 10px}
.hc .hcsheet .x{position:absolute;right:12px;top:10px;width:44px;height:44px;display:grid;place-items:center;color:rgba(255,255,255,.56)}
.hc .hcsheet .row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.hc .hcsheet .row:last-child{border:0}
.hc .hcsheet .sw{width:36px;height:36px;flex:none;display:grid;place-items:center}
html .hc .hcsheet .sw svg.ic{width:22px;height:22px}
.hc .hcsheet p{font-size:16px;line-height:1.4}
.hc .hcsheet .prop{position:absolute;left:18px;top:14px;font-size:14px;font-weight:700;color:#FDCB6E;letter-spacing:.06em;text-transform:uppercase}
.hc .pm{text-align:center;font-size:16px;color:var(--hct2);margin-top:4px}
.hc .fuhero{background:linear-gradient(90deg,#FF7676,#FDCB6E,#55EFC4,#74B9FF,#A29BFE);-webkit-background-clip:text;background-clip:text;color:transparent}
.hc .pm b{font-size:22px;font-weight:800;margin-right:2px}
.hc .conc{display:flex;align-items:center;gap:18px;margin:14px 16px 0;padding:18px;border-radius:28px;background:radial-gradient(120% 120% at 0% 50%,rgba(162,155,254,.10),transparent 60%),var(--hcs1);border:1px solid var(--hcline)}
.hc .cw{position:relative;width:150px;height:150px;flex:none}
html .hc .cw svg{position:absolute;inset:0;width:100%;height:100%}
.hc .cw .g{fill:none;stroke:rgba(255,255,255,.07);stroke-width:10}
.hc .cw .cr{fill:none;stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:80px 80px;stroke-dasharray:0 100}
.hc .cw .cr[data-c=emb]{filter:drop-shadow(0 0 5px rgba(253,203,110,.7))}
.hc .cw .core2{fill:#0f0f12;stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:2 4}
.hc .cw .cn{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:800}
.hc .cw .cmt{position:absolute;inset:-6px;border-radius:50%;padding:1.5px;background:conic-gradient(from var(--a),transparent 0 300deg,#FF7676 320deg,#FDCB6E 335deg,#55EFC4 345deg,#74B9FF 352deg,#A29BFE 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:kx-spin 5s linear infinite}
.hc .leg{display:grid;gap:12px;min-width:0}
.hc .lg{display:flex;gap:10px;align-items:flex-start}
.hc .lg i{width:10px;height:10px;border-radius:50%;margin-top:7px;flex:none}
.hc .lg i.o{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.hc .lg b{font-size:20px;font-weight:800;display:block;line-height:1.1}
.hc .lg span{font-size:14px;color:var(--hct2);line-height:1.3;display:block;margin-top:2px}
.hc .newrow{margin:14px 16px 0}
.hc .nb{width:100%;border:1px solid var(--hcline);border-radius:16px;padding:0 14px;background:var(--hcs1);text-align:left}
.hc .noev{display:none}
.hc.noevent .noev{display:inline}
.hc.noevent .atev{display:none!important}
.hc::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hc .aur{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;z-index:-1;pointer-events:none;filter:blur(48px);opacity:.30; background:conic-gradient(from var(--a),#FF7676,#FDCB6E,#55EFC4,#74B9FF,#A29BFE,#FF7676);animation:kx-spin 24s linear infinite; -webkit-mask:radial-gradient(circle,#000 25%,transparent 62%);mask:radial-gradient(circle,#000 25%,transparent 62%)}
.hc .orbit{isolation:isolate}
.hc>*:not(.wall):not(.hcsheet):not(.hcsheetbg):not(.modal-overlay){position:relative;z-index:1}
.hc .rip{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;pointer-events:none;z-index:0; box-shadow:0 0 0 1.5px rgba(162,155,254,.55),0 0 24px rgba(162,155,254,.35);animation:hc-rip 3.6s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.hc .rip.r2{animation-delay:1.2s}
.hc .rip.r3{animation-delay:2.4s}
@keyframes hc-rip{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.85);opacity:0}}
.hc .core{z-index:2;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.hc .core:active{transform:scale(.95)}
.hc .head{fill:#fff;filter:drop-shadow(0 0 6px var(--hc)) drop-shadow(0 0 14px var(--hc));animation:hc-hp 1.6s ease-in-out infinite}
@keyframes hc-hp{50%{opacity:.55}}
.hc .prog circle.head{fill:#fff;transform:none;stroke:none}
.hc .glow{position:relative;isolation:isolate}
.hc .glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from calc(var(--ga,0deg) - 30deg),transparent 0deg,#FF7676 10deg,#FDCB6E 22deg,#55EFC4 32deg,#74B9FF 44deg,#A29BFE 54deg,transparent 64deg,transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;filter:drop-shadow(0 0 6px rgba(162,155,254,.6))}
.hc .conc{position:relative;overflow:hidden}
.hc .dots{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask:radial-gradient(70% 90% at 25% 50%,#000,transparent 75%);mask:radial-gradient(70% 90% at 25% 50%,#000,transparent 75%)}
.hc .conc>.cw,.hc .conc>.leg{position:relative;z-index:1}
.hc .ent{opacity:0;filter:blur(10px);transform:translateY(14px);animation:hc-ent .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hc-ent{to{opacity:1;filter:none;transform:none}}
.hc .sat .c{animation:hc-fl 5s ease-in-out infinite}
.hc .s2 .c{animation-delay:-1.6s}
.hc .s3 .c{animation-delay:-3.2s}
/* the mockup declares @keyframes fl twice; its later one (the search flash glow) is the one every browser runs, so the
   satellites pulse a white / periwinkle glow on their 10s loop rather than float: lifted as it renders */
@keyframes hc-fl{0%,40%{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #A29BFE)}}
.hc .sat .c{transition:box-shadow .3s}
.hc .sat:active .c{transform:scale(.92)}
.hc button:active{transition:transform .12s}
.hc .nb:active,.hc .li:active{transform:scale(.985)}
.hc .conc,.hc .nb,.hc .cmd .field{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -24px rgba(0,0,0,.9)}
.hc .cbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;margin-right:10px;position:relative}
html .hc .cbtn svg.ic{width:22px;height:22px}
.hc .cbtn::after{content:"";position:absolute;inset:-2px;border-radius:50%;padding:1.5px;background:conic-gradient(from var(--a),transparent 0 280deg,#FF7676,#FDCB6E,#55EFC4,#74B9FF,#A29BFE);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:kx-spin 4s linear infinite}
.hc .topr{display:flex;align-items:center}
.hc .wall{position:fixed;inset:0;z-index:0;overflow-y:auto;overflow-x:hidden;pointer-events:none;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hc .wall::-webkit-scrollbar{display:none}
.hc .wi{position:relative;padding:150px 0 220px;transition:opacity .6s}
.hc .cst{display:block;position:relative;width:300px;min-height:230px;padding-bottom:20px;margin:0 auto;transition:opacity .6s,transform .6s;color:inherit;text-align:left}
.hc .cst.l{transform:translateX(-26px)}
.hc .cst.r{transform:translateX(26px)}
.hc .ln{stroke:rgba(200,205,255,.22);stroke-width:.8;stroke-dasharray:1.5 4;stroke-linecap:round}
.hc .ln.on{stroke:rgba(235,235,255,.55);stroke-width:.9;stroke-dasharray:100 100;filter:drop-shadow(0 0 2px rgba(199,192,255,.7))}
@keyframes hc-tw{50%{opacity:.5;transform:scale(1.35)}}
.hc .cst .ln{stroke-dashoffset:0}
.hc .cst:not(.in) .ln.on{stroke-dashoffset:100}
.hc .cst .ln.on{transition:stroke-dashoffset 1.2s .2s cubic-bezier(.2,.8,.2,1)}
.hc .cst:not(.in) .star{opacity:0}
.hc .cst.in .star{animation:hc-skin 1.1s cubic-bezier(.2,.8,.2,1) both}
.hc .cst.in .star:nth-of-type(2n){animation-delay:.12s}
.hc .cst.in .star:nth-of-type(3n){animation-delay:.24s}
@keyframes hc-skin{from{opacity:0}}
.hc .cst{scale:calc(1 - var(--d,0)*.06);filter:saturate(calc(1 - var(--d,0)*.1)) blur(calc(max(var(--d,0) - 3,0)*.35px))}
.hc .wall{background:linear-gradient(180deg,#151338 0%,#0d0c1f 22%,#08080b 60%)}
.hc .sky1,.hc .sky2{position:absolute;inset:0;pointer-events:none;background-repeat:repeat}
.hc .sky1{background-image:radial-gradient(.6px .6px at 150px 20px,#fff9,transparent),radial-gradient(.6px .6px at 280px 120px,#fff7,transparent),radial-gradient(1px 1px at 20px 30px,#fff8,transparent),radial-gradient(1px 1px at 120px 80px,#fff6,transparent),radial-gradient(1.4px 1.4px at 200px 160px,#fffa,transparent),radial-gradient(1px 1px at 300px 40px,#fff5,transparent),radial-gradient(1px 1px at 60px 200px,#fff7,transparent);background-size:340px 240px;opacity:.5}
.hc .sky2{background-image:radial-gradient(1.6px 1.6px at 80px 60px,#C7C0FF,transparent),radial-gradient(1.2px 1.2px at 260px 190px,#FFE7B0,transparent),radial-gradient(1.2px 1.2px at 170px 120px,#B6F5E4,transparent);background-size:360px 280px;opacity:.55}
.hc>.top,.hc>.mid,.hc>.orbit,.hc>.pm,.hc>.cmd,.hc>.newrow,.hc>.conc,.hc>.list{transition:opacity .5s,filter .5s,transform .5s}
.hc .cst:nth-of-type(2){animation-delay:.05s}
.hc .cst:nth-of-type(3){animation-delay:.1s}
.hc .cst:nth-of-type(4){animation-delay:.15s}
.hc .xb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;flex:none}
.hc .wall{background:linear-gradient(180deg,#08080b 0,#0b0e1c 30%,#0a0b14 70%,#08080b)}
.hc .cst{width:100%;min-height:0;height:178px;padding:0;margin:0;scale:1;filter:none}
.hc .cst.l,.hc .cst.r{transform:none}
.hc .skyc{position:absolute;top:4px;width:250px;height:170px;display:grid;place-items:center}
.hc .skyc>*{grid-area:1/1}
.hc .cst.l .skyc{right:-6px}
.hc .cst.r .skyc{left:-6px}
.hc .neb2{border-radius:50%;filter:blur(28px)}
.hc .sl{stroke-dasharray:100 100;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s .2s cubic-bezier(.2,.8,.2,1)}
.hc .cst:not(.in) .sl{stroke-dashoffset:100}
@keyframes hc-hlin{from{opacity:0;transform:translateY(4px)}}
.hc .wall{background:linear-gradient(180deg,#040406 0,#06070d 35%,#050509 75%,#040406)}
.hc .sky1{opacity:.28}
.hc .sky2{opacity:.25}
.hc .neb2{filter:blur(30px) brightness(.7)}
.hc .cst.big{height:330px}
.hc .cst.big .skyc{left:50%;right:auto;top:50px;width:360px;height:300px;margin-left:-180px}
.hc .grab{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
.hc .wall,.hc .sky1,.hc .sky2,.hc .neb2,.hc .cst{transition:background .4s,opacity .4s,filter .4s}
.hc .top{position:relative}
.hc .tonight{position:absolute;left:0;right:0;top:-4px;height:112px;display:grid;place-items:center;pointer-events:none;z-index:0;-webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 55%,transparent);mask:radial-gradient(70% 70% at 50% 50%,#000 55%,transparent)}
.hc .tonight>*{grid-area:1/1}
.hc .tonight .neb2{filter:blur(24px) brightness(1)}
.hc .top>.atev,.hc .top>.topr{position:relative;z-index:1}
.hc .tonight .star.pending,.hc .tonight .sl.pending{opacity:0}
.hc .tonight .sl.pending.on{opacity:.75;stroke-dashoffset:100;animation:hc-draw 1s .1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hc-draw{to{stroke-dashoffset:0}}
.hc .tonight .star.pending.on{opacity:1;animation:hc-arrive .35s ease-out}
@keyframes hc-arrive{0%{opacity:0}100%{opacity:1}}
.flystar{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--c),0 0 18px 6px var(--c);z-index:60;pointer-events:none}
.hc .core.pulse{animation:hc-cp .6s ease-out}
@keyframes hc-cp{40%{transform:scale(.94)}}
.hc .burst{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:hc-burst 1s ease-out forwards}
@keyframes hc-burst{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(10)}}
@keyframes hc-yr{50%{transform:scale(1.5);opacity:.4}}
.hc.noconst .cbtn,.hc.noconst .tonight{display:none!important}
.hc .wi{opacity:.32}
.hc .wall{background:transparent}
body.hc-lis .tab-bar{animation:none!important;opacity:0!important;filter:blur(8px)!important;pointer-events:none;transition:opacity .45s,filter .45s}
body.hc-lis.hc-lout .tab-bar{opacity:1!important;filter:none!important}
/* ---- capture morph (src/home-capture/morph.css) + perf (src/kit/perf.css) ---- */
.hc .orbit .mcv{position:absolute;left:-65px;top:-65px;width:440px;height:440px;pointer-events:none;z-index:4;opacity:0}
body.hc-lis .hc .orbit .mcv{opacity:1}
.hc .orbit .core{transition:background .45s cubic-bezier(.23,1,.32,1),box-shadow .45s,scale .45s cubic-bezier(.34,1.56,.64,1)}
.hc .orbit .core>*{transition:opacity .25s}
body.hc-lis .hc .orbit .core{background:#0d0d11;transition-delay:.15s}
body.hc-lis .hc .orbit .core>*{opacity:0}
body.hc-lis .hc .orbit .sat{animation:none;opacity:0;scale:.6;transition:opacity .3s,scale .4s;pointer-events:none}
.hc>.mid,.hc>.pm,.hc>.cmd,.hc>.newrow,.hc>.conc,.hc>.list{transition:opacity .45s,filter .45s}
body.hc-lis .hc>.mid,body.hc-lis .hc>.pm,body.hc-lis .hc>.cmd,body.hc-lis .hc>.newrow,body.hc-lis .hc>.conc,body.hc-lis .hc>.list{animation:none!important;opacity:0!important;filter:blur(8px)!important;pointer-events:none}
body.hc-lis.hc-lout .hc>.mid,body.hc-lis.hc-lout .hc>.pm,body.hc-lis.hc-lout .hc>.cmd,body.hc-lis.hc-lout .hc>.newrow,body.hc-lis.hc-lout .hc>.conc,body.hc-lis.hc-lout .hc>.list{opacity:1!important;filter:none!important}
.lisui{position:fixed!important;inset:0!important;pointer-events:none;z-index:60!important;opacity:0;transition:opacity .4s}
body.hc-lis .lisui{opacity:1}
body.hc-lis.hc-lout .lisui{opacity:0}
.lisui .lcancel{position:fixed;top:14px;left:12px;min-height:44px;padding:0 12px;font-size:16px;font-weight:600;color:var(--hct2);background:none;border:0;pointer-events:auto}
.lisui .lstat{position:absolute;left:0;right:0;top:var(--sy,190px);display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:700;color:var(--hct2)}
.lisui .lled{width:8px;height:8px;border-radius:50%;background:#FF7676;box-shadow:0 0 8px #FF7676}
.lisui .lsub{position:absolute;left:0;right:0;top:calc(var(--sy,190px) + 30px);text-align:center;font-size:16px;color:var(--hct3)}
.lisui .lcta{position:fixed;left:16px;right:16px;bottom:24px;pointer-events:auto;transition:opacity .3s}
.lisui .lcta span{font-size:20px}
body.hc-ltx .lisui .lcta{opacity:0;pointer-events:none}
body.hc-lis{overflow:hidden}
@media (prefers-reduced-motion:reduce){.hc .orbit .mcv,.hc .orbit .core,.lisui{transition:none}}
body.hc-lis .hc>.hcsheet,body.hc-lis .hc .top .atev,body.hc-lis .hc .top .topr,body.hc-lis .hc .top .c1-greeting{opacity:0!important;pointer-events:none;transition:opacity .4s}
body.hc-lis.hc-lout .hc>.hcsheet,body.hc-lis.hc-lout .hc .top .atev,body.hc-lis.hc-lout .hc .top .topr,body.hc-lis.hc-lout .hc .top .c1-greeting{opacity:1!important}
.hc .top .atev,.hc .top .topr,.hc .top .c1-greeting,.hc>.hcsheet{transition:opacity .4s}
.lisui .lstat.in,.lisui .lsub.in{animation:hc-lstIn .45s cubic-bezier(.23,1,.32,1) both}
@keyframes hc-lstIn{from{opacity:0;translate:0 8px;filter:blur(3px)}}
.ldot{position:fixed!important;z-index:70!important;background:#fff!important;box-shadow:0 0 18px rgba(199,192,255,.9);pointer-events:none;margin:0;padding:0;opacity:1!important;display:block!important}
body.hc-ltx .lisui .lcta{opacity:0;pointer-events:none;transition:opacity .15s}
body.hc-lis .hc .orbit .prog,body.hc-lis .hc .orbit .ring,body.hc-lis .hc .orbit .ring2{opacity:0;transition:none}
.hc .ring2{animation-duration:10s!important}
.hc .cta::after,.hc .cbtn::after,.lisui .cta::after{animation-duration:8s!important}
.hc .cw .cmt{animation-duration:10s!important}
.hc .sat .c{animation-duration:10s!important}
.hc .prog .head,.hc .head{animation-duration:3.2s!important}
.hc .orbit .rip,.hc .orbit .aur{transition:opacity .5s}
body.hc-lis .hc .orbit .rip{animation:none!important;opacity:0!important}
body.hc-lis .hc .orbit .aur{animation-play-state:paused!important;opacity:0!important}
body.hc-lis .hc .orbit .core{box-shadow:0 0 0 6px #0c0c0d,0 0 0 7px rgba(255,255,255,.06)!important}
.hc .orbit .rip.r2,.hc .orbit .rip.r3{display:none!important}
.hc .orbit .rip{animation-name:hc-ripcalm!important;animation-duration:7s!important;animation-timing-function:cubic-bezier(.25,.1,.25,1)!important}
@keyframes hc-ripcalm{0%{transform:scale(1);opacity:0}8%{opacity:.4}60%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
.hc .ring2,.hc .cmt,.hc .cw .cmt,.hc .cbtn::after,.hc .aur,.hc .orb .fxsheen{animation-name:perfrot!important}
.hc .cta::after,.lisui .cta::after{animation-timing-function:steps(120)!important}
.hc .sat .c{animation-timing-function:steps(75)!important}
.hc .sat{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7)}
/* ---- APP: the Home root, and the existing controls kept from the old Home (RESTYLE, NEVER STRIP) ---- */
html body .scene-cmd.hc{background:var(--hcbg);color:var(--hct1);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:16px;line-height:1.4;letter-spacing:normal;display:block;padding-left:0;padding-right:0;overflow-x:hidden;position:relative;isolation:isolate}
.hc h1,.hc h4,.hc p{margin:0;padding:0}
.hc .top .c1-greeting{position:relative;z-index:1;font-size:22px}
.hc .top .atev.hcb{display:block;text-align:left;padding:0}
.hc .orbit .core.c1-btn-primary{padding:0;width:132px;min-height:0;border-radius:50%;background:#fff;color:#0b0b12;display:flex;flex-direction:column;gap:6px;font-size:18px;font-weight:800;line-height:1.4}
.hc .orbit .core.c1-btn-primary::before{content:none}
.hc .orbit .sat.hcb{padding:0;line-height:1.4}
.hc .cmd .field.c1-field{padding:0 16px;gap:10px;min-height:52px}
.hc .cmd .field.c1-field input{flex:1;min-width:0;min-height:50px;background:none;border:0;outline:0;color:var(--hct1);font:inherit;font-size:16px}
.hc .cmd .field.c1-field input::placeholder{color:var(--hct3)}
.hc .li.hcb{width:100%;text-align:left;color:var(--hct1);font-size:16px}
.hc .newrow .li+.li{margin-top:10px}
.hc .list .li .grow b{display:block;font-size:16px;font-weight:600;margin:0}
.hc .list .lav{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--hcs2);color:var(--hct1);font-weight:700;flex:none}
.hc .quota{margin:14px 16px 0;text-align:center;font-size:14px;color:var(--hct2)}
.hc .quota .scan-quota-badge{display:inline-flex}
.hc .conc.hcb{width:auto;display:flex;text-align:left;color:var(--hct1)}
/* R2c FX2C-3 (Alex 2026-10-07: "the rectangle is the one containing all the later circles"): the WHEELS info control
   sits in the rings card's own top-right corner, a 44x44 tap area over the card's padding; the legend keeps the
   mockup's wrapping and the card its height */
.hc .conc>.wib{position:absolute;top:2px;right:2px;margin:0;z-index:2}
html .hc .conc>.wib svg.ic{width:18px;height:18px}
html .hc .hcsheet .row svg.ic{flex:none}
.hc .hcsheet{color:var(--hct1)}
.hc .tonight-wrap{position:absolute;inset:0;pointer-events:none}
/* the account avatar takes the mockup's .av look (44px, periwinkle gradient, white initial) */
.hc .topr .avatar-btn{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6C63D9,#A29BFE)!important;color:#fff!important;font-size:16px!important;font-weight:700;box-shadow:none}
.hc .topr .avatar-btn .avatar-initial{color:#fff}
/* SR-HOME-01 (Alex, SOT BUGS row: "Fix by moving main content DOWN, not the pill up."): the tier pill keeps its
   place 20px above the avatar; when a pill is shown the header reserves that band, so Home moves down 20px and
   the pill is never cut off at the top edge. No pill (Free), no band: the mockup's geometry. */
.hc .top:has(.avatar-btn[data-paid-tier]){padding-top:36px}
html .hc svg.prog{width:100%;height:100%}
/* ---- R2b (REDESIGN-R2B-HOME-FIXES-2026-10-07, Alex's phone test of R2) ---- */
/* FX-2 "the cancel button is quite hard to see as it's still in the same place as good morning": while listening the
   greeting fades with the header, as the mockup's header does (its no-event header is empty), so Cancel keeps the
   mockup's place (top 14, left 12) over nothing (rules above: .c1-greeting joins .atev / .topr). */
/* FX-1 "the bottom element runs off the screen or is blocked by the bar": .hc is its own stacking context (isolation),
   so no sheet inside Home can rise over the tab bar outside it. While any sheet is open on Home (the app's sheet lock
   stamps body[data-aa-sheet-lock]: both info sheets, Join an event, the shares sheet) the bar steps out of the way, as
   the mockup's sheet covers its dock. The info sheets clear the iPhone home indicator and scroll inside themselves when
   taller than the screen. Two sheets now (FX-8): each opens on its own .open. */
body.c1-home-mode[data-aa-sheet-lock] .tab-bar{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
.hc .hcsheet{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
/* FX-4 "quite a lot of dead space at the base": the mockup's .list margin (120px = the 64px dock, its 14px gap and 42px
   of air) is the whole bottom space; the old Home's 96px tab-bar clearance under it is dropped, keeping only the
   safe-area the dock rises by on an iPhone. */
html body .scene-cmd.hc{padding-bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) - 14px)}