/* Reference-board visual layer. Interaction and template geometry stay in app.js. */
.studio{--ink:#141512;--line:#141512;--display:"Lian Hand","PingFang SC",sans-serif;--paper:#fffef8;--radius:16px 20px 14px 19px/18px 15px 20px 16px}
.studio[data-theme=lemon]{--page:#fffef9;--paper:#fffef9;--brand:#fffb3b;--accent:#2fc3ee;--cta:#252623;--cta-ink:#fffb3b;--canvas:#e3f7fc;--ground:#2fc3ee;--onboard:#fffb3b;--header:#fffb3b;--detail:#fffb3b;--card:#fffef9;--caption:#fffef9}
.studio[data-theme=peach]{--page:#fff4e7;--paper:#fff9ee;--brand:#ffcd55;--accent:#ed8141;--cta:#ed8141;--cta-ink:#141512;--canvas:#fff0df;--ground:#ffcd55;--onboard:#ffd6bf;--header:#ffd6bf;--detail:#fff4e7;--caption:#ffd6bf}
.studio[data-theme=butter]{--page:#fffef9;--paper:#fffef9;--brand:#ffeaa3;--accent:#bc5235;--cta:#bc5235;--cta-ink:#fffef9;--canvas:#fffef9;--ground:#ffeaa3;--onboard:#fffef9;--header:#fffef9;--detail:#fffef9;--caption:#fffef9}
.studio[data-theme=doodle]{--page:#fffdf1;--paper:#fffdf1;--brand:#fff740;--accent:#ff3188;--cta:#ff3188;--cta-ink:#11120e;--canvas:#afe6f5;--ground:#fff740;--onboard:#fff740;--header:#fffdf1;--detail:#fffdf1;--card:#fffdf1;--caption:#fffdf1}
.studio[data-theme=collage]{--page:#fffdf5;--paper:#fffdf5;--ink:#080b0b;--line:#080b0b;--brand:#d7ff57;--accent:#184ef0;--cta:#184ef0;--cta-ink:#fff;--canvas:#a9cef8;--ground:#d7ff57;--onboard:#d7ff57;--header:#fffdf5;--detail:#fffdf5;--card:#fffdf5;--caption:#fffdf5;--radius:15px;--display:"PingFang SC","Hiragino Sans GB",sans-serif}
.studio[data-theme=journal]{--page:#faf6ea;--paper:#fffaf0;--ink:#283e34;--line:#536153;--brand:#b9ceb6;--accent:#354d3e;--cta:#354d3e;--cta-ink:#fffaf0;--canvas:#c8e5f5;--ground:#b9ceb6;--onboard:#faf6ea;--header:#faf6ea;--detail:#faf6ea;--display:"Songti SC","STSong",serif}
.phone-screen{color:var(--ink)}
.brand{font:400 25px/1.2 var(--display)}
.top-title,.editor-title strong{font:400 17px/1.2 var(--display)}
.template-switch{font:400 13px/1.2 var(--display);gap:5px}
.quiet-btn,.bottom-nav button{font-family:var(--display)}
.icon{stroke-width:2.1}
.primary-btn,.secondary-btn{font:400 20px/1.25 var(--display);letter-spacing:.5px;border-width:2.2px;min-height:52px}
.editor-actions .primary-btn,.editor-actions .secondary-btn{font-size:18px;min-height:49px}
/* A drawn outline has a slightly uneven baseline and individually rounded corners. */
.studio:not([data-theme=collage]):not([data-theme=journal]) .primary-btn,.studio:not([data-theme=collage]):not([data-theme=journal]) .secondary-btn{border-color:transparent;border-radius:19px 24px 17px 21px/19px 16px 21px 17px}
.studio:not([data-theme=collage]):not([data-theme=journal]) .primary-btn:before,.studio:not([data-theme=collage]):not([data-theme=journal]) .secondary-btn:before{content:"";position:absolute;inset:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M24 3C82 0 231 5 294 3Q317 2 317 23L318 37Q317 57 295 56C211 59 93 54 24 57Q3 58 3 38L3 23Q3 5 24 3Z' fill='none' stroke='%23141512' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}
.studio[data-theme=lemon] .primary-btn{background:#252623;color:#fffb3b}
.studio[data-theme=lemon] .onboard .primary-btn{background:var(--paper);color:var(--ink)}
.studio[data-theme=peach] .onboard .primary-btn{background:#ffcd55;color:var(--ink)}
.studio[data-theme=doodle] .primary-btn{background:#ff3188;color:#11120e;border-radius:38px 42px 35px 40px/32px 34px 30px 33px}
.studio[data-theme=doodle] .primary-btn:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M34 3C106 1 218 5 286 3Q317 2 318 29Q319 57 285 57C207 59 112 55 35 57Q3 58 3 31Q2 5 34 3Z' fill='none' stroke='%2311120e' stroke-width='3'/%3E%3C/svg%3E")}
.studio[data-theme=collage] .primary-btn,.studio[data-theme=collage] .secondary-btn{border:2.5px solid #080b0b;border-radius:16px;font-weight:800;letter-spacing:0;box-shadow:0 5px 0 #080b0b;min-height:55px}
.studio[data-theme=collage] .primary-btn{background:#184ef0;color:#fff}
.studio[data-theme=collage] .primary-btn:active,.studio[data-theme=collage] .secondary-btn:active{box-shadow:0 2px 0 #080b0b;translate:0 3px}
.studio[data-theme=collage] .onboard .primary-btn{min-height:58px;font-size:23px}
.studio[data-theme=journal] .primary-btn,.studio[data-theme=journal] .secondary-btn{border-width:1px;border-radius:21px;font:600 17px "PingFang SC",sans-serif;box-shadow:none}
/* Illustrated onboarding: each direction has its own composition, not just its own color. */
.onboard{position:relative;padding:0 23px 25px}
.onboard-top,.onboard-copy,.onboard-dots,.onboard>.primary-btn{position:relative;z-index:2}
.onboard-top{min-height:52px}
.onboard-copy h1{font:400 clamp(30px,4.2cqh,39px)/1.48 var(--display);letter-spacing:1px;margin:9px 0 6px}
.onboard-copy h1:after{width:150px;border-width:5px;margin:7px auto 0}
.onboard-copy p{font-size:14px;line-height:1.65}
.onboard .line-illustration{min-height:180px;margin:0 -23px 7px}
.onboard .drawn-sun{background:transparent;border:0;outline:0;outline-offset:0;left:14%;top:6%;width:64px;height:64px;border-radius:0}
.onboard .illustration-rope{top:30%;border-width:2.3px;height:43px}
.onboard .line-illustration:not(.guide-swipe):not(.guide-share) .mascot{width:86%;left:2%;height:77%;bottom:1%}
.onboard .line-illustration:not(.guide-swipe):not(.guide-share) .ground-drawing{height:30%;bottom:1%}
.onboard-dots{margin:12px 0 13px}
.onboard-dots i{width:8px;height:8px;border-width:1.8px;background:var(--paper)}
.onboard>.primary-btn{min-height:55px;flex:none}
.studio[data-theme=lemon] .onboard[data-page="0"] .onboard-copy p,.studio[data-theme=peach] .onboard[data-page="0"] .onboard-copy p{display:none}
.studio[data-theme=doodle] .onboard[data-page="0"] .onboard-top{order:-2}
.studio[data-theme=doodle] .onboard[data-page="0"] .onboard-copy{order:-1;padding-top:22px}
.studio[data-theme=doodle] .onboard[data-page="0"] .onboard-copy h1{text-align:left;font-size:38px;line-height:1.43;letter-spacing:1px;margin:0 0 12px}
.studio[data-theme=doodle] .onboard[data-page="0"] .onboard-copy h1:after{display:none}
.studio[data-theme=doodle] .onboard[data-page="0"] .onboard-copy p{text-align:left;font:13px/1.7 "PingFang SC",sans-serif}
.studio[data-theme=doodle] .onboard[data-page="0"] .drawn-sun{display:none}
.studio[data-theme=doodle] .onboard .line-illustration:not(.guide-swipe):not(.guide-share) .ground-drawing{opacity:0}
.studio[data-theme=doodle] .onboard .line-illustration:not(.guide-swipe):not(.guide-share) .mascot{height:94%;width:93%;left:-1%;bottom:0}
.studio[data-theme=collage] .onboard:before{content:"";position:absolute;right:-35px;top:-42px;width:165px;height:174px;background:#184ef0;border-radius:10% 5% 48% 54%/20% 7% 49% 45%;transform:rotate(10deg)}
.studio[data-theme=collage] .onboard-top .quiet-btn{color:#fff}
.studio[data-theme=collage] .onboard-copy{padding-top:30px;margin-top:0}
.studio[data-theme=collage] .onboard-copy h1{font-size:37px;font-weight:900;line-height:1.45;letter-spacing:-1px}
.studio[data-theme=collage] .onboard-copy p{font-size:14px;line-height:1.8}
.studio[data-theme=collage] .onboard .drawn-sun{display:none}
.studio[data-theme=collage] .onboard .ground-drawing{opacity:0}
.studio[data-theme=collage] .onboard .line-illustration:not(.guide-swipe):not(.guide-share) .mascot{height:91%;width:90%;left:0}
.studio[data-theme=collage] .onboard .doodle-flower{height:79px;width:47px;right:5%;bottom:9%}
/* Album cards from the boards: handwritten photos, date stickers, or cobalt spines. */
.memories-header{position:relative;isolation:isolate;padding:13px 22px 19px;border-radius:0 0 45% 6%/0 0 16% 7%;overflow:hidden;min-height:79px}
.memories-header h1{font:400 38px/1.2 var(--display)}
.memories-header>span:not(.memory-mascot){font-size:13px;color:var(--ink)}
.heading-rays{font-family:var(--display)}
.memory-list{padding:0 19px 16px}
.month-heading{font-size:16px;line-height:1.4;margin:14px 2px 10px;color:var(--ink)}
.memory-card{border:2.2px solid var(--ink);border-radius:16px 19px 15px 18px/19px 15px 18px 16px;padding:10px 10px 8px;margin-bottom:14px;background:var(--card)}
.album-cover{height:134px;border-radius:5px 4px 6px 3px;gap:6px}
.album-caption{padding:7px 3px 0}
.album-caption strong{font:400 22px/1.3 var(--display)}
.album-caption small{font:12px/1.5 "PingFang SC",sans-serif;color:var(--ink);gap:8px;margin-top:3px}
.album-caption small span{margin-left:0}
.album-tape{left:36%;width:13px;height:27px;top:-11px;background:var(--yellow);border:2px solid var(--ink);border-radius:2px;transform:rotate(13deg)}
.album-date,.album-star,.album-open,.memory-mascot{display:none}
.studio[data-theme=doodle] .memories-header{background:#fff740;min-height:86px}
.studio[data-theme=doodle] .memory-mascot{display:block;position:absolute;right:5px;bottom:-53px;width:107px;height:130px;z-index:-1}
.memory-mascot .mascot{width:100%;height:100%;object-fit:contain}
.studio[data-theme=doodle] .album-tape{display:none}
.studio[data-theme=doodle] .album-date{display:block;position:absolute;left:0;top:-6px;padding:6px 10px;background:#fff740;border:2px solid #11120e;border-radius:14px 12px 15px 10px;transform:rotate(-3deg);font:400 15px var(--display)}
.studio[data-theme=doodle] .album-star{display:block;position:absolute;right:12px;top:7px;width:25px;height:25px;color:var(--ink)}
.album-star svg{width:100%;height:100%;fill:var(--brand);stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.studio[data-theme=doodle] .album-caption small time{display:none}
.studio[data-theme=doodle] .album-caption{display:flex;align-items:center;justify-content:space-between;padding-top:9px}
.studio[data-theme=doodle] .album-caption strong{font-size:19px}
.studio[data-theme=collage] .memories-header{background:var(--page);border-radius:0}
.studio[data-theme=collage] .memories-header h1{font-weight:900;letter-spacing:-1.2px}
.studio[data-theme=collage] .memory-card{padding:9px 9px 9px 43px;border:2.5px solid #080b0b;border-radius:17px;overflow:hidden}
.studio[data-theme=collage] .album-spine{width:34px;background:#184ef0;font-size:16px;padding-top:22px;font-weight:800}
.studio[data-theme=collage] .album-caption{padding-right:32px}
.studio[data-theme=collage] .album-caption strong{font-size:20px;font-weight:800;line-height:1.35}
.studio[data-theme=collage] .album-caption small{font-size:12px}
.studio[data-theme=collage] .album-open{display:grid;place-items:center;position:absolute;right:10px;bottom:11px;width:37px;height:37px;border:2px solid #080b0b;border-radius:50%;background:#d7ff57}
.studio[data-theme=collage] .album-open .icon{width:22px;height:22px;stroke-width:2.5}
.studio[data-theme=journal] .memory-card{border:1px solid #ddd6c8;padding:10px;border-radius:10px}
.studio[data-theme=journal] .album-caption strong{font:600 17px/1.4 "PingFang SC",sans-serif}
.studio[data-theme=journal] .album-caption small{font-size:11px;color:var(--muted)}
/* Brand details outside the draggable canvas. */
.detail-bottom{position:relative}
.detail-ornament{position:absolute;right:4px;top:-78px;width:135px;height:90px;pointer-events:none;z-index:3}
.detail-ornament>.mascot{width:112px;height:86px;position:absolute;right:17px;bottom:0;object-fit:contain}
.detail-ornament>.doodle-flower{right:0;bottom:5px;width:26px;height:50px}
.studio[data-theme=doodle] .detail-ornament>.mascot{display:none}
.studio[data-theme=doodle] .detail-ornament{top:-52px;height:52px}
.studio[data-theme=journal] .detail-ornament{left:0;right:auto}.studio[data-theme=journal] .detail-ornament>.doodle-flower{display:none}
.detail-copy h1{font:400 28px/1.35 var(--display);margin:1px 0 5px}
.detail-copy p{font-size:12px;line-height:1.5;color:var(--ink)}
.detail-view .detail-actions{flex-direction:column;gap:9px}
.detail-view .detail-actions>button{flex:none;min-height:46px;font:400 19px/1.2 var(--display)}
.detail-view .detail-copy{padding:1px 0 9px}
.detail-view .detail-meta{min-height:32px;height:32px;margin-top:0}
.detail-view .scene-arrow{min-height:30px;height:30px;width:34px}
.detail-view .detail-bottom{padding-bottom:20px;min-height:202px}
.detail-view .shared-scene{height:min(134cqw,calc(100cqh - 256px))}
.studio[data-theme=collage] .detail-copy{text-align:left}
.studio[data-theme=collage] .detail-copy h1{font-size:29px;font-weight:900}
.studio[data-theme=collage] .detail-view .detail-actions>button{font-family:"PingFang SC",sans-serif;font-weight:800}
.studio[data-theme=journal] .detail-copy h1{font-size:29px;font-weight:600}
/* Sky template adopts each board's frame grammar; imported legacy templates keep theirs. */
.studio:not([data-theme=journal]):not([data-theme=collage]) .shared-scene[data-style=sky] .live-photo.scene-hit{border:2px solid var(--ink);border-radius:8px 5px 9px 6px/6px 9px 5px 8px;box-shadow:none;background:var(--paper)}
.studio[data-theme=lemon] .shared-scene[data-style=sky] .live-photo.scene-hit{padding:10px 10px 26px}
.studio[data-theme=collage] .shared-scene[data-style=sky] .live-photo.scene-hit{border:1.5px solid #080b0b;border-radius:0;background:conic-gradient(#fff5f7 25%,#f49fbe 0 50%,#fff5f7 0 75%,#f49fbe 0) 0 0/20px 20px;padding:12px;box-shadow:3px 4px 0 #080b0b}
.studio[data-theme=doodle] .shared-scene[data-style=sky] .live-photo.scene-hit{border:0;border-radius:0;padding:10px 10px 24px;box-shadow:0 3px 6px #665b3218}
.studio[data-theme=journal] .shared-scene[data-style=sky] .live-photo.scene-hit{border:0;background:#fffaf0;padding:12px 12px 24px;border-radius:4px;box-shadow:0 2px 6px #4d57421c}
.bottom-nav{border-top-width:1.8px}
.bottom-nav button{font-size:12px}
.studio[data-theme=lemon] .bottom-nav button[aria-current]{background:#2fc3ee;color:#141512}
.studio[data-theme=doodle] .bottom-nav button[aria-current]{background:#fff740;color:#11120e}
.studio[data-theme=collage] .bottom-nav button[aria-current]{background:#184ef0;color:#fff;border-radius:14px}
.studio[data-theme=collage] .bottom-nav button{font:600 11px "PingFang SC",sans-serif}
.studio[data-theme=journal] .bottom-nav button{font:12px "PingFang SC",sans-serif}
@media(max-height:740px){.onboard-copy h1{font-size:30px}.studio[data-theme=doodle] .onboard[data-page="0"] .onboard-copy h1,.studio[data-theme=collage] .onboard-copy h1{font-size:32px}.detail-copy h1{font-size:24px}.detail-view .detail-bottom{min-height:190px;padding-bottom:16px}.detail-view .shared-scene{height:min(134cqw,calc(100cqh - 244px))}.detail-view .detail-actions>button{min-height:43px}.detail-ornament{width:116px;height:77px;top:-66px}.detail-ornament>.mascot{width:97px;height:74px}}
/* Details keep the same canvas geometry as editing; the action panel uses the ground margin. */
.detail-view{position:relative}
.detail-view .shared-scene{height:min(134cqw,calc(100cqh - 226px))}
.detail-view .detail-bottom{position:absolute;left:0;right:0;bottom:0;height:212px;min-height:212px;padding:0 22px 16px}
.detail-view .detail-copy h1{font-size:26px;line-height:1.2}
.detail-view .detail-copy{padding:0 0 7px}
.detail-view .detail-actions>button{min-height:43px}
.detail-view .detail-actions{gap:8px}
.detail-ornament:before{content:"";position:absolute;left:5px;right:0;bottom:0;height:29px;border-radius:48% 55% 44% 56%;background:var(--ground)}
.studio[data-theme=doodle] .detail-ornament:before{display:none}
@media(max-height:740px){.detail-view .shared-scene{height:min(134cqw,calc(100cqh - 226px))}.detail-view .detail-bottom{height:205px;min-height:205px}}

.album-caption small time:after{content:" · ";white-space:pre;margin:0 1px}
.studio[data-theme=doodle] .album-caption small time:after{display:none}