/* Sugito Family home hub — Futuristic HUD (mockup theme 5). Self-hosted fonts, no external requests. */
@font-face{font-family:"Rajdhani";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/rajdhani-400.woff2) format("woff2")}
@font-face{font-family:"Rajdhani";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/rajdhani-600.woff2) format("woff2")}
@font-face{font-family:"Michroma";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/michroma.woff2) format("woff2")}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#05070a}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
svg.icon{display:block;overflow:visible}
body{min-height:100vh;background:#05070a;font-family:"Rajdhani","Chakra Petch",ui-sans-serif,system-ui,sans-serif;color:#e8f0fa;-webkit-font-smoothing:antialiased}
.page{position:relative;overflow:hidden;min-height:100vh;min-height:100svh}
.bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg .g{position:absolute;inset:0;background:radial-gradient(800px 800px at 24% 50%,rgba(60,110,170,.22),transparent 65%),radial-gradient(700px 500px at 90% 100%,rgba(232,33,39,.10),transparent 60%),linear-gradient(#06080c,#04050a)}
.bg .gridl{position:absolute;inset:0;background-image:linear-gradient(rgba(180,210,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(180,210,255,.045) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(ellipse at 40% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 40% 50%,#000 20%,transparent 75%)}
.bg .scan{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(to bottom,transparent,rgba(160,200,255,.035),transparent);opacity:0}
.wrap{position:relative;z-index:2;display:grid;grid-template-columns:680px 1fr;align-items:center;min-height:100vh;min-height:100svh;padding:0 90px 0 0;max-width:1440px;margin:0 auto}
.hd{position:relative;height:min(900px,100svh);display:grid;place-items:center;text-align:center}
.hud{position:absolute;left:50%;top:50%;height:100%;width:auto;aspect-ratio:680/900;pointer-events:none;overflow:visible;transform:translate(-50%,-50%) translate(var(--px,0px),var(--py,0px));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
h1{position:relative;font-family:"Michroma",sans-serif;font-weight:400;font-size:40px;line-height:1.25;letter-spacing:.22em;text-transform:uppercase;color:#f4f8ff;padding-left:.22em;text-shadow:0 0 28px rgba(150,190,255,.18)}
.col{min-width:0}
.grid{position:relative;display:flex;flex-direction:column;gap:12px;justify-content:center}
.card{display:grid;grid-template-columns:76px 1fr 34px;align-items:center;gap:22px;padding:11px 24px 11px 18px;height:84px;position:relative;overflow:hidden;
 border:1px solid rgba(200,225,255,.14);background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
 transition:background .25s,border-color .25s,transform .25s;
 clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#e82127;opacity:0;transform:scaleY(.4);transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 14px rgba(232,33,39,.8)}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.card:hover,.card:focus-visible{background:linear-gradient(90deg,rgba(232,33,39,.14),rgba(255,255,255,.03));border-color:rgba(255,255,255,.35);outline:none}
.card:hover:before,.card:focus-visible:before{opacity:1;transform:none}
.card:focus-visible{border-color:#e82127}
.card:active{background:linear-gradient(90deg,rgba(232,33,39,.22),rgba(255,255,255,.04))}
.ico svg{width:56px;height:56px;margin:auto;transition:filter .3s}
.card:hover .ico svg,.card:focus-visible .ico svg{filter:drop-shadow(0 0 8px rgba(232,33,39,.45))}
.a{fill:none;stroke:#f1f6ff;stroke-width:1.8;stroke-linejoin:round}.b{fill:rgba(180,210,255,.10);stroke:#9fb8d8;stroke-width:1.6;stroke-linejoin:round}
.c{fill:#e82127;stroke:none}.k{stroke:#0a0d12;stroke-width:2}.b.k{fill:#0d1218;stroke:#f1f6ff;stroke-width:1.8}
.l{fill:none;stroke:#f1f6ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.c2,.c3{stroke:#e82127}
.txt b{display:block;font-weight:600;font-size:25px;letter-spacing:.14em;text-transform:uppercase}
.txt i{display:block;font-style:normal;font-weight:400;font-size:15px;letter-spacing:.08em;color:rgba(190,210,235,.55);margin-top:2px}
.arr,.grip{grid-column:3;grid-row:1}
.arr{width:26px;height:26px;color:rgba(255,255,255,.55);transition:color .25s,transform .25s}
.card:hover .arr,.card:focus-visible .arr{color:#e82127;transform:translateX(4px)}
.glow{filter:drop-shadow(0 0 5px rgba(232,33,39,.55))}
.draw{stroke-dasharray:none}

@media(max-width:900px){
 .wrap{display:block;padding:0 16px 36px;min-height:0}
 .hd{height:calc(300px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
 .hud{height:560px;top:calc(50% + env(safe-area-inset-top,0px) / 2);opacity:.9}
 h1{font-size:22px}
 .grid{gap:10px}
 .card{grid-template-columns:52px 1fr 24px;gap:16px;height:76px;padding:10px 16px 10px 12px}
 .ico svg{width:42px;height:42px}.txt b{font-size:19px}.txt i{font-size:14px}
}
@media(max-width:900px) and (min-width:560px){.wrap{max-width:560px}}
/* 901-1240px: the fixed 680px hero column would leave the card column only ~250-460px wide and clip the cards, so the hero flexes and the cards get 500px */
@media(min-width:901px) and (max-width:1240px){
 .wrap{grid-template-columns:minmax(0,1fr) 500px;padding-right:40px}
 .hud{height:min(100%,calc((100vw - 560px) * 1.32))}
 h1{font-size:34px}
}

/* ambient motion — only when the visitor has not asked for reduced motion */
@media(prefers-reduced-motion:no-preference){
 .r,.orbit{transform-origin:340px 450px}
 .r1{animation:spin 260s linear infinite}
 .r2{animation:spin 170s linear infinite reverse}
 .r3{animation:spin 210s linear infinite reverse}
 .orbit{animation:spin 30s linear infinite}
 .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.9s cubic-bezier(.25,.7,.2,1) .25s forwards}
 .draw.sil{animation-delay:.7s}.draw.sil2{animation-delay:.95s}
 .r1{animation:fade 1.4s ease-out backwards,spin 260s linear infinite}
 .r2{animation:fade 1.4s .2s ease-out backwards,spin 170s linear infinite reverse}
 .r3{animation:fade 1.4s .35s ease-out backwards,spin 210s linear infinite reverse}
 .orbit{opacity:0;animation:fade 1s 1.6s ease-out forwards,spin 30s linear infinite}
 .glow{animation:pulse 6s ease-in-out 2.2s infinite}
 h1{animation:rise 1.1s .3s cubic-bezier(.2,.7,.2,1) backwards}
 .card{animation:cardin .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.35s + var(--i) * .08s)}
 .card:hover:after,.card:focus-visible:after{animation:sheen .9s ease}
 .bg .scan{animation:scan 11s linear 2s infinite}
 .card:active{transform:scale(.988)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 4px rgba(232,33,39,.35))}50%{filter:drop-shadow(0 0 10px rgba(232,33,39,.85))}}
@keyframes rise{from{opacity:0;transform:translateY(8px);letter-spacing:.34em}to{opacity:1;transform:none;letter-spacing:.22em}}
@keyframes cardin{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes sheen{to{transform:translateX(120%)}}
@keyframes scan{0%{top:-30%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}

/* reorder (drag) */
.page{position:relative}
.editbtn{position:absolute;z-index:6;top:max(18px,calc(env(safe-area-inset-top,0px) + 10px));right:max(18px,env(safe-area-inset-right,0px));appearance:none;-webkit-appearance:none;font:600 14px "Rajdhani",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(214,228,246,.8);background:rgba(8,12,18,.55);border:1px solid rgba(200,225,255,.24);padding:8px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:background .2s,color .2s,border-color .2s}
.editbtn:hover,.editbtn:focus-visible{border-color:#e82127;color:#fff;outline:none}
.editing .editbtn{background:#e82127;border-color:#e82127;color:#fff}
.card{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.card *,.card svg,.card img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.grip{display:none;align-items:center;justify-content:center;width:34px;height:44px;touch-action:none;cursor:grab;position:relative;z-index:2}
.grip i{display:block;width:16px;height:10px;background:radial-gradient(circle,#f1f6ff 1.4px,transparent 1.8px) 0 0/8px 5px;opacity:.8}
.editing .grip{display:flex}.editing .arr{display:none}
.settled .card{animation:none}
.dl>.it{transition:transform .24s cubic-bezier(.2,.8,.2,1);will-change:transform}
.dl>.it.held{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.grid>.it.held{border:1px dashed rgba(232,33,39,.8);background:rgba(232,33,39,.07)}
.grid>.it.held>*{visibility:hidden}.grid>.it.held:before,.grid>.it.held:after{display:none}
body.dragging .grid>.it:not(.held){pointer-events:none}
.gw{position:fixed;z-index:1000;margin:0;pointer-events:none;filter:drop-shadow(0 16px 22px rgba(0,0,0,.65)) drop-shadow(0 0 14px rgba(232,33,39,.25));will-change:transform;transform-origin:50% 50%}
.gw.settle{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.gw .card.ghost{width:100%;height:100%;margin:0;cursor:grabbing;animation:none;transition:none;border-color:#e82127;background:linear-gradient(90deg,rgba(60,14,18,.96),rgba(14,18,26,.96))}
.gw .card.ghost:before{opacity:1;transform:none}
body.dragging{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
html.dragging-lock{overscroll-behavior:none}
.dragging .hud{transition:none}
.toast{position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:60;background:rgba(8,12,18,.9);border:1px solid rgba(200,225,255,.3);color:#e8f0fa;font:600 15px "Rajdhani",sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.dl>.it,.dl>.it.held,.gw.settle,.toast{transition:none!important}}

/* sign-in */
.login{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px;position:relative}
.login .ringset{position:absolute;left:50%;top:50%;width:min(620px,150vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.login .ringset i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(207,227,255,.14)}
.login .ringset i:nth-child(2){inset:9%;border:1px dashed rgba(207,227,255,.14)}
.login .ringset i:nth-child(3){inset:2%;border:3px solid transparent;border-top-color:#e82127;border-left-color:rgba(232,33,39,.55);transform:rotate(-30deg);filter:drop-shadow(0 0 5px rgba(232,33,39,.5))}
.login .ringset i:nth-child(4){inset:20%;border:1px solid rgba(207,227,255,.1)}
.login form{position:relative;z-index:2;width:min(100%,340px);text-align:center}
.login h1{font-size:24px;margin-bottom:34px}
.login label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.login input{width:100%;height:52px;padding:0 16px;border:1px solid rgba(200,225,255,.22);background:rgba(8,12,18,.7);color:#f4f8ff;font:600 18px "Rajdhani",sans-serif;letter-spacing:.14em;border-radius:0;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);-webkit-appearance:none;appearance:none;text-align:center}
.login input::placeholder{color:rgba(190,210,235,.4);letter-spacing:.14em;font-weight:400;text-transform:uppercase}
.login input:focus{outline:none;border-color:#e82127;box-shadow:0 0 0 1px rgba(232,33,39,.5)}
.login button{width:100%;height:52px;margin-top:12px;border:1px solid #e82127;background:#e82127;color:#fff;font:600 17px "Rajdhani",sans-serif;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:filter .2s,background .2s}
.login button:hover,.login button:focus-visible{filter:brightness(1.15);outline:none}
.login .err{margin-top:18px;color:#ff8a8e;font-size:16px;letter-spacing:.06em}
@media(prefers-reduced-motion:no-preference){
 .login .ringset i:nth-child(3){animation:lspin 40s linear infinite}
 .login .ringset i:nth-child(2){animation:lspin 120s linear infinite reverse}
 .login form{animation:rise 1s .1s cubic-bezier(.2,.7,.2,1) backwards}
}
@keyframes lspin{to{transform:rotate(330deg)}}

/* "More" card: Price Check + Tesla + Stocks as three sub-links inside one draggable card. It grows to fit (never a fixed height, never clipped);
   the sub-link layout follows the CARD's width (container query), not the viewport, so it is right at every breakpoint. */
.card.more{height:auto;min-height:84px;overflow:visible;container-type:inline-size;grid-template-rows:auto auto;row-gap:12px;align-items:center;padding:14px 24px 16px 18px;cursor:grab}
.card.more>.ico{grid-column:1;grid-row:1}.card.more>.txt{grid-column:2;grid-row:1;min-width:0}.card.more>.grip{grid-column:3;grid-row:1}
.subs{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
.sub{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:6px 12px;min-width:0;border:1px solid rgba(200,225,255,.22);background:rgba(255,255,255,.04);
 font:600 17px "Rajdhani",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e8f0fa;cursor:pointer;-webkit-user-drag:none;text-align:center;
 clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:background .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.sub:hover,.sub:focus-visible{background:linear-gradient(90deg,rgba(232,33,39,.2),rgba(255,255,255,.05));border-color:#e82127;color:#fff;outline:none}
.sub:active{background:rgba(232,33,39,.3)}
.si{display:block;flex:none}.si svg{display:block;width:30px;height:30px}
.sub:hover .si svg,.sub:focus-visible .si svg{filter:drop-shadow(0 0 6px rgba(232,33,39,.5))}
.editing .sub{pointer-events:none;opacity:.55}
@media(max-width:900px){.card.more{padding:12px 16px 14px 12px;row-gap:10px}.subs{gap:8px}}
/* medium card: icon above label */
@container (max-width:580px){
 .sub{flex-direction:column;gap:5px;min-height:68px;padding:8px 4px;font-size:14px;letter-spacing:.07em}
 .si svg{width:28px;height:28px}
}
/* narrow card (e.g. the 2-column desktop layout at 900-1150px): three full-width rows */
@container (max-width:330px){
 .subs{grid-template-columns:1fr;gap:8px}
 .sub{flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:6px 14px;font-size:15px;letter-spacing:.1em}
 .si svg{width:26px;height:26px}
}