@font-face{font-family:StellaSignature;src:url('assets/fonts/StellaSignature.woff2') format('woff2');font-weight:400 700;font-display:swap}
.stella-edition{--note:StellaNotes,"STKaiti","KaiTi",serif;--signature:StellaSignature,"Segoe Print",cursive}
.stella-edition .paper-page,.stella-edition .desk-note,.stella-edition .desk-tools,.stella-edition .book-footer,.stella-edition .reader-copy,.stella-edition .index-card{font-family:var(--note)}
.stella-edition .page-heading p{font-family:var(--note);font-size:16px;line-height:1.5;margin-top:12px}
.stella-edition .page-topnote{font-family:var(--note);font-size:13px}
.stella-edition .lined-note p{font-family:var(--note);font-size:19px;line-height:1.6}
.stella-edition .scrap-label{font-family:var(--note);font-size:14px;line-height:1.4;padding-top:8px;padding-bottom:10px}
.stella-edition .handwritten{font-family:var(--signature);font-size:19px;line-height:1.2;font-style:normal}
.stella-edition .lined-note .handwritten{font-size:16px;line-height:1.1}
.stella-edition .cover-label>span{font-family:var(--signature);font-size:47px;line-height:1;letter-spacing:0;color:#ebd8b1;font-weight:500}
.stella-edition .cover-label h2{margin-top:25px}
.stella-edition .cover-pocket i>span,.stella-edition .cover-date{font-family:var(--signature);font-style:normal}
.stella-edition .cover-pocket i>span{font-size:24px}
.stella-edition .cover-date{font-size:18px}
.stella-edition .desk-note p{font-size:19px;line-height:1.6}
.stella-edition .sticker-motion{display:block;width:100%;height:100%;transform-origin:50% 100%}
.stella-edition .character,.stella-edition .desk.expanded .character{width:190px;height:285px;clip-path:none}
.stella-edition .character-sprite{background-image:url('assets/stella-opening-12.png');background-size:400% 300%;background-position:100% 100%;transform-origin:50% 75%;transition:none}
.stella-edition .desk.intro-playing .character{width:190px;height:285px;bottom:11px;top:auto}
.stella-edition .desk.intro-playing .intro-caption{top:15%;font-family:var(--note);font-size:17px}
.stella-edition .desk:not(.intro-playing) .character{transition:left .55s ease,width .55s ease,height .55s ease}
.opening-tools{display:flex;gap:20px}
#storyboard-dialog{width:min(1040px,95vw);background:#f2e5c5 url('assets/paper-creased.png') center/cover}
.storyboard-layout{display:grid;grid-template-columns:31% 1fr;gap:24px;padding:20px 25px 25px;max-height:78svh;overflow:auto}
.storyboard-inspect{text-align:center;align-self:center}
.storyboard-figure{width:190px;aspect-ratio:2/3;margin:auto;background-image:url('assets/stella-opening-12.png');background-size:400% 300%;background-repeat:no-repeat}
.storyboard-inspect h3{font:21px var(--note);margin-top:12px}
.storyboard-inspect p{font:15px/1.6 var(--note);margin:10px 0 20px}
#storyboard-replay{font:16px var(--note);padding:10px 14px;border:1px solid #9b7654;color:#654329}
.storyboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.storyboard-grid>button{background:#fff9e9aa;border:1px solid #8c744a22;padding:5px 3px 8px;text-align:center}
.storyboard-grid>button[aria-pressed=true]{background:#ddc99c;border-color:#805735}
.storyboard-grid>button>span:last-child{font:12px/1.35 var(--note);display:block;margin-top:4px}
.storyboard-thumb{display:block;width:100%;aspect-ratio:2/3;background-image:url('assets/stella-opening-12.png');background-size:400% 300%;background-repeat:no-repeat}
@media(max-width:760px){.stella-edition .desk.intro-playing .character{width:135px;height:202.5px;top:385px;bottom:auto}.storyboard-layout{grid-template-columns:1fr;padding:12px;gap:16px;max-height:80svh}.storyboard-figure{width:135px}.storyboard-inspect p{margin:7px 0 10px}.storyboard-grid{gap:6px}.storyboard-grid>button>span:last-child{font-size:10px}.opening-tools{gap:14px}}
.stella-edition .desk.expanded .character{width:160px;height:240px;bottom:11px}
.stella-edition .character-bubble{font-family:var(--note);font-size:13px;top:0;left:20%;padding:8px 13px}
/* The product page is a real flow layout: the screenshot and note never overlap. */
.stella-edition .product-spread .page-left{padding:34px 38px 53px;display:grid;grid-template-rows:auto minmax(130px,1fr) auto;gap:15px}
.stella-edition .product-spread .page-left .page-heading{position:static}
.stella-edition .product-spread .retro-window{position:relative;inset:auto;width:100%;height:100%;min-height:0;transform:rotate(-2deg);display:flex;flex-direction:column;overflow:hidden}
.stella-edition .retro-window .window-bar{flex-shrink:0;padding:7px 9px}
.stella-edition .retro-window>button{flex:1;min-height:0;display:block;padding:8px}
.stella-edition .retro-window img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;object-position:top}
.stella-edition .product-note{position:static;inset:auto;width:100%;min-width:0;margin-top:3px}
.stella-edition .product-note .tiny-stamp{font-size:12px}
.stella-edition .product-note h3{font-family:var(--note);font-size:25px;font-weight:400;line-height:1.18;margin-top:5px}
.stella-edition .product-note>p{font-size:15px;line-height:1.5;margin-top:8px;max-width:none}
.stella-edition .product-note .text-button{font-family:var(--note);font-size:15px;padding:6px 0;margin-top:4px}
.stella-edition .product-note>small{font-size:11px;line-height:1.5;margin-top:8px;max-width:none}
.stella-edition .study-ticket>p{font-size:16px;line-height:1.5}
.stella-edition .study-ticket small{font-size:12px;line-height:1.5}
.stella-edition .study-ticket>button>span{font-family:var(--note);font-size:15px}
.stella-edition .study-ticket>button img{aspect-ratio:2.1}
/* A complete portrait in a simple photograph frame, with no envelope over the face. */
.stella-edition .product-spread .page-right{padding:72px 10% 55px;display:flex;flex-direction:column;gap:20px}
.stella-edition .product-spread .study-ticket{position:relative;left:auto;top:auto;width:100%;padding:19px 21px 17px;min-height:0;flex:1}
.stella-edition .study-ticket h3{font-size:31px;margin-top:5px}
.stella-edition .study-ticket>p{font-size:14px;margin-top:6px}
.stella-edition .study-ticket>button{margin-top:11px}
.stella-edition .study-ticket>button img{aspect-ratio:2.7}
.stella-edition .study-ticket>button>span{font-size:14px;padding-top:7px}
.stella-edition .study-ticket small{font-size:11px;line-height:1.4;margin-top:8px}
.stella-edition .petlens-slip{display:flex;gap:13px;align-items:center;padding:10px 13px;background:#e8ddbf;box-shadow:2px 3px 5px #45331c24;transform:rotate(-2deg);flex-shrink:0}
.stella-edition .petlens-slip>img{width:72px;height:66px;object-fit:cover;object-position:top;border:3px solid #fff8e8}
.stella-edition .petlens-slip>span{display:block;min-width:0}
.stella-edition .petlens-slip strong{font:22px var(--signature);display:block}
.stella-edition .petlens-slip small{font:12px/1.4 var(--note);display:block;margin:3px 0}
.stella-edition .petlens-slip em{font:13px var(--note);color:#8a4938}
@media(max-width:760px){.stella-edition .product-spread .page-right{padding:60px 9% 43px;gap:17px}.stella-edition .petlens-slip{gap:9px}.stella-edition .petlens-slip>img{width:59px;height:64px}}
.stella-edition .about-spread .page-left{padding:34px 37px 52px;display:grid;grid-template-rows:auto minmax(0,1fr) 49px;gap:17px}
.stella-edition .about-spread .page-left .page-heading{position:static}
.stella-edition .about-letter{position:relative;inset:auto;width:100%;min-height:0;padding:22px 22px 19px;transform:rotate(-2deg);align-self:center}
.stella-edition .about-letter h3{font-family:var(--note);font-size:28px;font-weight:400;line-height:1.2;margin:0 0 12px}
.stella-edition .about-letter>p{font-size:17px;line-height:1.6}
.stella-edition .about-letter>.about-facts{font-size:14px;line-height:1.55;margin-top:18px;color:#526451}
.stella-edition .mail-link{font-family:var(--signature);font-size:18px;padding:7px 0;margin-top:10px}
.stella-edition .resume-slip{position:relative;inset:auto;width:90%;justify-self:center;align-self:end;padding:13px 17px;gap:12px}
.stella-edition .resume-slip>span:first-child{font-size:12px}
.stella-edition .resume-slip strong{font-family:var(--note);font-size:16px}
.stella-edition .photo-pocket{top:87px;left:28%;width:49%;height:300px;transform:rotate(3deg)}
.stella-edition .life-photo{left:0;top:0;width:100%;padding:9px 9px 0;transform:rotate(-5deg);z-index:3}
.stella-edition .life-photo img{width:100%;aspect-ratio:.9;object-fit:cover;object-position:50% 22%;background:#d8e2e7}
.stella-edition .life-photo .handwritten{font-size:21px;line-height:1.1;padding:10px 0 13px}
.stella-edition .photo-pocket>.paperclip{right:-1px;top:-11px}
.stella-edition .travel-snapshot{position:absolute;left:6%;top:226px;width:91px;padding:5px 5px 7px;background:#fff7e7;box-shadow:2px 4px 6px #45331c35;transform:rotate(-10deg);z-index:5}
.stella-edition .travel-snapshot img{width:100%;aspect-ratio:.95;object-fit:cover;object-position:65% 80%}
.stella-edition .travel-snapshot>span{display:block;font-family:var(--signature);font-size:14px;line-height:1.15;padding-top:6px}
.stella-edition .experience-notes{top:auto;bottom:49px;max-height:146px}
.stella-edition .experience-notes summary{font-size:15px;padding:12px 1px}
.stella-edition .experience-notes details>p{font-size:14px;line-height:1.6}
.stella-edition .experience-notes details>div>button{font-family:var(--note);font-size:13px}
@media(min-width:761px) and (max-width:1150px){.stella-edition .desk.expanded .character{width:112px;height:168px}.stella-edition .scrap-label{font-size:12px}.stella-edition .lined-note p{font-size:17px}.stella-edition .page-heading p{font-size:14px}.stella-edition .product-spread .page-left{padding:29px 31px 48px;gap:12px}.stella-edition .product-note h3{font-size:23px}.stella-edition .product-note>p{font-size:14px}.stella-edition .product-note>small{font-size:10px}.stella-edition .about-spread .page-left{padding:29px 31px 49px;gap:12px}.stella-edition .about-letter{padding:19px}.stella-edition .about-letter h3{font-size:25px}.stella-edition .about-letter>p{font-size:16px}.stella-edition .about-letter>.about-facts{font-size:13px;margin-top:13px}.stella-edition .photo-pocket{height:270px;width:48%;left:31%}.stella-edition .travel-snapshot{width:75px;left:6%;top:213px}.stella-edition .experience-notes summary{font-size:14px}}
@media(min-width:1151px) and (max-width:1450px){.stella-edition .desk.expanded .character{width:130px;height:195px}}
@media(max-width:760px){.stella-edition .character{width:135px;height:202.5px;top:385px}.stella-edition .desk.expanded .character{width:110px;height:165px}.stella-edition .cover-label>span{font-size:41px}.stella-edition .cover-label h2{margin-top:28px}.stella-edition .cover-pocket i>span{font-size:13px;padding:7px 4px}.stella-edition .cover-date{font-size:12px}.stella-edition .page-heading p{font-size:13px;line-height:1.5}.stella-edition .page-topnote{font-size:11px}.stella-edition .scrap-label{font-size:11px;line-height:1.3;padding-top:6px;padding-bottom:8px}.stella-edition .lined-note p{font-size:16px}.stella-edition .lined-note .handwritten{font-size:14px}.stella-edition .product-spread .page-left{padding:30px 24px 43px;gap:13px;grid-template-rows:auto minmax(120px,1fr) auto}.stella-edition .product-note h3{font-size:24px}.stella-edition .product-note>p{font-size:14px}.stella-edition .product-note>small{font-size:10px}.stella-edition .study-ticket>p{font-size:15px}.stella-edition .study-ticket small{font-size:11px}.stella-edition .about-spread .page-left{padding:30px 23px 43px;gap:13px}.stella-edition .about-letter{padding:19px 17px}.stella-edition .about-letter h3{font-size:25px}.stella-edition .about-letter>p{font-size:15px;line-height:1.6}.stella-edition .about-letter>.about-facts{font-size:13px;margin-top:13px}.stella-edition .mail-link{font-size:16px}.stella-edition .resume-slip{width:96%;padding:13px 10px;gap:9px}.stella-edition .resume-slip>span:first-child{font-size:11px}.stella-edition .photo-pocket{left:31%;top:88px;width:57%;height:290px}.stella-edition .life-photo .handwritten{font-size:19px}.stella-edition .travel-snapshot{left:5%;top:225px;width:68px}.stella-edition .travel-snapshot>span{font-size:12px}.stella-edition .experience-notes{bottom:36px;max-height:154px}.stella-edition .experience-notes summary{font-size:14px}.stella-edition .experience-notes details>p{font-size:13px}}
