/* --- site.css --- */
/* CINQUANTA | Blue-star scrapbook. Reference artworks are user-supplied, not stock icons. */
:root{--white:#fff;--blue:#426caa;--ink:#315789;--mid:#7198c5;--light:#b5d1ec;--line:#dce8f4;--cream:#fffdf9;--soft:#8da8c9}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:'DM Sans','Noto Sans KR','Apple SD Gothic Neo',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #507bb4;outline-offset:5px}
.paper-grain{pointer-events:none;position:fixed;inset:0;z-index:25;opacity:.035;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".82" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E')}
.topbar{height:87px;padding:0 max(4.6vw,24px);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20;background:white;border-bottom:1px solid #eff3f7}.brand{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-style:italic;font-size:29px;letter-spacing:-1.3px;display:flex;align-items:center;white-space:nowrap}.brand-dot,.footer-copy>a span{color:#85afe0}.brand-icon{width:27px;height:32px;margin-right:12px}.brand-icon img{width:100%;height:100%;object-fit:contain}.topbar nav{display:flex;gap:clamp(15px,2.3vw,39px);align-items:center}.topbar nav a{font-size:11px;font-weight:700;letter-spacing:1.6px;color:#5474a4;transition:color .18s}.topbar nav a:hover{color:#9dc5e9}.menu-toggle{display:none;background:none;border:none;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:1px}
.hero{background:white;min-height:740px;position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:center;align-items:center}.hero-micro{position:absolute;top:53px;font-size:10px;font-weight:600;line-height:1.9;letter-spacing:1.2px;color:#9cb4d0;z-index:2}.upper-left{left:6.1%}.upper-right{right:5.8%;text-align:right}.hero-art{position:absolute;object-fit:contain;pointer-events:none;user-select:none;z-index:1;animation:float-one 8s ease-in-out infinite}.hero-art-left{width:clamp(200px,28vw,450px);left:-3%;bottom:0;transform:rotate(-11deg);animation-delay:-3s}.hero-art-upper{width:clamp(150px,18vw,265px);left:17%;top:-14%;opacity:.72;animation-duration:10s}.hero-art-comet{width:clamp(310px,36vw,530px);right:-7%;top:5%;transform:rotate(4deg);animation-duration:10s;animation-delay:-4s}.hero-art-small{width:clamp(110px,13vw,175px);right:16%;bottom:0;animation-delay:-2s}.hero-art-top-right{width:105px;right:17%;top:20%;opacity:.63;animation-duration:8s;animation-delay:-2s}.hero-copy{position:relative;z-index:3;text-align:center;max-width:900px;padding:127px 20px 110px}.hero-prelude{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(15px,1.8vw,23px);color:#83a4c9;margin:0 0 8px}.hero h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-style:italic;color:#4975b2;letter-spacing:-.075em;font-size:clamp(74px,12vw,159px);line-height:1.2;margin:0 0 7px;padding-right:.09em;white-space:nowrap;text-shadow:2px 4px 0 #edf5fd}.hero h1 span{color:#a3c7e8}.handwritten{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:#80a5cb;font-size:clamp(19px,2.5vw,28px);transform:rotate(-4deg);margin:-6px 0 41px}.hero-intro{line-height:2.1;color:#7191b5;font-size:13px;letter-spacing:.01em}.hero-actions{display:flex;justify-content:center;gap:35px;margin-top:31px}.link-underline{font-size:11px;letter-spacing:1.2px;color:#446da6;font-weight:700;display:inline-flex;align-items:center;gap:16px;padding-bottom:7px;border-bottom:1px solid #8cb1d8;transition:gap .2s,color .2s}.link-underline:hover{gap:24px;color:#8db7dc}.link-underline.subtle{color:#8ba8c8;border-color:#cbdeef}.hero-scroll,.hero-serial{position:absolute;z-index:2;bottom:35px;font-size:10px;font-weight:700;letter-spacing:1.4px;color:#91accb}.hero-scroll{left:6.2%}.hero-scroll span{padding-left:8px}.hero-serial{right:6.2%}
.starline{display:flex;align-items:center;gap:28px;margin:0 auto;max-width:1180px;height:85px}.starline span{height:1px;background:#e5edf5;flex:1}.starline img{width:54px;transform:rotate(12deg)}
.section-wrap{max-width:1150px;margin:0 auto;padding:95px 30px;position:relative}.section-label{font-size:10px;letter-spacing:1.55px;color:#7999c1;font-weight:700;display:flex;align-items:center;gap:15px}.section-label span{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-style:italic;color:#9bbfe4}.section-topline{display:flex;align-items:center;justify-content:space-between;gap:16px}.micro-aside{font-size:9px;color:#a1b7d2;letter-spacing:1.2px;font-weight:700}.section-head{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.section-head h2{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-2px;font-size:clamp(42px,5.8vw,71px);color:var(--blue);line-height:1.15;margin:0}.section-head img{width:95px;height:90px;object-fit:contain;margin-right:3%;transform:rotate(10deg)}.heading-period{color:#aacdeb}.section-desc{margin:6px 0 36px;color:#8ba5c3;font-size:13px;line-height:1.8}.intro{padding-top:65px;padding-bottom:100px}.intro-layout{margin-top:36px;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}.intro-heading{position:relative}.scribble-tag{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:25px;color:#91b1d3;transform:rotate(-5deg);margin-bottom:12px}.intro h2{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:#4774b2;line-height:1.28;letter-spacing:-1.8px;font-size:clamp(44px,5.2vw,67px);margin:0}.intro h2 em{font-style:italic;color:#8bb2d8}.intro-sticker{position:absolute;width:175px;left:58%;bottom:-130px;transform:rotate(17deg)}.intro-letter{border-left:1px solid #d4e3f1;padding:12px 0 16px 38px;color:#718eaf;font-size:14px;line-height:2.15}.intro-letter p{margin:0 0 17px}.intro-letter a{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:#4776b3;border-bottom:1px solid #9dc0e0}.intro-letter a span{margin-left:14px}.intro-sign{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:24px;color:#9dbce0;margin-top:34px;transform:rotate(-3deg)}
.notice{padding-top:100px}.notice .section-head img{width:88px}.notice-list{margin-top:34px;border-top:1px solid #99b9db}.notice-row{width:100%;background:white;border:0;border-bottom:1px solid #dde8f4;display:grid;grid-template-columns:57px 102px 1fr 140px 25px;gap:16px;text-align:left;align-items:center;min-height:86px;color:var(--ink);padding:4px 8px;transition:background .25s,padding .25s}.notice-row:hover{background:#f8fbfe;padding-left:20px}.notice-index{font-family:'Playfair Display',Georgia,serif;color:#9ab9d7;font-style:italic;font-size:21px}.notice-tag{color:#6a93bd;font-size:10px;font-weight:700;letter-spacing:1px}.notice-name{font-size:15px;font-weight:600;color:#3d6192}.notice-date{color:#91abc8;font-size:10px;letter-spacing:.9px}.notice-arrow{font-size:21px;color:#82aad2}.small-divider{height:50px;text-align:center}.small-divider img{height:95px;margin:0 auto;transform:translateY(-17px) rotate(-19deg);opacity:.68}
.characters{padding-top:110px}.characters .section-head img{width:106px}.character-toolbar{margin:34px 0 38px;display:flex;align-items:flex-end;gap:23px}.search-label,.select-label{display:flex;gap:12px;align-items:center;border-bottom:1px solid #a8c4e2;min-height:47px;padding-bottom:7px}.search-label{min-width:250px;max-width:500px;flex:1}.search-label span,.select-label span{font-size:10px;font-weight:700;letter-spacing:1.1px;color:#769bc2}.search-label input{width:100%;outline:none;border:none;padding:9px;color:#476d9d;background:transparent;font-size:12px}.search-label input::placeholder{color:#aec2d7}.select-label{min-width:210px}.select-label select{appearance:auto;border:0;background:transparent;outline:0;color:#547cad;font-size:12px;width:100%;padding:8px}.result-count{margin-left:auto;color:#9db3cc;font-size:10px;letter-spacing:1px;white-space:nowrap}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 23px}.character-card{background:#fff;padding:8px 8px 20px;border:1px solid #e2eaf2;box-shadow:1px 5px 7px #8db4de17;text-align:left;display:block;width:100%;color:var(--ink);min-width:0;position:relative;transition:transform .3s,box-shadow .3s;transform:rotate(-.5deg)}.character-card:nth-child(4n+2){transform:rotate(1.4deg)}.character-card:nth-child(4n+3){transform:rotate(-1.2deg)}.character-card:hover{transform:translateY(-8px) rotate(0deg);box-shadow:3px 13px 21px #9bb8d644}.portrait{height:260px;overflow:hidden;background:#f1f7fc;position:relative}.portrait img{height:100%;width:100%;object-fit:cover;transition:transform .4s}.character-card:hover .portrait img{transform:scale(1.04)}.card-category{font-size:9px;font-weight:600;letter-spacing:1px;color:#8faed0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:17px 7px 8px}.card-name{display:block;font-weight:600;font-size:19px;color:#3a6397;margin:0 7px 5px}.card-desc{display:block;font-size:11px;color:#9aaeca;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 7px;line-height:1.8}.character-card:nth-child(7n+2):after{content:'';position:absolute;width:57px;height:60px;right:-22px;top:-26px;background:url('assets/01_pastel_star_cluster.png') center/contain no-repeat;pointer-events:none}.character-card:nth-child(11n+4):before{content:'';position:absolute;width:53px;height:57px;left:-17px;bottom:-26px;background:url('assets/02_long_sparkle.png') center/contain no-repeat;pointer-events:none;z-index:2}.load-more{border:1px solid #9bbbdc;color:#4f79ac;background:#fff;padding:15px 35px;margin:47px auto 0;display:block;font-size:11px;font-weight:700;letter-spacing:1.25px;transition:background .2s}.load-more span{margin-left:18px}.load-more:hover{background:#f4faff}.load-more[hidden]{display:none}
.visual-break{background:white;position:relative;min-height:540px;max-width:1220px;margin:80px auto 45px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;overflow:hidden;padding:15px 70px}.visual-break-paper{height:425px;width:315px;overflow:hidden;justify-self:center;position:relative;transform:rotate(-6deg);box-shadow:12px 16px 25px #9fb3cc26;border:10px solid white}.visual-break-paper img{height:100%;width:100%;object-fit:cover}.visual-break-copy{position:relative;z-index:2}.visual-break-copy>span{font-size:10px;letter-spacing:1.7px;color:#8fa9ca;font-weight:700}.visual-break-copy p{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(37px,5vw,65px);line-height:1.27;color:#416eaa;margin:22px 0 34px;letter-spacing:-1px}.visual-break-copy em{font-weight:500;color:#9cbfe3}.visual-break-sticker{position:absolute;width:160px;right:2%;bottom:1%;transform:rotate(-10deg)}
.upcoming{padding-top:100px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project-card{padding:30px 26px 31px;min-height:178px;border:1px solid #dce7f1;background:white;position:relative;transition:transform .2s}.project-card:nth-child(3n+2){transform:rotate(1deg)}.project-card:hover{transform:translateY(-4px)}.project-card:after{content:'';position:absolute;top:-18px;right:12px;width:45px;height:48px;background:url('assets/01_pastel_star_cluster.png') center/contain no-repeat}.project-num{font-size:10px;color:#94abc8;letter-spacing:1px}.project-status{color:#87a2c4}.project-card h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:#4673ad;font-size:24px;margin:22px 0 10px}.project-card p{font-size:12px;line-height:1.7;color:#8fa5c0;margin:0}.worlds{padding-bottom:140px}.world-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.world-card{padding:38px 30px;border:1px solid #ccdfed;min-height:190px;position:relative;background:white}.world-card:before{content:'';position:absolute;right:21px;top:20px;width:32px;height:34px;background:url('assets/02_long_sparkle.png') center/contain no-repeat}.world-card h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:#416fa8;font-size:26px;margin:21px 0 12px}.world-card p{font-size:12px;line-height:1.7;color:#8ca9c7}.world-card .kicker{font-size:10px;letter-spacing:1.4px;color:#91aaca}
.footer{min-height:300px;border-top:1px solid #e5edf5;display:flex;align-items:center;justify-content:space-between;padding:50px max(5vw,25px);position:relative;overflow:hidden;background:white}.footer>img{position:absolute;left:-10px;bottom:-75px;max-width:240px;opacity:.33;mix-blend-mode:multiply}.footer-copy{margin-left:210px;z-index:1}.footer-copy>a{font-family:'Playfair Display',Georgia,serif;font-size:50px;font-style:italic;color:#4977b3}.footer-copy p{color:#7da3cb;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:18px;margin:5px 0 24px}.footer-copy small{font-size:10px;color:#9bb1cd}.backtop{font-size:11px;letter-spacing:1.2px;font-weight:700;z-index:1;color:#648cb9}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50;padding:20px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:#3e609074;backdrop-filter:blur(4px)}.modal-card{width:min(860px,100%);max-height:90vh;overflow:auto;position:relative;background:#fff;border:1px solid #accce8;padding:43px;box-shadow:16px 18px 0 #aac5df47}.modal-close{position:sticky;top:0;float:right;z-index:2;background:white;border:0;border-bottom:1px solid #a5c7e4;color:#5a88b9;font-size:10px;font-weight:700;letter-spacing:1px;padding:10px}.modal-profile{display:grid;grid-template-columns:43% 1fr;gap:33px}.modal-profile img{width:100%;max-height:515px;object-fit:cover}.modal-profile h2,.modal-text h2{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:46px;color:#3c6ba8;margin:5px 0 20px}.modal-profile p,.modal-text p{color:#6d8cae;line-height:1.95;font-size:13px}.meta{display:grid;grid-template-columns:90px 1fr;gap:15px 13px;margin-top:27px;border-top:1px solid #dde8f4;padding-top:23px}.meta b{font-size:10px;color:#8ca8c8}.meta span{font-size:12px}.kicker{font-size:10px;letter-spacing:1.7px;color:#93b0cc}.empty{grid-column:1/-1;padding:70px;text-align:center;color:#9ab2cf}
@keyframes float-one{0%,100%{translate:0 0}50%{translate:0 -13px}}@media(max-width:1000px){.character-grid{grid-template-columns:repeat(3,1fr)}.hero-art-left{left:-11%}.hero-art-comet{right:-17%}.intro-layout{gap:35px}}
@media(max-width:720px){.topbar{height:65px;padding:0 17px}.brand{font-size:24px}.brand-icon{width:23px;margin-right:6px}.menu-toggle{display:block}.topbar nav{position:absolute;display:none;top:65px;left:0;right:0;padding:20px 26px;background:white;border-bottom:1px solid #dbe8f4;flex-direction:column;gap:24px;align-items:flex-start}.topbar nav.open{display:flex}.hero{min-height:720px;align-items:center}.hero-micro{top:32px;font-size:8px}.upper-left{left:22px}.upper-right{right:22px}.hero-copy{padding:115px 17px 100px}.hero h1{font-size:clamp(60px,12.3vw,88px);letter-spacing:-.083em}.hero-prelude{font-size:16px}.handwritten{font-size:22px;margin-bottom:29px}.hero-intro{font-size:11px}.hero-actions{gap:22px}.link-underline{font-size:9px;gap:7px}.hero-art-left{width:225px;left:-95px;bottom:32px;opacity:.8}.hero-art-upper{width:145px;top:80px;left:-28px;opacity:.44}.hero-art-comet{width:240px;right:-110px;top:135px;opacity:.7}.hero-art-small{width:106px;right:0;bottom:85px;opacity:.8}.hero-art-top-right{width:90px;right:2px;top:18px}.hero-scroll{bottom:24px;left:22px;font-size:8px}.hero-serial{bottom:24px;right:22px;font-size:8px}.starline{height:60px;gap:15px;padding:0 18px}.starline img{width:36px}.section-wrap{padding:72px 20px}.intro{padding-top:40px}.intro-layout{display:block;margin-top:26px}.intro h2{font-size:49px}.scribble-tag{font-size:20px}.intro-sticker{width:100px;left:auto;right:0;bottom:-30px}.intro-letter{margin-top:50px;padding-left:19px;font-size:12px}.intro-sign{font-size:19px}.section-label{font-size:9px}.section-head h2{font-size:clamp(38px,10vw,57px)}.section-head img{width:65px;height:65px}.micro-aside{display:none}.section-desc{font-size:12px}.notice-row{grid-template-columns:30px 62px 1fr 18px;min-height:78px;gap:9px}.notice-index{font-size:17px}.notice-name{font-size:12px}.notice-tag{font-size:9px}.notice-date{display:none}.notice-arrow{font-size:18px}.character-toolbar{flex-wrap:wrap;gap:8px}.search-label{min-width:100%;max-width:100%}.select-label{flex:1}.result-count{margin-left:0}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 14px}.portrait{height:200px}.card-name{font-size:16px}.card-desc{font-size:10px}.card-category{font-size:8px}.character-card{padding:6px 6px 15px}.character-card:nth-child(7n+2):after{width:35px;height:37px;right:-12px;top:-17px}.visual-break{padding:20px;min-height:500px;gap:12px;grid-template-columns:1fr 1fr;margin:30px auto 10px}.visual-break-paper{width:100%;height:360px}.visual-break-copy p{font-size:clamp(28px,7vw,44px)}.visual-break-copy>span{font-size:8px}.visual-break-sticker{width:80px;right:0;bottom:25px}.project-grid,.world-grid{grid-template-columns:1fr}.worlds{padding-bottom:95px}.footer{min-height:255px;align-items:flex-end;padding:50px 25px;gap:12px}.footer>img{max-width:165px;left:-63px;bottom:-25px}.footer-copy{margin-left:50px}.footer-copy>a{font-size:35px}.footer-copy p{font-size:14px}.footer-copy small{font-size:8px}.backtop{font-size:9px;white-space:nowrap}.modal-card{padding:20px}.modal-profile{grid-template-columns:1fr}.modal-profile img{max-height:390px;object-position:top}.modal-profile h2{font-size:36px}}
@media(max-width:410px){.hero h1{font-size:59px}.hero-art-comet{right:-145px}.hero-art-left{left:-120px}.visual-break{display:block}.visual-break-paper{height:310px;width:220px;transform:rotate(-4deg)}.visual-break-copy{margin:25px 40px}.visual-break-sticker{right:30px}.portrait{height:160px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* The user reference is treated as one continuous drawing, not clipped square icon crops. */
.hero-art-collage{width:100%;height:100%;inset:0;object-fit:cover;object-position:center center;opacity:.72;animation:none;mask-image:radial-gradient(ellipse 44% 62% at 50% 52%,transparent 2%,transparent 35%,#000 86%)}
.hero-art-comet{width:clamp(325px,37vw,540px);height:auto;right:-9%;top:15%;transform:rotate(4deg);opacity:.72;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at 51% 54%,#000 27%,#000 53%,transparent 79%)}
@media(max-width:720px){.hero-art-collage{object-fit:cover;object-position:42% center;opacity:.49;mask-image:radial-gradient(ellipse 62% 44% at 50% 54%,transparent 20%,#000 100%)}.hero-art-comet{width:240px;right:-115px;top:19%;opacity:.60}}

/* V4: four individual border stars, clear center */
.hero-art-collage{display:none!important}
.hero-art-left{width:clamp(125px,18vw,240px)!important;left:-4%!important;bottom:4%!important;top:auto!important;opacity:.86!important}
.hero-art-upper{width:clamp(95px,12vw,175px)!important;left:12%!important;top:8%!important;bottom:auto!important;opacity:.72!important}
.hero-art-comet{width:clamp(180px,24vw,340px)!important;right:-5%!important;top:9%!important;left:auto!important;opacity:.70!important;mask-image:none!important;mix-blend-mode:normal!important}
.hero-art-small{width:clamp(100px,13vw,170px)!important;right:6%!important;bottom:3%!important;top:auto!important;opacity:.73!important}
.hero-copy{z-index:4}
@media(max-width:720px){
 .hero-art-left{width:136px!important;left:-52px!important;bottom:13%!important}
 .hero-art-upper{width:94px!important;left:7%!important;top:13%!important}
 .hero-art-comet{width:155px!important;right:-65px!important;top:19%!important}
 .hero-art-small{width:86px!important;right:-12px!important;bottom:12%!important}
}

/* V5: all four decorative figures fully contained within the visible hero */
.hero{overflow:hidden!important}
.hero-art{object-fit:contain!important;max-width:none;transform:none!important;animation:float-one 8s ease-in-out infinite!important}
.hero-art-left{width:clamp(116px,15vw,193px)!important;left:4.4%!important;right:auto!important;bottom:7%!important;top:auto!important;opacity:.84!important}
.hero-art-upper{width:clamp(83px,9vw,126px)!important;left:14.5%!important;right:auto!important;top:12%!important;bottom:auto!important;opacity:.75!important}
.hero-art-comet{width:clamp(160px,20vw,260px)!important;right:4.3%!important;left:auto!important;top:11%!important;bottom:auto!important;opacity:.72!important;mask-image:none!important;mix-blend-mode:normal!important}
.hero-art-small{width:clamp(90px,11vw,132px)!important;right:8%!important;left:auto!important;bottom:9%!important;top:auto!important;opacity:.77!important}
@media(max-width:720px){
 .hero-art-left{width:92px!important;left:4%!important;bottom:10%!important}
 .hero-art-upper{width:60px!important;left:10%!important;top:13%!important}
 .hero-art-comet{width:105px!important;right:3%!important;top:15%!important}
 .hero-art-small{width:72px!important;right:6%!important;bottom:13%!important}
}
@media(max-width:410px){.hero-art-left{left:3%!important}.hero-art-comet{right:2%!important}}

/* Candidate mock refinements */
.starline img, .section-head img, .intro-sticker, .small-divider img{display:none!important}
.starline{height:26px;max-width:1080px}
.notice .section-head,.characters .section-head{align-items:end}
.hero-art{will-change:transform}

/* v2 Responsive polish */
html{scroll-padding-top:90px}body{overflow-x:hidden} .section-wrap{width:100%}
.platforms{margin-top:54px;display:grid;grid-template-columns:1fr 1fr;gap:38px;padding-top:28px;border-top:1px solid #e4edf7}.platform-group h3{font-size:10px;letter-spacing:1.7px;color:#82a5ce;font-weight:700;margin:0 0 18px}.platform-links{display:flex;gap:11px;flex-wrap:wrap}.platform-link{display:inline-flex;align-items:center;gap:11px;border:1px solid #cddfee;border-radius:999px;padding:11px 15px;color:#4d78ae;background:#fff;font-size:12px;font-weight:650;transition:background .2s,transform .2s}.platform-link:hover{background:#f4f9ff;transform:translateY(-2px)}.platform-link span{color:#8bafd4}
.world-select{display:flex;align-items:center;gap:10px;position:relative;min-width:225px;padding-bottom:7px;border-bottom:1px solid #a8c4e2}.world-select>span{font-size:10px;font-weight:700;letter-spacing:1.1px;color:#769bc2}.world-filter-button{background:transparent;border:0;padding:11px 6px;color:#547cad;display:flex;align-items:center;justify-content:space-between;flex:1;gap:12px;text-align:left;font-size:12px}.select-chevron{font-size:18px}.world-options{position:absolute;z-index:35;top:calc(100% + 6px);left:0;right:0;max-height:260px;overflow-y:auto;background:white;border:1px solid #b7cee5;border-radius:15px;padding:7px;box-shadow:0 16px 34px #3e6fae1e}.world-options[hidden]{display:none}.world-choice{display:block;width:100%;padding:12px;border:0;background:transparent;color:#547cad;text-align:left;border-radius:9px;font-size:12px}.world-choice:hover,.world-choice[aria-selected=true]{background:#edf6ff;color:#2f5b95}
.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}.project-card{display:block;padding:8px 8px 18px;border:1px solid #e2eaf2;background:#fff;box-shadow:1px 5px 7px #8db4de17;text-align:left;min-width:0;transition:transform .25s}.project-card:hover{transform:translateY(-6px)}.project-image{height:230px;background:#f2f7fd;overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover}.project-card h3{margin:14px 8px 5px;color:#3c6396;font-size:18px}.project-card p{margin:0 8px 8px;color:#809bbb;font-size:11px;line-height:1.7}.project-num{padding:10px 8px 0;font-size:10px;color:#7c9fc2}.project-status{color:#6087bb}
.extras-tabs{display:flex;gap:10px;margin:26px 0}.extras-tab{border:1px solid #c6d8eb;color:#6e94bf;background:white;border-radius:30px;padding:10px 18px;font-size:11px;letter-spacing:1px}.extras-tab.active{background:#507eb6;color:white;border-color:#507eb6}.extras-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.extra-card{display:block;text-align:left;border:1px solid #dce8f5;background:white;padding:10px;color:#456d9f;min-width:0}.extra-cover{height:205px;background:#f7fbff;overflow:hidden;display:flex;align-items:center;justify-content:center}.extra-cover img{width:100%;height:100%;object-fit:cover}.extra-cover.no-image{font-family:Georgia,serif;font-style:italic;color:#91b4da;font-size:26px}.extra-type{display:block;margin:14px 5px 7px;font-size:10px;letter-spacing:1px;color:#91accc}.extra-card strong{display:block;margin:0 5px 12px;font-size:17px}.modal-body{white-space:pre-wrap;line-height:1.85;max-height:55vh;overflow:auto;color:#6686a9}.extra-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.extra-gallery img{height:150px;object-fit:cover;width:100%}.footer-actions{display:flex;align-items:center;gap:32px}.discord-link{color:#8bc5f1;display:inline-flex;transition:transform .2s,color .2s}.discord-link:hover{color:#549bd6;transform:translateY(-3px)}
@media(max-width:900px){.platforms{grid-template-columns:1fr;gap:26px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.extras-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-toolbar{flex-wrap:wrap}.world-select{min-width:200px;flex:1}.result-count{flex-basis:100%;margin-left:0}}
@media(max-width:600px){.topbar{padding:0 18px}.hero{min-height:570px}.hero h1{font-size:clamp(64px,14vw,92px)}.hero-copy{padding:90px 10px}.hero-art{max-width:38vw}.section-wrap{padding:65px 18px}.intro-layout{grid-template-columns:1fr;gap:20px}.intro-letter{padding-left:17px}.character-grid,.project-grid,.extras-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.portrait{height:clamp(150px,45vw,230px)}.project-image{height:clamp(145px,43vw,210px)}.extra-cover{height:150px}.character-toolbar{gap:14px}.search-label,.world-select{max-width:none;min-width:0;width:100%;flex:1 0 100%}.section-head h2{font-size:clamp(38px,9vw,58px)}.platforms{margin-top:32px}.platform-links{gap:8px}.platform-link{padding:10px 12px}.notice-row{grid-template-columns:26px 58px minmax(0,1fr) 20px;gap:7px}.notice-date{grid-column:3;grid-row:2;padding-bottom:8px}.footer-actions{gap:14px}.footer{padding:30px 18px}.modal-card{width:calc(100vw - 20px);max-height:92vh;overflow-y:auto}.extra-gallery{grid-template-columns:repeat(2,1fr)}.extra-gallery img{height:120px}}
@media(max-width:390px){.character-grid,.project-grid{gap:9px}.character-card,.project-card{padding:5px}.card-name{font-size:15px}.card-desc{font-size:10px}.hero h1{font-size:58px}.extra-card strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero-art,.character-card,.project-card{animation:none!important;transition:none!important}}

/* Section-wide atmospheric drawings: decoration remains behind all interactive content. */
.section-wrap{isolation:isolate;overflow:hidden;}
.section-starfield{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;overflow:hidden;}
.section-star{position:absolute;left:var(--star-x);top:var(--star-y);width:var(--star-width);max-width:30%;height:auto;object-fit:contain;opacity:.32;transform:translate(-50%,-50%) rotate(var(--star-angle));filter:saturate(.83);animation:section-star-drift 11s ease-in-out infinite alternate;animation-delay:var(--star-delay);pointer-events:none;}
.section-wrap > :not(.section-starfield){position:relative;z-index:1;}
@keyframes section-star-drift{from{transform:translate(-50%,-50%) rotate(var(--star-angle)) translateY(-5px)}to{transform:translate(-50%,-50%) rotate(var(--star-angle)) translateY(7px)}}
@media(max-width:900px){.section-star{width:calc(var(--star-width) * .76);opacity:.25;max-width:27%;}}
@media(max-width:600px){.section-star{width:calc(var(--star-width) * .56);opacity:.22;max-width:26%;}.section-starfield .section-star-3{display:none}}
@media(prefers-reduced-motion:reduce){.section-star{animation:none!important}}


/* --- production.css --- */
/* Production refinements: preserve supplied mock, remove cut-off decoration */
.hero{min-height:690px;overflow:hidden}.hero-copy{padding:160px 20px 125px}
.hero-art{object-fit:contain;max-height:220px;animation:softFloat 10s ease-in-out infinite; transform:none!important}
.hero-art-left{width:clamp(95px,13vw,170px);left:5%;top:21%;bottom:auto;opacity:.92}
.hero-art-upper{width:clamp(85px,11vw,145px);left:14%;top:auto;bottom:10%;opacity:.82}
.hero-art-comet{width:clamp(105px,15vw,195px);right:6%;top:16%;opacity:.9}
.hero-art-small{width:clamp(90px,12vw,155px);right:15%;bottom:8%;opacity:.82}
.hero-art-top-right{display:none!important}
.hero h1{font-size:clamp(60px,11vw,152px)}
.hero-actions{margin-top:12px}
.intro h2{font-size:clamp(38px,4vw,57px)}
.intro-letter{padding-top:0}
.section-desc:empty{display:none}
@keyframes softFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(max-width:700px){.hero{min-height:650px}.hero-copy{padding:190px 14px 175px}.hero h1{font-size:clamp(55px,12vw,90px)}.hero-art-left{left:3%;top:13%;width:104px}.hero-art-comet{right:3%;top:12%;width:115px}.hero-art-upper{left:5%;bottom:10%;width:93px}.hero-art-small{right:6%;bottom:10%;width:104px}.intro-layout{gap:25px}.hero-actions{gap:20px}}
@media(prefers-reduced-motion:reduce){.hero-art{animation:none}}


/* --- interaction.css --- */
/* CINQUANTA / v4: quiet, responsive interaction system.
   Touch feedback is removed, keyboard focus remains legible and accessible. */
:root{--tap-ease:cubic-bezier(.22,1,.36,1);--tap-ink:#6a99c7;}
html{-webkit-tap-highlight-color:transparent;}
button,a,input,[role="option"],[tabindex]{-webkit-tap-highlight-color:transparent;}
a,button{touch-action:manipulation;}
button{appearance:none;-webkit-appearance:none;}
/* Eliminate the square box on pointer/touch interaction; don't hide keyboard focus. */
:where(a,button,input):focus:not(:focus-visible){outline:none;}
:where(a,button,input):focus-visible{outline:2px solid rgba(108,159,210,.68);outline-offset:4px;border-radius:8px;box-shadow:0 0 0 5px rgba(188,219,243,.20);}
.character-card:focus-visible,.project-card:focus-visible,.extra-card:focus-visible{outline-offset:2px;border-radius:6px;}
.modal-card:focus{outline:none;}
/* Nav links: thin rising underline rather than a rectangular flash. */
.topbar nav a{position:relative;display:inline-flex;align-items:center;padding:7px 0;transition:color .22s ease,opacity .22s ease;}
.topbar nav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:#7ca9d4;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--tap-ease);pointer-events:none;}
@media(hover:hover){.topbar nav a:hover::after,.topbar nav a:focus-visible::after{transform:scaleX(1)}}
.topbar nav a:active{color:#8fb8de;opacity:.8;}
.brand,.link-underline{transition:color .24s ease,opacity .24s ease,transform .24s var(--tap-ease);}
.brand:active,.link-underline:active{opacity:.73;transform:translateY(1px);}
.link-underline{position:relative;}
.link-underline:active{border-color:#8eb5d9;}
/* Interactive cards: slight lift on hover, restrained compression on press. */
.character-card,.project-card,.extra-card,.world-card{will-change:auto;backface-visibility:hidden;}
.character-card,.project-card,.extra-card{transition:transform .34s var(--tap-ease),box-shadow .34s var(--tap-ease),background-color .24s ease,border-color .24s ease;}
@media(hover:hover){
 .character-card:hover,.project-card:hover,.extra-card:hover{border-color:#b8d2ea;box-shadow:0 15px 32px rgba(77,125,181,.12);}
 .project-card:hover,.extra-card:hover{transform:translateY(-5px);}
}
.character-card:active,.character-card:nth-child(4n+2):active,.character-card:nth-child(4n+3):active,
.project-card:active,.extra-card:active{transform:translateY(1px) scale(.985);box-shadow:0 3px 13px rgba(86,126,165,.10);background:#fbfdff;border-color:#a9c9e9;}
.character-card:active .portrait img{transform:scale(1.018);}
/* Notice list: fine left-edge accent and gentle color shift. */
.notice-row{position:relative;transition:background-color .23s ease,padding-left .27s var(--tap-ease),color .23s ease;}
.notice-row::before{content:"";position:absolute;left:0;top:23%;bottom:23%;width:2px;border-radius:2px;background:#82afd8;opacity:0;transform:scaleY(.3);transition:opacity .24s,transform .28s var(--tap-ease);}
@media(hover:hover){.notice-row:hover::before{opacity:1;transform:scaleY(1)}}
.notice-row:active{background:#eef6fd;padding-left:14px;}
.notice-row:active::before{opacity:1;transform:scaleY(1);}
.notice-row .arrow,.notice-arrow{transition:transform .25s var(--tap-ease),color .25s;}
@media(hover:hover){.notice-row:hover .arrow{transform:translate(3px,-3px);color:#4e87c0;}}
/* Platform buttons, filters, load more, modal close: no OS-blue box and no hard flash. */
.platform-link,.load-more,.extras-tab,.world-filter-button,.world-choice,.menu-toggle,.modal-close,.discord-link,.backtop{transition:color .23s ease,background-color .23s ease,border-color .23s ease,box-shadow .28s ease,transform .25s var(--tap-ease),opacity .23s ease;}
.platform-link:active,.load-more:active,.extras-tab:active,.world-choice:active{transform:scale(.965);background-color:#eaf4ff;box-shadow:0 3px 13px rgba(98,143,191,.08);}
.extras-tab.active:active{background:#5685ba;color:white;}
.world-select:focus-within{border-color:#7aaad7;}
.world-filter-button{border-radius:9px;}
.world-filter-button:active{background:#f1f8ff;color:#3f70ab;transform:translateY(1px);}
.select-chevron{display:inline-block;transition:transform .25s var(--tap-ease);}
.world-filter-button[aria-expanded="true"] .select-chevron{transform:rotate(180deg);}
.world-options:not([hidden]){animation:dropSoft .22s var(--tap-ease) both;transform-origin:top center;}
.world-choice:focus-visible{background:#f2f8ff;}
.menu-toggle:active,.modal-close:active,.discord-link:active{transform:scale(.94);opacity:.7;}
.topbar nav.open{animation:dropSoft .24s var(--tap-ease) both;}
#character-search{transition:color .24s ease;}
.search-label:focus-within{border-color:#6f9dc9;box-shadow:0 2px 0 -1px #8bbbe5;}
/* Modal opens into view; close is animated without delayed tap response. */
.modal.open .modal-backdrop{animation:backdropIn .28s ease both;}
.modal.open .modal-card{animation:dialogIn .36s var(--tap-ease) both;border-radius:12px;}
.modal.closing .modal-backdrop{animation:backdropOut .18s ease both;}
.modal.closing .modal-card{animation:dialogOut .18s ease both;}
.modal-close{border-radius:4px 4px 0 0;}
@keyframes dropSoft{from{opacity:0;transform:translateY(-9px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes backdropOut{from{opacity:1}to{opacity:0}}
@keyframes dialogIn{from{opacity:0;transform:translateY(18px) scale(.977)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialogOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(.985)}}
@media(hover:none){
  .character-card:hover,.project-card:hover,.extra-card:hover{box-shadow:1px 5px 7px #8db4de17;}
  .notice-row:hover{padding-left:8px;background:white;}
  .platform-link:hover{transform:none;background:#fff;}
}
@media(prefers-reduced-motion:reduce){
 .topbar nav a::after,.character-card,.project-card,.extra-card,.notice-row,.platform-link,.load-more,.extras-tab,.world-filter-button,.world-choice,.menu-toggle,.modal-close,.discord-link,.backtop,.link-underline,.brand,.select-chevron{transition:none!important;}
 .modal.open .modal-backdrop,.modal.open .modal-card,.modal.closing .modal-backdrop,.modal.closing .modal-card,.world-options:not([hidden]),.topbar nav.open{animation:none!important;}
}


/* --- usability.css --- */
/* v5: multi-page usability preview. All visual elements are based on the v4 mockup. */
html{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:0}
main{min-height:calc(100svh - 300px)}main>.site-page{display:none!important}body[data-page=home] #home{display:flex!important}body[data-page=about] #about,body[data-page=notice] #notice,body[data-page=characters] #characters,body[data-page=upcoming] #upcoming,body[data-page=worlds] #worlds,body[data-page=extras] #extras{display:block!important}
.starline,.small-divider,.backtop{display:none!important}.topbar{position:sticky;top:0;z-index:80}.topbar nav a.active{color:#315d99}.topbar nav a.active::after{transform:scaleX(1)}
.section-wrap{padding-top:clamp(65px,7vw,105px);padding-bottom:140px;min-height:calc(100svh - 87px)}
.hero{height:auto;min-height:calc(100svh - 87px);overflow:hidden!important}.hero-copy{padding:80px 10px;max-width:100%;z-index:4}.hero h1{font-size:clamp(64px,11vw,157px);white-space:nowrap}.hero-actions{display:none!important}
/* Intentionally asymmetric sizes and placement. All illustrations within viewport. */
.hero-art{object-fit:contain!important;animation:float-one 10s ease-in-out infinite!important;transform:none!important;max-width:none!important;mask-image:none!important;mix-blend-mode:normal!important;pointer-events:none}
.hero-art-left{width:clamp(175px,20vw,320px)!important;left:8%!important;top:55%!important;right:auto!important;bottom:auto!important;opacity:.9!important}
.hero-art-upper{width:clamp(60px,7.3vw,120px)!important;left:30%!important;top:10%!important;right:auto!important;bottom:auto!important;opacity:.84!important;animation-delay:-4s!important}
.hero-art-comet{width:clamp(135px,19vw,275px)!important;right:10%!important;top:17%!important;left:auto!important;bottom:auto!important;opacity:.85!important;animation-delay:-2s!important}
.hero-art-small{width:clamp(80px,9vw,137px)!important;right:25%!important;bottom:7%!important;left:auto!important;top:auto!important;opacity:.8!important;animation-delay:-6s!important}
.section-wrap{isolation:isolate}.section-starfield{z-index:-1!important}.section-wrap>:not(.section-starfield){position:relative;z-index:1}
.world-card.world-action{display:block;width:100%;position:relative;cursor:pointer;text-align:left;border:1px solid #dce8f5;background:#fff;transition:transform .3s,box-shadow .3s}.world-action:hover{transform:translateY(-4px);box-shadow:0 12px 24px #9ab9d52a}.world-enter{position:absolute;right:21px;bottom:20px;color:#8baed1}
/* Reading-oriented modal for actual Notion content */
.modal{z-index:120}.modal-card{width:min(900px,calc(100vw - 28px));max-width:none;max-height:90svh;overflow:auto;padding:clamp(22px,4vw,45px);overscroll-behavior:contain;border:1px solid #dbe9f6;box-shadow:0 20px 65px #2447723b}.modal-card:focus{outline:0}.modal-close{position:sticky;top:0;float:right;z-index:3;background:white;border:0;border-bottom:1px solid #b5cee8;padding:11px 2px;margin:-18px 0 10px 10px}
.profile-layout{display:grid;grid-template-columns:minmax(185px,265px) minmax(0,1fr);gap:27px;clear:both}.profile-cover{background:#f4f9ff}.profile-cover img{width:100%;height:auto;max-height:440px;object-fit:contain}.profile-intro h2,.modal-text h2{font:italic 500 clamp(34px,4vw,51px)/1.2 'Playfair Display',Georgia,serif;color:#426caa;margin:10px 0 13px}.detail-tagline{color:#7693b5;line-height:1.8}
.detail-meta{display:grid;grid-template-columns:85px minmax(0,1fr);gap:13px 17px;border-top:1px solid #e0eaf4;margin:24px 0 0;padding-top:19px;line-height:1.7}.detail-meta dt{font-size:10px;letter-spacing:1px;color:#8aaccb;font-weight:700}.detail-meta dd{margin:0;overflow-wrap:anywhere;color:#5578a1}.detail-related{border-top:1px solid #e1edf5;margin-top:22px;padding-top:16px}.detail-related>span{font-size:10px;color:#92afcc}.detail-related>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.related-link,.related-label{border-radius:100px;border:1px solid #d0e2f2;padding:8px 12px;background:#fff;color:#5884b3;font-size:11px}.related-link:hover{background:#f0f8fe}
.detail-body{border-top:1px solid #e1eaf4;margin-top:29px;padding-top:22px;line-height:1.9;color:#52749b;font-size:13px;overflow-wrap:anywhere}.detail-body p{margin:0 0 13px;white-space:pre-wrap}.detail-body h4{font-size:16px;color:#416a9e;margin:23px 0 12px}.detail-body blockquote{margin:15px 0;padding-left:14px;border-left:2px solid #9dc3e7}.detail-body hr{border:0;border-top:1px dashed #bed7eb}
.modal-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:23px}.gallery-item{padding:0;background:#f6fbff;border:0;cursor:zoom-in}.gallery-item img{width:100%;height:155px;object-fit:cover;transition:transform .3s}.gallery-item:hover img{transform:scale(1.04)}.copy-ooc,.find-world-characters{border:1px solid #b4cfe8;color:#4a78ae;background:white;border-radius:25px;padding:11px 17px;font-size:12px;margin-top:10px}
#image-lightbox[hidden]{display:none}#image-lightbox{position:fixed;inset:0;background:#142b4cef;z-index:160;display:grid;place-items:center;padding:50px 18px 20px}#lightbox-image{max-width:95vw;max-height:calc(100svh - 75px);object-fit:contain}#lightbox-close{position:absolute;top:8px;right:22px;background:none;border:0;color:white;font-size:34px;cursor:pointer}
.notice-row{grid-template-columns:44px 82px minmax(0,1fr) minmax(0,120px) 22px}.notice-date:empty{display:none}#show-more[hidden]{display:none}.empty{grid-column:1/-1;color:#7295bd;padding:22px}.footer-copy small{display:none!important}.footer-contact-empty{min-height:20px;min-width:200px}.footer-actions{margin-left:auto}
@media(max-width:900px){.topbar nav{gap:15px}.topbar nav a{font-size:10px;letter-spacing:.8px}}
@media(max-width:720px){.topbar{height:65px;padding:0 18px}.topbar nav{position:absolute;top:65px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:4px;background:#fff;padding:15px 22px 22px;border-bottom:1px solid #dce9f3;max-height:calc(100svh - 65px);overflow:auto}.topbar nav.open{display:flex}.topbar nav a{font-size:12px;padding:11px 3px}.menu-toggle{display:block}.hero{min-height:calc(100svh - 65px)}.hero h1{font-size:12.8vw!important}.hero-art-left{width:clamp(125px,29vw,200px)!important;left:4%!important;top:57%!important}.hero-art-upper{width:clamp(55px,12vw,85px)!important;left:15%!important;top:16%!important}.hero-art-comet{width:clamp(108px,26vw,175px)!important;right:4%!important;top:14%!important}.hero-art-small{width:clamp(57px,13vw,95px)!important;right:18%!important;bottom:11%!important}.section-wrap{padding:55px 18px 95px;min-height:calc(100svh - 65px)}.notice-row{grid-template-columns:25px 55px minmax(0,1fr) 20px;gap:7px}.notice-date{grid-column:3;grid-row:2}.notice-row .arrow{grid-column:4;grid-row:1}.profile-layout{grid-template-columns:1fr}.profile-cover{display:flex;justify-content:center}.profile-cover img{max-width:100%;width:auto;max-height:350px}.modal-card{width:calc(100vw - 16px);max-height:94svh;padding:23px 18px}.modal-gallery{grid-template-columns:repeat(2,1fr)}.gallery-item img{height:140px}.footer{min-height:190px;padding:30px 18px}.footer-copy{margin-left:40px}.footer>img{max-width:130px;left:-50px}.footer-contact-empty{min-width:90px}}
@media(max-width:400px){.hero h1{font-size:12vw!important}.hero-art-left{left:3%!important}.hero-art-comet{right:2%!important}.character-grid,.project-grid,.extras-grid{gap:10px}}
@media(prefers-reduced-motion:reduce){.hero-art,.section-star{animation:none!important}}


/* --- usability-v6.css --- */
/* CINQUANTA v6 — controlled star usage, accessible filters, BGM, named asset galleries. */
:root{--blue-deep:#426fae;--blue-text:#315e98}
/* Star visuals: no extra header/footer/header-icons; each PNG used only 1-2 times sitewide. */
.brand-icon,.footer>img,.section-head>img,.hero-art,.starline,.small-divider{display:none!important}
.hero,.section-wrap{isolation:isolate}
.hero{overflow:visible!important}
.section-wrap{overflow:visible!important}
.v6-starfield{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;overflow:visible!important;user-select:none}
.v6-star{position:absolute;left:var(--sx);top:var(--sy);display:block;width:min(var(--sw),28%,28vw);max-height:29svh;height:auto;object-fit:contain;opacity:.84;filter:saturate(1.38) contrast(1.12);transform:translate(-50%,-50%) rotate(var(--sa));transform-origin:center;animation:v6-drift 10s ease-in-out infinite alternate;pointer-events:none;will-change:transform}
.v6-star:nth-child(2){animation-delay:-4s;animation-duration:12s}.v6-star:nth-child(3){animation-delay:-6s;animation-duration:9s}
@keyframes v6-drift{from{transform:translate(-50%,-50%) rotate(var(--sa)) translateY(-4px)}to{transform:translate(-50%,-50%) rotate(var(--sa)) translateY(5px)}}
.hero-copy{z-index:2!important}
.section-wrap>:not(.v6-starfield){position:relative;z-index:2}
/* No duplicate sticker decoration on cards or footer. */
.character-card::after,.character-card:nth-child(7n+2)::after{display:none!important;content:none!important}
.footer{overflow:visible!important}
/* The card filters must stack over the cards rather than being clipped by a section. */
.characters{overflow:visible!important}
.character-toolbar{position:relative!important;z-index:60!important;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin-bottom:12px;overflow:visible!important}
.character-toolbar .search-label{flex:2 1 230px;min-width:180px;max-width:460px}
.filter-select{flex:1 1 175px;min-width:145px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #a8c4e2;padding-bottom:7px;position:relative;isolation:isolate;min-height:47px}
.filter-select:has(.filter-options:not([hidden])){z-index:100}
.filter-caption{font-size:10px;font-weight:700;letter-spacing:1px;color:#6f93bb}
.filter-trigger{border:0;background:transparent;padding:9px 2px;min-width:0;flex:1;text-align:left;color:#4775a9;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;font-size:12px}
.filter-trigger .select-chevron{transition:transform .2s;color:#7da6d2}
.filter-trigger[aria-expanded="true"] .select-chevron{transform:rotate(180deg)}
.filter-options{position:absolute;z-index:500;top:calc(100% + 5px);left:0;right:0;min-width:190px;max-height:290px;overflow:auto;background:#fff;border:1px solid #9dbfe0;box-shadow:0 18px 32px #3f649c28;padding:7px;border-radius:13px}
.filter-options[hidden]{display:none!important}
.filter-choice{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:white;color:#446e9d;text-align:left;font-size:12px;line-height:1.5}
.filter-choice:hover,.filter-choice[aria-selected="true"]{background:#e7f3ff}
.filter-data-note{font-size:11px;line-height:1.65;color:#7898b7;margin:2px 0 30px;max-width:850px}
#character-grid{position:relative;z-index:1}
.result-count{margin-left:0}
/* Asset gallery: representative cover is NOT duplicated inside gallery. */
.asset-gallery{margin:30px 0 0;border-top:1px solid #dbe9f4;padding-top:20px}
.asset-gallery>h3{font:italic 500 25px/1.4 'Playfair Display',Georgia,serif;color:#4675af;margin:0 0 16px}
.asset-gallery>h3 span{font:700 10px/1 'DM Sans',sans-serif;vertical-align:middle;color:#8cafd0;margin-left:10px}
.modal-gallery{margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery-item{border:1px solid #dce7f4;background:#fff;text-align:left;padding:6px 6px 12px;overflow:hidden}
.gallery-item img{object-fit:cover;display:block;border-radius:2px}
.asset-title{display:block;padding:9px 3px 0;color:#507ba9;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#image-lightbox{grid-template-rows:minmax(0,1fr) auto;gap:10px}
#lightbox-caption{color:#e2eefb;font-size:12px;letter-spacing:.3px;text-align:center;align-self:end}
/* Original soundscape is optional and muted until a user explicitly clicks Play. */
.bgm-player{position:fixed;right:18px;bottom:18px;z-index:90;color:#3f6ea9;font-family:'DM Sans','Noto Sans KR',sans-serif}
.bgm-toggle{border:1px solid #adcae8;background:rgba(255,255,255,.94);box-shadow:0 6px 25px #7fa9cf29;border-radius:999px;padding:11px 17px;display:flex;align-items:center;gap:6px;color:#467aad;font-size:16px;transition:transform .2s,background .2s}
.bgm-toggle span{font-size:10px;font-weight:700;letter-spacing:1.1px}
.bgm-toggle:hover{transform:translateY(-2px);background:#f5faff}
.bgm-panel{position:absolute;bottom:calc(100% + 12px);right:0;width:min(285px,calc(100vw - 30px));background:rgba(255,255,255,.98);border:1px solid #aac8e7;box-shadow:0 12px 40px #5881b02e;border-radius:14px;padding:17px;z-index:1}
.bgm-panel[hidden]{display:none!important}
.bgm-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.2px;color:#749ccc;font-weight:700}
#bgm-close{background:none;color:#5981b1;border:0;font-size:21px;line-height:1}
.bgm-track{font-size:12px;color:#5078a9;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:14px 0}
.bgm-controls{display:flex;align-items:center;gap:11px}
#bgm-play,#bgm-mute{border:1px solid #d5e5f2;border-radius:50%;width:34px;height:34px;background:#f7fbff;color:#4978aa}
.bgm-controls label{font-size:10px;color:#7195bc}
#bgm-volume{width:67px;accent-color:#679acb}
.bgm-import{display:inline-block;margin-top:14px;padding:8px 0;font-size:11px;color:#6492c1;border-bottom:1px solid #aac9e8;cursor:pointer}
#bgm-file{display:none}
@media(max-width:900px){
 .character-toolbar{gap:11px 12px}.character-toolbar .search-label{flex-basis:100%;max-width:none}
 .filter-select{min-width:0;flex-basis:calc(33.333% - 10px)}.result-count{flex-basis:100%}
}
@media(max-width:720px){
 .hero{overflow:visible!important}
 .v6-star{width:min(var(--sw),27vw,22svh);max-height:24svh;opacity:.86}
 #home .v6-star:nth-child(1){left:23%;top:22%;max-width:32vw}
 #home .v6-star:nth-child(2){left:79%;top:32%;max-width:27vw}
 #home .v6-star:nth-child(3){left:27%;top:77%;max-width:20vw}
 .filter-select{flex:1 1 calc(50% - 10px);min-width:125px}
 .character-toolbar .search-label{min-width:0;flex:1 0 100%}
 .filter-data-note{margin-bottom:26px}
 .modal-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bgm-player{bottom:12px;right:12px}.bgm-toggle{padding:10px 14px}
}
@media(max-width:400px){
 .filter-caption{font-size:9px}.filter-trigger{font-size:11px}
 .v6-star{width:min(var(--sw),25vw,20svh)}
}
@media(prefers-reduced-motion:reduce){.v6-star{animation:none!important}}


/* --- usability-v7.css --- */
/* CINQUANTA v7 — posts, modal close, footer Discord, stable polaroid ratio */
/* BEHIND and OOC use the same notice-style text row, not photo cards. */
#extras-grid.extras-list{display:block;grid-template-columns:none;gap:0;border-top:1px solid #99b9db;margin-top:25px;position:relative;z-index:2}
#extras-grid .extra-post-row{width:100%;border-radius:0;box-shadow:none;transform:none;min-height:86px}
#extras-grid .extra-post-row .notice-name{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
#extras-grid .extra-post-row .notice-date{min-width:0}
#extras-grid .extra-post-row:hover{transform:none;box-shadow:none}
/* A fixed 4:5 IMAGE window across screen sizes; the outer polaroid frame includes extra padding/caption. */
#character-grid .character-card .portrait{width:100%;height:auto;aspect-ratio:4 / 5;overflow:hidden}
#character-grid .character-card .portrait>img{width:100%;height:100%;object-fit:cover}
/* Close stays in the modal's natural document coordinate at top-right; scroll content makes it disappear. */
#modal .modal-card{position:relative}
#modal .modal-close{position:absolute!important;top:13px!important;right:clamp(14px,2.8vw,28px)!important;float:none!important;margin:0!important;z-index:5;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 2px!important;line-height:1.2}
#modal .modal-close:hover,#modal .modal-close:focus-visible,#modal .modal-close:active{background:transparent!important;box-shadow:none!important}
#modal #modal-content{padding-top:16px}
/* Discord is placed immediately beneath CINQUANTA, not to the right. */
footer.footer{justify-content:flex-start}
footer .footer-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
footer .footer-discord{display:flex;align-items:center;justify-content:flex-start;margin:0}
footer .footer-discord .discord-link{width:38px;height:33px;align-items:center;justify-content:flex-start;color:#80b8e7}
footer .footer-discord .discord-link svg{width:30px;height:24px}
footer .footer-contact-empty{min-height:0}
@media(max-width:720px){
 #extras-grid.extras-list{margin-top:18px}
 #extras-grid .extra-post-row{min-height:76px}
 #extras-grid .extra-post-row .notice-date{display:none}
 #modal .modal-close{top:9px!important;right:17px!important}
 #modal #modal-content{padding-top:18px}
}


/* --- usability-v7.css --- */
/* CINQUANTA v7 — posts, modal close, footer Discord, stable polaroid ratio */
/* BEHIND and OOC use the same notice-style text row, not photo cards. */
#extras-grid.extras-list{display:block;grid-template-columns:none;gap:0;border-top:1px solid #99b9db;margin-top:25px;position:relative;z-index:2}
#extras-grid .extra-post-row{width:100%;border-radius:0;box-shadow:none;transform:none;min-height:86px}
#extras-grid .extra-post-row .notice-name{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
#extras-grid .extra-post-row .notice-date{min-width:0}
#extras-grid .extra-post-row:hover{transform:none;box-shadow:none}
/* A fixed 4:5 IMAGE window across screen sizes; the outer polaroid frame includes extra padding/caption. */
#character-grid .character-card .portrait{width:100%;height:auto;aspect-ratio:4 / 5;overflow:hidden}
#character-grid .character-card .portrait>img{width:100%;height:100%;object-fit:cover}
/* Close stays in the modal's natural document coordinate at top-right; scroll content makes it disappear. */
#modal .modal-card{position:relative}
#modal .modal-close{position:absolute!important;top:13px!important;right:clamp(14px,2.8vw,28px)!important;float:none!important;margin:0!important;z-index:5;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 2px!important;line-height:1.2}
#modal .modal-close:hover,#modal .modal-close:focus-visible,#modal .modal-close:active{background:transparent!important;box-shadow:none!important}
#modal #modal-content{padding-top:16px}
/* Discord is placed immediately beneath CINQUANTA, not to the right. */
footer.footer{justify-content:flex-start}
footer .footer-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
footer .footer-discord{display:flex;align-items:center;justify-content:flex-start;margin:0}
footer .footer-discord .discord-link{width:38px;height:33px;align-items:center;justify-content:flex-start;color:#80b8e7}
footer .footer-discord .discord-link svg{width:30px;height:24px}
footer .footer-contact-empty{min-height:0}
@media(max-width:720px){
 #extras-grid.extras-list{margin-top:18px}
 #extras-grid .extra-post-row{min-height:76px}
 #extras-grid .extra-post-row .notice-date{display:none}
 #modal .modal-close{top:9px!important;right:17px!important}
 #modal #modal-content{padding-top:18px}
}


/* --- usability-v8.css --- */
/* CINQUANTA v8: resilient responsive screens, legible star fields, image gallery and viewer. */
html,body{max-width:100%;overflow-x:clip}
main,main>*{min-width:0}
/* Real star images remain separate and complete; 10% transparency = 90% opacity. */
.hero,.section-wrap{isolation:isolate}
.hero .v6-starfield,.section-wrap .v6-starfield{position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;overflow:visible!important;opacity:1!important}
.hero .v6-star,.section-wrap .v6-star{opacity:.9!important;filter:saturate(1.35) contrast(1.06)!important;object-fit:contain!important;width:var(--sw)!important;max-width:min(25vw,240px)!important;max-height:240px!important;animation:v6-drift 12s ease-in-out infinite alternate!important}
.hero>:not(.v6-starfield),.section-wrap>:not(.v6-starfield){position:relative;z-index:2}
/* Keep original UI components above decorative stars. */
.characters .character-toolbar{z-index:60!important}
#character-grid,.project-grid,.world-grid,.extras-list{z-index:2}
/* filter dropdown and search remain usable at every width */
.search-label{position:relative;min-width:0!important;min-height:47px;overflow:visible}
.search-label input{min-width:0;flex:1;width:auto;padding-right:30px}
.search-clear{border:0;background:transparent;color:#5b86b5;position:absolute;right:0;top:4px;font-size:21px;padding:4px 8px;line-height:1.4}
.search-clear[hidden]{display:none!important}
.filter-select{min-width:0!important;flex:1 1 165px}
.filter-trigger{overflow:hidden;max-width:100%}
.filter-trigger span:first-child{overflow:hidden;text-overflow:ellipsis}
.character-toolbar .filter-options{z-index:1000}
/* Long character content (including unbroken URLs/prompt blocks) must never widen the viewport. */
#modal,.modal-card,#modal-content,.profile-layout,.profile-intro,.modal-text,.detail-body,.asset-gallery,.modal-gallery,.gallery-item,.gallery-info{min-width:0;max-width:100%}
#modal .modal-card{overflow-x:hidden!important;overscroll-behavior:contain}
#modal-content{width:100%;overflow-wrap:anywhere;word-break:break-word}
#modal-content *{min-width:0;overflow-wrap:anywhere}
.profile-layout{grid-template-columns:minmax(0,260px) minmax(0,1fr)!important;width:100%}
.profile-cover{min-width:0;max-width:100%;align-self:start}
.cover-zoom{display:block;padding:0;border:0;background:transparent;width:100%;cursor:zoom-in}
.cover-zoom img{max-width:100%;width:100%;height:auto;max-height:440px;object-fit:contain}
.detail-body pre,.detail-body code,.detail-body p,.detail-meta dd,.modal-text h2,.profile-intro h2{overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.detail-body img,.modal-text img{max-width:100%;height:auto}
/* Gallery is separate from representative image; caption/date are below image. */
.asset-gallery .modal-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.asset-gallery .gallery-item{padding:0;border:1px solid #d7e5f3;border-radius:9px;background:#fff;overflow:hidden;text-align:left;min-width:0;display:flex;flex-direction:column}
.gallery-image{display:block;width:100%;padding:0;border:0;background:#edf6ff;cursor:zoom-in;overflow:hidden}
.gallery-image img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;transition:transform .25s ease}
.gallery-image:hover img{transform:scale(1.025)}
.gallery-info{padding:12px 11px 14px;display:flex;flex-direction:column;gap:8px}
.gallery-info .asset-title{padding:0;white-space:normal;overflow:visible;line-height:1.5;font-size:12px;font-weight:600}
.gallery-date-label{display:flex;flex-direction:column;gap:3px;color:#8ba6c1;font-size:9px;letter-spacing:1px;font-weight:700}
.asset-date-input{max-width:100%;width:100%;min-width:0;border:0;border-bottom:1px solid #dae6f1;background:white;border-radius:0;color:#6588ac;padding:6px 0;font-size:11px;font-family:inherit;letter-spacing:0;box-sizing:border-box}
.asset-date-input:focus-visible{outline:1px solid #79a4d6;outline-offset:2px}
.gallery-date-help{font-size:11px;color:#99afc8;margin:0 0 12px}
/* Contained image viewer: no giant free-flowing images or unexpected page scrolling. */
#image-lightbox[hidden]{display:none!important}
#image-lightbox{position:fixed;inset:0;padding:0;z-index:250;display:flex;align-items:center;justify-content:center;background:rgba(29,46,72,.79);overscroll-behavior:contain}
.viewer-backdrop{position:absolute;inset:0}
.viewer-shell{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1100px,calc(100vw - 32px));height:min(850px,calc(100dvh - 24px));background:#fff;border:1px solid #dce8f5;box-shadow:0 20px 65px #10264050;border-radius:13px;overflow:hidden}
.viewer-bar{height:48px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5eff7;color:#82a2c3;font-size:11px}
#lightbox-close{position:static;border:0;background:transparent;color:#527aaa;font-size:12px;padding:12px;line-height:1;cursor:pointer}
.viewer-stage{min-height:0;min-width:0;display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;justify-items:center;padding:12px;background:#f6faff;overflow:hidden}
#lightbox-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;min-height:0;min-width:0}
.viewer-nav{position:relative;align-self:center;width:36px;height:36px;border-radius:50%;border:1px solid #d4e4f2;background:rgba(255,255,255,.95);color:#527eac;font-size:23px;cursor:pointer;line-height:1}
.viewer-nav[hidden]{visibility:hidden}
.viewer-caption{min-height:53px;border-top:1px solid #e5edf6;padding:12px 18px;display:flex;align-items:center;gap:12px;justify-content:space-between;color:#5478a5;font-size:12px;background:#fff;overflow-wrap:anywhere}
#lightbox-caption{color:inherit;font-size:inherit;max-width:75%;text-align:left}
#lightbox-date{white-space:nowrap;color:#90aac6;font-size:11px}
.bgm-status{margin:2px 0 6px;font-size:10px;color:#91a8c4}
.bgm-toggle.is-playing{border-color:#7da9d8;background:#eef7ff}
/* On long profile pages there must be no sideways scroll. */
@media(max-width:720px){
 .section-wrap{overflow:visible}
 .section-wrap .v6-star{width:var(--sw)!important;max-width:24vw!important;max-height:24vw!important}
 /* Mobile star positions move away from cropped margins and heading text. */
 #about .v6-star:first-child{left:80%!important;top:125px!important}
 #about .v6-star:nth-child(2){left:21%!important;top:calc(100% - 110px)!important}
 #notice .v6-star:first-child{left:78%!important;top:130px!important}
 #notice .v6-star:nth-child(2){left:23%!important;top:calc(100% - 120px)!important}
 #characters .v6-star:first-child{left:80%!important;top:105px!important}
 #characters .v6-star:nth-child(2){left:21%!important;top:calc(100% - 140px)!important}
 #upcoming .v6-star:first-child{left:80%!important;top:110px!important}
 #upcoming .v6-star:nth-child(2){left:24%!important;top:calc(100% - 130px)!important}
 #worlds .v6-star:first-child{left:81%!important;top:110px!important}
 #worlds .v6-star:nth-child(2){left:19%!important;top:calc(100% - 95px)!important}
 #extras .v6-star:first-child{left:80%!important;top:110px!important}
 #extras .v6-star:nth-child(2){left:23%!important;top:calc(100% - 110px)!important}
 .hero .v6-star{width:var(--sw)!important;max-width:24vw!important;max-height:24vw!important}
 #home .v6-star:nth-child(1){left:17%!important;top:24%!important}
 #home .v6-star:nth-child(2){left:78%!important;top:23%!important}
 #home .v6-star:nth-child(3){left:25%!important;top:77%!important}
 .profile-layout{grid-template-columns:minmax(0,1fr)!important}
 .profile-cover img{max-height:420px;width:auto;margin:auto}
 .cover-zoom{width:100%}
 .asset-gallery .modal-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .gallery-info{padding:9px}
 .viewer-shell{width:calc(100vw - 14px);height:calc(100dvh - 14px);border-radius:9px}
 .viewer-stage{grid-template-columns:30px minmax(0,1fr) 30px;padding:5px}
 .viewer-nav{width:28px;height:32px;font-size:19px}
 .viewer-caption{padding:9px 12px;min-height:54px}
 .filter-select{flex:1 1 calc(50% - 9px)}
 .bgm-player{z-index:95}
}
@media(max-width:375px){.asset-gallery .modal-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.v6-star{animation:none!important}}


/* --- usability-v8.css --- */
/* CINQUANTA v8: resilient responsive screens, legible star fields, image gallery and viewer. */
html,body{max-width:100%;overflow-x:clip}
main,main>*{min-width:0}
/* Real star images remain separate and complete; 10% transparency = 90% opacity. */
.hero,.section-wrap{isolation:isolate}
.hero .v6-starfield,.section-wrap .v6-starfield{position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;overflow:visible!important;opacity:1!important}
.hero .v6-star,.section-wrap .v6-star{opacity:.9!important;filter:saturate(1.35) contrast(1.06)!important;object-fit:contain!important;width:var(--sw)!important;max-width:min(25vw,240px)!important;max-height:240px!important;animation:v6-drift 12s ease-in-out infinite alternate!important}
.hero>:not(.v6-starfield),.section-wrap>:not(.v6-starfield){position:relative;z-index:2}
/* Keep original UI components above decorative stars. */
.characters .character-toolbar{z-index:60!important}
#character-grid,.project-grid,.world-grid,.extras-list{z-index:2}
/* filter dropdown and search remain usable at every width */
.search-label{position:relative;min-width:0!important;min-height:47px;overflow:visible}
.search-label input{min-width:0;flex:1;width:auto;padding-right:30px}
.search-clear{border:0;background:transparent;color:#5b86b5;position:absolute;right:0;top:4px;font-size:21px;padding:4px 8px;line-height:1.4}
.search-clear[hidden]{display:none!important}
.filter-select{min-width:0!important;flex:1 1 165px}
.filter-trigger{overflow:hidden;max-width:100%}
.filter-trigger span:first-child{overflow:hidden;text-overflow:ellipsis}
.character-toolbar .filter-options{z-index:1000}
/* Long character content (including unbroken URLs/prompt blocks) must never widen the viewport. */
#modal,.modal-card,#modal-content,.profile-layout,.profile-intro,.modal-text,.detail-body,.asset-gallery,.modal-gallery,.gallery-item,.gallery-info{min-width:0;max-width:100%}
#modal .modal-card{overflow-x:hidden!important;overscroll-behavior:contain}
#modal-content{width:100%;overflow-wrap:anywhere;word-break:break-word}
#modal-content *{min-width:0;overflow-wrap:anywhere}
.profile-layout{grid-template-columns:minmax(0,260px) minmax(0,1fr)!important;width:100%}
.profile-cover{min-width:0;max-width:100%;align-self:start}
.cover-zoom{display:block;padding:0;border:0;background:transparent;width:100%;cursor:zoom-in}
.cover-zoom img{max-width:100%;width:100%;height:auto;max-height:440px;object-fit:contain}
.detail-body pre,.detail-body code,.detail-body p,.detail-meta dd,.modal-text h2,.profile-intro h2{overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.detail-body img,.modal-text img{max-width:100%;height:auto}
/* Gallery is separate from representative image; caption/date are below image. */
.asset-gallery .modal-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.asset-gallery .gallery-item{padding:0;border:1px solid #d7e5f3;border-radius:9px;background:#fff;overflow:hidden;text-align:left;min-width:0;display:flex;flex-direction:column}
.gallery-image{display:block;width:100%;padding:0;border:0;background:#edf6ff;cursor:zoom-in;overflow:hidden}
.gallery-image img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;transition:transform .25s ease}
.gallery-image:hover img{transform:scale(1.025)}
.gallery-info{padding:12px 11px 14px;display:flex;flex-direction:column;gap:8px}
.gallery-info .asset-title{padding:0;white-space:normal;overflow:visible;line-height:1.5;font-size:12px;font-weight:600}
.gallery-date-label{display:flex;flex-direction:column;gap:3px;color:#8ba6c1;font-size:9px;letter-spacing:1px;font-weight:700}
.asset-date-input{max-width:100%;width:100%;min-width:0;border:0;border-bottom:1px solid #dae6f1;background:white;border-radius:0;color:#6588ac;padding:6px 0;font-size:11px;font-family:inherit;letter-spacing:0;box-sizing:border-box}
.asset-date-input:focus-visible{outline:1px solid #79a4d6;outline-offset:2px}
.gallery-date-help{font-size:11px;color:#99afc8;margin:0 0 12px}
/* Contained image viewer: no giant free-flowing images or unexpected page scrolling. */
#image-lightbox[hidden]{display:none!important}
#image-lightbox{position:fixed;inset:0;padding:0;z-index:250;display:flex;align-items:center;justify-content:center;background:rgba(29,46,72,.79);overscroll-behavior:contain}
.viewer-backdrop{position:absolute;inset:0}
.viewer-shell{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1100px,calc(100vw - 32px));height:min(850px,calc(100dvh - 24px));background:#fff;border:1px solid #dce8f5;box-shadow:0 20px 65px #10264050;border-radius:13px;overflow:hidden}
.viewer-bar{height:48px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5eff7;color:#82a2c3;font-size:11px}
#lightbox-close{position:static;border:0;background:transparent;color:#527aaa;font-size:12px;padding:12px;line-height:1;cursor:pointer}
.viewer-stage{min-height:0;min-width:0;display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;justify-items:center;padding:12px;background:#f6faff;overflow:hidden}
#lightbox-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;min-height:0;min-width:0}
.viewer-nav{position:relative;align-self:center;width:36px;height:36px;border-radius:50%;border:1px solid #d4e4f2;background:rgba(255,255,255,.95);color:#527eac;font-size:23px;cursor:pointer;line-height:1}
.viewer-nav[hidden]{visibility:hidden}
.viewer-caption{min-height:53px;border-top:1px solid #e5edf6;padding:12px 18px;display:flex;align-items:center;gap:12px;justify-content:space-between;color:#5478a5;font-size:12px;background:#fff;overflow-wrap:anywhere}
#lightbox-caption{color:inherit;font-size:inherit;max-width:75%;text-align:left}
#lightbox-date{white-space:nowrap;color:#90aac6;font-size:11px}
.bgm-status{margin:2px 0 6px;font-size:10px;color:#91a8c4}
.bgm-toggle.is-playing{border-color:#7da9d8;background:#eef7ff}
/* On long profile pages there must be no sideways scroll. */
@media(max-width:720px){
 .section-wrap{overflow:visible}
 .section-wrap .v6-star{width:var(--sw)!important;max-width:24vw!important;max-height:24vw!important}
 /* Mobile star positions move away from cropped margins and heading text. */
 #about .v6-star:first-child{left:80%!important;top:125px!important}
 #about .v6-star:nth-child(2){left:21%!important;top:calc(100% - 110px)!important}
 #notice .v6-star:first-child{left:78%!important;top:130px!important}
 #notice .v6-star:nth-child(2){left:23%!important;top:calc(100% - 120px)!important}
 #characters .v6-star:first-child{left:80%!important;top:105px!important}
 #characters .v6-star:nth-child(2){left:21%!important;top:calc(100% - 140px)!important}
 #upcoming .v6-star:first-child{left:80%!important;top:110px!important}
 #upcoming .v6-star:nth-child(2){left:24%!important;top:calc(100% - 130px)!important}
 #worlds .v6-star:first-child{left:81%!important;top:110px!important}
 #worlds .v6-star:nth-child(2){left:19%!important;top:calc(100% - 95px)!important}
 #extras .v6-star:first-child{left:80%!important;top:110px!important}
 #extras .v6-star:nth-child(2){left:23%!important;top:calc(100% - 110px)!important}
 .hero .v6-star{width:var(--sw)!important;max-width:24vw!important;max-height:24vw!important}
 #home .v6-star:nth-child(1){left:17%!important;top:24%!important}
 #home .v6-star:nth-child(2){left:78%!important;top:23%!important}
 #home .v6-star:nth-child(3){left:25%!important;top:77%!important}
 .profile-layout{grid-template-columns:minmax(0,1fr)!important}
 .profile-cover img{max-height:420px;width:auto;margin:auto}
 .cover-zoom{width:100%}
 .asset-gallery .modal-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .gallery-info{padding:9px}
 .viewer-shell{width:calc(100vw - 14px);height:calc(100dvh - 14px);border-radius:9px}
 .viewer-stage{grid-template-columns:30px minmax(0,1fr) 30px;padding:5px}
 .viewer-nav{width:28px;height:32px;font-size:19px}
 .viewer-caption{padding:9px 12px;min-height:54px}
 .filter-select{flex:1 1 calc(50% - 9px)}
 .bgm-player{z-index:95}
}
@media(max-width:375px){.asset-gallery .modal-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.v6-star{animation:none!important}}


/* --- usability-v9.css --- */
/* CINQUANTA v9 — requested restoration of large stars + 30% list transparency. */
/* White background cards are 30% transparent (70% opacity); text/images remain 100% opaque. */
#notice .notice-list .notice-row,
#extras #extras-grid .extra-post-row,
#worlds #world-grid .world-card {
  background:rgba(255,255,255,.70) !important;
}
#notice .notice-list .notice-row:hover,
#extras #extras-grid .extra-post-row:hover,
#worlds #world-grid .world-card:hover {
  background:rgba(246,250,255,.70) !important;
}
/* Make actual illustrations larger again without enlarging their surrounding sections.
   Existing star sprites and asymmetrical positions preserved, no new crops. */
.hero .v6-star,
.section-wrap .v6-star {
  width:min(calc(var(--sw) * 1.40),30vw,360px) !important;
  max-width:30vw !important;
  max-height:40svh !important;
  opacity:.90 !important;
  height:auto !important;
  object-fit:contain !important;
}
/* On mobile, permit stars to be visually significant instead of v8's 24vw cap. */
@media(max-width:720px){
  .hero .v6-star,
  .section-wrap .v6-star {
    width:min(calc(var(--sw) * .95),34vw) !important;
    max-width:34vw !important;
    max-height:34svh !important;
  }
  #home .v6-star:nth-child(1){left:24% !important}
  #home .v6-star:nth-child(2){left:75% !important}
  #about .v6-star:first-child,#notice .v6-star:first-child,#characters .v6-star:first-child,#upcoming .v6-star:first-child,#worlds .v6-star:first-child,#extras .v6-star:first-child{left:75% !important}
  #about .v6-star:nth-child(2),#notice .v6-star:nth-child(2),#characters .v6-star:nth-child(2),#upcoming .v6-star:nth-child(2),#worlds .v6-star:nth-child(2),#extras .v6-star:nth-child(2){left:25% !important}
}
@media(max-width:360px){
  .hero .v6-star,
  .section-wrap .v6-star{max-width:36vw !important;width:min(calc(var(--sw) * .85),36vw) !important}
}


/* --- mobile-home-stars-v9.css --- */
/* V9 baseline retained. Only the three HOME-page stars are adjusted on mobile. */
@media (max-width: 720px) {
  /* Upper-left star moves inward without intruding on the logo. */
  #home .v6-starfield > .v6-star:nth-child(1) {
    left: 34% !important;
    top: 37% !important;
  }
  /* Upper-right star: exactly twice v9 mobile displayed width (34vw -> 68vw).
     Shift its centre to prevent the rotated outline from being clipped. */
  #home .v6-starfield > .v6-star:nth-child(2) {
    left: 54% !important;
    top: 23% !important;
    width: 68vw !important;
    max-width: none !important;
    max-height: none !important;
  }
  /* Lower-left star absolute rotation: +23 degrees. */
  #home .v6-starfield > .v6-star:nth-child(3) {
    --sa: 23deg !important;
  }
}


/* --- player-v11.css --- */
/* New playlist player */
.bgm-panel{background:#fff!important;width:min(340px,calc(100vw - 24px))!important;padding:17px!important;max-height:min(590px,calc(100dvh - 92px));overflow-y:auto;overscroll-behavior:contain}
.bgm-now{display:grid;grid-template-columns:64px minmax(0,1fr);gap:13px;align-items:center;padding:15px 0 11px}
.bgm-cover{width:64px;height:64px;object-fit:contain;background:#f3f8fe;border:1px solid #e0eaf4;border-radius:9px;padding:6px}
.bgm-metadata{min-width:0;display:flex;flex-direction:column;gap:4px}
.bgm-track{font-size:13px;font-weight:700;margin:0!important;color:#4775ab;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bgm-artist{font-size:11px;color:#87a5c5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bgm-timeline{display:flex;align-items:center;gap:9px;margin:3px 0 13px;color:#91a8c4;font-size:10px;font-variant-numeric:tabular-nums}
#bgm-seek{flex:1;min-width:0;width:100%;accent-color:#6e9dce;height:12px}
.bgm-controls{display:flex;align-items:center;justify-content:center;gap:12px}
#bgm-prev,#bgm-next{border:0;background:transparent;color:#5986b6;font-size:20px;padding:6px 4px;cursor:pointer}
#bgm-play{width:40px;height:40px;font-size:16px}
.bgm-volume-row{display:flex;align-items:center;gap:10px;margin:14px 0 11px;padding-bottom:12px;border-bottom:1px solid #e4edf6}
.bgm-volume-row label{font-size:10px;color:#7195bc}
.bgm-volume-row #bgm-volume{flex:1;width:100%;min-width:0}
.bgm-playlist-label{font-size:10px;color:#7096be;letter-spacing:1.2px;font-weight:700;margin:8px 0 7px}
.bgm-list{display:flex;flex-direction:column;gap:3px}
.bgm-list-item{display:grid;grid-template-columns:35px minmax(0,1fr) 17px;gap:9px;align-items:center;width:100%;text-align:left;padding:8px;border:1px solid transparent;background:transparent;border-radius:9px;color:#5b81ad;cursor:pointer;transition:background .18s,border-color .18s}
.bgm-list-item:hover{background:#f1f8ff}
.bgm-list-item[aria-current="true"]{background:#ecf5ff;border-color:#d5e7f8}
.bgm-list-thumb{width:35px;height:35px;object-fit:contain;background:#f7fbff;border-radius:6px;padding:3px}
.bgm-list-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.bgm-list-title{font-size:11px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bgm-list-artist{font-size:10px;color:#8aa9ca;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bgm-list-current{font-size:12px;color:#6d9cd0}
.bgm-list-empty{font-size:11px;color:#91a8c4;padding:9px 2px}

@media(max-width:720px){.bgm-panel{right:0;width:min(340px,calc(100vw - 24px))!important}}
/* CINQUANTA v11: curate-only asset dates, typography, deep stars and fixed playlist. */
/* external link arrow marks must not appear in local navigation */
.world-enter,.notice-row .arrow { display:none!important; }
#upcoming .project-grid{margin-top:clamp(40px,4.5vw,64px)!important;}
.platform-link{background:rgba(255,255,255,.70)!important;backdrop-filter:blur(4px)}
.platform-link:hover,.platform-link:focus-visible{background:rgba(247,251,255,.83)!important}
/* BGM: floating button only; the panel has enough contrast to read titles. */
.bgm-toggle{background:rgba(255,255,255,.68)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bgm-toggle:hover,.bgm-toggle.is-playing{background:rgba(242,249,255,.78)!important}
/* Asset dates are public metadata, never editable inputs. Editing happens in private Notion. */
.gallery-info .asset-published-date{display:block;margin:7px 3px 0;color:#789dc3;font-size:11px;letter-spacing:.2px}
/* Stardust layouts. Stars remain noninteractive and behind foreground elements. */
#about,#extras,#worlds{isolation:isolate}
#about .v6-starfield,#extras .v6-starfield,#worlds .v6-starfield{pointer-events:none;z-index:0!important}
/* about: replace top-right with alternate full star. Four times the v9 desktop width (273px -> 1092px). */
#about .v6-starfield>.v6-star:first-child{
 width:min(calc(var(--sw) * 5.6),76vw)!important;max-width:none!important;max-height:none!important;
 left:56%!important;top:54%!important;opacity:.43!important;
}
/* behind/OOC upper-right star: 2.5x its v9 desktop width (266px -> 665px). */
#extras .v6-starfield>.v6-star:first-child{
 width:min(calc(var(--sw) * 3.5),68vw)!important;max-width:none!important;max-height:none!important;
 left:64%!important;top:50%!important;opacity:.55!important;
}
/* universe lower-left star: 2x its v9 desktop width (231px -> 462px). */
#worlds .v6-starfield>.v6-star:nth-child(2){
 width:min(calc(var(--sw) * 2.8),60vw)!important;max-width:none!important;max-height:none!important;
 left:32%!important;top:62%!important;opacity:.60!important;
}
/* Footer illustration, opposite the logo/Discord. */
.footer{position:relative!important;isolation:isolate;min-height:290px}
.footer-art-star{position:absolute;right:5%;bottom:14px;width:clamp(170px,20vw,315px);height:auto;object-fit:contain;opacity:.62;pointer-events:none;z-index:0;transform:rotate(-14deg)}
.footer-copy{position:relative;z-index:2}
@media(max-width:720px){
 #upcoming .project-grid{margin-top:48px!important}
 /* Keep all of each star visible on small viewports, even if original 4x would exceed screen width. */
 #about .v6-starfield>.v6-star:first-child{width:82vw!important;max-width:none!important;left:58%!important;top:27%!important;opacity:.43!important}
 #extras .v6-starfield>.v6-star:first-child{width:78vw!important;max-width:none!important;left:54%!important;top:46%!important;opacity:.40!important}
 #worlds .v6-starfield>.v6-star:nth-child(2){width:68vw!important;max-width:none!important;left:43%!important;top:66%!important;opacity:.46!important}
 .footer-art-star{right:3%;bottom:20px;width:40vw;max-width:190px;opacity:.55}
 /* Mobile first page: upper right star closer to the corner, lower left tilted -50deg. */
 #home .v6-starfield>.v6-star:nth-child(2){left:60%!important;top:17%!important}
 #home .v6-starfield>.v6-star:nth-child(3){--sa:-50deg!important}
}
@media(max-width:390px){.footer-art-star{right:2%;width:35vw}}
@media(prefers-reduced-motion:reduce){.footer-art-star{animation:none!important}}


/* --- refinements-v12.css --- */
/* CINQUANTA v12 - focused visual refinements. Keep existing behavior and content. */
/* Screenshot #1: remove only the crossed-out upper-left multi-star cluster on HOME. */
#home .v6-starfield > .v6-star:first-child { display:none!important; }

/* COMING SOON: 2.5 times the prior apparent star size (v9 baseline 30vw / mobile 34vw). */
#upcoming .v6-starfield > .v6-star:first-child {
  width:min(75vw, 805px)!important;
  max-width:none!important;max-height:none!important;height:auto!important;
  left:73%!important;top:175px!important;opacity:.62!important;
}

/* CHARACTER lower-left: 2.5 times v9 on PC; preserve complete silhouette. */
#characters .v6-starfield > .v6-star:nth-child(2) {
  width:min(75vw, 630px)!important;
  max-width:none!important;max-height:none!important;height:auto!important;
  left:30%!important;top:calc(100% - 295px)!important;opacity:.68!important;
}

/* Footer: exact same ornament as CHARACTER lower-left, on the same (LEFT) side. */
.footer { position:relative!important; isolation:isolate!important; overflow:hidden!important; }
.footer .footer-art-star {
  display:block!important;position:absolute!important;
  left:6%!important;right:auto!important;bottom:18px!important;top:auto!important;
  width:clamp(190px,23vw,330px)!important;max-width:none!important;
  height:auto!important;object-fit:contain!important;transform:rotate(-7deg)!important;
  opacity:.53!important;z-index:0!important;pointer-events:none!important;
}
.footer .footer-copy { position:relative;z-index:2!important; }

/* Semi-transparent floating BGM control (the playlist stays legible). */
.bgm-player .bgm-toggle {
  opacity:.68!important;
  background:rgba(238,248,255,.38)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
  border-color:rgba(117,169,216,.58)!important;
  box-shadow:0 6px 22px rgba(83,131,181,.10)!important;
  transition:opacity .2s ease,background .2s ease,transform .2s ease!important;
}
.bgm-player .bgm-toggle:hover,.bgm-player .bgm-toggle:focus-visible,
.bgm-player .bgm-toggle[aria-expanded="true"] {
  opacity:.95!important;background:rgba(245,251,255,.75)!important;
}
.asset-gallery .asset-date-unset{color:#a8b9ca;font-size:10px;font-weight:400;letter-spacing:0}

@media(max-width:720px){
  /* 2.5 x v9 mobile apparent width (34vw -> 85vw). Keep entire star within frame. */
  #upcoming .v6-starfield > .v6-star:first-child {
    width:85vw!important;left:53%!important;top:179px!important;
    max-width:none!important;max-height:none!important;opacity:.58!important;
  }
  #characters .v6-starfield > .v6-star:nth-child(2) {
    width:85vw!important;left:52%!important;top:calc(100% - 225px)!important;
    max-width:none!important;max-height:none!important;opacity:.63!important;
  }
  .footer { min-height:250px!important; }
  .footer .footer-art-star {
    width:clamp(150px,50vw,230px)!important;left:3%!important;right:auto!important;
    bottom:10px!important;opacity:.48!important;
  }
}
@media(max-width:375px){
  #upcoming .v6-starfield>.v6-star:first-child{left:52%!important}
  #characters .v6-starfield>.v6-star:nth-child(2){left:52%!important}
  .footer .footer-art-star{width:48vw!important}
}


/* --- refinements-v13.css --- */
/* CINQUANTA v13 — three requested adjustments only. Applied AFTER v12 CSS. */
/* 1. HOME: change bottom-left star orientation to a positive 15 degrees. */
#home .v6-starfield > .v6-star:nth-child(3) {
  --sa: 15deg !important;
}
/* 2. ABOUT: use restrained sans-serif lettering for the section's Korean title. */
#about .intro-heading h2 {
  font-family: system-ui, "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
  font-style: normal !important;
  font-weight: 650 !important;
  letter-spacing: -0.055em !important;
  line-height: 1.22 !important;
  text-shadow: none !important;
}
#about .intro-heading h2 .heading-period {
  font-family: inherit !important;
  font-style: normal !important;
}
/* 3. FOOTER: relocate the existing ornament to the upper right and enlarge 2.2x.
   Its old desktop width was clamp(190px,23vw,330px); mobile 50vw.
   On small devices cap the displayed width to the viewport to avoid clipping. */
.footer {
  min-height: clamp(380px, 38vw, 510px) !important;
  overflow: hidden !important;
}
.footer .footer-art-star {
  display: block !important;
  position: absolute !important;
  top: 48px !important;
  right: 2.5% !important;
  left: auto !important;
  bottom: auto !important;
  width: clamp(418px, 50.6vw, 726px) !important;
  max-width: calc(100% - 18px) !important;
  height: auto !important;
  object-fit: contain !important;
  transform: rotate(-7deg) !important;
  transform-origin: center !important;
  opacity: .53 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.footer .footer-copy { position: relative !important; z-index: 2 !important; }
@media (max-width: 720px) {
  .footer { min-height: 345px !important; }
  .footer .footer-art-star {
    width: min(110vw, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    top: 26px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    opacity: .48 !important;
  }
  #about .intro-heading h2 { font-size: clamp(38px, 9vw, 54px) !important; }
}


/* --- desktop-home-v2.css --- */
/* CINQUANTA v14: Desktop HOME uses mockup v2 layout. Mobile remains v13. */
/* The fourth illustration is desktop-only and uses a spare existing asset. */
#home .v6-starfield > .v14-desktop-only { display:none !important; }
@media (min-width:721px) {
  #home .v6-starfield > .v6-star {
    display:block !important;
    max-width:30vw !important;
    max-height:40svh !important;
    height:auto !important;
    opacity:.9 !important;
    transform-origin:center !important;
    animation:v14-desktop-float 10s ease-in-out infinite !important;
    object-fit:contain !important;
  }
  /* Mockup v2: upper-left, 5% from left, 21% from top */
  #home .v6-starfield > .v6-star:nth-child(1) {
    display:block !important;
    left:5% !important;top:21% !important;right:auto !important;bottom:auto !important;
    width:min(301px,30vw) !important;--sa:-8deg !important;
  }
  /* Mockup v2: upper-right, 6% from right, 16% from top */
  #home .v6-starfield > .v6-star:nth-child(2) {
    right:6% !important;top:16% !important;left:auto !important;bottom:auto !important;
    width:min(360px,30vw) !important;--sa:12deg !important;
  }
  /* Mockup v2: lower-right, 15% from right, 8% from bottom */
  #home .v6-starfield > .v6-star:nth-child(3) {
    right:15% !important;bottom:8% !important;left:auto !important;top:auto !important;
    width:min(189px,30vw) !important;--sa:15deg !important;
  }
  /* Mockup v2: lower-left, 14% from left, 10% from bottom */
  #home .v6-starfield > .v6-star:nth-child(4) {
    left:14% !important;bottom:10% !important;right:auto !important;top:auto !important;
    width:min(154px,30vw) !important;--sa:0deg !important;
  }
}
@keyframes v14-desktop-float {
  0%,100% { transform:rotate(var(--sa)) translateY(0); }
  50% { transform:rotate(var(--sa)) translateY(-7px); }
}
@media (min-width:721px) and (prefers-reduced-motion:reduce){
  #home .v6-starfield > .v6-star {animation:none !important;transform:rotate(var(--sa)) !important;}
}


/* --- refinements-v16.css --- */
/* v16 — code-level refinement on v14; no generated illustration or restyling */
/* Restore the ABOUT title to a bold, italic Korean Myeongjo typeface. */
#about .intro-heading h2,
#about .intro-heading h2 .heading-period {
  font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", "AppleMyungjo", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1.24 !important;
  letter-spacing: -0.075em !important;
  text-shadow: none !important;
}
/* OnlyGL is a data-driven flag, not a guess based on character sex. */
.onlygl-toggle {
  align-self: end; min-height: 44px; display: inline-flex; gap: 11px;
  align-items: center; justify-content: center; background: rgba(255,255,255,.72);
  border: 1px solid #bdd3e7; color: #4d76a7; border-radius: 999px;
  padding: 10px 13px; font-weight: 700; font-size: 12px;
  white-space: nowrap; cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.onlygl-toggle:hover {background:rgba(226,241,255,.9);border-color:#86add3}
.onlygl-toggle .toggle-track {width:32px;height:18px;background:#c9d9e9;border-radius:999px;padding:3px;display:inline-flex;align-items:center;flex-shrink:0;transition:background .2s}
.onlygl-toggle .toggle-thumb {height:12px;width:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #396c9e38;transition:transform .2s}
.onlygl-toggle[aria-checked="true"] {color:#2b5b92;border-color:#7da7d1;background:rgba(223,240,255,.9)}
.onlygl-toggle[aria-checked="true"] .toggle-track {background:#5589c3}
.onlygl-toggle[aria-checked="true"] .toggle-thumb {transform:translateX(14px)}
.onlygl-toggle:focus-visible {outline:2px solid #356eaf; outline-offset:3px}
/* Third and fourth stars are strictly desktop additions; mobile retains v14 layout. */
#about .v16-desktop-star, #worlds .v16-desktop-star {display:none !important}
@media (min-width:721px) {
  #about .v16-desktop-star,#worlds .v16-desktop-star {display:block !important}
  /* ABOUT: distribute four stars at distant corners, behind text. */
  #about .v6-starfield > .v6-star:nth-child(1) {left:87% !important;top:16% !important;}
  #about .v6-starfield > .v6-star:nth-child(2) {left:14% !important;top:80% !important;}
  #about .v6-starfield > .v6-star:nth-child(3) {left:14% !important;top:19% !important;width:min(150px,12vw) !important;}
  #about .v6-starfield > .v6-star:nth-child(4) {left:85% !important;top:83% !important;width:min(168px,14vw) !important;}
  /* UNIVERSE: three stars with deliberate gaps; mobile still has two unchanged. */
  #worlds .v6-starfield > .v6-star:nth-child(1) {left:10% !important;top:18% !important;}
  #worlds .v6-starfield > .v6-star:nth-child(2) {left:89% !important;top:79% !important;}
  #worlds .v6-starfield > .v6-star:nth-child(3) {left:54% !important;top:15% !important;width:min(151px,13vw) !important;}
}
@media(max-width:720px){
  .onlygl-toggle {min-height:40px; font-size:11px; padding:8px 12px;}
}
@media(prefers-reduced-motion:reduce){.onlygl-toggle,.onlygl-toggle *{transition:none}}


/* --- refinements-v17.css --- */
/* v17: only the COMING SOON upper-right comet */
#upcoming .v6-starfield > .v6-star:first-child {
 width:min(66vw,730px)!important; max-width:none!important; max-height:none!important;
 height:auto!important; left:59%!important; top:190px!important; object-fit:contain!important;
}
@media(max-width:720px){#upcoming .v6-starfield > .v6-star:first-child {
 width:85vw!important;max-width:none!important;max-height:none!important;left:51%!important;top:185px!important;
}}
@media(max-width:360px){#upcoming .v6-starfield > .v6-star:first-child{width:82vw!important;left:50%!important}}


/* --- desktop-home-v2-original.css --- */
/* CINQUANTA v20 — Direct transfer of HOME star layout from user-uploaded v2 HTML.
 * Only for desktop (>= 721px). Four original v2 files/classes & winning CSS sizes,
 * coordinates, opacity, animation preserved. Other v19 pages are untouched.
 * These declarations reproduce the v2 source CSS after its original cascade.
 */
#home > img.v2-original-home-star { display:none !important; }
@media (min-width:721px) {
  /* Hide v19 desktop star variants and the unchanged underlying mobile star layer. */
  #home > .v6-starfield { display:none !important; }
  #home > img.hero-art.v2-original-home-star {
    display:block !important;
    position:absolute !important;
    pointer-events:none !important;
    user-select:none !important;
    z-index:1 !important;
    object-fit:contain !important;
    max-width:none !important;
    max-height:220px !important;
    height:auto !important;
    transform:none !important;
    animation:float-one 8s ease-in-out infinite !important;
  }
  /* Original v2: .hero-art-left (01_pastel_star_cluster.png) */
  #home > img.hero-art-left.v2-original-home-star {
    width:clamp(116px,15vw,193px) !important;
    left:4.4% !important; right:auto !important;
    bottom:7% !important; top:auto !important;
    opacity:.84 !important;
  }
  /* Original v2: .hero-art-upper (02_long_sparkle.png) */
  #home > img.hero-art-upper.v2-original-home-star {
    width:clamp(83px,9vw,126px) !important;
    left:14.5% !important; right:auto !important;
    top:12% !important; bottom:auto !important;
    opacity:.75 !important;
  }
  /* Original v2: .hero-art-comet (03_shooting_starburst.png) */
  #home > img.hero-art-comet.v2-original-home-star {
    width:clamp(160px,20vw,260px) !important;
    right:4.3% !important; left:auto !important;
    top:11% !important; bottom:auto !important;
    opacity:.72 !important;
    mask-image:none !important;
    mix-blend-mode:normal !important;
  }
  /* Original v2: .hero-art-small (06_soft_orbit_star.png) */
  #home > img.hero-art-small.v2-original-home-star {
    width:clamp(90px,11vw,132px) !important;
    right:8% !important; left:auto !important;
    bottom:9% !important; top:auto !important;
    opacity:.77 !important;
  }
}
/* Mobile (<= 720px): v19 original DOM/styles untouched and v2 images hidden. */


/* --- tab-motion-v22.css --- */
/* CINQUANTA v22 | true tab routing with a scroll-like entrance motion. */
/* Re-enable the original v5 tab router. One section is visible at a time. */
html {scroll-behavior:auto;}
@media(min-width:721px){html{scrollbar-gutter:stable;}}
body{overflow-x:clip;}
/* CSS in usability.css controls which section is visible via body[data-page]. */
main > section.site-page{scroll-margin-top:0;}
/* This is visual motion only, never in-page anchor scrolling. */
@keyframes cinquanta-tab-rise{
 from{opacity:.08;transform:translate3d(0,34px,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}
main > section.site-page.tab-enter{animation:cinquanta-tab-rise .42s cubic-bezier(.22,1,.36,1) both;}
/* On PC, character-star positions are based on a stable, fixed-size field, not on grid results. */
@media(min-width:721px){
 #characters .v6-starfield{bottom:auto!important;height:clamp(800px,100svh,1030px)!important;}
 #characters .v6-starfield .v6-star{animation:none!important;}
}
#home .hero-copy { width:100%; }
#home .hero-latest-notice { position:relative; width:min(470px,calc(100vw - 48px)); margin:clamp(26px,3vw,42px) auto 0; text-align:left; z-index:5; }
#home .hero-latest-notice[hidden]{display:none !important;}
#home .recent-notice { margin:0; border-top:1px solid #c9dbec; border-bottom:1px solid #dfeaf5; background:rgba(255,255,255,.65); color:#436a9c; backdrop-filter:blur(5px); }
#home .recent-notice summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; min-height:53px; padding:12px 3px; -webkit-tap-highlight-color:transparent; }
#home .recent-notice summary::-webkit-details-marker { display:none; }
#home .recent-kicker { flex:0 0 auto; color:#91abc6; font-weight:700; font-size:10px; letter-spacing:1.2px; }
#home .recent-title { flex:1; min-width:0; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
#home .recent-date { font-size:11px; color:#87a5c5; flex:0 0 auto; white-space:nowrap; }
#home .recent-chevron { flex:0 0 auto; font-size:19px; font-weight:300; transition:transform .25s; color:#6b95c0; }
#home .recent-notice[open] .recent-chevron {transform:rotate(45deg)}
#home .recent-body { padding:3px 7px 17px; line-height:1.9; font-size:12px; color:#54789f; overflow-wrap:anywhere; }
#home .recent-body p { margin:4px 0 10px; white-space:pre-wrap; }
#home .recent-body h4 {margin:10px 0 5px;}
#home .recent-body img { max-width:100%; height:auto; }
/* Only on desktop: remove the center-top star from UNIVERSE. */
@media(min-width:721px) { #worlds .v6-starfield > .v16-desktop-star {display:none !important;} }
@media(max-width:720px){
 #home .hero-latest-notice{width:min(430px,calc(100vw - 38px)); margin:26px auto 0;}
 #home .recent-notice summary{flex-wrap:wrap;gap:5px 9px; padding:10px 2px;}
 #home .recent-kicker{font-size:9px;}
 #home .recent-title{font-size:12px; flex:1 1 calc(100% - 85px);}
 #home .recent-date{font-size:10px; order:3; flex:1 0 100%; padding-left:0;}
 #home .recent-chevron{margin-left:auto;order:2;}
 #home .recent-body {font-size:12px;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}#home .recent-chevron{transition:none;}}

/* Undated items have no date element at all (or a hidden lightbox date). */
#lightbox-date[hidden]{display:none!important;}
@media(prefers-reduced-motion:reduce){
 main > section.site-page.tab-enter{animation:none!important;}
}


/* --- refinements-v23.css --- */
/* CINQUANTA v23 — focused refinement on v22. Real HTML/CSS/JS, no generated image. */
/* ABOUT: restore the existing italic Myeongjo, but remove the heavy bold setting. */
#about .intro-heading h2,
#about .intro-heading h2 .heading-period {
  font-weight: 400 !important;
}
/* OnlyGL: discreet compact switch integrated into the filter toolbar. */
#characters .onlygl-toggle {
  align-self: center !important;
  min-height: 30px !important;
  gap: 7px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(118,155,198,.32) !important;
  background: rgba(255,255,255,.55) !important;
  border-radius: 999px !important;
  color: #5f84b0 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  transition: background-color .18s ease,border-color .18s ease,color .18s ease !important;
}
#characters .onlygl-toggle:hover,
#characters .onlygl-toggle:focus-visible {
  border-color: rgba(98,149,205,.64) !important;
  background:rgba(233,244,255,.74) !important;
}
#characters .onlygl-toggle[aria-checked="true"] {
  border-color:rgba(91,147,208,.60) !important;
  color:#3e70a7 !important;
  background:rgba(220,238,255,.65) !important;
}
#characters .onlygl-toggle .toggle-track {
  width:25px !important;
  height:14px !important;
  padding:2px !important;
  background:#d7e4f0 !important;
  border-radius:999px !important;
}
#characters .onlygl-toggle[aria-checked="true"] .toggle-track {background:#739dcb !important;}
#characters .onlygl-toggle .toggle-thumb {
  width:10px !important;
  height:10px !important;
  transform:none !important;
  box-shadow:0 1px 2px rgba(46,89,140,.18) !important;
}
#characters .onlygl-toggle[aria-checked="true"] .toggle-thumb {transform:translateX(11px) !important;}
/* HOME latest notice is a clickable preview; the content opens in existing modal. */
#home .recent-notice-trigger {
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:54px !important;
  gap:12px !important;
  padding:12px 5px !important;
  border:0 !important;
  border-top:1px solid #c9dbec !important;
  border-bottom:1px solid #dfeaf5 !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.63) !important;
  color:#436a9c !important;
  text-align:left !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,border-color .2s ease !important;
}
#home .recent-notice-trigger:hover {background:rgba(238,247,255,.85) !important;border-color:#acc9e4 !important;}
#home .recent-notice-trigger:active {background:rgba(229,242,255,.93) !important;}
#home .recent-notice-trigger .recent-chevron {transition:transform .2s ease !important;}
#home .recent-notice-trigger:hover .recent-chevron {transform:translate(2px,-1px) !important;}
/* Desktop-only star edits. No layout or star position changes under 721px. */
@media(min-width:721px) {
  /* NOTICE lower-left: 2.7× its previous displayed 217px size. */
  #notice .v6-starfield > .v6-star:nth-child(2) {
    width:min(586px,58vw) !important;
    max-width:none !important;
    max-height:none !important;
    height:auto !important;
  }
  /* CHARACTERS: relocate upper decoration to upper-left, enlarge 2.1×; 10% transparency. */
  #characters .v6-starfield > .v6-star:nth-child(1) {
    left:18% !important;
    top:23% !important;
    width:min(588px,48vw) !important;
    max-width:none !important;
    max-height:none !important;
    height:auto !important;
    opacity:.90 !important;
    animation:none !important;
  }
  /* COMING SOON top star: modest rightward adjustment. */
  #upcoming .v6-starfield > .v6-star:nth-child(1) {left:77% !important;}
  /* UNIVERSE upper-left: 20% transparency = 80% opacity. */
  #worlds .v6-starfield > .v6-star:nth-child(1) {opacity:.80 !important;}
}
@media(max-width:720px) {
  #home .recent-notice-trigger {flex-wrap:wrap;gap:5px 9px !important;padding:10px 4px !important;}
  #home .recent-notice-trigger .recent-title {flex:1 1 calc(100% - 85px);}
  #home .recent-notice-trigger .recent-date {order:3;flex-basis:100%;}
  #home .recent-notice-trigger .recent-chevron {order:2;margin-left:auto;}
  #characters .onlygl-toggle {min-height:30px !important;padding:6px 8px !important;font-size:10.5px !important;}
}
@media(prefers-reduced-motion:reduce) {
  #home .recent-notice-trigger,#home .recent-notice-trigger .recent-chevron,
  #characters .onlygl-toggle {transition:none !important;}
}


/* --- refinements-v24.css --- */
/* CINQUANTA v24: retain v23 ABOUT weight, compact OnlyGL and HOME notice modal. */
/* The added image is desktop-only: no change to mobile star count or placement. */
#characters .v6-starfield > .v24-desktop-left-star {display:none !important;}
@media (min-width:721px) {
  /* NOTICE: 2.7 × 217px reference, preserving lower-left placement. */
  #notice .v6-starfield > .v6-star:nth-child(2) {
    width:min(586px,58vw) !important;
    max-width:none !important; max-height:none !important; height:auto !important;
  }
  /* CHARACTERS right-top: restore its original side, 2.1 × 280px, 10% transparent. */
  #characters .v6-starfield > .v6-star:nth-child(1) {
    left:82% !important; top:23% !important;
    width:min(588px,47vw) !important;
    max-width:none !important; max-height:none !important; height:auto !important;
    opacity:.90 !important; animation:none !important;
  }
  /* CHARACTERS left-top: below the former left-top placement, 3 × 168px,
     20 percentage points more transparent than 90% opacity (70% opaque). */
  #characters .v6-starfield > .v24-desktop-left-star {
    display:block !important;
    left:22% !important; top:44% !important;
    width:min(504px,42vw) !important;
    max-width:none !important; max-height:none !important; height:auto !important;
    opacity:.70 !important; animation:none !important;
    transform:translate(-50%,-50%) rotate(-10deg) !important;
  }
  /* COMING SOON: nudge the upper star further right, desktop only. */
  #upcoming .v6-starfield > .v6-star:nth-child(1) {left:80% !important;}
  /* UNIVERSE: upper-left star 20% transparent. */
  #worlds .v6-starfield > .v6-star:nth-child(1) {opacity:.80 !important;}
}


/* --- refinements-v25.css --- */
/* CINQUANTA v25 — shared BGM / dates; PC-only star positioning and opacity. */
/* BGM panel: light translucent glass, with one existing PNG star under its content. */
.bgm-panel {
 background:rgba(255,255,255,.76) !important;
 backdrop-filter:blur(16px) saturate(125%) !important;
 -webkit-backdrop-filter:blur(16px) saturate(125%) !important;
 border-color:rgba(148,188,224,.58) !important;
 box-shadow:0 16px 46px rgba(75,115,162,.19) !important;
 isolation:isolate;
}
.bgm-panel > .bgm-decor-star {
 position:absolute !important; right:14px; top:46px; z-index:0;
 width:103px; height:103px; object-fit:contain;
 opacity:.20; pointer-events:none; user-select:none;
}
.bgm-panel > :not(.bgm-decor-star){position:relative;z-index:1;}
/* Keep mute on/off; remove fine-grained volume adjustment altogether. */
.bgm-controls #bgm-mute { width:32px;height:32px;flex:0 0 32px; }
@media(max-width:720px){.bgm-panel>.bgm-decor-star{width:87px;height:87px;right:12px;top:51px;}}
/* Only desktop changes follow. Mobile's decorative positions and size stay as in v24. */
@media(min-width:721px){
 /* 30% transparent = 70% opaque. */
 #notice .v6-starfield > .v6-star:nth-child(2) {opacity:.70 !important;}
 #characters .v6-starfield > .v6-star:nth-child(1) {opacity:.70 !important;}
 #worlds .v6-starfield > .v6-star:nth-child(1) {opacity:.70 !important;}
 /* Bring the desktop-only left decoration down almost to the stable starfield edge. */
 #characters .v6-starfield > .v24-desktop-left-star {top:84% !important;}
 /* COMING SOON left-bottom: 2.7 x the original 175px sprite width. */
 #upcoming .v6-starfield > .v6-star:nth-child(2){
   width:min(473px,47vw) !important;max-width:none !important;max-height:none !important;height:auto !important;
   opacity:.70 !important;
 }
}


/* --- refinements-v26.css --- */
/* CINQUANTA v26 — shared player ornament + desktop-only star layout. */
/* All mobile decorative star positions and styles remain inherited from v25. */
@media (min-width:721px) {
  /* 50% transparent = CSS opacity 0.50 */
  #notice .v6-starfield > .v6-star:nth-child(2),
  #characters .v6-starfield > .v6-star:nth-child(1),
  #upcoming .v6-starfield > .v6-star:nth-child(2),
  #worlds .v6-starfield > .v6-star:nth-child(1) {
    opacity: .50 !important;
  }
  /* Keep the existing 2.7× size of COMING SOON's lower-left star. */
  #upcoming .v6-starfield > .v6-star:nth-child(2) {
    width:min(473px,47vw) !important;
    max-width:none !important; max-height:none !important;
    height:auto !important;
  }
  /* Move the left character ornament to the lowest region of the fixed starfield;
     overflow is visible, so the star need not be clipped by the field boundary. */
  #characters .v6-starfield > .v24-desktop-left-star {
    top:calc(100% - 28px) !important;
    transform:translate(-50%,-50%) rotate(-10deg) !important;
    animation:none !important;
  }
}


/* --- refinements-v27.css --- */
/* CINQUANTA v27 — ONLY the three requested star changes. */
/* PC: ABOUT upper-left desktop-only star uses the HOME upper-right comet.
   50% transparent = opacity: .50. Other desktop stars remain unchanged. */
@media (min-width: 721px) {
  #about .v6-starfield > .v6-star.v16-desktop-star:nth-child(3) {
    opacity: .50 !important;
  }
}
/* Mobile only: preserve all other star positions and original illustrations. */
@media (max-width: 720px) {
  /* BEHIND & OOC, lower-left star: 50% transparent. */
  #extras .v6-starfield > .v6-star:nth-child(2) {
    opacity: .50 !important;
  }
  /* COMING SOON, lower-left star -> lower-right; 60% transparent. */
  #upcoming .v6-starfield > .v6-star:nth-child(2) {
    left: 78% !important;
    top: calc(100% - 120px) !important;
    opacity: .40 !important;
  }
}


/* --- notion-about-sync.css --- */
#about-content .notion-blue{color:#4776b3}


/* --- notion-inline-images.css --- */
/* Content-only addition. The final v27 star layout, typography and navigation remain unchanged. */
.world-card.has-thumbnail{padding-top:25px}
.world-card .world-thumbnail{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#f3f8fd;border:1px solid #e0eaf4;margin-bottom:18px}
.world-card .world-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.world-card.has-thumbnail h3{margin-top:17px}
.notion-inline-figure{max-width:100%;margin:18px 0 25px}
.notion-inline-photo{display:block;max-width:100%;width:100%;margin:0;padding:0;border:0;background:transparent;text-align:center;cursor:zoom-in}
.notion-inline-photo img{display:block;max-width:100%;width:auto;height:auto;max-height:min(75vh,760px);margin:0 auto;object-fit:contain;border-radius:2px}
.notion-inline-figure figcaption{padding-top:9px;text-align:center;font-size:11px;line-height:1.6;color:#879fb8;overflow-wrap:anywhere}
.intro-letter .notion-inline-figure{margin:16px 0 22px}
@media(max-width:720px){.world-card.has-thumbnail{padding-top:23px}.world-card .world-thumbnail{margin-bottom:14px}.notion-inline-figure{margin:14px 0 20px}.notion-inline-photo img{max-height:72vh}}


/* --- refinements-v28.css --- */
/* CINQUANTA v28 — desktop performance polish and requested star/layout tweaks. */
@media (min-width:721px){
  .notice-date{font-size:12px !important;letter-spacing:.04em !important;}

  /* ABOUT */
  #about .v6-starfield>.v6-star:nth-child(2){opacity:.50 !important;}
  #about .v6-starfield>.v6-star:nth-child(3){
    width:min(calc(var(--sw) * 2.2), 26vw) !important;
    max-width:none !important;
    max-height:none !important;
    opacity:.35 !important;
  }
  #about .v6-starfield>.v6-star:nth-child(4){
    width:min(calc(var(--sw) * 3), 42vw) !important;
    max-width:none !important;
    max-height:none !important;
  }

  /* BEHIND & OOC */
  #extras .v6-starfield>.v6-star:nth-child(2){opacity:.50 !important;}

  /* UNIVERSE */
  #worlds .v6-starfield>.v6-star:nth-child(1){left:86% !important;top:18% !important;}
  #worlds .v6-starfield>.v6-star:nth-child(2){left:17% !important;top:79% !important;}

  /* COMING SOON */
  #upcoming .v6-starfield>.v6-star:nth-child(1){
    left:22% !important;
    top:18% !important;
    transform:translate(-50%,-50%) scaleX(-1) rotate(var(--sa)) !important;
    transform-origin:center !important;
  }
  #upcoming .v6-starfield>.v6-star:nth-child(2){left:80% !important;top:79% !important;}
}


/* --- refinements-v29.css --- */
/* CINQUANTA v29 — requested star refinements and date legibility improvements. */

/* Common */
#about .v6-starfield > .v6-star:nth-child(2),
#extras .v6-starfield > .v6-star:nth-child(2){opacity:.50 !important;}

.notice-date{
  font-size:12px !important;
  letter-spacing:.04em !important;
}

@media (max-width:720px){
  .notice-row .notice-date,
  #extras-grid .extra-post-row .notice-date{
    display:block !important;
    font-size:10px !important;
    letter-spacing:.03em !important;
    opacity:.95 !important;
  }
}

@media (min-width:721px){
  .notice-date{font-size:13px !important;}

  /* ABOUT */
  #about .v6-starfield > .v6-star:nth-child(3){
    width:min(calc(var(--sw) * 4.4), 38vw) !important;
    max-width:none !important;
    max-height:none !important;
  }
  #about .v6-starfield > .v6-star:nth-child(4){
    width:min(calc(var(--sw) * 3), 42vw) !important;
    max-width:none !important;
    max-height:none !important;
  }

  /* COMING SOON */
  #upcoming .v6-starfield > .v6-star:nth-child(1){
    left:22% !important;
    top:18% !important;
    transform:translate(-50%,-50%) scaleX(-1) rotate(var(--sa)) !important;
    transform-origin:center !important;
  }
  #upcoming .v6-starfield > .v6-star:nth-child(2){
    left:80% !important;
    top:79% !important;
    transform:translate(-50%,-50%) scaleX(-1) rotate(var(--sa)) !important;
    transform-origin:center !important;
  }

  /* UNIVERSE */
  #worlds .v6-starfield > .v6-star:nth-child(1){
    left:86% !important;
    top:18% !important;
    transform:translate(-50%,-50%) scaleX(-1) rotate(var(--sa)) !important;
    transform-origin:center !important;
  }
  #worlds .v6-starfield > .v6-star:nth-child(2){
    left:17% !important;
    top:79% !important;
    width:min(calc(var(--sw) * 2.5), 28vw) !important;
    max-width:none !important;
    max-height:none !important;
    transform:translate(-50%,-50%) scaleX(-1) rotate(var(--sa)) !important;
    transform-origin:center !important;
  }

  /* BEHIND & OOC */
  #extras .v6-starfield > .v6-star:nth-child(1){
    width:min(calc(var(--sw) * 0.7), 18vw) !important;
    max-width:none !important;
    max-height:none !important;
    transform:translate(-50%,-50%) rotate(15deg) !important;
    transform-origin:center !important;
  }
  #extras .v6-starfield > .v6-star:nth-child(2){
    left:16% !important;
    top:61% !important;
    width:min(calc(var(--sw) * 2), 20vw) !important;
    max-width:none !important;
    max-height:none !important;
    opacity:.50 !important;
  }
}


/* --- refinements-v30.css --- */
/* CINQUANTA v30 — music player robustness and viewport-specific star adjustments. */

@media (max-width:720px){
  /* Mobile-only star opacity */
  .section-starfield .v6-star,
  .footer-art-star,
  .bgm-decor-star,
  .hero-art,
  .starline img,
  .small-divider img{opacity:.5 !important;}

  /* Footer / discord area star */
  .footer-art-star{
    right:-6% !important;
    top:6% !important;
    bottom:auto !important;
    width:min(80vw,380px) !important;
    max-width:none !important;
  }

  /* Characters top-right star */
  #characters .v6-starfield > .v6-star:nth-child(1){
    width:min(calc(var(--sw) * 3), 48vw) !important;
    max-width:none !important;
    max-height:none !important;
  }

  /* Coming soon */
  #upcoming .v6-starfield > .v6-star:nth-child(1){
    left:20% !important;
    top:18% !important;
    width:min(calc(var(--sw) * 2.5), 48vw) !important;
    max-width:none !important;
    max-height:none !important;
    transform:translate(-50%,-50%) scaleX(-1) rotate(var(--sa)) !important;
    transform-origin:center !important;
  }

  /* Universe */
  #worlds .v6-starfield > .v6-star:nth-child(1){
    left:84% !important;
    top:18% !important;
    width:min(calc(var(--sw) * 1.7), 44vw) !important;
    max-width:none !important;
    max-height:none !important;
  }
}

@media (min-width:721px){
  /* Coming soon top-left star */
  #upcoming .v6-starfield > .v6-star:nth-child(1){
    transform:translate(-50%,-50%) scaleX(-1) rotate(-30deg) !important;
    opacity:.35 !important;
  }

  /* Universe spacing */
  #worlds .section-head{margin-bottom:34px !important;}
  #worlds .world-grid{margin-top:18px !important;}

  /* Universe left-bottom star */
  #worlds .v6-starfield > .v6-star:nth-child(2){
    width:min(calc(var(--sw) * 1.7), 22vw) !important;
    max-width:none !important;
    max-height:none !important;
    transform:translate(-50%,-50%) scaleX(-1) rotate(-29deg) !important;
    transform-origin:center !important;
  }

  /* Behind top-right star */
  #extras .v6-starfield > .v6-star:nth-child(1){
    width:min(calc(var(--sw) * 5), 44vw) !important;
    max-width:none !important;
    max-height:none !important;
  }

  /* About: replace bottom-right star with current top-left star; remove current top-left */
  #about .v6-starfield > .v6-star:nth-child(3){display:none !important;}
  #about .v6-starfield > .v6-star:nth-child(4){
    left:14% !important;
    top:19% !important;
    width:min(calc(var(--sw) * 4.4), 38vw) !important;
    max-width:none !important;
    max-height:none !important;
    opacity:.35 !important;
    transform:translate(-50%,-50%) rotate(4deg) !important;
    transform-origin:center !important;
  }
  #about .v6-starfield > .v6-star:nth-child(2){
    top:75% !important;
    width:min(calc(var(--sw) * 2.5), 20vw) !important;
    max-width:none !important;
    max-height:none !important;
  }

  /* Notice top-right star */
  #notice .v6-starfield > .v6-star:nth-child(1){
    width:min(calc(var(--sw) * 1.7), 22vw) !important;
    max-width:none !important;
    max-height:none !important;
    opacity:.5 !important;
  }
}


/* --- refinements-v31.css --- */
/* CINQUANTA v31: content/source fixes, responsive layout and ornamental cleanup. */
/* Both red-circled triangular fragments are the small detached pixels at the
   far LEFT edge of the triple-star PNG. Crop only the empty/stray edge, not the stars. */
#about .v6-starfield > .v6-star:first-child,
#characters .v6-starfield > .v6-star:first-child{clip-path:inset(0 0 0 11.5%);}

/* All visible star ornaments should be at least 50% transparent (opacity <= .5). */
#home .hero-art,
#home .v6-starfield > .v6-star:nth-child(n),
#about .v6-starfield > .v6-star:nth-child(n),
#notice .v6-starfield > .v6-star:nth-child(n),
#characters .v6-starfield > .v6-star:nth-child(n),
#upcoming .v6-starfield > .v6-star:nth-child(n),
#worlds .v6-starfield > .v6-star:nth-child(n),
#extras .v6-starfield > .v6-star:nth-child(n),
.footer .footer-art-star,.bgm-panel .bgm-decor-star,
.starline img,.small-divider img{opacity:.5!important;}

.upcoming-desktop-label{display:none;}
.upcoming-mobile-label{display:inline;}

/* Embedded YouTube videos are shown at a compliant, user-clickable size. */
#bgm-youtube-wrap[hidden]{display:none!important;}
.bgm-youtube-wrap{margin:0 0 13px;}
#bgm-youtube-embed,#bgm-youtube-embed iframe{display:block;width:100%!important;height:210px!important;min-height:200px!important;border:0;border-radius:9px;background:#eef4fa;}
.bgm-youtube-link{display:inline-block;margin:6px 0 0;color:#5586be;font-size:10px;text-decoration:underline;text-underline-offset:2px;}
#characters .v6-starfield>.character-extra-star{animation:none!important;opacity:.5!important;pointer-events:none;}

@media(min-width:721px){
 .upcoming-desktop-label{display:inline;}
 .upcoming-mobile-label{display:none;}
 /* Current top-left COMING SOON star rotates another 10° counterclockwise. */
 #upcoming .v6-starfield>.v6-star:nth-child(1){transform:translate(-50%,-50%) scaleX(-1) rotate(-20deg)!important;opacity:.35!important;}
 /* Universe lower-left decorative star rotates another 10° counterclockwise. */
 #worlds .v6-starfield>.v6-star:nth-child(2){transform:translate(-50%,-50%) scaleX(-1) rotate(-19deg)!important;}
 /* Behind's top-right star rotates 30° counterclockwise, and rises. */
 #extras .v6-starfield>.v6-star:nth-child(1){top:21%!important;transform:translate(-50%,-50%) rotate(-15deg)!important;}
 /* The main character cover is already present on archive cards. Hide only
    that duplicated first image in desktop detail; preserve ALL Notion body images. */
 #modal-content .character-detail{grid-template-columns:minmax(0,1fr)!important;}
 #modal-content .character-detail .profile-cover{display:none!important;}
 #modal-content .character-detail-body .notion-inline-figure:first-of-type{display:none!important;}
 /* Existing deliberately more-transparent ornaments stay that way. */
 #about .v6-starfield>.v6-star:nth-child(4){opacity:.35!important;}
}
@media(max-width:720px){
 /* Mobile opacity for original + dynamically added stars. */
 #characters .v6-starfield>.character-extra-star{max-width:25vw!important;}
}


/* --- refinements-v32.css --- */
/* CINQUANTA v32 — targeted styling, preserving the v31 layout. */

/* The prior full-height left inset clipped real portions of the triple-star PNG.
   Remove only the detached bottom-left fragment in the two composites. */
#about .v6-starfield>.v6-star:first-child,
#characters .v6-starfield>.v6-star:first-child{
 clip-path:polygon(0 0,100% 0,100% 100%,13% 100%,13% 85%,0 85%)!important;
}
/* Keep star illustrations within their transparent canvases, not cropped. */
.hero .v6-starfield,.section-wrap .v6-starfield{overflow:visible!important;}
.hero .v6-star,.section-wrap .v6-star{object-fit:contain!important;}

/* Slim satin-blue timeline, with accessible focused slider thumb. */
.bgm-timeline{gap:10px!important;margin:6px 0 15px!important;align-items:center;}
#bgm-current-time,#bgm-duration{font-size:10px;letter-spacing:0;min-width:29px;font-variant-numeric:tabular-nums;}
#bgm-seek{
 -webkit-appearance:none!important;appearance:none!important;
 background:linear-gradient(to right,#80aede 0%,#80aede var(--bgm-progress,0%),#e6eef7 var(--bgm-progress,0%),#e6eef7 100%)!important;
 height:4px!important;border:0!important;border-radius:999px!important;
 outline-offset:6px;cursor:pointer;padding:0!important;
}
#bgm-seek::-webkit-slider-runnable-track{height:4px!important;background:transparent!important;border-radius:999px!important;}
#bgm-seek::-moz-range-track{height:4px!important;background:transparent!important;border-radius:999px!important;}
#bgm-seek::-webkit-slider-thumb{
 -webkit-appearance:none!important;appearance:none!important;width:11px!important;height:11px!important;
 background:#fff!important;border:2px solid #87b2df!important;border-radius:50%!important;
 box-shadow:0 0 0 2px #e7f3ff!important;margin-top:-3.5px!important;
}
#bgm-seek::-moz-range-thumb{
 width:8px!important;height:8px!important;background:#fff!important;
 border:2px solid #87b2df!important;border-radius:50%!important;box-shadow:0 0 0 2px #e7f3ff!important;
}
#bgm-seek:focus-visible{outline:2px solid #538cce!important;}
#bgm-seek:disabled{cursor:default;opacity:.55;}
#bgm-youtube-wrap[hidden]{display:none!important;}

/* Extra character stars: subtle, small, fully outside the archive cards. */
#characters .v6-starfield>.character-extra-star{
 opacity:.28!important;filter:saturate(.85) contrast(.96)!important;
 animation:none!important;pointer-events:none!important;
 transform:translate(-50%,-50%) rotate(var(--sa))!important;
 max-width:none!important;max-height:none!important;
}
@media(max-width:1370px){#characters .v6-starfield>.character-extra-star{display:none!important;}}

@media(min-width:721px){
 /* ABOUT: top-left comet to the bottom-right, alongside the platform section. */
 #about .v6-starfield>.v6-star:nth-child(4){left:86%!important;top:81%!important;}
 /* ABOUT lower-left: 1.3x its current 2.5x size. */
 #about .v6-starfield>.v6-star:nth-child(2){
  width:min(calc(var(--sw) * 3.25),26vw)!important;max-width:none!important;max-height:none!important;
 }
 /* NOTICE bottom-left: original 19deg + clockwise 7deg. */
 #notice .v6-starfield>.v6-star:nth-child(2){
  transform:translate(-50%,-50%) rotate(26deg)!important;transform-origin:center!important;
 }
 /* UNIVERSE: mirroring reverses apparent rotation; -19deg -> -12deg is visually 7deg CCW. */
 #worlds .v6-starfield>.v6-star:nth-child(2){
  transform:translate(-50%,-50%) scaleX(-1) rotate(-12deg)!important;transform-origin:center!important;
 }
 /* BEHIND upper-right: 80% of current dimensions. */
 #extras .v6-starfield>.v6-star:nth-child(1){
  width:min(calc(var(--sw) * 4),35.2vw)!important;max-width:none!important;max-height:none!important;
 }
}


/* --- refinements-v33.css --- */
/* CINQUANTA v33 — gallery continuity, dates, and desktop star re-placement. */
/* Ensure BEHIND/OOC post dates have an actual visible column on every device. */
#extras-grid .extra-post-row .notice-date{
 display:block !important;
 color:#688bb5 !important;
 font-size:13px !important;
 line-height:1.4 !important;
 white-space:nowrap;
 text-align:right;
}
@media(max-width:720px){
 #extras-grid .extra-post-row{
  display:grid !important;
  grid-template-columns:26px 58px minmax(0,1fr) 20px !important;
  grid-template-rows:auto auto;
 }
 #extras-grid .extra-post-row .notice-date{
  grid-column:3 / 4 !important;
  grid-row:2 !important;
  font-size:11px !important;
  text-align:left;
  padding-bottom:5px;
 }
}
/* NEXT PROJECT detail: hide only the first in-body figure before its prompt,
   preserving representative cover, remaining inline images, zoom and gallery. */
#modal-content .project-detail-body .notion-inline-figure:first-of-type{display:none !important;}
@media(min-width:721px){
 /* ABOUT: delete the previous bottom-right decorative comet entirely. */
 #about .v6-starfield > .v6-star:nth-child(4){display:none !important;}
 /* Swap the upper-right and lower-left stars; retain each star's appearance. */
 #about .v6-starfield > .v6-star:nth-child(1){left:14% !important;top:75% !important;}
 #about .v6-starfield > .v6-star:nth-child(2){left:80% !important;top:21% !important;}
 /* NOTICE: clockwise 20° from the previous 26°. */
 #notice .v6-starfield > .v6-star:nth-child(2){
  transform:translate(-50%,-50%) rotate(46deg) !important;
  transform-origin:center !important;
 }
 /* Keep the original left-side stars far apart after load-more expansion. */
 #characters .v6-starfield > .v6-star:nth-child(2){left:7% !important;top:61% !important;}
 #characters .v6-starfield > .v6-star.v24-desktop-left-star:nth-child(3){left:35% !important;top:94% !important;}
 /* Mirrored star rotation: increase CSS angle by 10° to turn visually CCW. */
 #upcoming .v6-starfield > .v6-star:nth-child(1){
  transform:translate(-50%,-50%) scaleX(-1) rotate(-10deg) !important;
 }
 /* Mirrored Universe lower-left: visual CCW +3° from previous -12°. */
 #worlds .v6-starfield > .v6-star:nth-child(2){
  transform:translate(-50%,-50%) scaleX(-1) rotate(-9deg) !important;
 }
 /* BEHIND: upper-right star slightly further right and lower. */
 #extras .v6-starfield > .v6-star:nth-child(1){left:70% !important;top:28% !important;}
}


/* --- refinements-v34.css --- */
/* CINQUANTA v34 — precise desktop adjustments and reliable project/gallery display. */
/* The lead image is removed in the renderer, so do not hide the second figure. */
#modal-content .project-detail-body .notion-inline-figure:first-of-type{display:block !important;}

/* This single explicitly approved generated asset is visible on UNIVERSE only. */
#worlds .v6-starfield>.v34-universe-star{
 left:84% !important;top:82% !important;
 width:min(220px,20vw) !important;
 max-width:none !important;max-height:none !important;
 opacity:.5 !important;
 transform:translate(-50%,-50%) rotate(-7deg) !important;
 pointer-events:none !important;
}
@media(max-width:720px){
 #worlds .v6-starfield>.v34-universe-star{left:80% !important;top:78% !important;width:min(170px,37vw) !important;}
}
@media(min-width:721px){
 /* NOTICE: the previously rotated bottom-left star, +5° clockwise, leftward. */
 #notice .v6-starfield>.v6-star:nth-child(2){
  left:24% !important;
  transform:translate(-50%,-50%) rotate(51deg) !important;
  transform-origin:center !important;
 }
 /* NEXT PROJECT: mirrored, further 10° counterclockwise in visual direction. */
 #upcoming .v6-starfield>.v6-star:nth-child(1){
  transform:translate(-50%,-50%) scaleX(-1) rotate(0deg) !important;
  transform-origin:center !important;
 }
 /* UNIVERSE: original upper-right star enlarges by 2.5x. */
 #worlds .v6-starfield>.v6-star:nth-child(1){
  width:min(calc(var(--sw) * 2.5),46vw) !important;
  max-width:none !important;max-height:none !important;
 }
 /* BEHIND & OOC: upper-right star slightly lower. */
 #extras .v6-starfield>.v6-star:nth-child(1){top:33% !important;}
}


/* --- refinements-v35.css --- */
/* CINQUANTA v35 — ABOUT stars exclusively on desktop; preserve mobile layout. */
/* These two assets do not exist in the original mobile artwork. */
#about .v6-starfield > .v35-about-character-star,
#about .v6-starfield > .v35-about-platform-star{display:none !important;}

@media(min-width:721px){
 /* The existing star visible in the upper-right (second element after v33 swap)
    moves beside the platform area in the bottom-right. */
 #about .v6-starfield > .v6-star:nth-child(2){
  left:82% !important;
  top:85% !important;
 }
 /* Copy the actual CHARACTERS page's upper decorative star into ABOUT top-left. */
 #about .v6-starfield > .v35-about-character-star{
  display:block !important;
  left:15% !important;
  top:18% !important;
  width:min(330px,26vw) !important;
  max-width:none !important;
  max-height:none !important;
  height:auto !important;
  transform:translate(-50%,-50%) rotate(19deg) !important;
  opacity:.5 !important;
  clip-path:polygon(0 0,100% 0,100% 100%,13% 100%,13% 85%,0 85%) !important;
  animation:none !important;
 }
 /* Leftmost item from the new transparent-background star set, near the
    platform area in the lower-left, distinct from the preexisting large star. */
 #about .v6-starfield > .v35-about-platform-star{
  display:block !important;
  left:39% !important;
  top:88% !important;
  width:min(255px,20vw) !important;
  max-width:none !important;
  max-height:none !important;
  height:auto !important;
  transform:translate(-50%,-50%) rotate(-9deg) !important;
  opacity:.5 !important;
  animation:none !important;
 }
}


/* --- refinements-v36.css --- */
/* CINQUANTA v36 — viewport-scoped ornament adjustments and convenient music playback. */
/* The compact dock replaces the old BGM launcher, but retains the full playlist panel. */
.bgm-player .bgm-quick-controls{
 display:flex;align-items:center;gap:3px;justify-content:flex-end;
 padding:5px;border:1px solid rgba(157,193,224,.74);border-radius:999px;
 box-shadow:0 5px 23px rgba(82,121,169,.12);background:rgba(250,253,255,.91);
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.bgm-player .bgm-quick-controls>button{
 display:grid;place-items:center;flex:0 0 auto;width:37px;height:37px;
 border:0;border-radius:999px;background:transparent;color:#537fae;
 font-family:system-ui,sans-serif;font-size:17px;font-style:normal;font-weight:600;
 line-height:1;opacity:1!important;box-shadow:none!important;cursor:pointer;
 transition:background .2s,color .2s,transform .2s;
}
.bgm-player .bgm-quick-controls>button:hover,
.bgm-player .bgm-quick-controls>button:focus-visible{background:#eaf3fd!important;outline-offset:2px;}
.bgm-player .bgm-quick-controls>button:disabled{opacity:.42!important;cursor:default;}
.bgm-player .bgm-quick-controls>#bgm-toggle{
 border-left:1px solid #dce9f7;border-radius:0 999px 999px 0;
 width:35px;font-size:19px;padding:0!important;min-width:0;
}
/* The eyebrow / subtitle on NEXT PROJECT must match the other section labels. */
#upcoming .section-label{
 font-family:'DM Sans',sans-serif!important;font-size:10px!important;
 font-style:normal!important;font-weight:700!important;letter-spacing:1.55px;
}
#upcoming .section-head h2{font-family:'Playfair Display',Georgia,serif!important;font-style:italic!important;}
@media(min-width:721px){
 /* NEXT PROJECT: significantly higher top-left decoration. */
 #upcoming .v6-starfield>.v6-star:nth-child(1){top:7%!important;}
 /* ABOUT top-left character decoration is 3.5x its v35 dimensions. */
 #about .v6-starfield>.v35-about-character-star{
  width:min(1155px,91vw)!important;max-width:none!important;max-height:none!important;
 }
 /* ABOUT upper-right decoration now sits just above the platform blocks. */
 #about .v6-starfield>.v6-star:nth-child(2){top:70%!important;}
 /* ABOUT new lower-center star shifts towards the left. */
 #about .v6-starfield>.v35-about-platform-star{left:27%!important;}
 /* Mirroring reverses rotation direction: -9deg to -6deg = visual CCW 3deg. */
 #worlds .v6-starfield>.v6-star:nth-child(2){
  width:min(calc(var(--sw) * 2.89),37.4vw)!important;
  max-width:none!important;max-height:none!important;
  transform:translate(-50%,-50%) scaleX(-1) rotate(-6deg)!important;
 }
}
@media(max-width:720px){
 #upcoming .section-label{font-size:9px!important;}
 /* NOTICE bottom-left star: four times its base width, +23° clockwise from 19°. */
 #notice .v6-starfield>.v6-star:nth-child(2){
  width:calc(var(--sw) * 4)!important;max-width:none!important;max-height:none!important;
  transform:translate(-50%,-50%) rotate(42deg)!important;
 }
 /* The discord/footer star hugs the upper-left corner, not the middle. */
 .footer .footer-art-star{
  left:-24%!important;right:auto!important;top:-15%!important;bottom:auto!important;
 }
 .bgm-player .bgm-quick-controls>button{width:34px;height:34px;font-size:16px;}
}