/* Senco Virtual Try-on prototype: layout shell only. Every pixel of plugin UI comes from components.css / tokens.css (the Figma frames). */
html,body{height:100%;margin:0;background:#e9e4dc;font-family:var(--f-public),system-ui,sans-serif;color:var(--t-ink)}
.proto{min-height:100%;display:flex;align-items:center;justify-content:center;gap:48px;padding:16px;box-sizing:border-box}
.side{width:260px;flex:none}
.side h1{font:600 22px/1.3 var(--f-manrope);margin:0}
.side .sub{margin:6px 0 0;font:400 13px/1.5 var(--f-public);color:var(--t-ink-62)}
.steps{list-style:none;padding:0;margin:20px 0 14px;display:flex;flex-direction:column;gap:6px;counter-reset:s}
.steps li{counter-increment:s}
.steps button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;font:500 14px/1.4 var(--f-public);color:var(--t-ink);border:1px solid transparent}
.steps button::before{content:counter(s);width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--t-line);display:grid;place-items:center;font:600 12px var(--f-public);flex:none}
.steps button:hover{background:#fff}
.steps button[aria-current="step"]{background:#fff;border-color:var(--t-maroon);color:var(--t-maroon)}
.steps button[aria-current="step"]::before{background:var(--t-maroon);border-color:var(--t-maroon);color:#fff}
.steps button:focus-visible,.restart:focus-visible{outline:2px solid var(--t-maroon);outline-offset:2px}
.hint{font:400 13px/1.5 var(--f-public);color:var(--t-ink-62);margin:0}
.note{margin:14px 0 0;font:400 12px/1.5 var(--f-public);color:var(--t-ink-50)}
.restart{all:unset;box-sizing:border-box;margin-top:14px;cursor:pointer;padding:8px 16px;border-radius:100px;border:1px solid var(--t-ink);color:var(--t-ink);font:500 13px var(--f-public);background:#fff}
.stage-wrap{flex:none;position:relative}
/* laptop frame: device chrome only, drawn in CSS around the 1512x941 screen */
.laptop{--bezel:#0e0e10;position:absolute;left:0;top:0;width:1684px;height:1027px;transform-origin:0 0}
.lid{position:absolute;left:60px;top:0;width:1564px;height:993px;background:var(--bezel);border-radius:34px 34px 10px 10px;box-shadow:inset 0 0 0 2px #3b3b40,inset 0 0 0 4px #17171a}
.cam{position:absolute;left:50%;top:9px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#26262b;box-shadow:inset 0 0 0 2px #151518,0 0 0 1px #2f2f34}
.base{position:absolute;left:0;top:993px;width:1684px;height:34px;border-radius:0 0 46px 46px / 0 0 30px 30px;background:linear-gradient(180deg,#f0f0f2 0,#d3d4d8 45%,#a9abb1 100%);box-shadow:0 26px 44px rgba(0,0,0,.24),inset 0 2px 0 rgba(255,255,255,.7)}
.base::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#8c8e94,#c4c5ca 20%,#c4c5ca 80%,#8c8e94);border-radius:2px}
.notch{position:absolute;left:50%;top:0;width:230px;height:13px;margin-left:-115px;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#b2b4ba,#d6d7db)}
.frameless.laptop{width:1512px;height:941px}
.frameless .lid{left:0;width:1512px;height:941px;background:none;border-radius:0;box-shadow:none}
.frameless .stage{left:0;top:0;border-radius:0}
.frameless .cam,.frameless .base{display:none}
.stage{position:absolute;left:26px;top:26px;width:1512px;height:941px;overflow:hidden;border-radius:10px;background:var(--t-load)}
.stage .screen.scr{position:absolute;left:0;top:0;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s .18s}
.stage .screen.scr.active{opacity:1;visibility:visible;transition:opacity .18s ease}
/* affordances */
.stage [data-act].live{cursor:pointer}
.stage [data-act].inert{cursor:default}
.stage [data-act]:focus-visible{outline:2px solid var(--t-maroon);outline-offset:2px}
.stage .hint-ring{outline:2px solid var(--t-maroon-line);outline-offset:3px;animation:ring 1.6s ease-in-out infinite;position:relative}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(138,22,38,.35)}50%{box-shadow:0 0 0 9px rgba(138,22,38,0)}}
.toast{position:absolute;left:50%;bottom:36px;transform:translate(-50%,8px);padding:10px 18px;border-radius:999px;background:var(--t-load);color:#fff;font:500 14px/1 var(--f-public);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.chp.on{border-color:var(--t-maroon-line)!important;color:var(--t-maroon)!important;background:var(--t-sel-bg)!important}
.star.off,.star{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.embed,html.embed body{background:transparent;overflow:hidden}
html.embed .proto{padding:0;min-height:100%}
html.embed .side{display:none}
@media (max-width:860px){.side{display:none}.proto{padding:0}}
@media (prefers-reduced-motion:reduce){.stage .screen.scr,.stage .screen.scr.active{transition:none}.stage .hint-ring{animation:none}}