/* STAR12X — Global Universe. Visual layer only; content and behavior are shared. */
body.atelier{background:#fff;color:#121116}
.atelier #star12x-proto{--sx-bg:#fff;--sx-paper:#fff;--sx-ink:#151219;--sx-muted:#68636f;--sx-line:#e8e6ed;--sx-soft:#f5f2fc;--sx-accent:#7438ee;--sx-hero:#0e0b15;max-width:1440px;background:#fff;font-family:Inter,'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif}
.atelier #star12x-proto .sx-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:35px;padding:26px 48px;border-bottom:1px solid #eeedf1;background:#fff}
.atelier #star12x-proto .sx-brand{font-family:inherit;font-size:25px;font-weight:800;letter-spacing:-1.4px;color:#141117;gap:9px}
.atelier #star12x-proto .sx-brand-symbol{border:0;border-radius:11px;background:linear-gradient(140deg,#b981ff,#6d29e8);color:#fff;width:33px;height:33px;font-size:28px}
.atelier #star12x-proto .sx-brand small{display:none}
.atelier #star12x-proto .sx-nav{margin:0;padding:0;border:0;gap:26px;justify-content:center;background:none;flex-wrap:nowrap;min-width:0}
.atelier #star12x-proto .sx-nav button{font-size:12px;font-weight:550;color:#67616d;padding:10px 0;white-space:nowrap}
.atelier #star12x-proto .sx-nav button.active{color:#742deb;box-shadow:0 2px 0 #742deb;background:none}
.atelier #star12x-proto .sx-topright{gap:16px}
.atelier #star12x-proto .sx-topright .sx-link{font-size:12px;color:#141117;font-weight:600}
.atelier #star12x-proto .sx-concept-link{border-color:#e4e0eb;color:#6b6473;background:white;font-size:10px;padding:7px 11px}
.atelier #star12x-proto .sx-main{padding:28px 48px 40px}
.atelier #star12x-proto .at-kicker{font-size:9px;font-weight:650;letter-spacing:1.8px;color:#7643b7}
.at-hero{position:relative;isolation:isolate;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:15px;border-radius:28px;min-height:545px;padding:45px 48px;overflow:hidden;background:radial-gradient(ellipse at 98% 95%,#7631d6a8,transparent 55%),radial-gradient(ellipse at 60% 0%,#43137670,transparent 57%),#0d0b12;color:white}
.at-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 50%,#bb8cff08),radial-gradient(ellipse at 83% 30%,#a977ff2b,transparent 50%)}
.at-hero:after{content:'';position:absolute;right:-9%;top:-35%;width:70%;height:145%;border:1px solid #ceadff12;transform:rotate(30deg);border-radius:50%;z-index:-1;pointer-events:none}
.at-hero-copy{padding:12px 0}
.atelier #star12x-proto .at-hero .at-kicker{color:#c5a8eb;font-size:8px;letter-spacing:2px}
.at-hero .at-kicker i{background:#c88bff;box-shadow:0 0 14px #b658ff;width:6px;height:6px}
.atelier #star12x-proto .at-script{line-height:1.5;font-family:inherit;font-style:normal;font-size:14px;font-weight:500;letter-spacing:.2px;color:#c7b5df;margin:27px 0 14px}
.atelier #star12x-proto .at-hero h1{font-family:inherit;font-size:clamp(36px,3.9vw,56px);font-weight:700;line-height:1.3;letter-spacing:-2.8px;color:#fff}
.atelier #star12x-proto .at-hero h1 em{color:#c590ff;background:linear-gradient(95deg,#f1e0ff,#c084ff 50%,#8d55ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.atelier #star12x-proto .at-intro{color:#bcb3c8;font-size:12px;line-height:1.95;margin:23px 0 28px}
.atelier #star12x-proto .sx-action{background:linear-gradient(110deg,#9849f8,#6828e6);color:white;border:1px solid #ab7aff44;border-radius:11px;box-shadow:0 5px 18px #7036ed20;font-weight:600;padding:13px 20px;min-height:46px}
.atelier #star12x-proto .sx-action:hover{background:linear-gradient(110deg,#a95bff,#7939f4);box-shadow:0 8px 24px #7137eb30}
.at-hero-actions{gap:20px}
.atelier #star12x-proto .at-hero .at-text-button{color:#eee8f6;font-size:12px;gap:12px}
.at-footnote{color:#9e91af;font-size:9px;margin-top:20px}
.at-mini-star{color:#c994ff}
.at-universe{min-height:435px;overflow:clip;isolation:isolate}
.at-universe:before{inset:0;background:radial-gradient(ellipse,#b881fc3d,transparent 66%)}
.at-orbit{border-color:#bb89ff30}
.orbit-one{height:78%;width:91%;left:3%;top:12%;transform:rotate(-20deg)}
.orbit-two{border-color:#cba4ff20;border-style:solid;width:69%;height:96%;left:19%;top:0}
.at-star{color:#cd9cff}
.star-one{font-size:27px;top:5%;right:9%}
.star-two{left:4%;top:25%;color:#a772e9}
.star-three{right:6%;bottom:25%;color:#e1c8ff}
.at-greeting{background:#21142ee8;border-color:#ce9aff32;box-shadow:0 12px 25px #0002;color:#eadcf9;border-radius:10px;transform:none;font-size:10px;padding:11px 15px;left:6%;top:3%}
.at-greeting span{color:#d2a3ff}
.atelier #star12x-proto .at-pearl{border-color:#d3b9f9a1;background:radial-gradient(circle at 30% 20%,#fff,#eadcff 61%,#b690e6);box-shadow:inset 5px 8px 17px #fff,0 0 75px #a050fc25,0 20px 45px #05010f5c}
.pearl-main{width:260px;height:270px;left:11%;top:21%;transform:rotate(-5deg)}
.atelier #star12x-proto .pearl-main .sx-mascot{width:235px;height:235px}
.at-pearl-label{color:#755196;font-size:7px;bottom:20px;letter-spacing:1.7px}
.atelier #star12x-proto .pearl-moon{width:106px;height:106px;top:15%;right:0;background:radial-gradient(circle at 28% 16%,#fff,#f2eaff 58%,#cba9f4)}
.atelier #star12x-proto .pearl-moon .sx-mascot{width:94px;height:94px}
.atelier #star12x-proto .pearl-seed{width:94px;height:94px;right:2%;bottom:11%;background:radial-gradient(circle at 30% 20%,#fff,#f2eaff 60%,#bf9fe5)}
.atelier #star12x-proto .pearl-seed .sx-mascot{width:82px;height:82px}
.at-floating-card{background:#171020e8;backdrop-filter:blur(12px);border-color:#b78be744;border-radius:12px;color:#f0e4ff;font-size:10px;transform:none;left:0;bottom:5%;padding:14px 17px;box-shadow:0 16px 30px #0003}
.at-floating-card>span:first-child{color:#cda2ff}
.at-floating-card small{color:#ac8fc5;font-size:6px}
.at-card-dot{background:#c191ff;box-shadow:0 0 15px #c190ff80}
.at-art-caption{font-size:8px;color:#b7a1cd;bottom:0;left:43%}
.at-ribbon{margin-top:23px;padding:17px 15px;border-color:#eceaf0;gap:55px;color:#6d6576;font-size:10px;letter-spacing:.3px}
.at-ribbon i{width:4px;height:4px;background:#aa78eb;border-radius:1px;transform:rotate(45deg)}
.at-discover{padding:40px 0}
.at-section-head{margin-bottom:24px}
.atelier #star12x-proto .at-section-head h2{font-size:25px;font-weight:650;color:#141019;letter-spacing:-1.1px;margin-top:8px}
.at-side-note{color:#78717f;font-size:11px}
.at-reading-grid{gap:18px}
.atelier #star12x-proto .at-reading,.atelier #star12x-proto .at-reading:nth-child(n){border:1px solid #e8e3ed;border-radius:18px;background:#fff;box-shadow:none;padding:20px 21px 0}
.atelier #star12x-proto .at-reading:hover{border-color:#af84eb;background:#fdfbff;box-shadow:0 12px 28px #7032ba0b}
.at-reading-top{color:#796c87;font-size:8px;letter-spacing:1.2px}
.at-reading-top span:last-child{font-family:inherit;font-style:normal;font-size:10px;color:#b5a7c3}
.at-mascot-stage{min-height:150px}
.at-mascot-stage:before{width:112px;height:112px;background:radial-gradient(circle,#f5eeff,#ede3fd);box-shadow:none}
.at-small-spark{color:#9a60e1}
.atelier #star12x-proto .at-reading h3{font-size:16px;font-weight:650;color:#201829}
.atelier #star12x-proto .at-reading p{color:#7b7185;font-size:11px;line-height:1.8;margin:9px 0 20px}
.at-reading-bottom{border-color:#ede8f1;color:#7234bf;font-size:11px;padding:14px 0}
.at-bottom-grid{gap:20px}
.at-mood{border-color:#e9e3ef;background:#faf9fc;border-radius:20px;padding:29px}
.at-heart{color:#8855ce}
.atelier #star12x-proto .at-mood .sx-mood{background:#fff;border-color:#e5dced;color:#655871;font-size:11px;padding:9px 13px}
.atelier #star12x-proto .at-mood .sx-mood.active{background:#7a36e9;color:white;border-color:#7a36e9}
.atelier #star12x-proto .at-mood-answer{color:#6d6079;border-color:#e8e1ef;font-size:12px}
.at-shop-note{border:0;border-radius:20px;background:linear-gradient(115deg,#0f0b17,#32134c 62%,#7133a0);padding:29px 110px 29px 29px;color:#fff}
.atelier #star12x-proto .at-shop-note .at-kicker{color:#cbaceb;font-size:8px}
.atelier #star12x-proto .at-shop-note h2{color:#fff;font-weight:600;font-size:25px}
.atelier #star12x-proto .at-shop-note p{color:#c7b5d6;font-size:11px;line-height:1.8;margin-top:12px}
.atelier #star12x-proto .at-shop-note .at-text-button{color:#e7d0ff}
.at-shop-note small{color:#b298c7;font-size:9px}
.at-shop-symbol{color:#c595ff;font-size:85px;right:27px;text-shadow:0 0 30px #be77fb55}
.at-shop-symbol span{color:#efdaff}
.atelier #star12x-proto .at-closing{font-family:inherit;font-style:normal;font-size:14px;font-weight:500;letter-spacing:.1px;color:#82718f;margin:40px 0 5px}
.at-closing span{color:#9754e8}
.atelier #star12x-proto .sx-footer{margin:0 48px;background:white;border-color:#e9e5ef;color:#766d80;padding:25px 0 32px;font-size:10px}
/* Shared reading, shop and dialog surfaces use the same monochrome system. */
.atelier #star12x-proto .sx-heading h1{color:#17101e;font-size:30px;font-weight:650}
.atelier #star12x-proto .sx-eyebrow{color:#804bb3}
.atelier #star12x-proto .sx-panel{border-color:#e8e3ee;border-radius:18px;background:#fff;box-shadow:none}
.atelier #star12x-proto .sx-secondary{border-color:#ddd5e7;border-radius:10px;background:#fff;color:#392c48}
.atelier #star12x-proto .sx-buddy-note{background:#f7f3fc;border-color:#e9dff4;border-radius:15px}
.atelier #star12x-proto .sx-buddy-note strong{color:#653793}
.atelier #star12x-proto .sx-buddy-note p{color:#75677f}
.atelier #star12x-proto .sx-note,.atelier #star12x-proto .sx-resultcards .sx-note{background:#f6f2fc;color:#695779;border-radius:12px}
.atelier #star12x-proto .sx-chip.active{background:linear-gradient(110deg,#964cee,#6625d6);color:#fff;border-color:transparent}
.atelier #star12x-proto .sx-field input,.atelier #star12x-proto .sx-field select,.atelier #star12x-proto .sx-field textarea{background:#fcfbfe;border-color:#e4ddea}
.atelier #star12x-proto .sx-signs button,.atelier #star12x-proto .sx-pillar{background:#f5f1fb;border-color:#e8e0f1}
.atelier #star12x-proto .sx-meter div{background:linear-gradient(90deg,#b07bf8,#7028e7)}
.atelier #star12x-proto .sx-fan{background:radial-gradient(ellipse,#efe3ff,transparent 68%)}
.atelier #star12x-proto dialog{background:#fff;border-color:#e7dff0;border-radius:20px}
.atelier #star12x-proto dialog::backdrop{background:#09050db3;backdrop-filter:blur(9px)}
.atelier #star12x-proto button:focus-visible,.atelier #star12x-proto a:focus-visible{outline:3px solid #ab70f5;outline-offset:4px}
@media(max-width:1150px){.atelier #star12x-proto .sx-top{padding:23px 30px;gap:25px}.atelier #star12x-proto .sx-nav{gap:17px}.atelier #star12x-proto .sx-main{padding:24px 30px 35px}.atelier #star12x-proto .sx-footer{margin:0 30px}.at-hero{padding:35px 32px;min-height:500px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.atelier #star12x-proto .at-hero h1{font-size:42px;letter-spacing:-2px}.at-universe{min-height:405px}.pearl-main{width:220px;height:232px;left:7%;top:24%}.atelier #star12x-proto .pearl-main .sx-mascot{width:203px;height:203px}.atelier #star12x-proto .pearl-moon{width:91px;height:91px;right:0;top:16%}.atelier #star12x-proto .pearl-moon .sx-mascot{width:79px;height:79px}.atelier #star12x-proto .pearl-seed{width:83px;height:83px;right:0;bottom:14%}.atelier #star12x-proto .pearl-seed .sx-mascot{width:73px;height:73px}.at-hero-actions{gap:14px}.at-art-caption{left:32%;bottom:0}.at-reading-grid{gap:13px}.atelier #star12x-proto .at-reading:nth-child(n){padding-left:16px;padding-right:16px}}
@media(min-width:751px) and (max-width:960px){.atelier #star12x-proto .sx-top{grid-template-columns:auto auto;gap:18px}.atelier #star12x-proto .sx-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:30px}.atelier #star12x-proto .sx-topright{justify-self:end}.at-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:28px}.atelier #star12x-proto .at-hero h1{font-size:35px}.at-hero-actions{align-items:flex-start;flex-direction:column;gap:5px}.at-universe{min-height:395px}.pearl-main{left:2%;width:210px;height:223px}.atelier #star12x-proto .at-hero .at-kicker{font-size:7px;letter-spacing:1.2px}.at-reading-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.at-mascot-stage{min-height:155px}.at-ribbon{gap:28px}}
@media(max-width:750px){.atelier #star12x-proto .sx-top{display:flex;justify-content:space-between;gap:12px;padding:20px}.atelier #star12x-proto .sx-brand{font-size:22px;gap:8px}.atelier #star12x-proto .sx-brand-symbol{width:30px;height:30px;font-size:25px}.atelier #star12x-proto .sx-topright{gap:13px}.atelier #star12x-proto .sx-concept-link{font-size:9px;padding:6px 9px}.atelier #star12x-proto .sx-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;background:#fffffff2;border-top:1px solid #e7e1ed;backdrop-filter:blur(20px);padding:10px 8px calc(10px + env(safe-area-inset-bottom));z-index:20}.atelier #star12x-proto .sx-nav button{font-size:11px;min-height:44px;padding:8px 2px;color:#71667c;border-radius:10px;white-space:normal}.atelier #star12x-proto .sx-nav button.active{box-shadow:none;background:linear-gradient(120deg,#9b54ed,#712de0);color:#fff}.atelier #star12x-proto .sx-main{padding:14px 16px 28px}.at-hero{grid-template-columns:minmax(0,1fr);padding:32px 23px 23px;gap:12px;border-radius:22px;min-height:0;background:radial-gradient(ellipse at 90% 87%,#7631d6b3,transparent 58%),radial-gradient(ellipse at 80% 0%,#36165970,transparent 50%),#0d0b12}.at-hero-copy{text-align:left;padding:0}.atelier #star12x-proto .at-hero .at-kicker{font-size:7px;letter-spacing:1.4px}.atelier #star12x-proto .at-script{font-size:12px;margin:24px 0 12px}.atelier #star12x-proto .at-hero h1{font-size:clamp(31px,7.6vw,43px);line-height:1.35;letter-spacing:-1.8px}.atelier #star12x-proto .at-intro{font-size:11px;margin:19px 0 23px;line-height:1.95}.at-hero-actions{justify-content:flex-start;gap:15px}.atelier #star12x-proto .at-hero .sx-action{font-size:11px;padding:12px 15px}.atelier #star12x-proto .at-hero .at-text-button{font-size:10px;gap:8px}.at-footnote{justify-content:flex-start;font-size:8px;margin-top:14px}.at-universe{min-height:350px;max-width:370px;margin:16px auto 0;width:100%}.pearl-main{width:214px;height:230px;left:8%;top:19%}.atelier #star12x-proto .pearl-main .sx-mascot{width:199px;height:199px}.atelier #star12x-proto .pearl-moon{width:84px;height:84px;top:11%;right:0}.atelier #star12x-proto .pearl-moon .sx-mascot{width:73px;height:73px}.atelier #star12x-proto .pearl-seed{width:83px;height:83px;right:1%;bottom:13%}.atelier #star12x-proto .pearl-seed .sx-mascot{width:73px;height:73px}.at-greeting{font-size:9px;left:1%;top:0;padding:9px 12px}.at-floating-card{left:0;bottom:4%;padding:11px 12px;font-size:9px}.at-art-caption{font-size:7px;bottom:0;left:44%}.at-ribbon{margin-top:16px;padding:15px 0;gap:15px;font-size:9px}.at-discover{padding:30px 0}.atelier #star12x-proto .at-section-head h2{font-size:21px;line-height:1.5;letter-spacing:-.9px}.atelier #star12x-proto .at-kicker{font-size:8px;letter-spacing:1.3px}.at-reading-grid{gap:11px;grid-template-columns:repeat(2,minmax(0,1fr))}.atelier #star12x-proto .at-reading:nth-child(n){padding:16px 14px 0;border-radius:15px}.at-mascot-stage{min-height:127px}.atelier #star12x-proto .at-reading h3{font-size:14px}.atelier #star12x-proto .at-reading p{font-size:10px;line-height:1.7;min-height:34px;margin-bottom:14px}.at-reading-top{font-size:7px}.at-reading-bottom{font-size:10px;padding:12px 0}.at-bottom-grid{grid-template-columns:minmax(0,1fr);gap:15px}.at-mood{padding:23px;border-radius:18px}.at-shop-note{padding:26px 95px 25px 25px;border-radius:18px}.atelier #star12x-proto .at-shop-note h2{font-size:22px}.at-shop-symbol{right:22px;font-size:70px}.atelier #star12x-proto .at-closing{font-size:12px;margin-top:30px}.atelier #star12x-proto .sx-footer{margin:0 20px;padding:20px 0;font-size:9px}.atelier #star12x-proto .sx-heading h1{font-size:25px}}
@media(max-width:360px){.atelier #star12x-proto .sx-top{padding:16px;gap:8px}.atelier #star12x-proto .sx-brand{font-size:19px}.atelier #star12x-proto .sx-topright{gap:9px}.at-hero{padding-left:18px;padding-right:18px}.at-universe{min-height:320px}.pearl-main{width:190px;height:206px;left:3%;top:22%}.atelier #star12x-proto .pearl-main .sx-mascot{width:175px;height:175px}.atelier #star12x-proto .pearl-moon{width:74px;height:74px}.atelier #star12x-proto .pearl-moon .sx-mascot{width:65px;height:65px}.at-art-caption{display:none}.atelier #star12x-proto .at-reading h3{font-size:12px}}
