:root {
  --accent: #ff5b50;
  --accent-rgb: 255, 91, 80;
  --ink: #111216;
  --muted: #6f7580;
  --line: #e2e5e9;
  --panel: #ffffff;
  --canvas: #f6f7f9;
  --paper: #ffffff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 22px 60px rgba(17, 20, 26, .12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  overflow: hidden;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { color: inherit; font: inherit; }
button { border: 0; background: none; cursor: pointer; }
.hide { display: none !important; }
.mobile-only { display: none !important; }
.material-symbols-rounded { font-variation-settings: "opsz" 24, "wght" 430, "FILL" 0, "GRAD" 0; }

/* Entry gate */
.gate { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: #f7f8fa; }
.gate-card { width: min(410px, calc(100% - 32px)); padding: 42px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.gate-card h1 { margin: 8px 0 4px; font: 500 29px/1.1 Georgia, serif; }
.gate-card p { margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.spinner { width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid #e7e9ed; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gate-book { position: relative; width: 80px; height: 62px; margin: 0 auto 16px; perspective: 500px; }
.gate-book span, .gate-book i { position: absolute; top: 5px; width: 39px; height: 52px; background: #fff; border: 1px solid #cfd3d9; box-shadow: 0 8px 20px rgba(20, 23, 28, .09); }
.gate-book span { left: 1px; border-radius: 8px 2px 2px 8px; transform: rotateY(12deg); }
.gate-book i { right: 1px; border-radius: 2px 8px 8px 2px; transform: rotateY(-12deg); }
.gate-book:after { content: ""; position: absolute; left: 38px; top: 4px; width: 4px; height: 54px; border-radius: 9px; background: var(--accent); }

/* Shared controls */
.btn { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-size: 12px; font-weight: 760; white-space: nowrap; transition: .2s var(--ease); }
.btn .material-symbols-rounded { font-size: 18px; }
.btn.primary { color: #fff; background: var(--accent); box-shadow: 0 8px 20px rgba(var(--accent-rgb), .18); }
.btn.primary:hover { transform: translateY(-1px); filter: brightness(.95); }
.btn.ghost { color: #3f454e; background: #fff; border: 1px solid var(--line); }
.btn.ghost:hover { border-color: #afb5be; background: #fafbfc; }
.btn.danger { color: #c34d45; background: #fff4f3; border: 1px solid #f1d1ce; }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.icon-btn { display: grid; width: 38px; height: 38px; place-items: center; color: #484d55; background: #fff; border: 1px solid var(--line); border-radius: 10px; }

/* Application shell */
.app { display: flex; height: 100vh; height: var(--app-height,100dvh); flex-direction: column; }
.shared-access-denied { min-height: 0; flex: 1; display: grid; place-items: center; align-content: center; gap: 9px; padding: 32px; color: #323740; background: radial-gradient(circle at 50% 30%,#fff 0,#f5f7fa 58%,#edf1f5 100%); text-align: center; }
.shared-access-denied > .material-symbols-rounded { display: grid; width: 64px; height: 64px; place-items: center; color: var(--accent); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 38px rgba(24,29,36,.11); font-size: 31px; }
.shared-access-denied h1 { margin-top: 8px; font: 700 28px/1.15 "Gaegu",cursive; }
.shared-access-denied p { max-width: 420px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.shared-access-denied .btn { margin-top: 8px; }
.app.access-blocked .desktop-studio,.app.access-blocked .mobile-app { display: none !important; }
.appbar { position: relative; z-index: 80; display: flex; height: 60px; flex: none; align-items: center; gap: 16px; padding: 0 18px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.appbar-left, .appbar-actions, .brand-lockup, .sync-state { display: flex; align-items: center; }
.appbar-left { gap: 10px; }
.brand-lockup { gap: 9px; }
.brand-lockup span:last-child { display: flex; flex-direction: column; }
.brand-lockup b { font-size: 13px; }
.brand-lockup small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.brand-mini { display: grid; width: 35px; height: 35px; place-items: center; color: #fff; background: var(--accent); border-radius: 9px; font: 800 16px Georgia, serif; }
.sync-state { gap: 7px; margin: auto; color: #7b818a; font-size: 10px; }
.sync-state span { width: 7px; height: 7px; background: #b6bbc2; border-radius: 50%; }
.sync-state.cloud span { background: #50a16c; box-shadow: 0 0 0 4px rgba(80,161,108,.1); }
.sync-state.saving span { background: #4b74e7; animation: pulse 1s infinite; }
.sync-state.error span { background: #dc5d53; }
.sync-state.conflict { color: #9a5a16; font-weight: 700; }
.sync-state.conflict span { background: #e69a36; box-shadow: 0 0 0 4px rgba(230,154,54,.14); }
@keyframes pulse { 50% { opacity: .45; } }
.appbar-actions { gap: 7px; }

/* Editor layout */
.desktop-studio { position: relative; display: grid; min-height: 0; flex: 1; grid-template-columns: 188px minmax(0, 1fr) 0; transition: grid-template-columns .3s var(--ease); }
.desktop-studio.tools-open { grid-template-columns: 188px minmax(0, 1fr) 304px; }
.children-panel, .inspector { min-height: 0; background: #fff; }
.children-panel { overflow: auto; padding: 18px 12px; border-right: 1px solid var(--line); }
.panel-title { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 13px; }
.panel-title span { display: flex; align-items: baseline; gap: 6px; }
.panel-title b { font-size: 13px; }
.panel-title small { color: var(--muted); font-size: 9px; }
.round-add { width: 29px; height: 29px; color: #fff; background: #15171b; border-radius: 9px; font-size: 18px; }
.privacy-note { display: flex; gap: 7px; margin-bottom: 13px; padding: 9px; color: #67707b; background: #f4f6f8; border-radius: 9px; font-size: 9px; line-height: 1.45; }
.privacy-note .material-symbols-rounded { color: #4c7a63; font-size: 14px; }
.child-list { display: flex; flex-direction: column; gap: 5px; }
.child-item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 8px; text-align: left; border: 1px solid transparent; border-radius: 11px; transition: .18s var(--ease); }
.child-item:hover { background: #f7f8fa; }
.child-item.on { background: #fff; border-color: #d9dde3; box-shadow: 0 7px 18px rgba(20,24,31,.07); }
.child-avatar { display: grid; width: 37px; height: 37px; flex: none; place-items: center; color: var(--child-color); background: color-mix(in srgb, var(--child-color) 10%, #fff); border-radius: 10px; font-family: "Gaegu", cursive; font-size: 18px; font-weight: 700; }
.child-item span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.child-item b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.child-item small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.child-item > small { flex: none; padding: 3px 5px; background: #f0f2f4; border-radius: 999px; }
.child-empty { padding: 40px 8px; color: var(--muted); text-align: center; }
.child-empty > span { font-size: 31px; }
.child-empty b, .child-empty small { display: block; }
.child-empty b { margin: 8px 0 3px; color: #4f555e; font-size: 12px; }
.child-empty small { margin-bottom: 13px; font-size: 9px; line-height: 1.45; }

/* Book workspace */
.book-workspace { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: #f7f8fa; }
.workspace-head { position: relative; z-index: 55; display: flex; min-height: 84px; flex: none; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 24px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.workspace-head h1 { font: 500 27px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.7px; }
.workspace-head p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.template-quick { display: flex; align-items: center; gap: 4px; margin-right: 5px; padding: 4px; background: #f1f3f5; border: 1px solid var(--line); border-radius: 12px; }
.template-quick > span { padding: 0 5px; color: #7b828c; font-size: 7px; font-weight: 850; letter-spacing: .3px; }
.template-quick button { display: inline-flex; height: 32px; align-items: center; gap: 3px; padding: 0 7px; color: #6c737d; border: 1px solid transparent; border-radius: 8px; }
.template-quick button:hover { color: #262a30; background: rgba(255,255,255,.7); }
.template-quick button.on { color: var(--accent); background: #fff; border-color: rgba(var(--accent-rgb),.28); box-shadow: 0 2px 7px rgba(20,24,31,.08); }
.template-quick .material-symbols-rounded { font-size: 15px; }
.template-quick b { font-size: 7.5px; white-space: nowrap; }
.eyebrow { display: block; margin-bottom: 4px; color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: 2.7px; }
.workspace-tools { display: flex; gap: 6px; }
.history-tools { display: flex; gap: 3px; padding: 3px; background: #f1f3f5; border: 1px solid var(--line); border-radius: 11px; }
.history-tools button { display: grid; width: 32px; height: 32px; place-items: center; color: #555d67; background: #fff; border-radius: 8px; }
.history-tools button:disabled { opacity: .3; }
.history-tools .material-symbols-rounded { font-size: 17px; }
.workspace-tools .sticker-trigger { color: #ba4439; background: #fff2f0; border-color: #f1c1bc; }
.upload-btn { position: relative; }
.upload-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tools-trigger { color: #fff; background: #15171b; }
.tools-trigger:hover, .tools-trigger[aria-expanded="true"] { color: #fff; background: var(--accent); }
.empty-stage { margin: auto; padding: 40px; color: #767d87; text-align: center; }
.empty-stage h2 { margin: 14px 0 4px; color: #30343a; font: 500 25px/1.1 Georgia, serif; }
.empty-stage p { font-size: 11px; line-height: 1.65; }
.empty-book-art { display: flex; justify-content: center; filter: drop-shadow(0 16px 17px rgba(20,24,31,.12)); }
.empty-book-art span { width: 108px; height: 140px; background: #fff; border: 1px solid #d5d9df; }
.empty-book-art span:first-child { border-radius: 13px 2px 2px 13px; transform: perspective(400px) rotateY(8deg); }
.empty-book-art span:last-child { border-radius: 2px 13px 13px 2px; transform: perspective(400px) rotateY(-8deg); }
.book-stage { position: relative; display: grid; min-height: 0; flex: 1; grid-template-columns: 54px minmax(0, 1000px) 54px; align-items: center; justify-content: center; margin: 14px; padding: 18px; overflow: hidden; background-color: var(--jackie-ink, #151515); background-image: var(--portfolio-bg-texture, radial-gradient(circle at 50% 18%, rgba(255,255,255,.065), transparent 38%)); background-size: var(--portfolio-bg-texture-size, auto); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 42px rgba(18,21,27,.12); }
.turn-btn { position: relative; z-index: 60; display: grid; width: 42px; height: 62px; place-items: center; margin: auto; color: #17191d; background: rgba(255,255,255,.94); border-radius: 999px; box-shadow: 0 9px 28px rgba(0,0,0,.32); transition: .2s var(--ease); }
.turn-btn:hover:not(:disabled) { color: var(--accent); transform: scale(1.05); }
.turn-btn:disabled { opacity: .2; cursor: default; }
.book-shell { position: relative; width: 100%; height: min(calc(100vh - 194px), 620px); min-height: 400px; max-height: 620px; perspective: 1800px; filter: drop-shadow(0 28px 30px rgba(0,0,0,.42)); }

/* White scrapbook: a right-moving horizontal album, intentionally not a book-flip clone. */
.book-stage.horizontal-mode { grid-template-columns: 46px minmax(0,1fr) 46px; padding: 12px; background-color: #edf0f3; background-image: linear-gradient(rgba(104,116,130,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(104,116,130,.055) 1px,transparent 1px),radial-gradient(circle at 18% 12%,rgba(255,255,255,.9),transparent 35%); background-size: 28px 28px,28px 28px,auto; box-shadow: inset 0 0 0 1px rgba(62,70,80,.08),0 18px 42px rgba(18,21,27,.12); }
.scrapbook-scroll { display: flex; width: 100%; height: min(calc(100vh - 190px),650px); min-height: 410px; align-items: center; gap: clamp(34px,5vw,76px); overflow-x: auto; overflow-y: hidden; padding: 28px max(8vw,70px) 34px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-color: var(--accent) transparent; scrollbar-width: thin; overscroll-behavior-x: contain; }
.scrapbook-scroll::-webkit-scrollbar { height: 8px; }
.scrapbook-scroll::-webkit-scrollbar-track { background: transparent; }
.scrapbook-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb,var(--accent) 55%,#cfd4da); border: 2px solid #edf0f3; border-radius: 999px; }
.scrapbook-card { position: relative; width: min(58vw,560px); height: min(calc(100vh - 250px),570px); min-width: 430px; min-height: 380px; flex: 0 0 auto; scroll-snap-align: center; scroll-snap-stop: always; filter: drop-shadow(0 20px 24px rgba(35,42,51,.18)); transform: translateY(var(--scrap-lift,0)) rotate(calc(var(--scrap-tilt,0deg) + var(--scrap-rotate,0deg))) scale(var(--scrap-focus,1)); transition: transform .28s var(--ease),filter .28s var(--ease); }
.scrapbook-card:nth-child(3n+2) { --scrap-tilt: -.65deg; }
.scrapbook-card:nth-child(3n) { --scrap-tilt: .55deg; }
.scrapbook-card:hover { filter: drop-shadow(0 25px 30px rgba(35,42,51,.23)); }
.scrapbook-card .paper-page { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; border: 1px solid #dfe3e8; border-radius: 3px; box-shadow: inset 0 0 0 8px rgba(255,255,255,.72); }
.scrapbook-card .paper-page:before,.scrapbook-card .paper-page:after { content: ""; position: absolute; top: -9px; z-index: 20; width: 92px; height: 28px; background: rgba(255,255,255,.74); border: 1px solid rgba(145,153,163,.12); box-shadow: 0 3px 7px rgba(30,35,42,.08); pointer-events: none; }
.scrapbook-card .paper-page:before { left: 11%; transform: rotate(-4deg); }
.scrapbook-card .paper-page:after { right: 10%; transform: rotate(3deg); }
.scrapbook-cover-card { width: min(52vw,500px); color: #20242a; }
.scrapbook-cover { position: relative; display: flex; height: 100%; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(35px,6vw,68px); background-color: #fff; background-image: radial-gradient(circle at 2px 2px,rgba(63,71,81,.12) 0 .8px,transparent 1px),linear-gradient(118deg,transparent 0 63%,rgba(var(--accent-rgb),.08) 63% 100%); background-size: 18px 18px,auto; border: 1px solid #dfe3e8; box-shadow: inset 0 0 0 10px #fff,inset 0 0 0 11px #e4e7eb; }
.scrapbook-cover:after { content: ""; position: absolute; right: -45px; bottom: -55px; width: 190px; height: 190px; border: 3px dashed var(--accent); border-radius: 47% 53% 56% 44%; opacity: .32; transform: rotate(18deg); }
.scrapbook-cover small { color: var(--accent); font: 700 9px Georgia,serif; letter-spacing: 2.8px; }
.scrapbook-cover h2 { max-width: 88%; margin: auto 0 10px; font-family: var(--portfolio-font,"Gaegu"),cursive; font-size: clamp(48px,calc(var(--portfolio-title-size,48) * 1.3px),86px); line-height: .86; }
.scrapbook-cover p { max-width: 80%; color: #68707a; font-family: var(--portfolio-font,"Gaegu"),cursive; font-size: calc(var(--portfolio-body-size,17) * 1px); }
.scrapbook-cover-index { display: flex; align-items: center; gap: 8px; color: #8b929b; font: 8px Georgia,serif; letter-spacing: 1.5px; }
.scrapbook-cover-index:before { content: ""; width: 42px; border-top: 1px solid var(--accent); }
.scrapbook-progress { position: absolute; right: 22px; bottom: 17px; z-index: 70; color: #656d77; font: 8px Georgia,serif; letter-spacing: 1px; pointer-events: none; }
.scrapbook-end-card { display: grid; place-items: center; color: #6f7781; background: #fff; border: 1px dashed #cbd1d8; font-family: var(--portfolio-font,"Gaegu"),cursive; font-size: 25px; text-align: center; }

/* StPageFlip */
.portfolio-flipbook { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.portfolio-flipbook.stf__parent { overflow: hidden !important; transform: translate3d(0,0,0); }
.portfolio-flipbook .stf__wrapper, .portfolio-flipbook .stf__block, .portfolio-flipbook .stf__item { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.portfolio-flipbook .stf__item { position: absolute !important; }
.portfolio-page { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--jackie-paper, #fff); isolation: isolate; }
.portfolio-page .paper-page { width: 100%; height: 100%; color: var(--jackie-text, #202020); background-color: var(--jackie-paper, #fff); background-image: var(--portfolio-paper-texture, none); background-size: var(--portfolio-paper-texture-size, auto); border: 1px solid #d9dde2; border-radius: 2px; box-shadow: inset 12px 0 24px rgba(18,22,28,.045), inset -12px 0 24px rgba(18,22,28,.03); }
.portfolio-cover-page { background: transparent; }
.book-cover { position: relative; display: grid; width: 100%; height: 100%; place-items: center; padding: 38px; overflow: hidden; background-color: var(--jackie-coral, var(--accent)); background-image: linear-gradient(90deg, rgba(0,0,0,.2), transparent 9%), radial-gradient(circle at 25% 14%, rgba(255,255,255,.18), transparent 34%), repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px); border-radius: 7px 22px 22px 7px; box-shadow: inset 11px 0 22px rgba(0,0,0,.14), inset -2px 0 rgba(255,255,255,.2); }
.cover-stitch { position: absolute; top: 16px; bottom: 16px; left: 25px; border-left: 2px dashed rgba(255,255,255,.4); }
.cover-label { width: min(82%, 360px); min-height: 46%; padding: 30px 24px; color: var(--jackie-text, #17191d); text-align: center; background-color: var(--jackie-paper, #fff); background-image: var(--portfolio-paper-texture, none); background-size: var(--portfolio-paper-texture-size, auto); border: 2px solid rgba(15,17,20,.15); outline: 1px solid rgba(255,255,255,.7); outline-offset: 5px; box-shadow: 0 15px 30px rgba(0,0,0,.2); transform: rotate(.5deg); }
.cover-label small { color: #68707a; font: 9px Georgia, serif; letter-spacing: 2.5px; }
.cover-label h2 { margin: 14px 0 8px; font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: clamp(32px, calc(var(--portfolio-title-size, 48) * 1px), 86px); font-weight: 700; line-height: 1.05; word-break: keep-all; }
.cover-label p { color: var(--jackie-text, #505761); font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: calc(var(--portfolio-body-size, 17) * 1px); }
.cover-label span { display: inline-block; margin-top: 17px; padding-top: 8px; border-top: 1px solid #cfd4da; font: 10px Georgia, serif; letter-spacing: 2px; }
.cover-doodle { position: absolute; top: 25px; right: 33px; color: rgba(255,255,255,.75); font-size: 28px; }
.portfolio-back-page .back-cover { display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; color: rgba(255,255,255,.78); font: 10px Georgia, serif; letter-spacing: 2px; }
.back-cover-mark { color: rgba(255,255,255,.58); font-size: 42px; }
.end-paper { display: grid; place-items: center; color: #9ba1aa; font: 9px Georgia, serif; letter-spacing: 3px; }
.portfolio-rings { position: absolute; top: 13px; bottom: 13px; left: 50%; z-index: 65; display: flex; width: 48px; flex-direction: column; align-items: center; justify-content: space-around; transform: translateX(-50%); pointer-events: none; transition: opacity .18s; }
.portfolio-rings:before { content: ""; position: absolute; top: 0; bottom: 0; left: 22px; width: 4px; background: linear-gradient(90deg,#805d16,#f0c861 35%,#fff0a6 54%,#9c6b18); border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,.28); }
.portfolio-rings i { position: relative; z-index: 1; width: 47px; height: 12px; border: 3px solid #b47d21; border-top-color: #f3cb64; border-left-color: #ffe39a; border-radius: 50%; box-shadow: 0 3px 5px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.55); }
.book-shell.is-cover .portfolio-rings { opacity: 0; }

/* Page artwork */
.page-design { --photo-scale: 1; --photo-rotate: 0deg; --photo-fit: contain; --photo-x: 50%; --photo-y: 50%; --photo-filter: none; position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7%; color: var(--jackie-text, #202020); background-color: var(--jackie-paper, #fff); background-image: var(--portfolio-paper-texture, none); background-size: var(--portfolio-paper-texture-size, auto); }
.page-design .folio { position: absolute; right: 5%; bottom: 2.4%; color: #959ba4; font: 10px Georgia, serif; }
.page-design .art-frame { position: relative; display: grid; min-height: 0; flex: 1; place-items: center; transition: transform .2s; transform: rotate(var(--photo-rotate)) scale(var(--photo-scale)); }
.page-design .art-frame > img { display: block; width: 100%; height: 100%; object-fit: var(--photo-fit); object-position: var(--photo-x) var(--photo-y); filter: var(--photo-filter); transition: filter .18s ease,object-position .18s ease; }
.art-hover-border { position: absolute; inset: -6px; z-index: 8; display: block; opacity: 0; border: 2px dashed var(--jackie-coral, var(--accent)); border-radius: 16px 24px 14px 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--jackie-paper, #fff) 82%, transparent); pointer-events: none; transform-origin: center; }
.art-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #969da6; background: #f5f6f8; border: 1.5px dashed #c9ced6; font-size: 10px; }
.page-design h3 { margin-top: 5%; font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: clamp(18px, calc(var(--portfolio-title-size, 48) * .58px), 42px); font-weight: 700; line-height: 1.1; word-break: keep-all; }
.page-design .art-date { margin-top: 2px; color: #8f959e; font: 9px Georgia, serif; letter-spacing: 1px; }
.page-design p { margin-top: 2.5%; overflow: hidden; color: var(--jackie-text, #565d66); font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: clamp(12px, calc(var(--portfolio-body-size, 17) * 1px), 28px); line-height: 1.38; white-space: pre-wrap; }
.page-design .sticker { position: absolute; top: 4%; right: 5%; z-index: 2; color: var(--accent); font: clamp(20px,2.6vw,35px) "Gaegu", cursive; transform: rotate(8deg); }
.layout-gallery { padding: 9%; }
.layout-gallery .art-frame { background: #f6f7f9; border: 10px solid #fff; outline: 1px solid #ccd1d8; box-shadow: 0 15px 26px rgba(18,22,28,.13); }
.layout-gallery h3, .layout-gallery .art-date { text-align: center; }
.layout-taped .art-frame { padding: 4%; background: #f0f2f4; box-shadow: 0 12px 24px rgba(18,22,28,.12); }
.layout-taped .art-frame:before, .layout-taped .art-frame:after { content: ""; position: absolute; top: -3%; z-index: 2; width: 20%; height: 7%; background: rgba(225,229,234,.9); border: 1px solid rgba(145,153,163,.15); }
.layout-taped .art-frame:before { left: 9%; transform: rotate(-5deg); }
.layout-taped .art-frame:after { right: 9%; transform: rotate(4deg); }
.layout-full { padding: 4%; }
.layout-full .art-frame { flex: 1; }
.layout-full img { object-fit: var(--photo-fit, cover); }
.layout-full h3, .layout-full p, .layout-full .art-date { position: relative; margin: 0; padding-right: 4%; padding-left: 4%; background: color-mix(in srgb, var(--jackie-paper, #fff) 95%, transparent); }
.layout-full h3 { padding-top: 3%; }
.layout-full p { padding-top: 2%; padding-bottom: 3%; }
.layout-note { background-color: var(--jackie-paper, #fff); background-image: repeating-linear-gradient(0deg, transparent 0 25px, rgba(49,85,216,.1) 25px 26px), linear-gradient(90deg, transparent 0 42px, rgba(255,91,80,.13) 42px 43px, transparent 43px); }
.layout-note .art-frame { margin-left: 7%; padding: 3%; background: #fff; box-shadow: 0 9px 17px rgba(18,22,28,.1); }
.paper-cream { background-color: var(--jackie-paper, #fff); background-image: var(--portfolio-paper-texture, none); background-size: var(--portfolio-paper-texture-size, auto); }
.paper-grid { background-color: var(--jackie-paper, #fff); background-image: radial-gradient(circle,#b9c0c9 .85px,transparent .95px); background-size: 19px 19px; }
.paper-pink { background: #fff4f7; }
.paper-blue { background: #f2f7ff; }
.paper-dark { color: #fff; background: #1d2025; }
.paper-dark h3, .paper-dark p, .paper-dark .art-date { color: #f5f6f8; }
.intro-page { display: flex; height: 100%; flex-direction: column; justify-content: center; padding: 12%; color: var(--jackie-text, #202020); text-align: center; background-color: var(--jackie-paper, #fff); background-image: var(--portfolio-paper-texture, none); background-size: var(--portfolio-paper-texture-size, auto); }
.intro-kicker { color: var(--accent); font: 9px Georgia, serif; letter-spacing: 2.6px; }
.intro-page h2 { margin: 12px 0; font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: clamp(27px, calc(var(--portfolio-title-size, 48) * .82px), 72px); font-weight: 700; }
.intro-page p { color: var(--jackie-text, #555c65); font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: clamp(14px, calc(var(--portfolio-body-size, 17) * 1px), 28px); line-height: 1.5; white-space: pre-line; }
.doodle-line { width: 55%; height: 20px; margin: 20px auto; border-bottom: 2px solid var(--accent); border-radius: 50%; opacity: .6; }

/* Movable decorations */
.decor-item { position: absolute; top: var(--y); left: var(--x); z-index: 7; display: grid; min-width: 44px; min-height: 44px; place-items: center; font-size: var(--s); transform: translate(-50%,-50%) rotate(var(--r)); transform-origin: center; filter: drop-shadow(0 3px 3px rgba(20,24,30,.15)); cursor: grab; user-select: none; touch-action: none; pointer-events: auto; will-change: left,top,transform; }
.decor-item.dragging { z-index: 90; cursor: grabbing; }
.decor-item.selected { outline: 2px dashed var(--accent); outline-offset: 5px; }
.decor-item.transforming { z-index: 95; outline: 3px solid var(--accent); outline-offset: 7px; filter: drop-shadow(0 10px 13px rgba(20,24,30,.28)); }
.decor-item.is-hidden,.jackie-free-sticker.is-hidden { display: none !important; }
.decor-item.is-locked,.jackie-free-sticker.is-locked { cursor: default; }
.decor-item.is-locked.selected,.jackie-free-sticker.is-locked.selected { outline-style: solid; outline-color: #6f7782; }
.decor-tape { width: 25%; height: 5%; min-height: 0; background: repeating-linear-gradient(135deg,#e4c75f 0 12px,#f1d97f 12px 24px); opacity: .8; font-size: 0; }
.decor-tape.pink { background: repeating-linear-gradient(135deg,#ee9db8 0 12px,#f5bed0 12px 24px); }
.decor-note { display: grid; width: 27%; min-height: 16%; place-items: center; padding: 8px; color: #454a53; background: #f1f3f5; font: 700 12px "Gaegu", cursive; box-shadow: 0 7px 11px rgba(20,24,30,.14); }
.decor-polaroid { width: 24%; aspect-ratio: .82; padding: 7% 6% 22%; background: #fff; border: 1px solid #d9dde3; box-shadow: 0 7px 12px rgba(20,24,30,.14); font-size: 0; }
.decor-polaroid:before { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(145deg,#8bc8df,#f2a8a1); }
.decor-scribble { color: var(--accent); font-family: "Gaegu", cursive; font-weight: 700; white-space: nowrap; }
.decor-text { width: clamp(118px,calc(var(--s) * 6.2),310px); max-width: 78%; max-height: 44%; padding: .18em .35em; overflow: hidden; color: var(--text-color,var(--jackie-text,#202020)); background: transparent; border-radius: .28em; font-family: var(--text-font,var(--portfolio-font,"Gaegu")),cursive; font-weight: 700; line-height: 1.08; text-align: var(--text-align,center); overflow-wrap: anywhere; white-space: pre-wrap; }
.decor-text.text-title { width: clamp(150px,calc(var(--s) * 6.8),360px); padding: .08em .25em .16em; background: linear-gradient(var(--accent),var(--accent)) center bottom/72% 3px no-repeat; font-weight: 900; letter-spacing: -.025em; line-height: .94; }
.decor-text.text-caption { background: color-mix(in srgb,var(--jackie-paper,#fff) 78%,transparent); box-shadow: 0 5px 12px rgba(20,24,30,.08); }
.decor-text.text-speech { width: clamp(135px,calc(var(--s) * 5.8),300px); padding: .52em .72em; background: var(--jackie-paper,#fff); border: 2px solid color-mix(in srgb,var(--text-color,var(--jackie-text,#202020)) 68%,transparent); border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%; box-shadow: 0 8px 16px rgba(20,24,30,.13); }
.decor-text.text-speech:after { content: ""; position: absolute; right: 17%; bottom: -.35em; width: .58em; height: .58em; background: var(--jackie-paper,#fff); border-right: 2px solid color-mix(in srgb,var(--text-color,var(--jackie-text,#202020)) 68%,transparent); border-bottom: 2px solid color-mix(in srgb,var(--text-color,var(--jackie-text,#202020)) 68%,transparent); transform: rotate(38deg); }
.decor-text.text-note { width: clamp(130px,calc(var(--s) * 5.4),280px); min-height: 3.4em; padding: .62em .7em .52em; background: #fff0a8; border-radius: 2px 8px 3px 6px; box-shadow: 0 9px 17px rgba(20,24,30,.16); clip-path: polygon(0 3%,18% 0,38% 3%,60% 0,79% 3%,100% 1%,98% 97%,79% 100%,59% 97%,39% 100%,18% 97%,1% 100%); }
.decor-stamp { display: grid; width: 52px; height: 52px; place-items: center; color: #d84f46; border: 3px double #d84f46; border-radius: 50%; font: 700 15px Georgia, serif; }
.decor-image { display: block; width: var(--s); height: var(--s); font-size: 0; filter: drop-shadow(0 5px 6px rgba(20,24,30,.2)); }
.decor-image img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.decor-image.sticker-outline img { filter: drop-shadow(3px 0 #fff) drop-shadow(-3px 0 #fff) drop-shadow(0 3px #fff) drop-shadow(0 -3px #fff) drop-shadow(0 4px 4px rgba(20,24,30,.2)); }
.decor-image.sticker-solid { background: var(--accent); -webkit-mask: var(--sticker-url) center/contain no-repeat; mask: var(--sticker-url) center/contain no-repeat; }
.decor-image.sticker-line { filter: drop-shadow(0 3px 3px rgba(20,24,30,.14)); }
.sticker-hover-ring { position: absolute; inset: -8px; z-index: 5; display: block; opacity: 0; border: 2px dashed var(--jackie-coral, var(--accent)); border-radius: 43% 57% 48% 52% / 55% 46% 54% 45%; pointer-events: none; transform-origin: center; }

/* Templates */
.book-shell.template-classic .portfolio-rings { opacity: .13; }
.book-shell.template-classic.is-cover .portfolio-rings { opacity: 0; }
.book-shell.template-classic .portfolio-rings i { display: none; }
.book-shell.template-classic .portfolio-cover-page .book-cover { border-radius: 4px 18px 18px 4px; }
.book-shell.template-classic .cover-stitch { display: none; }
.flip-fallback { display: grid; place-items: center; }

/* Black scroll story — a wheel-driven portfolio, not a page-flip skin. */
.book-stage.scroll-mode { display: block; padding: 0; background-color: var(--jackie-ink, #1d1d1d); background-image: var(--portfolio-bg-texture, none); background-size: var(--portfolio-bg-texture-size, auto); border-radius: 16px; }
.book-stage.scroll-mode > .turn-btn, .book-stage.scroll-mode > .book-shell { display: none !important; }
.jackie-scroll, .jackie-scroll-host { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; color: var(--jackie-paper, #f7f4ed); background-color: var(--jackie-ink, #1d1d1d); background-image: var(--portfolio-bg-texture, none); background-size: var(--portfolio-bg-texture-size, auto); scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--jackie-coral, #e35342) color-mix(in srgb, var(--jackie-ink, #1d1d1d) 86%, white); }
.jackie-scroll::-webkit-scrollbar, .jackie-scroll-host::-webkit-scrollbar { width: 8px; }
.jackie-scroll::-webkit-scrollbar-thumb, .jackie-scroll-host::-webkit-scrollbar-thumb { background: var(--jackie-coral, #e35342); border: 2px solid var(--jackie-ink, #1d1d1d); border-radius: 10px; }
.jackie-noise { position: sticky; top: 0; z-index: 30; width: 100%; height: 100%; margin-bottom: calc(var(--jackie-stage-h, 100vh) * -1); opacity: .18; pointer-events: none; background-image: radial-gradient(circle at 30% 20%,rgba(255,255,255,.12) 0 1px,transparent 1.5px); background-size: 5px 5px; mix-blend-mode: soft-light; }
.jackie-stamp-rail { position: sticky; top: 0; z-index: 22; width: 58px; height: 100%; margin-bottom: calc(var(--jackie-stage-h, 100vh) * -1); background-color: var(--jackie-pattern, var(--jackie-coral, #e35342)); background-image: url("../images/portfolio/jackie-side-stamps-v1.png"); background-blend-mode: luminosity; background-repeat: repeat-y; background-size: 58px auto; box-shadow: 0 0 0 2px color-mix(in srgb, var(--jackie-ink, #1d1d1d) 92%, white), 0 0 18px rgba(0,0,0,.35); pointer-events: none; will-change: background-position; }
.jackie-stamp-rail.rail-left { float: left; }
.jackie-stamp-rail.rail-right { float: right; }
.jackie-story { position: relative; z-index: 10; width: min(100%,1120px); margin: 0 auto; padding: 0 72px; }
.jackie-scene { position: relative; min-height: calc(var(--jackie-stage-h, 100vh) * 1.18); }
.jackie-book-scene { min-height: calc(var(--jackie-stage-h, 100vh) * 2.05); perspective: 3310px; }
.jackie-book-sticky { position: sticky; top: 0; display: grid; width: 100%; height: var(--jackie-stage-h, 100vh); place-items: center; overflow: hidden; perspective: 3310px; }
.jackie-book-rig { --book-y: 72px; --book-scale: .88; --book-opacity: 1; position: relative; width: min(82%, 770px); height: min(calc(var(--jackie-stage-h, 100vh) * .84), 700px); opacity: var(--book-opacity); transform: translate3d(0, var(--book-y), 0) scale(var(--book-scale)); transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform, opacity; }
.jackie-book-top, .jackie-book-bottom { position: absolute; left: 0; width: 100%; height: 50%; transform-style: preserve-3d; }
.jackie-book-top { top: 0; z-index: 4; }
.jackie-book-top .jackie-kicker { position: absolute; top: -28px; left: 0; z-index: 8; }
.jackie-book-top .jackie-hero-board { height: 100%; min-height: 0; border-radius: 46px 46px 5px 5px; box-shadow: 0 19px 38px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.65); }
.jackie-book-top .jackie-hero-copy { padding: 24px 8px 24px 38px; }
.jackie-book-top .jackie-hero-copy strong { margin-top: 15px; font-size: clamp(25px, calc(var(--jackie-stage-w, 100vw) * .032), 43px); }
.jackie-book-top .jackie-hero-art { padding: 20px 25px 20px 7px; }
.jackie-book-top .jackie-hero-art img { height: 245px; }
.jackie-book-hinge { position: absolute; top: 50%; left: 3%; z-index: 12; width: 94%; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--jackie-coral, #e35342) 72%, black); box-shadow: 0 -2px 5px rgba(255,255,255,.2), 0 5px 12px rgba(0,0,0,.44); transform: translateY(-50%); }
.jackie-book-bottom { --book-open-angle: 60deg; top: 50%; z-index: 3; overflow: hidden; color: var(--jackie-text, #202020); background: var(--jackie-paper, #f7f4ed); border: 11px solid var(--jackie-coral, #e35342); border-top-width: 5px; border-radius: 5px 5px 46px 46px; box-shadow: 0 30px 52px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.52); transform: perspective(3310px) rotateX(var(--book-open-angle)); transform-origin: 50% 0%; will-change: transform; }
.jackie-bottom-paper { position: absolute; inset: 0; overflow: hidden; padding: 28px 38px; color: var(--jackie-text, #202020); background-color: var(--jackie-paper, #f7f4ed); background-image: var(--portfolio-paper-texture, linear-gradient(rgba(82,115,152,.13) 1px,transparent 1px)); background-size: var(--portfolio-paper-texture-size, 34px 34px); }
.jackie-bottom-paper > small { color: var(--jackie-coral, #e35342); font: 700 9px/1 Georgia, serif; letter-spacing: 1.7px; }
.jackie-belief-note { position: absolute; display: grid; place-items: center; padding: 14px 17px; color: var(--jackie-text, #202020); background: color-mix(in srgb, var(--jackie-paper, #f7f4ed) 78%, #c9b7a0); box-shadow: 0 9px 18px rgba(0,0,0,.18); font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: calc(var(--portfolio-body-size, 17) * 1.2px); font-weight: 700; line-height: 1.05; text-align: center; }
.jackie-belief-note.note-a { top: 30%; left: 18%; width: 35%; transform: rotate(-5deg); }
.jackie-belief-note.note-b { top: 23%; right: 12%; width: 34%; transform: rotate(7deg); }
.jackie-belief-note.note-c { right: 27%; bottom: 10%; width: 30%; transform: rotate(2deg); }
.jackie-hero { min-height: calc(var(--jackie-stage-h, 100vh) * 1.42); }
.jackie-hero-sticky, .jackie-collage-sticky, .jackie-project-sticky { position: sticky; top: 0; display: grid; min-height: 100%; height: var(--jackie-stage-h, 100vh); place-items: center; overflow: hidden; }
.jackie-motion { --j-x: 0px; --j-y: 100px; --j-r: 0deg; --j-scale: .84; --j-opacity: .08; opacity: var(--j-opacity); transform: translate3d(var(--j-x),var(--j-y),0) rotate(var(--j-r)) scale(var(--j-scale)); transform-origin: center; will-change: transform,opacity; }
.jackie-hero-sticky > .jackie-motion { position: relative; width: min(82%,760px); }
.jackie-kicker { display: block; margin: 0 0 13px 12px; color: #f4eee1; font: 700 9px/1 Georgia,serif; letter-spacing: 2.5px; }
.jackie-hero-board { position: relative; display: grid; min-height: 430px; grid-template-columns: .9fr 1.1fr; overflow: hidden; color: var(--jackie-text, #202020); background-color: var(--jackie-paper, #f7f4ed); background-image: var(--portfolio-paper-texture, linear-gradient(rgba(82,115,152,.18) 1px,transparent 1px)); background-size: var(--portfolio-paper-texture-size, 34px 34px); border: 11px solid var(--jackie-coral, #e35342); border-radius: 42px; box-shadow: 0 25px 55px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.7); }
.jackie-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 42px 10px 42px 54px; }
.jackie-hero-copy small { color: var(--jackie-coral); font: 700 9px Georgia,serif; letter-spacing: 2px; }
.jackie-hero-copy h2 { margin: 9px 0 3px; color: var(--jackie-coral, #e35342); font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: calc(var(--portfolio-title-size, 48) * 1px); font-weight: 700; line-height: .9; }
.jackie-hero-copy p { width: 90%; color: var(--jackie-text, #414141); font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: calc(var(--portfolio-body-size, 17) * 1px); line-height: 1.2; }
.jackie-hero-copy strong { margin-top: 34px; color: var(--jackie-text, #282828); font: 500 clamp(33px,calc(var(--jackie-stage-w, 100vw) * .044),58px)/.9 Georgia,serif; letter-spacing: -2.5px; }
.jackie-hero-art { display: grid; min-width: 0; place-items: center; padding: 36px 34px 36px 8px; }
.jackie-hero-art img { width: 100%; height: 330px; object-fit: contain; filter: drop-shadow(0 15px 18px rgba(0,0,0,.18)); transform: rotate(2deg); }
.jackie-hero-placeholder { display: grid; width: 82%; aspect-ratio: .82; place-items: center; color: var(--jackie-coral); background: #fff; border: 2px solid var(--jackie-coral); box-shadow: 12px 13px 0 rgba(242,91,75,.22); transform: rotate(3deg); }
.jackie-hero-placeholder span { font: 10px Georgia,serif; letter-spacing: 3px; }
.jackie-hero-placeholder b { text-align: center; font: 700 46px/.8 "Gaegu",cursive; }
.jackie-torn-caption { position: absolute; right: 2%; bottom: -58px; z-index: 4; width: 225px; padding: 22px 28px 27px; color: #202020; background: #ddd5c9; clip-path: polygon(2% 5%,98% 0,96% 88%,82% 94%,67% 89%,52% 96%,38% 91%,21% 98%,3% 91%); font: 700 21px/1.1 "Gaegu",cursive; transform: rotate(3deg); box-shadow: 0 10px 18px rgba(0,0,0,.2); }
.jackie-scroll-cue { position: absolute; bottom: 30px; left: 50%; color: rgba(255,255,255,.72); font: 8px Georgia,serif; letter-spacing: 2.4px; transform: translateX(-50%); }
.jackie-scroll-cue i { display: inline-block; margin-left: 6px; color: var(--jackie-coral); font-size: 18px; animation: jackieCue 1.3s ease-in-out infinite; }
@keyframes jackieCue { 50% { transform: translateY(7px); } }
.jackie-collage-scene { min-height: calc(var(--jackie-stage-h, 100vh) * 1.9); }
.jackie-collage-sticky { display: block; }
.jackie-collage-label { position: absolute; top: 18%; left: 50%; z-index: 5; width: 270px; padding: 24px 28px 30px; color: #202020; background: #e8dfd2; clip-path: polygon(0 6%,17% 2%,34% 5%,51% 0,67% 4%,84% 1%,100% 5%,97% 96%,82% 92%,64% 98%,47% 94%,31% 99%,14% 93%,2% 97%); }
.jackie-collage-label small { color: var(--jackie-coral); font: 700 8px Georgia,serif; letter-spacing: 1.8px; }
.jackie-collage-label h2 { margin-top: 7px; color: var(--jackie-text, #202020); font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: calc(var(--portfolio-title-size, 48) * .73px); font-weight: 700; line-height: .9; }
.jackie-sample-cloud { position: absolute; inset: 0; }
.jackie-sample-cloud > .jackie-motion { position: absolute; width: clamp(180px,calc(var(--jackie-stage-w, 100vw) * .25),305px); }
.jackie-sample-cloud > :nth-child(1) { top: 16%; left: 3%; }
.jackie-sample-cloud > :nth-child(2) { right: 2%; bottom: 13%; }
.jackie-sample-cloud > :nth-child(3) { bottom: 7%; left: 28%; }
.jackie-sample-frame { display: grid; aspect-ratio: 1.08; place-items: center; overflow: hidden; padding: 10px; background: #fff; border: 7px solid #f7f7f4; border-radius: 18px; box-shadow: 0 18px 34px rgba(0,0,0,.42); }
.jackie-sample-frame img { width: 100%; height: 100%; object-fit: cover; }
.jackie-empty-mark { display: grid; width: 80%; height: 80%; place-items: center; color: var(--jackie-coral); border: 2px dashed var(--jackie-coral); font: 700 55px "Gaegu",cursive; }
.jackie-project-scene { min-height: calc(var(--jackie-stage-h, 100vh) * 1.32); }
.jackie-project-sticky { grid-template-columns: minmax(250px,520px) minmax(180px,300px); gap: 34px; padding: 70px 5%; }
.jackie-project-scene.side-right .jackie-project-sticky { grid-template-columns: minmax(180px,300px) minmax(250px,520px); }
.jackie-project-number { position: absolute; top: 12%; left: 50%; z-index: 0; color: rgba(255,255,255,.035); font: 700 230px/.8 Georgia,serif; transform: translateX(-50%); }
.jackie-project-sticky > article { position: relative; z-index: 2; width: min(100%,460px); justify-self: end; }
.jackie-project-scene.side-right article { grid-column: 2; justify-self: start; }
.jackie-art-page { position: relative; width: 100%; aspect-ratio: .78; overflow: hidden; background: #fff; border: 8px solid #f7f7f5; border-radius: 24px; box-shadow: 0 28px 52px rgba(0,0,0,.5); }
.jackie-art-page .page-design { padding: 6%; }
.jackie-project-sticky > aside { position: relative; z-index: 4; width: min(100%,280px); padding: 30px 28px 34px; align-self: center; color: #1d1d1d; background: #e8dfd2; clip-path: polygon(0 3%,15% 0,31% 4%,47% 1%,64% 5%,81% 1%,100% 4%,97% 95%,79% 99%,61% 95%,42% 100%,24% 96%,3% 99%); transform-origin: center; }
.jackie-project-scene.side-right aside { grid-column: 1; grid-row: 1; justify-self: end; }
.jackie-project-sticky aside span { color: var(--jackie-coral); font: 700 8px Georgia,serif; letter-spacing: 2px; }
.jackie-project-sticky aside h3 { margin: 9px 0 5px; font: 700 31px/.9 "Gaegu",cursive; }
.jackie-project-sticky aside p { color: #45413c; font: 16px/1.35 "Gaegu",cursive; white-space: pre-wrap; }
.jackie-project-sticky aside small { display: block; margin-top: 17px; color: #777069; font: 9px Georgia,serif; letter-spacing: 1px; }
.jackie-empty-scene .jackie-project-sticky > div { width: min(80%,520px); padding: 50px; color: #1d1d1d; text-align: center; background: #e8dfd2; transform: rotate(-2deg); }
.jackie-empty-scene h3 { margin: 10px 0; font: 700 44px/.9 "Gaegu",cursive; }
.jackie-empty-scene p { font: 18px/1.4 "Gaegu",cursive; }
.jackie-assembly-scene { min-height: calc(var(--jackie-stage-h, 100vh) * 2.38); }
.jackie-assembly-sticky { position: sticky; top: 0; height: var(--jackie-stage-h, 100vh); min-height: min(560px,var(--jackie-stage-h,100vh)); overflow: hidden; }
.jackie-piece { --piece-x: 0px; --piece-y: 0px; --piece-r: 0deg; --piece-scale: .86; --piece-opacity: 0; position: absolute; top: 50%; left: 50%; z-index: 4; margin: 0; opacity: var(--piece-opacity); transform: translate3d(calc(-50% + var(--piece-x)),calc(-50% + var(--piece-y)),0) rotate(var(--piece-r)) scale(var(--piece-scale)); transform-origin: center; will-change: transform,opacity; }
.jackie-piece::before { content: ""; position: absolute; top: -12px; left: 50%; z-index: 8; width: 74px; height: 24px; opacity: .88; background: rgba(226,216,196,.9); box-shadow: 0 2px 5px rgba(0,0,0,.15); transform: translateX(-50%) rotate(-2deg); }
.piece-main { z-index: 5; width: clamp(270px,calc(var(--jackie-stage-w, 100vw) * .38),430px); }
.piece-main::before { width: 94px; transform: translateX(-50%) rotate(3deg); }
.piece-main .jackie-art-page { aspect-ratio: .78; }
.piece-detail { width: clamp(220px,calc(var(--jackie-stage-w, 100vw) * .29),330px); padding: 10px 10px 28px; color: #1e1e1e; background: #fbfaf7; border: 1px solid rgba(0,0,0,.13); box-shadow: 0 24px 45px rgba(0,0,0,.48); }
.jackie-detail-crop { display: grid; height: 205px; place-items: center; overflow: hidden; background: #ece8e0; }
.jackie-detail-crop img { width: 135%; height: 135%; object-fit: cover; }
.piece-detail figcaption, .piece-mini figcaption { padding: 9px 3px 0; font: 700 8px Georgia,serif; letter-spacing: 1.8px; }
.piece-mini { width: clamp(180px,calc(var(--jackie-stage-w, 100vw) * .25),285px); padding: 9px 9px 25px; color: #1e1e1e; background: #f7f4ed; border-radius: 3px; box-shadow: 0 20px 38px rgba(0,0,0,.44); }
.jackie-mini-art { display: grid; height: 145px; place-items: center; overflow: hidden; background: #e4dfd6; }
.jackie-mini-art img { width: 100%; height: 100%; object-fit: cover; }
.piece-doodle { z-index: 9; width: 132px; height: 132px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.28)); }
.piece-doodle::before { display: none; }
.piece-doodle img { width: 100%; height: 100%; object-fit: contain; }
.piece-note { z-index: 8; width: clamp(210px,calc(var(--jackie-stage-w, 100vw) * .27),305px); padding: 30px 30px 36px; color: #202020; background: #e8dfd2; clip-path: polygon(0 4%,15% 1%,31% 5%,48% 0,65% 4%,82% 1%,100% 5%,97% 95%,81% 99%,63% 95%,44% 100%,25% 96%,2% 99%); box-shadow: 0 22px 35px rgba(0,0,0,.32); }
.piece-note::before { width: 80px; background: rgba(242,91,75,.75); }
.piece-note span { color: var(--jackie-coral); font: 700 8px Georgia,serif; letter-spacing: 2px; }
.piece-note h3 { margin: 10px 0 6px; font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: calc(var(--portfolio-title-size, 48) * .67px); font-weight: 700; line-height: .9; }
.piece-note p { color: var(--jackie-text, #45413c); font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: calc(var(--portfolio-body-size, 17) * 1px); line-height: 1.35; white-space: pre-wrap; }
.piece-note small { display: block; margin-top: 15px; color: #777069; font: 8px Georgia,serif; letter-spacing: 1.2px; }
.jackie-assembly-scene.side-right .piece-note { background: #ded7cc; }
.jackie-scene-sticker-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; transform-style: preserve-3d; }
.jackie-free-sticker { position: absolute; top: var(--y); left: var(--x); display: block; width: var(--s); height: var(--s); pointer-events: auto; cursor: grab; touch-action: none; transform: translate(-50%,-50%) rotate(var(--r)); transform-origin: center; filter: drop-shadow(0 8px 9px rgba(0,0,0,.24)); will-change: left,top,transform; }
.jackie-free-sticker:active { cursor: grabbing; }
.jackie-free-sticker.dragging { z-index: 90; cursor: grabbing; }
.jackie-free-sticker.selected { outline: 2px dashed #fff; outline-offset: 7px; }
.jackie-free-sticker.transforming { z-index: 95; outline: 3px solid var(--jackie-coral); outline-offset: 9px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.38)); }
.jackie-free-sticker img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.jackie-free-sticker.sticker-outline img { filter: drop-shadow(3px 0 #fff) drop-shadow(-3px 0 #fff) drop-shadow(0 3px #fff) drop-shadow(0 -3px #fff); }
.jackie-free-sticker.sticker-solid { background: var(--jackie-coral); -webkit-mask: var(--sticker-url) center/contain no-repeat; mask: var(--sticker-url) center/contain no-repeat; }
.jackie-scroll-host .jackie-free-sticker { pointer-events: none; }
.jackie-free-sticker .sticker-hover-ring { border-color: color-mix(in srgb, var(--jackie-coral, #e35342) 72%, white); filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }

@keyframes portfolioBorderTurn {
  0% { opacity: 0; transform: rotate(0deg) scale(.94); }
  18% { opacity: .96; }
  72% { opacity: .9; }
  100% { opacity: 0; transform: rotate(360deg) scale(1.035); }
}
@keyframes portfolioSolidStickerTurn {
  0% { transform: translate(-50%,-50%) rotate(var(--r)) scale(1); }
  48% { transform: translate(-50%,-50%) rotate(calc(var(--r) + 185deg)) scale(1.07); }
  100% { transform: translate(-50%,-50%) rotate(calc(var(--r) + 360deg)) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  .art-frame:hover > .art-hover-border { animation: portfolioBorderTurn .92s cubic-bezier(.22,.72,.2,1) both; }
  .decor-image:hover > .sticker-hover-ring,
  .jackie-free-sticker:hover > .sticker-hover-ring { animation: portfolioBorderTurn .82s cubic-bezier(.22,.72,.2,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .art-hover-border, .sticker-hover-ring, .decor-image.sticker-solid, .jackie-free-sticker.sticker-solid { animation: none !important; }
}
.jackie-finale { display: flex; min-height: calc(var(--jackie-stage-h, 100vh) * .88); align-items: center; justify-content: center; flex-direction: column; padding: 100px 20px; text-align: center; }
.jackie-finale span { color: var(--jackie-coral); font: 700 9px Georgia,serif; letter-spacing: 2.5px; }
.jackie-finale h2 { margin: 20px 0; font-family: var(--portfolio-font, "Gaegu"), cursive; font-size: clamp(38px, calc(var(--portfolio-title-size, 48) * 1.45px), 96px); font-weight: 700; line-height: .95; }
.jackie-finale i { color: var(--jackie-coral); font-size: 42px; }

/* Floating page rail */
.page-strip { position: absolute; right: 50%; bottom: 25px; z-index: 70; display: flex; max-width: min(72%, 760px); min-height: 72px; align-items: center; gap: 7px; padding: 8px; overflow-x: auto; background: rgba(13,14,16,.78); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; box-shadow: 0 13px 36px rgba(0,0,0,.28); backdrop-filter: blur(16px); transform: translateX(50%); }
.thumb { position: relative; width: 49px; height: 58px; flex: none; overflow: hidden; color: #15171b; background: #fff; border: 2px solid transparent; border-radius: 7px; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.thumb.on { border-color: var(--accent); transform: translateY(-2px); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.cover-thumb { display: grid; width: 54px; place-items: center; padding: 5px; color: #fff; background: var(--accent); font: 10px/1.15 "Gaegu", cursive; }
.thumb-num { position: absolute; bottom: 2px; left: 2px; display: grid; width: 15px; height: 15px; place-items: center; color: #fff; background: rgba(18,19,22,.78); border-radius: 4px; font-size: 7px; }
.add-thumb { display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); border-style: dashed; font-size: 21px; }

/* Tool drawer */
.inspector { position: relative; z-index: 45; overflow: auto; padding: 17px; border-left: 1px solid var(--line); opacity: 1; transition: opacity .2s var(--ease); }
.tools-closed .inspector { width: 0; padding: 0; overflow: hidden; border: 0; opacity: 0; pointer-events: none; }
.inspector-empty { display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; padding: 20px; color: #999fa8; text-align: center; }
.inspector-empty .material-symbols-rounded { font-size: 36px; }
.inspector-empty b { margin-top: 8px; color: #5c626b; font-size: 12px; }
.inspector-empty small { margin-top: 3px; font-size: 9px; line-height: 1.5; }
.inspector-head { position: sticky; top: -17px; z-index: 5; display: flex; align-items: center; gap: 7px; margin: -17px -17px 15px; padding: 17px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.inspector-head > .material-symbols-rounded { color: var(--accent); font-size: 17px; }
.inspector-head b { font-size: 12px; }
.inspector-head button { display: grid; width: 28px; height: 28px; place-items: center; margin-left: auto; color: #69707a; background: #f2f4f6; border-radius: 8px; }
.inspector-head button .material-symbols-rounded { font-size: 17px; }
.field { display: block; margin-bottom: 13px; }
.field > span, .field > label { display: block; margin-bottom: 6px; color: #6d737c; font-size: 9.5px; font-weight: 800; }
.field em { color: #a0a5ad; font-style: normal; font-weight: 500; }
.field input, .field textarea, .field select, .invite-row input, .invite-row select, .share-link-box input { width: 100%; padding: 9px 10px; resize: vertical; background: #fff; border: 1px solid var(--line); border-radius: 9px; outline: none; font-size: 11px; }
.field input:focus, .field textarea:focus, .invite-row input:focus, .share-link-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.09); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.choice-grid button, .sticker-row button, .paper-row button, .decor-palette button, .photo-fit button { padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.choice-grid button.on, .sticker-row button.on, .paper-row button.on, .photo-fit button.on { color: var(--accent); background: rgba(var(--accent-rgb),.055); border-color: var(--accent); }
.paper-row, .sticker-row { display: flex; flex-wrap: wrap; gap: 4px; }
.sticker-row button { min-width: 34px; font-size: 15px; }
.sticker-row button:last-child { font-size: 9px; }
.decor-palette { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.decor-palette button { padding: 7px 2px; }
.decor-palette button > .material-symbols-rounded { margin-right: 2px; font-size: 14px; vertical-align: -3px; }
.writing-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-bottom: 8px; }
.writing-presets button { display: flex; min-height: 55px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: #5c6470; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.writing-presets button:hover,.writing-presets button:active { color: var(--accent); background: rgba(var(--accent-rgb),.055); border-color: var(--accent); }
.writing-presets .material-symbols-rounded { font-size: 20px; }
.writing-presets b { font-size: 8px; }
.text-adjust { margin-top: 8px; padding: 10px; background: #f6f7f8; border: 1px solid var(--line); border-radius: 10px; }
.text-adjust-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #4e5660; }
.text-adjust-head b { font-size: 9px; }
.text-adjust-head small { color: #8b929b; font-size: 7.5px; }
.text-adjust label { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 7px; margin-bottom: 7px; color: #666e78; font-size: 8.5px; font-weight: 760; }
.text-adjust label:last-child { margin-bottom: 0; }
.text-adjust input,.text-adjust textarea,.text-adjust select { min-width: 0; }
.text-adjust textarea { resize: vertical; line-height: 1.35; }
.text-adjust input[type="range"] { padding: 0; border: 0; accent-color: var(--accent); }
.text-adjust input[type="color"] { width: 42px; height: 30px; justify-self: start; padding: 2px; border-radius: 8px; }
.text-variant-row,.text-align-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-bottom: 8px; }
.text-align-row { grid-template-columns: repeat(3,1fr); }
.text-variant-row button,.text-align-row button { min-height: 32px; color: #69717b; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 8px; }
.text-variant-row button.on,.text-align-row button.on { color: var(--accent); background: rgba(var(--accent-rgb),.06); border-color: var(--accent); }
.text-align-row .material-symbols-rounded { font-size: 17px; }
.text-adjust .text-autofit { display: flex; grid-template-columns: none; align-items: center; gap: 7px; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.text-autofit input { width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.text-touch-tip { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: #53745e; font-size: 7.5px; font-weight: 750; line-height: 1.35; }
.text-touch-tip .material-symbols-rounded { font-size: 15px; }
.text-placement-hint { position: absolute; left: 50%; bottom: 91px; z-index: 195; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 10px 12px; color: #fff; background: rgba(29,33,40,.94); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; box-shadow: 0 12px 30px rgba(12,16,22,.3); transform: translateX(-50%); backdrop-filter: blur(14px); }
.text-placement-hint.hide { display: none; }
.text-placement-hint .material-symbols-rounded { color: #ffd66b; font-size: 21px; }
.text-placement-hint b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.text-placement-hint button { flex: none; padding: 6px 9px; color: #20242a; background: #fff; border-radius: 999px; font-size: 8px; font-weight: 800; }
.book-stage.placing-text [data-art-index] .paper-page,.book-stage.placing-text [data-art-index] .page-design { outline: 4px dashed color-mix(in srgb,var(--accent) 72%,white); outline-offset: -7px; cursor: crosshair; }
.easy-tutorial { position: absolute; right: 22px; bottom: 24px; z-index: 205; width: min(340px,calc(100% - 44px)); filter: drop-shadow(0 24px 42px rgba(20,24,31,.23)); animation: easyGuideIn .3s var(--ease) both; }
.easy-tutorial.hide { display: none; }
.easy-tutorial-card { position: relative; overflow: hidden; padding: 22px; background: #fffdf7; border: 1px solid rgba(45,48,54,.14); border-radius: 24px; }
.easy-tutorial-card::before { position: absolute; top: -42px; right: -36px; width: 130px; height: 130px; content: ''; background: radial-gradient(circle,#ffd969 0 36%,#ff8c7b 37% 53%,transparent 54%); opacity: .28; transform: rotate(12deg); }
.easy-tutorial-icon { display: grid; width: 50px; height: 50px; margin-bottom: 14px; place-items: center; color: #fff; background: #252a31; border-radius: 16px 16px 16px 5px; font-size: 27px; transform: rotate(-3deg); }
.easy-tutorial-card > small { position: absolute; top: 24px; right: 23px; color: #888e96; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.easy-tutorial-card h2 { margin: 0 0 7px; color: #24282e; font: 700 24px/1.08 "Gaegu",cursive; }
.easy-tutorial-card p { min-height: 42px; margin: 0; color: #69717a; font-size: 10px; line-height: 1.6; }
.easy-tutorial-dots { display: flex; gap: 5px; margin: 16px 0 13px; }
.easy-tutorial-dots i { width: 7px; height: 7px; background: #d9dde2; border-radius: 99px; transition: width .18s,background .18s; }
.easy-tutorial-dots i.on { width: 24px; background: var(--accent); }
.easy-tutorial-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.easy-tutorial-actions button { min-height: 40px; padding: 0 14px; color: #757c85; border-radius: 12px; font-size: 9px; font-weight: 800; }
.easy-tutorial-actions #btnEasyTutorialNext { display: inline-flex; align-items: center; gap: 5px; color: #fff; background: #252a31; box-shadow: 0 8px 18px rgba(20,24,30,.16); }
.easy-tutorial-actions .material-symbols-rounded { font-size: 17px; }
@keyframes easyGuideIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.completion-celebration { position: absolute; inset: 0; z-index: 240; display: grid; place-items: center; overflow: hidden; padding: 20px; background: rgba(21,24,29,.34); backdrop-filter: blur(5px); }
.completion-celebration.hide { display: none; }
.celebration-card { position: relative; z-index: 2; width: min(390px,100%); padding: 31px 25px 25px; overflow: hidden; color: #30343a; background: #fffdf5; border: 2px solid #fff; border-radius: 30px; box-shadow: 0 30px 65px rgba(16,19,24,.26); text-align: center; animation: celebrationPop .55s cubic-bezier(.17,.84,.3,1.28) both; }
.celebration-card::before,.celebration-card::after { position: absolute; width: 110px; height: 110px; content: ''; border: 16px solid #ffd85f; border-radius: 50%; opacity: .2; }
.celebration-card::before { top: -68px; left: -57px; }
.celebration-card::after { right: -60px; bottom: -68px; border-color: #ef7393; }
.celebration-card > .material-symbols-rounded { display: grid; width: 68px; height: 68px; margin: 0 auto 12px; place-items: center; color: #fff; background: linear-gradient(145deg,#ffb72f,#ef6d77); border-radius: 23px 23px 23px 7px; box-shadow: 0 13px 23px rgba(218,112,57,.25); font-size: 38px; transform: rotate(-5deg); }
.celebration-card small { color: #b77c17; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.celebration-card h2 { margin: 7px 0 5px; font: 700 30px/1.05 "Gaegu",cursive; }
.celebration-card p { margin: 0; color: #747b84; font-size: 10px; line-height: 1.5; }
.celebration-card button { display: inline-flex; min-height: 44px; align-items: center; gap: 5px; margin-top: 18px; padding: 0 16px; color: #fff; background: #292e35; border-radius: 13px; font-size: 9px; font-weight: 820; }
.celebration-card button .material-symbols-rounded { font-size: 17px; }
.celebration-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.celebration-confetti i { position: absolute; top: -12%; left: calc(var(--n)*8%); width: 11px; height: 19px; background: hsl(calc(var(--n)*31deg) 76% 59%); border-radius: 2px; animation: confettiFall 2.2s calc(var(--n)*-.08s) linear infinite; transform: rotate(calc(var(--n)*19deg)); }
.celebration-confetti i:nth-child(1){--n:1}.celebration-confetti i:nth-child(2){--n:2}.celebration-confetti i:nth-child(3){--n:3}.celebration-confetti i:nth-child(4){--n:4}.celebration-confetti i:nth-child(5){--n:5}.celebration-confetti i:nth-child(6){--n:6}.celebration-confetti i:nth-child(7){--n:7}.celebration-confetti i:nth-child(8){--n:8}.celebration-confetti i:nth-child(9){--n:9}.celebration-confetti i:nth-child(10){--n:10}.celebration-confetti i:nth-child(11){--n:11}.celebration-confetti i:nth-child(12){--n:12}
@keyframes celebrationPop { from { opacity: 0; transform: translateY(18px) scale(.75) rotate(-3deg); } }
@keyframes confettiFall { to { top: 112%; transform: translateX(calc((var(--n) - 6)*8px)) rotate(620deg); } }
.snap-guides { position: absolute; inset: 0; z-index: 140; display: block; overflow: hidden; pointer-events: none; }
.snap-guides i { position: absolute; display: block; opacity: 0; background: #4169e1; box-shadow: 0 0 0 1px #ffffffcc; transition: opacity .08s ease; }
.snap-guide-x { top: 0; bottom: 0; left: var(--snap-x,50%); width: 2px; transform: translateX(-1px); }
.snap-guide-y { top: var(--snap-y,50%); right: 0; left: 0; height: 2px; transform: translateY(-1px); }
.snap-guides.show-x .snap-guide-x,.snap-guides.show-y .snap-guide-y { opacity: .9; }
.ipad-creative-dock,.ipad-mode-switch,.inspector-tabs { display: none; }
/* The portfolio inspector owns the right edge while open; hide the global-nav
   handle so iPad users never see or open two competing sidebars. */
html.portfolio-tools-open #gnav-root .gnav-pill,
html.portfolio-tools-open #gnav-root .gnav-sidebar,
html.portfolio-tools-open #gnav-root .gnav-backdrop { display: none !important; }
.work-mode-switch { display: flex; flex: none; gap: 3px; padding: 4px; background: #edf0f3; border: 1px solid var(--line); border-radius: 13px; }
.work-mode-switch button { display: inline-flex; min-height: 36px; align-items: center; gap: 4px; padding: 0 9px; color: #707882; border-radius: 9px; }
.work-mode-switch button.on { color: #fff; background: #252a31; box-shadow: 0 5px 13px rgba(20,24,30,.15); }
.work-mode-switch .material-symbols-rounded { font-size: 17px; }
.work-mode-switch b { font-size: 8px; }
.child-work-mode .work-mode-switch { background: #fff8d9; border-color: #ead27b; }
.child-work-mode .work-mode-switch button.on { background: #efb936; }
.child-work-mode.desktop-studio,.child-work-mode .desktop-studio { grid-template-columns: 0 minmax(0,1fr) 304px; }
.child-work-mode .children-panel { overflow: hidden; padding: 0; opacity: 0; pointer-events: none; }
.child-work-mode .appbar-actions,.child-work-mode .template-quick,.child-work-mode #btnBlankPage,.child-work-mode #btnToggleTools,.child-work-mode #btnLayerDelete,.child-work-mode #btnEasyAdvanced { display: none !important; }
.child-work-mode .inspector-tabs,.child-work-mode #coverFields,.child-work-mode #pageFields,.child-work-mode .inspector-content > .field:not(#easyDecorStudio):not(#stickerLibrary),.child-work-mode #btnDeleteBook { display: none !important; }
.child-work-mode.easy-mode #stickerLibrary { display: none !important; }
.child-work-mode:not(.easy-mode) #stickerLibrary { display: block !important; }
.remove-decor { width: 100%; margin-top: 6px; padding: 7px; color: #be5149; background: #fff2f1; border-radius: 8px; font-size: 9px; }
.easy-decor-studio { display: none; padding: 0; background: transparent; }
.desktop-studio.easy-mode .easy-decor-studio { display: block; }
.desktop-studio.easy-mode .inspector-tabs,.desktop-studio.easy-mode #coverFields,.desktop-studio.easy-mode #pageFields,.desktop-studio.easy-mode .inspector-content > .field:not(#easyDecorStudio),.desktop-studio.easy-mode #btnDeleteBook { display: none !important; }
.easy-decor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; padding: 2px 1px; }
.easy-decor-head > span { display: flex; flex-direction: column; gap: 2px; }
.easy-decor-head small { color: var(--accent); font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.easy-decor-head b { color: #24282e; font: 700 20px/1.1 "Gaegu",cursive; }
.easy-decor-head button { display: inline-flex; min-height: 34px; align-items: center; gap: 4px; padding: 0 9px; color: #68717b; background: #fff; border: 1px solid #dde2e7; border-radius: 10px; }
.easy-decor-head button .material-symbols-rounded { font-size: 16px; }
.easy-decor-head button b { font: 800 8px/1 Pretendard,sans-serif; }
.easy-primary-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.easy-primary-actions > button { display: grid; min-width: 0; min-height: 88px; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; padding: 10px; color: #343a43; background: #fff; border: 1px solid #dfe3e8; border-radius: 16px; text-align: left; box-shadow: 0 4px 12px rgba(30,35,42,.04); touch-action: manipulation; }
.easy-primary-actions > button:hover,.easy-primary-actions > button:active { border-color: var(--accent); box-shadow: 0 7px 18px rgba(var(--accent-rgb),.11); transform: translateY(-1px); }
.easy-primary-actions > button:disabled { opacity: .4; }
.easy-primary-actions .easy-action-icon { display: grid; width: 38px; height: 38px; grid-row: 1 / 3; align-self: center; place-items: center; color: #fff; background: #6276e8; border-radius: 13px 13px 13px 5px; }
.easy-primary-actions .easy-action-icon.sticker { background: #e7648f; transform: rotate(3deg); }
.easy-primary-actions .easy-action-icon.magic { background: linear-gradient(135deg,#7657d8,#ed6986); }
.easy-primary-actions .easy-action-icon.undo { color: #53635a; background: #e5f3e9; }
.easy-primary-actions .material-symbols-rounded { font-size: 21px; }
.easy-primary-actions b { align-self: end; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.easy-primary-actions small { align-self: start; overflow: hidden; margin-top: 3px; color: #8a9199; font-size: 6.7px; text-overflow: ellipsis; white-space: nowrap; }
.easy-primary-actions > .magic { background: linear-gradient(145deg,#fff 30%,#faf3ff); border-color: #dcd1f3; }
.easy-pack-block { margin-top: 14px; padding-top: 13px; border-top: 1px dashed #d9dde2; }
.easy-pack-block > span { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; margin-bottom: 8px; }
.easy-pack-block > span b { color: #4f5761; font-size: 9px; }
.easy-pack-block > span small { color: #989ea6; font-size: 6.5px; }
.easy-theme-packs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.easy-theme-packs button { display: flex; min-width: 0; min-height: 67px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: #525a64; background: #fff; border: 1px solid #dfe3e8; border-radius: 14px; touch-action: manipulation; }
.easy-theme-packs button:nth-child(3n+1) { background: #fff8e9; }
.easy-theme-packs button:nth-child(3n+2) { background: #eef8ff; }
.easy-theme-packs button:nth-child(3n) { background: #f7f1ff; }
.easy-theme-packs button:hover,.easy-theme-packs button:active { border-color: var(--accent); transform: rotate(-1deg) scale(1.02); }
.easy-theme-packs i { font-style: normal; font-size: 25px; line-height: 1; }
.easy-theme-packs b { overflow: hidden; max-width: 100%; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.easy-category-packs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.easy-category-packs button { display: flex; min-width: 0; min-height: 55px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: #626a73; background: #f7f8f9; border: 1px solid transparent; border-radius: 12px; touch-action: manipulation; }
.easy-category-packs button:hover,.easy-category-packs button:active { color: var(--accent); background: #fff; border-color: rgba(var(--accent-rgb),.4); }
.easy-category-packs i { font-style: normal; font-size: 20px; }
.easy-category-packs b { max-width: 100%; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.easy-help { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; color: #747c85; background: transparent; border: 1px dashed #d5dae0; border-radius: 12px; font-size: 8px; font-weight: 780; }
.easy-help .material-symbols-rounded { font-size: 16px; }
.kid-level-picker { margin-bottom: 12px; padding: 10px; background: linear-gradient(145deg,#fffaf0,#f7f4ff); border: 1px solid #e3dfeb; border-radius: 15px; }
.kid-level-picker > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.kid-level-picker > span b { color: #515964; font-size: 8.5px; }
.kid-level-picker > span small { color: #949ba4; font-size: 6.5px; }
.kid-level-picker > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.kid-level-picker button { display: flex; min-width: 0; min-height: 50px; align-items: center; justify-content: center; flex-direction: column; gap: 2px; color: #69717b; background: rgba(255,255,255,.72); border: 1px solid transparent; border-radius: 11px; }
.kid-level-picker button.on { color: #fff; background: #353a43; border-color: #353a43; box-shadow: 0 6px 14px rgba(29,34,41,.15); }
.kid-level-picker i { font-style: normal; font-size: 9px; font-weight: 900; }
.kid-level-picker b { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.easy-story-lab textarea { width: 100%; min-height: 72px; resize: vertical; padding: 10px; color: #333941; background: #fff; border: 1px solid #dce1e6; border-radius: 12px; font: 700 14px/1.4 "Gaegu",cursive; }
.story-prompt-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin-bottom: 7px; }
.story-prompt-row button { min-width: 0; min-height: 38px; padding: 5px; color: #606873; background: #f7f3ff; border: 1px solid #e7def5; border-radius: 10px; font-size: 7px; font-weight: 800; }
.story-prompt-row span { display: block; overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.easy-story-save { display: flex; width: 100%; min-height: 45px; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; color: #fff; background: #586bd8; border-radius: 12px; box-shadow: 0 7px 16px rgba(64,78,175,.18); }
.easy-story-save:disabled { opacity: .38; }
.easy-story-save .material-symbols-rounded { font-size: 18px; }
.easy-story-save b { font-size: 8.5px; }
.premium-audio-note { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding: 8px; color: #637068; background: #eff7f1; border-radius: 10px; font-size: 7px; line-height: 1.45; }
.premium-audio-note .material-symbols-rounded { flex: none; color: #3f7855; font-size: 15px; }
.mission-question { display: grid; min-height: 74px; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 7px; padding: 11px; color: #55470d; background: #fff5bd; border: 1px solid #eadb81; border-radius: 14px; transform: rotate(-.5deg); }
.mission-question > .material-symbols-rounded { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: #e6ab24; border-radius: 11px; font-size: 20px; }
.mission-question p { margin: 0; font: 700 15px/1.25 "Gaegu",cursive; }
.mission-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 7px; }
.mission-actions button { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 4px; color: #606873; background: #fff; border: 1px solid #dde2e7; border-radius: 11px; }
.mission-actions button:last-child { color: #795d0a; background: #fff9df; border-color: #e8d78c; }
.mission-actions button:disabled { opacity: .4; }
.mission-actions .material-symbols-rounded { font-size: 17px; }
.mission-actions b { font-size: 8px; }
.celebration-reactions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.celebration-reactions button { display: flex; min-width: 0; min-height: 62px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: #59616b; background: #fff; border: 1px solid #dde2e7; border-radius: 13px; }
.celebration-reactions button:hover,.celebration-reactions button.on { color: #9e6211; background: #fff8d9; border-color: #e6c968; transform: rotate(-1deg) scale(1.02); }
.celebration-reactions button:disabled { opacity: .4; }
.celebration-reactions i { font-style: normal; font-size: 24px; }
.celebration-reactions b { font-size: 7.5px; }
.kid-level-little .easy-primary-actions > button { min-height: 104px; }
.kid-level-little .easy-primary-actions b { font-size: 11px; }
.kid-level-little .easy-primary-actions small { display: none; }
.kid-level-little .easy-category-packs button:nth-child(n+5) { display: none; }
.kid-level-little .easy-category-packs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.kid-level-free .easy-theme-packs button,.kid-level-free .easy-category-packs button { min-height: 58px; }
.layer-manager { padding: 11px; background: #f6f7f9; border: 1px solid var(--line); border-radius: 12px; }
.layer-manager > span { display: flex; align-items: center; justify-content: space-between; }
.layer-empty { display: flex; min-height: 72px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: #9aa1aa; background: #fff; border: 1px dashed #d8dde3; border-radius: 10px; text-align: center; }
.layer-empty .material-symbols-rounded { font-size: 24px; }
.layer-empty small { max-width: 180px; font-size: 8px; line-height: 1.35; }
.layer-list { display: flex; max-height: 218px; flex-direction: column; gap: 5px; overflow-y: auto; }
.layer-row { display: grid; min-height: 43px; grid-template-columns: 23px 28px minmax(0,1fr) auto; align-items: center; gap: 5px; padding: 5px 7px; color: #626a74; background: #fff; border: 1px solid #dfe3e8; border-radius: 9px; text-align: left; touch-action: manipulation; }
.layer-row.on { color: var(--accent); background: rgba(var(--accent-rgb),.06); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.08); }
.layer-row.hidden-layer { opacity: .62; }
.layer-index { display: grid; width: 21px; height: 21px; place-items: center; color: #8b929b; background: #f0f2f5; border-radius: 6px; font-size: 7px; }
.layer-type { font-size: 19px; }
.layer-row b { overflow: hidden; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.layer-flags { display: flex; gap: 2px; }
.layer-flags i { font-size: 14px; }
.layer-order-actions,.layer-item-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-top: 7px; }
.layer-order-actions button,.layer-item-actions button { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: center; flex-direction: column; gap: 1px; color: #666e78; background: #fff; border: 1px solid #dde2e7; border-radius: 9px; touch-action: manipulation; }
.layer-order-actions button:disabled,.layer-item-actions button:disabled { opacity: .34; }
.layer-order-actions .material-symbols-rounded,.layer-item-actions .material-symbols-rounded { font-size: 17px; }
.layer-order-actions b,.layer-item-actions b { font-size: 7.5px; }
.layer-item-actions .layer-delete { color: #b94c45; background: #fff5f4; }
.layer-item-actions .layer-delete.confirming { color: #fff; background: #cc4e46; border-color: #cc4e46; animation: deleteConfirmPulse .7s ease infinite alternate; }
.layer-tip { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #61766a; font-size: 7.5px; font-weight: 730; line-height: 1.35; }
.layer-tip .material-symbols-rounded { flex: none; font-size: 15px; }
.locked-controls { opacity: .55; }
@keyframes deleteConfirmPulse { to { transform: scale(.98); } }
.doodle-library { padding-top: 13px; border-top: 1px solid var(--line); }
.sticker-help { margin: -1px 0 8px; padding: 7px 8px; color: #a14339; background: #fff2f0; border-radius: 7px; font-size: 8.5px; line-height: 1.45; }
.sticker-mode { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-bottom: 7px; }
.sticker-mode button { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 4px; padding: 7px 2px; color: #646b74; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 8px; }
.sticker-mode button.on { color: var(--accent); background: rgba(var(--accent-rgb),.055); border-color: var(--accent); }
.sticker-mode i { display: block; width: 13px; height: 13px; border: 2px solid #1d1d1d; border-radius: 50%; }
.sticker-mode .mode-outline { background: #fff; box-shadow: 0 0 0 2px #d9dde2; }
.sticker-mode .mode-solid { background: var(--accent); border-color: var(--accent); }
.sticker-mode .mode-line { background: transparent; border-width: 1px; }
.sticker-search { display: grid; grid-template-columns: 22px minmax(0,1fr) 26px; align-items: center; margin-bottom: 7px; padding: 3px 4px 3px 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; transition: border-color .18s,box-shadow .18s; }
.sticker-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.09); }
.sticker-search > .material-symbols-rounded { color: #9298a1; font-size: 16px; }
.sticker-search input { min-width: 0; padding: 6px 3px; border: 0; outline: 0; background: transparent; font-size: 9.5px; }
.sticker-search button { display: grid; width: 24px; height: 24px; place-items: center; color: #7c838c; background: #f0f2f4; border-radius: 7px; }
.sticker-search button .material-symbols-rounded { font-size: 15px; }
.sticker-categories { display: flex; gap: 4px; margin: 0 -1px 7px; padding: 1px; overflow-x: auto; scrollbar-width: none; }
.sticker-categories::-webkit-scrollbar { display: none; }
.sticker-categories button { display: inline-flex; min-width: max-content; align-items: center; gap: 3px; padding: 5px 8px; color: #6d747d; background: #f4f5f7; border: 1px solid transparent; border-radius: 99px; font-size: 7.5px; font-weight: 780; }
.sticker-categories button.on { color: var(--accent); background: rgba(var(--accent-rgb),.07); border-color: rgba(var(--accent-rgb),.3); }
.sticker-categories .material-symbols-rounded { font-size: 11px; }
.sticker-result-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 5px; color: #8b9199; font-size: 7.5px; }
.sticker-result-head > span { color: #5e6670; font-weight: 850; }
.doodle-sticker-grid { display: grid; max-height: 282px; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; overflow-y: auto; padding: 5px; background: #eef0f2; border: 1px solid var(--line); border-radius: 10px; overscroll-behavior: contain; }
.sticker-tile { position: relative; min-width: 0; aspect-ratio: .86; }
.sticker-pick { display: grid; width: 100%; height: 100%; grid-template-rows: minmax(0,1fr) 16px; place-items: center; overflow: hidden; padding: 4px 3px 2px; background-color: #f5f0e7; background-image: linear-gradient(45deg,#e6e8eb 25%,transparent 25%),linear-gradient(-45deg,#e6e8eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e8eb 75%),linear-gradient(-45deg,transparent 75%,#e6e8eb 75%); background-position: 0 0,0 5px,5px -5px,-5px 0; background-size: 10px 10px; border: 1px solid transparent; border-radius: 8px; touch-action: pan-y; transition: transform .16s,border-color .16s,background-color .16s; }
.sticker-pick:hover,.sticker-pick:focus-visible { background-color: #fff; border-color: var(--accent); transform: translateY(-1px); outline: 0; }
.sticker-pick[draggable="true"] { cursor: grab; }
.sticker-pick[draggable="true"]:active { cursor: grabbing; }
.sticker-pick.pointer-dragging { opacity: .48; transform: scale(.96); }
.sticker-drag-ghost { position: fixed; z-index: 2147483600; display: grid; width: 94px; height: 94px; place-items: center; pointer-events: none; transform: translate(-50%,-50%) rotate(-4deg) scale(.94); transform-origin: center; filter: drop-shadow(0 13px 18px rgba(12,16,22,.34)); opacity: .82; transition: opacity .1s,transform .1s; }
.sticker-drag-ghost.can-drop { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1.06); }
.sticker-drag-ghost img { width: 100%; height: 100%; object-fit: contain; }
.sticker-drag-ghost.sticker-outline img { filter: drop-shadow(3px 0 #fff) drop-shadow(-3px 0 #fff) drop-shadow(0 3px #fff) drop-shadow(0 -3px #fff); }
.sticker-drag-ghost.sticker-solid { background: var(--accent); -webkit-mask: var(--sticker-url) center/contain no-repeat; mask: var(--sticker-url) center/contain no-repeat; }
.sticker-drag-ghost .sticker-hover-ring { display: none; }
.paper-page.sticker-drop-ready,.jackie-story [data-sticker-anchor].sticker-drop-ready { outline: 3px dashed var(--accent); outline-offset: -8px; }
.sticker-pick img { width: 100%; height: 100%; min-height: 0; object-fit: contain; transition: transform .18s; }
.sticker-pick:hover img { transform: rotate(-4deg) scale(1.06); }
.sticker-pick.mode-solid img { filter: sepia(1) saturate(5) hue-rotate(325deg) contrast(1.15); }
.sticker-pick small { width: 100%; overflow: hidden; color: #5e646d; font-size: 6.7px; font-weight: 760; line-height: 14px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sticker-favorite { position: absolute; top: 3px; right: 3px; z-index: 2; display: grid; width: 20px; height: 20px; place-items: center; color: #737981; background: rgba(255,255,255,.9); border: 1px solid rgba(50,54,59,.1); border-radius: 50%; box-shadow: 0 2px 6px rgba(20,22,26,.13); font-size: 12px; }
.sticker-favorite:hover,.sticker-favorite.on { color: #e3a91a; transform: scale(1.08); }
.sticker-empty { display: grid; min-height: 145px; place-items: center; align-content: center; gap: 4px; padding: 20px; color: #838a93; background: #f5f6f7; border: 1px dashed #ccd1d6; border-radius: 10px; text-align: center; }
.sticker-empty > span { color: var(--accent); font: 24px/1 Gaegu,cursive; }
.sticker-empty b { color: #5f6670; font-size: 9px; }
.sticker-empty small { font-size: 7.5px; }
.sticker-more { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 7px; color: #5e6670; background: #f3f4f6; border: 1px solid var(--line); border-radius: 8px; font-size: 8px; font-weight: 800; }
.sticker-more:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.38); }
.sticker-more small { color: #9298a0; font-size: 7px; font-weight: 600; }
.sticker-adjust { margin-top: 8px; padding: 9px; background: #f6f7f8; border: 1px solid var(--line); border-radius: 9px; }
.sticker-lock-note { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; color: #4d7a61; font-size: 7.5px; font-weight: 800; }
.sticker-lock-note .material-symbols-rounded { font-size: 13px; }
.sticker-adjust label { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--muted); font-size: 8.5px; }
.sticker-adjust input { padding: 0; border: 0; accent-color: var(--accent); }
.theme-customizer { padding-top: 14px; border-top: 1px solid var(--line); }
.theme-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.theme-color-grid label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; color: #606771; background: #f7f8f9; border: 1px solid var(--line); border-radius: 9px; font-size: 8.5px; font-weight: 750; }
.theme-color-grid input[type="color"] { width: 30px; height: 26px; flex: none; padding: 2px; border-radius: 7px; cursor: pointer; }
.theme-font { display: block; margin-top: 8px; }
.theme-font > span { display: block; margin-bottom: 5px; color: #6d737c; font-size: 8.5px; font-weight: 780; }
.theme-font select { width: 100%; }
.theme-sliders { display: grid; gap: 6px; margin-top: 8px; }
.theme-sliders label { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 7px; color: #6d737c; font-size: 8.5px; font-weight: 780; }
.theme-sliders input { padding: 0; border: 0; accent-color: var(--accent); }
.theme-reset { width: 100%; margin-top: 8px; padding: 8px; color: #505761; background: #f1f3f5; border: 1px solid var(--line); border-radius: 8px; font-size: 8.5px; font-weight: 780; }
.theme-reset:hover { color: var(--accent); border-color: var(--accent); }
.texture-customizer { padding-top: 13px; border-top: 1px solid var(--line); }
.texture-customizer > span b { color: #4f5660; }
.texture-choice-block + .texture-choice-block { margin-top: 11px; }
.texture-choice-block > b { display: block; margin-bottom: 6px; color: #6d737c; font-size: 8.5px; }
.texture-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.texture-choice-grid button { min-width: 0; padding: 4px; color: #666d77; background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: 7.5px; font-weight: 750; }
.texture-choice-grid button.on { color: var(--accent); background: rgba(var(--accent-rgb),.05); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.08); }
.texture-choice-grid i { display: block; height: 31px; margin-bottom: 4px; overflow: hidden; background-color: #252525; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.texture-preview.bg-none { background-image: radial-gradient(circle at 50% 25%,rgba(255,255,255,.09),transparent 52%); }
.texture-preview.bg-chalk { background-image: radial-gradient(circle at 2px 2px,rgba(255,255,255,.28) 1px,transparent 1.4px); background-size: 8px 8px; }
.texture-preview.bg-grid { background-image: linear-gradient(rgba(255,255,255,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.17) 1px,transparent 1px); background-size: 9px 9px; }
.texture-preview.bg-doodle { background-image: radial-gradient(circle at 7px 7px,transparent 0 3px,rgba(255,255,255,.25) 3.5px 4px,transparent 4.5px),linear-gradient(45deg,transparent 47%,rgba(255,255,255,.16) 48% 51%,transparent 52%); background-size: 18px 18px,23px 23px; }
.texture-preview.bg-linen { background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 4px); }
.texture-preview.paper-clean,.texture-preview.paper-fiber,.texture-preview.paper-lined,.texture-preview.paper-grid,.texture-preview.paper-dots,.texture-preview.paper-scrapbook { background-color: #f3eee4; }
.texture-preview.paper-fiber { background-image: repeating-linear-gradient(3deg,rgba(90,64,35,.1) 0 1px,transparent 1px 4px),radial-gradient(circle,rgba(90,64,35,.16) 0 .7px,transparent 1px); background-size: auto,8px 9px; }
.texture-preview.paper-lined { background-image: repeating-linear-gradient(0deg,transparent 0 7px,rgba(66,104,151,.28) 7px 8px),linear-gradient(90deg,transparent 0 12px,rgba(211,77,68,.28) 12px 13px,transparent 13px); }
.texture-preview.paper-grid { background-image: linear-gradient(rgba(66,104,151,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(66,104,151,.24) 1px,transparent 1px); background-size: 8px 8px; }
.texture-preview.paper-dots { background-image: radial-gradient(circle,rgba(60,70,80,.35) 0 1px,transparent 1.2px); background-size: 7px 7px; }
.texture-preview.paper-scrapbook { background-image: repeating-linear-gradient(118deg,rgba(115,78,42,.12) 0 1px,transparent 1px 5px),repeating-linear-gradient(24deg,rgba(255,255,255,.65) 0 1px,transparent 1px 6px); }
.photo-tune > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.photo-tune > span em { color: #89919b; font-size: 8px; font-style: normal; font-weight: 500; }
.photo-adjust-grid { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 8px; padding: 8px 9px; background: #f6f7f9; border: 1px solid #e5e8ec; border-radius: 11px; }
.photo-tune .photo-adjust-grid label { display: grid; grid-template-columns: 48px 1fr; gap: 7px; align-items: center; margin: 0; color: var(--muted); font-size: 9px; }
.photo-tune input[type="range"] { min-height: 26px; padding: 0; border: 0; accent-color: var(--accent); }
.photo-file-actions,.photo-turn,.photo-presets { display: grid; gap: 5px; margin-top: 7px; }
.photo-file-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.photo-turn { grid-template-columns: repeat(2,minmax(0,1fr)); }
.photo-presets { grid-template-columns: repeat(3,minmax(0,1fr)); }
.photo-file-actions button,.photo-file-actions .photo-replace,.photo-turn button,.photo-presets button { display: flex; min-width: 0; min-height: 35px; align-items: center; justify-content: center; gap: 4px; padding: 6px; color: #59616b; background: #fff; border: 1px solid #dfe3e8; border-radius: 9px; font-size: 8px; font-weight: 760; cursor: pointer; }
.photo-file-actions .photo-replace { position: relative; margin: 0; }
.photo-file-actions .photo-replace input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-file-actions .material-symbols-rounded,.photo-turn .material-symbols-rounded { font-size: 17px; }
.photo-file-actions button:hover,.photo-file-actions .photo-replace:hover,.photo-turn button:hover,.photo-presets button:hover,.photo-presets button.on { color: var(--accent); background: rgba(var(--accent-rgb),.055); border-color: rgba(var(--accent-rgb),.55); }
.photo-fit { display: flex; gap: 5px; margin-top: 7px; }
.photo-fit button { flex: 1; }
.page-actions { display: flex; gap: 5px; margin-top: 7px; padding-top: 13px; border-top: 1px solid var(--line); }
.page-actions .btn { min-height: 32px; padding: 6px 8px; font-size: 9px; }
.page-actions .danger { margin-left: auto; }
.template-mini { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.template-mini button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 3px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.template-mini button.on { background: rgba(var(--accent-rgb),.05); border-color: var(--accent); }
.template-mini i { position: relative; display: block; width: 34px; height: 24px; background: #fff; border: 1px solid #cfd4da; border-radius: 3px; }
.template-mini .mini-binder:after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 15px; width: 3px; background: linear-gradient(90deg,#8f651a,#f1cc65,#a16e18); }
.template-mini .mini-classic { background: #fff; box-shadow: inset 6px 0 #e4e7eb; }
.template-mini .mini-ink { background: #181818; border: 3px double #ff5b50; }
.template-mini b { font-size: 7.5px; }
.color-row { display: flex; gap: 7px; }
.color-row button { width: 26px; height: 26px; background: var(--c); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7),0 0 0 1px rgba(0,0,0,.08); }
.color-row button.on { box-shadow: inset 0 0 0 2px #fff,0 0 0 2px #17191d; }
.delete-book { width: 100%; margin-top: 15px; padding: 8px; color: #b95049; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }

/* Modals */
.modal-back { position: fixed; inset: 0; z-index: 600; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(13,15,18,.58); backdrop-filter: blur(6px); }
.modal-back.on { display: flex; }
.modal { position: relative; width: min(460px,100%); max-height: 90vh; overflow: auto; padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.teacher-unlock-modal { width: min(380px,100%); text-align: center; }
.teacher-lock-icon { display: grid; width: 58px; height: 58px; margin: 4px auto 13px; place-items: center; color: #fff; background: #292e35; border-radius: 18px 18px 18px 6px; }
.teacher-lock-icon .material-symbols-rounded { font-size: 29px; }
.teacher-unlock-modal h2 { font: 700 25px/1.1 "Gaegu",cursive; }
.teacher-unlock-modal > p { max-width: 290px; margin: 7px auto 15px; color: #737a84; font-size: 10px; line-height: 1.55; }
.teacher-challenge { display: grid; grid-template-columns: 1fr 88px; align-items: center; gap: 8px; padding: 8px; background: #f3f5f7; border: 1px solid #e0e4e8; border-radius: 14px; }
.teacher-challenge span { color: #30353c; font: 800 26px/1 "Gaegu",cursive; }
.teacher-challenge input { width: 100%; min-height: 48px; padding: 8px; background: #fff; border: 1px solid #d9dee4; border-radius: 10px; font-size: 20px; font-weight: 850; text-align: center; }
.teacher-unlock-error { display: block; margin-top: 7px; color: #c34d45; font-size: 8px; font-weight: 800; }
.teacher-unlock-modal > .btn { width: 100%; margin-top: 13px; }
.modal-x { position: absolute; top: 13px; right: 14px; width: 31px; height: 31px; color: #737983; background: #f1f3f5; border-radius: 50%; font-size: 20px; }
.modal-kicker { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: 2px; }
.modal h2 { margin: 5px 0; font: 500 28px Georgia, serif; }
.modal > p { margin-bottom: 18px; color: var(--muted); font-size: 11px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 7px; margin-top: 18px; }
.new-book-modal { width: min(650px,100%); }
.template-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 18px; }
.template-picker > button { padding: 9px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.template-picker > button.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.09); }
.template-picker b, .template-picker small { display: block; }
.template-picker b { margin-top: 7px; font-size: 10px; }
.template-picker small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.template-preview { position: relative; display: flex; height: 72px; align-items: center; justify-content: center; overflow: hidden; background: #eef1f4; border-radius: 8px; }
.binder-preview { justify-content: flex-start; gap: 7px; padding: 10px; background-color: #edf0f3; background-image: linear-gradient(#68748214 1px,transparent 1px),linear-gradient(90deg,#68748214 1px,transparent 1px); background-size: 10px 10px; }
.binder-preview i { width: 34%; height: 78%; flex: none; background: #fff; border: 1px solid #cfd4da; box-shadow: 0 4px 8px rgba(30,36,44,.16); transform: rotate(-2deg); }
.binder-preview i + i { transform: rotate(2deg); }
.binder-preview em { position: absolute; right: 7px; bottom: 5px; color: var(--accent); }
.binder-preview em:before { content: "→"; font-style: normal; font-size: 13px; }
.classic-preview i { width: 58%; height: 77%; background: #fff; border: 1px solid #cfd4da; border-radius: 3px 9px 9px 3px; box-shadow: inset 7px 0 #e4e7eb; }
.ink-preview { background: #171717; }
.ink-preview:before, .ink-preview:after { content: ""; position: absolute; top: 0; bottom: 0; width: 15px; background: #f25b4b url("../images/portfolio/jackie-side-stamps-v1.png") center top/15px auto repeat-y; }
.ink-preview:before { left: 0; }
.ink-preview:after { right: 0; background-position: center -24px; }
.ink-preview i { width: 63%; height: 70%; background-color: #f7f4ed; background-image: linear-gradient(rgba(82,115,152,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(82,115,152,.16) 1px,transparent 1px); background-size: 10px 10px; border: 2px solid #f25b4b; border-radius: 7px; transform: rotate(-2deg); }
.share-modal { width: min(650px,100%); }
.share-modal > p { margin: 5px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.share-book-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 11px 12px; background: linear-gradient(135deg,rgba(var(--accent-rgb),.08),#f7f8fa); border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 12px; }
.share-book-summary > .material-symbols-rounded { display: grid; width: 34px; height: 34px; place-items: center; color: var(--accent); background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(20,24,31,.08); }
.share-book-summary div { display: flex; min-width: 0; flex-direction: column; }
.share-book-summary b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.share-book-summary small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.permission-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 15px; }
.permission-guide > span { display: grid; grid-template-columns: 24px 1fr; align-items: center; padding: 8px 9px; background: #f5f6f8; border-radius: 10px; }
.permission-guide i { grid-row: 1 / 3; color: #717985; font-size: 17px; }
.permission-guide b { font-size: 9px; }
.permission-guide small { color: var(--muted); font-size: 7.5px; }
.invite-label { display: block; margin-bottom: 6px; color: #646b74; font-size: 9px; font-weight: 800; }
.invite-row { display: grid; grid-template-columns: minmax(150px,1fr) 125px 92px auto; gap: 7px; }
.invite-list { display: flex; flex-direction: column; gap: 6px; margin: 13px 0; }
.invite-item { display: grid; grid-template-columns: minmax(0,1fr) 116px 88px 30px; align-items: center; gap: 7px; padding: 7px 8px; background: #f3f5f7; border: 1px solid transparent; border-radius: 10px; font-size: 10px; }
.invite-item:focus-within { border-color: rgba(var(--accent-rgb),.25); }
.invite-item.expired { background: #fff5f3; border-color: #f0d4cf; opacity: .78; }
.invite-person { display: grid; min-width: 0; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 2px 6px; }
.invite-person i { flex: none; color: #818892; font-size: 17px; }
.invite-person b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-person small { grid-column: 2; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.invite-item select { min-width: 0; padding: 7px 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 8.5px; outline: 0; }
.invite-remove { display: grid; width: 29px; height: 29px; place-items: center; color: #b95049; background: #fff; border-radius: 8px; }
.invite-remove .material-symbols-rounded { font-size: 16px; }
.invite-empty { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0; padding: 13px; color: #8a919a; background: #f7f8f9; border: 1px dashed #d3d7dc; border-radius: 10px; font-size: 9px; }
.invite-empty .material-symbols-rounded { font-size: 17px; }
.invite-privacy { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 9px 10px; color: #5f6873; background: #f5f8f7; border: 1px solid #dce7e2; border-radius: 10px; }
.invite-privacy > .material-symbols-rounded { color: #3b7b60; font-size: 18px; }
.invite-privacy p { font-size: 8px; line-height: 1.45; }
.invite-privacy button { min-height: 32px; padding: 0 9px; color: #a44742; background: #fff; border: 1px solid #ecd1ce; border-radius: 8px; font-size: 8px; font-weight: 800; }
.share-link-box { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.share-link-box label { color: #6d737c; font-size: 9px; font-weight: 800; }
.share-link-box > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 7px; margin-top: 6px; }
.share-link-box small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }

/* Reader */
.reader-overlay { position: fixed; inset: 0; z-index: 700; display: grid; grid-template-columns: 58px minmax(0,1000px) 58px; align-items: center; justify-content: center; padding: 55px 22px 35px; color: #fff; background: #151515; }
.reader-close { position: absolute; top: 18px; right: 22px; width: 37px; height: 37px; color: #17191d; background: #fff; border-radius: 50%; font-size: 23px; }
.reader-brand { position: absolute; top: 22px; left: 25px; font: 500 18px Georgia, serif; }
.reader-journey { position: absolute; top: 14px; left: 50%; z-index: 86; display: grid; width: min(760px,calc(100vw - 260px)); gap: 6px; transform: translateX(-50%); }
.reader-journey > div { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.reader-journey > div::-webkit-scrollbar { display: none; }
.reader-journey button { display: inline-grid; min-width: 74px; height: 34px; grid-template-columns: auto 1fr auto; align-items: center; gap: 3px; padding: 0 8px; color: #ffffff9c; background: #ffffff0d; border: 1px solid #ffffff20; border-radius: 8px; text-align: left; }
.reader-journey button small { font-size: 6px; letter-spacing: .08em; }
.reader-journey button b { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.reader-journey button i { color: #e8bb3f; font-size: 11px; font-variation-settings: "FILL" 1; }
.reader-journey button.on { color: #20242a; background: #fff; border-color: #fff; }
.reader-journey > span { display: block; width: 100%; height: 2px; overflow: hidden; background: #ffffff1c; border-radius: 2px; }
.reader-journey > span i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .35s ease; }
.reader-arrow { width: 46px; height: 68px; margin: auto; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; }
.reader-arrow:disabled { opacity: .2; }
.reader-book.portfolio-flipbook { display: block; width: 100%; height: min(76vh,650px); max-width: 1000px; filter: drop-shadow(0 28px 35px #000) !important; }
.reader-overlay .decor-item.selected { outline: 0; }
.reader-counter { position: absolute; bottom: 14px; left: 50%; color: #bbbfc5; font-size: 10px; transform: translateX(-50%); }
.reader-overlay.jackie-reader-mode { display: block; padding: 0; }
.reader-overlay.jackie-reader-mode .reader-book { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.reader-overlay.jackie-reader-mode .reader-arrow, .reader-overlay.jackie-reader-mode .reader-counter { display: none; }
.reader-overlay.jackie-reader-mode .reader-close, .reader-overlay.jackie-reader-mode .reader-brand { z-index: 80; }
.reader-overlay.jackie-reader-mode .reader-journey { position: fixed; }
.reader-overlay.scrapbook-reader-mode { grid-template-columns: 58px minmax(0,1fr) 58px; background: #e9edf1; }
.reader-overlay.scrapbook-reader-mode .reader-brand { color: #252a30; }
.reader-overlay.scrapbook-reader-mode .reader-book.scrapbook-reader { display: flex; width: 100%; max-width: none; height: min(82vh,700px); padding-right: 12vw; padding-left: 12vw; }
.reader-overlay.scrapbook-reader-mode .reader-arrow { color: #20252b; background: #fff; border-color: #d8dde3; box-shadow: 0 8px 24px rgba(30,36,44,.14); }
.reader-overlay.scrapbook-reader-mode .reader-counter { color: #656d77; }

/* Toasts */
.toast-wrap { position: fixed; right: 19px; bottom: 19px; z-index: 1000; display: flex; flex-direction: column; gap: 7px; }
.toast { max-width: 350px; padding: 10px 13px; color: #fff; background: #202227; border-radius: 10px; box-shadow: var(--shadow); font-size: 11px; animation: toastIn .3s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* Mobile upload is intentionally a focused utility, not the editor. */
@media (max-width: 1120px) {
  .desktop-studio { grid-template-columns: 164px minmax(0,1fr) 0; }
  .desktop-studio.tools-open { grid-template-columns: 164px minmax(0,1fr) 280px; }
  .workspace-head { padding-right: 17px; padding-left: 17px; }
  .template-quick > span, .template-quick b { display: none; }
  .template-quick button { width: 30px; justify-content: center; padding: 0; }
  .book-stage { grid-template-columns: 43px minmax(0,1fr) 43px; margin: 10px; padding: 12px; }
  .book-shell { height: min(calc(100vh - 184px),560px); }
  .jackie-stamp-rail { width: 48px; background-size: 48px auto; }
  .jackie-story { padding: 0 58px; }
  .jackie-book-rig { width: min(86%, 700px); height: min(calc(var(--jackie-stage-h, 100vh) * .82), 650px); }
  .jackie-hero-sticky > .jackie-motion { width: min(88%,700px); }
  .jackie-project-sticky { grid-template-columns: minmax(230px,440px) minmax(160px,240px); gap: 22px; padding-right: 4%; padding-left: 4%; }
  .jackie-project-scene.side-right .jackie-project-sticky { grid-template-columns: minmax(160px,240px) minmax(230px,440px); }
  .piece-main { width: clamp(250px,43vw,380px); }
  .piece-detail { width: clamp(195px,29vw,280px); }
  .piece-mini { width: clamp(165px,24vw,245px); }
}

/* iPad portrait/landscape editor: keep the stage intact and float tools above it. */
@media (min-width: 821px) and (max-width: 1180px), (min-width: 700px) and (max-width: 820px) {
  .desktop-studio,.desktop-studio.tools-open { grid-template-columns: 148px minmax(0,1fr) 0; overflow: hidden; }
  .children-panel { padding-right: 9px; padding-left: 9px; }
  .workspace-head { min-height: 76px; gap: 10px; padding: 12px 14px; }
  .workspace-head h1 { font-size: 22px; }
  .workspace-head p { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-tools { flex: none; gap: 4px; }
  .workspace-tools .template-quick { display: none; }
  .workspace-tools > .btn,.workspace-tools > .upload-btn { width: 44px; min-width: 44px; height: 44px; justify-content: center; padding: 0; }
  .workspace-tools > .btn > span:not(.material-symbols-rounded),.workspace-tools > .upload-btn > span:not(.material-symbols-rounded) { display: none; }
  .workspace-tools > .upload-btn,.workspace-tools > #btnBlankPage,.workspace-tools > #btnStickerTray,.workspace-tools > #btnEasyDesktop,.workspace-tools > #btnToggleTools { display: none; }
  .privacy-note { display: none; }
  .panel-title b { font-size: 11px; white-space: nowrap; }
  .panel-title span { display: block; min-width: 0; }
  .panel-title small { display: block; margin-top: 2px; }
  .round-add { width: 40px; height: 40px; flex: none; border-radius: 12px; }
  .child-item { min-height: 58px; }
  .ipad-mode-switch { display: flex; flex: none; gap: 3px; padding: 4px; background: #eef1f4; border: 1px solid var(--line); border-radius: 13px; }
  .ipad-mode-switch button { display: flex; min-width: 66px; min-height: 38px; align-items: center; justify-content: center; gap: 4px; color: #727a84; border-radius: 9px; }
  .ipad-mode-switch button.on { color: #fff; background: #17191d; box-shadow: 0 5px 13px rgba(20,24,30,.18); }
  .ipad-mode-switch .material-symbols-rounded { font-size: 17px; }
  .ipad-mode-switch b { font-size: 9px; }
  .tools-open .ipad-mode-switch { opacity: 0; pointer-events: none; transform: translateY(-5px); }
  .work-mode-switch button { min-width: 58px; min-height: 40px; justify-content: center; padding: 0 6px; }
  .work-mode-switch b { font-size: 8px; }
  .history-tools { display: none; }
  .inspector { position: absolute; top: 0; right: 0; bottom: 0; z-index: 160; width: min(390px,48vw); padding: 20px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); border-left: 1px solid var(--line); box-shadow: -18px 0 42px rgba(19,23,30,.18); transform: translateX(0); transition: transform .28s var(--ease),opacity .2s var(--ease); }
  .tools-closed .inspector { width: min(390px,48vw); padding: 20px; overflow: auto; border-left: 1px solid var(--line); opacity: 0; pointer-events: none; transform: translateX(105%); }
  .inspector-head { top: -20px; margin: -20px -20px 18px; padding: 16px 20px; }
  .inspector-head button { width: 44px; height: 44px; }
  .inspector-tabs { position: sticky; top: 57px; z-index: 4; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: -5px 0 18px; padding: 5px; background: rgba(242,244,247,.96); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(12px); }
  .inspector-tabs button { display: flex; min-width: 0; min-height: 48px; align-items: center; justify-content: center; flex-direction: column; gap: 2px; color: #737b85; border-radius: 10px; }
  .inspector-tabs button.on { color: var(--accent); background: #fff; box-shadow: 0 4px 12px rgba(24,29,36,.09); }
  .inspector-tabs .material-symbols-rounded { font-size: 20px; }
  .inspector-tabs b { font-size: 9px; }
  .inspector.section-basic .inspector-section:not(.section-basic),.inspector.section-decorate .inspector-section:not(.section-decorate),.inspector.section-style .inspector-section:not(.section-style) { display: none !important; }
  .field { margin-bottom: 18px; }
  .field > span,.field > label { font-size: 12px; }
  .field input,.field textarea,.field select { min-height: 44px; padding: 11px 12px; font-size: 16px; }
  .choice-grid button,.sticker-row button,.paper-row button,.decor-palette button,.photo-fit button,.sticker-mode button,.remove-decor,.theme-reset { min-height: 44px; font-size: 11px; }
  .doodle-sticker-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 330px; }
  .sticker-tile { min-height: 82px; }
  .book-stage { margin: 8px 8px 82px; }
  .book-stage.scroll-mode { border-radius: 14px; }
  .page-strip { max-width: 82%; bottom: 84px; }
  .ipad-creative-dock { position: absolute; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 14px; z-index: 180; display: grid; min-height: 66px; grid-template-columns: repeat(7,minmax(50px,76px)) minmax(72px,104px); align-items: stretch; justify-content: center; gap: 5px; padding: 7px; background: rgba(255,255,255,.95); border: 1px solid rgba(39,45,53,.13); border-radius: 20px; box-shadow: 0 16px 44px rgba(18,23,30,.2); backdrop-filter: blur(18px); }
  .ipad-creative-dock > button { display: flex; min-width: 0; min-height: 52px; align-items: center; justify-content: center; flex-direction: column; gap: 2px; color: #4e5660; border-radius: 14px; touch-action: manipulation; }
  .ipad-creative-dock > button:active { color: #fff; background: var(--accent); transform: scale(.97); }
  .ipad-creative-dock > button:disabled { opacity: .28; }
  .ipad-creative-dock > button.on { color: #fff; background: linear-gradient(135deg,var(--accent),#8755cf); box-shadow: 0 6px 16px rgba(var(--accent-rgb),.22); }
  .ipad-creative-dock .material-symbols-rounded { font-size: 23px; }
  .ipad-creative-dock > button b { font-size: 9px; }
  .child-work-mode .ipad-creative-dock { grid-template-columns: repeat(6,minmax(50px,78px)) minmax(74px,106px); }
  .child-work-mode #btnIpadLayers { display: none; }
  .ipad-save-state { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; color: #627068; background: #f1f7f3; border-radius: 14px; font-size: 9px; white-space: nowrap; }
  .ipad-save-state i { width: 8px; height: 8px; flex: none; background: #52a36d; border-radius: 50%; }
  .ipad-save-state.saving i { background: #4b74e7; animation: pulse 1s infinite; }
  .ipad-save-state.error i,.ipad-save-state.conflict i { background: #dc5d53; }
  .layer-row { min-height: 50px; }
  .layer-order-actions button,.layer-item-actions button { min-height: 48px; }
  .easy-primary-actions > button { min-height: 96px; }
  .easy-theme-packs button { min-height: 76px; }
  .easy-category-packs button { min-height: 62px; }
  .kid-level-picker button { min-height: 58px; }
  .story-prompt-row button,.mission-actions button { min-height: 48px; }
  .celebration-reactions button { min-height: 72px; }
  .easy-tutorial { right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); }
}

@media (max-width: 699px), (max-width: 950px) and (max-height: 560px) {
  body { overflow: auto; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .app { min-height: 100vh; height: auto; background: #f5f6f8; }
  .appbar { position: sticky; top: 0; height: 60px; padding: 0 12px; }
  .appbar-left .icon-btn { display: none; }
  .brand-lockup b { font-size: 12px; }
  .brand-lockup small { display: none; }
  .brand-mini { width: 33px; height: 33px; }
  .sync-state { display: none; }
  .appbar-actions { display: none; }
  .mobile-uploader { width: 100%; max-width: 620px; margin: 0 auto; padding: 14px 14px calc(34px + env(safe-area-inset-bottom)); }
  .mobile-mode-tabs { position: sticky; top: 59px; z-index: 110; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 -2px 21px; padding: 7px; background: rgba(244,245,247,.94); border: 1px solid #dfe3e8; border-radius: 18px; box-shadow: 0 10px 26px rgba(24,29,36,.1); backdrop-filter: blur(16px); }
  .mobile-mode-tabs button { display: grid; min-height: 74px; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; padding: 11px; color: #777f89; background: transparent; border: 1px solid transparent; border-radius: 13px; text-align: left; }
  .mobile-mode-tabs button > .material-symbols-rounded { grid-row: 1 / 3; align-self: center; font-size: 27px; }
  .mobile-mode-tabs button b { align-self: end; font-size: 11px; }
  .mobile-mode-tabs button small { margin-top: 2px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-mode-tabs button.on { color: #fff; background: #17191d; border-color: #17191d; box-shadow: 0 7px 17px rgba(20,24,30,.2); }
  .mobile-mode-tabs button.on > .material-symbols-rounded { color: #fff; }
  .mobile-mode-tabs button:disabled:not(.on) { opacity: .38; }
  .mobile-mode-pane { animation: mobilePaneIn .28s ease both; }
  @keyframes mobilePaneIn { from { opacity: 0; transform: translateY(7px); } }
  .mobile-hero { padding: 7px 5px 18px; }
  .mobile-hero h1 { font: 500 31px/1.05 Georgia, serif; }
  .mobile-hero p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }
  .mobile-card { padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 32px rgba(20,24,31,.07); }
  .mobile-card .field > span { font-size: 10px; }
  .mobile-card .field input, .mobile-card .field textarea, .mobile-card .field select { padding: 12px; font-size: 16px; }
  .mobile-step { display: flex; align-items: center; gap: 7px; margin: 4px 0 9px; color: #555d67; }
  .mobile-step:not(:first-child) { margin-top: 18px; }
  .mobile-step > span { display: grid; width: 22px; height: 22px; place-items: center; color: #fff; background: #17191d; border-radius: 50%; font-size: 9px; font-weight: 850; }
  .mobile-step b { font-size: 11px; }
  .mobile-step em { margin-left: auto; color: #9a9fa7; font-size: 8px; font-style: normal; }
  .mobile-child-field { margin-bottom: 0; }
  .mobile-permission-note { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 2px; padding: 11px; color: #6c5c42; background: #fff8e9; border: 1px solid #eedeb8; border-radius: 11px; }
  .mobile-permission-note > .material-symbols-rounded { font-size: 19px; }
  .mobile-permission-note div { display: flex; flex-direction: column; }
  .mobile-permission-note b { font-size: 9.5px; }
  .mobile-permission-note small { margin-top: 2px; font-size: 8px; line-height: 1.45; }
  .mobile-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-source-actions.preview-hidden { display: none; }
  .mobile-source-actions button { display: flex; min-height: 118px; flex-direction: column; align-items: center; justify-content: center; color: #555d67; background: #f7f8fa; border: 1.5px dashed #bfc5cd; border-radius: 14px; }
  .mobile-source-actions button:first-child { background: linear-gradient(145deg,#fff8f6,#f8f5f4); border-color: rgba(var(--accent-rgb),.38); }
  .mobile-source-actions button:disabled { opacity: .45; }
  .mobile-source-actions .material-symbols-rounded { margin-bottom: 7px; color: var(--accent); font-size: 32px; }
  .mobile-source-actions b { font-size: 11px; }
  .mobile-source-actions small { margin-top: 3px; color: #9399a2; font-size: 8px; }
  .mobile-preview { position: relative; overflow: hidden; padding-bottom: 50px; background: #e8ebef; border: 1px solid #dce0e5; border-radius: 15px; }
  .mobile-preview-canvas { display: grid; height: 278px; place-items: center; overflow: hidden; background: #e8ebef; }
  .mobile-preview img { width: 100%; height: 100%; object-fit: contain; transition: filter .18s ease; }
  #btnClearMobile { position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; color: #fff; background: rgba(20,22,25,.78); border-radius: 50%; font-size: 20px; }
  .mobile-photo-meta { position: absolute; right: 9px; bottom: 58px; padding: 5px 8px; color: #fff; background: rgba(20,22,25,.7); border-radius: 7px; font-size: 8px; backdrop-filter: blur(6px); }
  .mobile-photo-presets { position: absolute; right: 8px; bottom: 8px; left: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
  .mobile-photo-presets button { min-height: 34px; padding: 5px; color: #626a74; background: #fff; border: 1px solid #d9dde2; border-radius: 9px; font-size: 9px; font-weight: 800; }
  .mobile-photo-presets button.on { color: #fff; background: #17191d; border-color: #17191d; }
  .mobile-upload-state { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 9px 10px; color: #737a84; background: #f5f6f8; border-radius: 10px; font-size: 8.5px; line-height: 1.45; }
  .mobile-upload-state .material-symbols-rounded { flex: none; font-size: 16px; }
  .mobile-upload-state.processing .material-symbols-rounded,.mobile-upload-state.saving .material-symbols-rounded { color: #3155d8; animation: spin 1s linear infinite; }
  .mobile-upload-state.ready,.mobile-upload-state.saved { color: #397458; background: #eef8f2; }
  .mobile-upload-state.queued { color: #8a621e; background: #fff8e9; }
  .mobile-upload-state.error { color: #ad4941; background: #fff1ef; }
  .mobile-batch-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-top: 10px; padding: 10px; color: #2e4b7e; background: #edf4ff; border: 1px solid #cfddf6; border-radius: 12px; }
  .mobile-batch-status > .material-symbols-rounded { font-size: 21px; }
  .mobile-batch-status > div { display: grid; gap: 3px; min-width: 0; }
  .mobile-batch-status b { font-size: 9px; }
  .mobile-batch-status small { color: #64728a; font-size: 7px; }
  .mobile-batch-status i { display: block; width: 100%; height: 3px; overflow: hidden; background: #cbd8ed; border-radius: 4px; }
  .mobile-batch-status i span { display: block; width: 0; height: 100%; background: #3155d8; transition: width .25s ease; }
  .mobile-batch-status > button { min-height: 36px; padding: 0 9px; color: #5f6877; background: #fff; border: 1px solid #d7e0ee; border-radius: 8px; font-size: 8px; }
  .mobile-save { width: 100%; min-height: 48px; font-size: 13px; }
  .mobile-recent { padding: 22px 4px; }
  .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .section-head b { font-size: 12px; }
  .section-head span { color: var(--muted); font-size: 9px; }
  #mobileRecentList { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .mobile-recent-item { position: relative; overflow: hidden; aspect-ratio: 1; background: #e8ebef; border-radius: 11px; }
  .mobile-recent-item img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-recent-caption { position: absolute; inset: auto 0 0; overflow: hidden; padding: 18px 7px 6px; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.72)); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-recent-placeholder { display: grid; height: 100%; place-items: center; color: #a2a8b0; font-size: 27px; }
  .mobile-recent-item i { position: absolute; top: 5px; left: 5px; padding: 3px 5px; color: #745216; background: #fff0bd; border-radius: 5px; font-size: 6.5px; font-style: normal; }
  .mobile-recent-empty { grid-column: 1 / -1; display: grid; min-height: 112px; place-items: center; align-content: center; gap: 3px; color: #90969e; background: #fff; border: 1px dashed #d5d9de; border-radius: 12px; text-align: center; }
  .mobile-recent-empty > .material-symbols-rounded { color: #a7adb5; font-size: 25px; }
  .mobile-recent-empty b { color: #666d76; font-size: 9px; }
  .mobile-recent-empty small { font-size: 7.5px; }
  .mobile-view-hero { padding-bottom: 16px; }
  .mobile-view-card { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 15px 38px rgba(20,24,31,.09); }
  .mobile-view-card > .field { margin-bottom: 14px; }
  .mobile-view-card > .field > span { font-size: 10px; }
  .mobile-view-card select { min-height: 46px; padding: 11px 12px; font-size: 16px; }
  .mobile-view-cover { --mobile-accent: var(--accent); position: relative; display: flex; min-height: 354px; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 28px; color: #20242a; background: #fff; border: 1px solid #dce1e7; border-radius: 15px; box-shadow: 0 17px 27px rgba(27,33,41,.16); isolation: isolate; }
  .mobile-view-cover > small { position: absolute; top: 20px; left: 23px; z-index: 3; color: var(--mobile-accent); font: 700 7px Georgia,serif; letter-spacing: 1.8px; }
  .mobile-view-cover h2 { position: relative; z-index: 3; margin: 15px 0 3px; font: 700 38px/.9 "Gaegu",cursive; }
  .mobile-view-cover p { position: relative; z-index: 3; overflow: hidden; margin: 0; color: #747b84; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-view-preview-art { position: relative; z-index: 2; display: grid; min-height: 205px; place-items: center; overflow: hidden; background: #f2f4f6; border: 8px solid #fff; outline: 1px solid #d9dee4; box-shadow: 0 10px 18px rgba(25,30,37,.12); transform: rotate(-1deg); }
  .mobile-view-preview-art img { width: 100%; height: 205px; object-fit: contain; }
  .mobile-view-preview-art > .material-symbols-rounded { color: var(--mobile-accent); font-size: 60px; }
  .mobile-view-cover.template-binder { background-color: #fff; background-image: radial-gradient(circle at 2px 2px,rgba(63,71,81,.12) 0 .8px,transparent 1px); background-size: 18px 18px; }
  .mobile-view-cover.template-binder:after { content: "→"; position: absolute; right: 17px; bottom: 18px; color: var(--mobile-accent); font: 700 20px Georgia,serif; }
  .mobile-view-cover.template-classic { margin: 3px 11px; background: var(--mobile-accent); border-radius: 5px 20px 20px 5px; box-shadow: inset 12px 0 18px rgba(0,0,0,.16),0 18px 28px rgba(27,33,41,.22); }
  .mobile-view-cover.template-classic > small { color: rgba(255,255,255,.8); }
  .mobile-view-cover.template-classic h2,.mobile-view-cover.template-classic p { display: inline-block; width: fit-content; padding: 4px 8px; background: rgba(255,255,255,.9); }
  .mobile-view-cover.template-classic .mobile-view-preview-art { border-radius: 3px; }
  .mobile-view-cover.template-inkframe { color: #f7f4ed; background-color: #1d1d1d; background-image: radial-gradient(circle at 2px 2px,rgba(255,255,255,.08) 0 1px,transparent 1.5px); background-size: 7px 7px; border: 8px solid var(--mobile-accent); border-radius: 24px; }
  .mobile-view-cover.template-inkframe:before,.mobile-view-cover.template-inkframe:after { content: "✦ ◇ ✿ ◇"; position: absolute; top: 0; bottom: 0; z-index: 1; width: 17px; padding-top: 24px; color: #181818; background: var(--mobile-accent); font: 13px/2.2 Georgia,serif; text-align: center; word-break: break-all; }
  .mobile-view-cover.template-inkframe:before { left: 0; }
  .mobile-view-cover.template-inkframe:after { right: 0; }
  .mobile-view-cover.template-inkframe > small { left: 31px; color: var(--mobile-accent); }
  .mobile-view-cover.template-inkframe h2 { color: #f7f4ed; }
  .mobile-view-cover.template-inkframe p { color: #c9c4bb; }
  .mobile-view-cover.empty { min-height: 260px; align-items: center; justify-content: center; gap: 8px; color: #8e959e; border-style: dashed; box-shadow: none; text-align: center; }
  .mobile-view-cover.empty > .material-symbols-rounded { font-size: 48px; }
  .mobile-view-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px 11px; }
  .mobile-view-summary > div { display: flex; min-width: 0; flex-direction: column; }
  .mobile-view-summary b { overflow: hidden; color: #282d34; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-view-summary small { margin-top: 2px; color: #9298a1; font-size: 8px; }
  .mobile-view-summary > span { flex: none; padding: 6px 8px; color: #5e6570; background: #f0f2f4; border-radius: 999px; font-size: 7px; font-weight: 750; }
  .mobile-view-artworks { display: flex; gap: 7px; overflow-x: auto; padding: 3px 1px 11px; scroll-snap-type: x proximity; }
  .mobile-view-thumb { position: relative; width: 72px; height: 72px; flex: 0 0 72px; overflow: hidden; background: #edf0f3; border: 1px solid #dde1e6; border-radius: 10px; scroll-snap-align: start; }
  .mobile-view-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-view-thumb > .material-symbols-rounded { color: #a6acb4; }
  .mobile-view-thumb i { position: absolute; right: 4px; bottom: 4px; padding: 2px 4px; color: #fff; background: rgba(20,23,28,.72); border-radius: 4px; font-size: 6px; font-style: normal; }
  .mobile-view-empty { width: 100%; padding: 20px; color: #9298a1; background: #f5f6f8; border-radius: 10px; font-size: 8px; text-align: center; }
  .mobile-open-reader { width: 100%; min-height: 50px; font-size: 12px; }
  .modal { padding: 22px; }
  .invite-row { grid-template-columns: 1fr; }
  .invite-item { grid-template-columns: minmax(0,1fr) 1fr 1fr 34px; }
  .invite-person { grid-column: 1 / -1; }
  .invite-privacy { grid-template-columns: 22px 1fr; }
  .invite-privacy button { grid-column: 1 / -1; }
  .invite-person i { display: none; }
  .share-link-box > div { grid-template-columns: minmax(0,1fr) auto; }
  .share-link-box > div input { grid-column: 1 / -1; }
  .template-picker { grid-template-columns: 1fr; }
  .template-preview { height: 105px; }
  .reader-overlay { grid-template-columns: 36px minmax(0,1fr) 36px; padding: 70px 4px 38px; }
  .reader-journey { top: 45px; width: calc(100vw - 72px); }
  .reader-journey button { min-width: 68px; height: 30px; }
  .reader-book.portfolio-flipbook { height: 70vh; }
  .reader-overlay.scrapbook-reader-mode { grid-template-columns: 36px minmax(0,1fr) 36px; }
  .reader-overlay.scrapbook-reader-mode .reader-book.scrapbook-reader { height: 72vh; min-height: 0; padding: 20px 8vw 26px; gap: 24px; }
  .reader-overlay.scrapbook-reader-mode .scrapbook-card { width: 82vw; min-width: min(82vw,430px); height: 66vh; min-height: 340px; }
  .reader-arrow { width: 33px; height: 56px; }
  .reader-brand { left: 15px; }
  .reader-close { right: 14px; }
  .jackie-stamp-rail { width: 34px; background-size: 34px auto; }
  .jackie-story { padding: 0 38px; }
  .jackie-book-rig { width: 88%; height: min(calc(var(--jackie-stage-h, 100vh) * .78), 610px); }
  .jackie-book-top .jackie-hero-board { min-height: 0; grid-template-columns: .92fr 1.08fr; border-width: 7px; border-radius: 28px 28px 4px 4px; }
  .jackie-book-top .jackie-hero-copy { padding: 18px 7px 18px 22px; }
  .jackie-book-top .jackie-hero-copy h2 { font-size: min(calc(var(--portfolio-title-size, 48) * .78px), 48px); }
  .jackie-book-top .jackie-hero-copy p { font-size: min(calc(var(--portfolio-body-size, 17) * .85px), 17px); }
  .jackie-book-top .jackie-hero-copy strong { margin-top: 9px; font-size: 23px; }
  .jackie-book-top .jackie-hero-art { padding: 12px 15px 12px 3px; }
  .jackie-book-top .jackie-hero-art img { height: 210px; }
  .jackie-book-bottom { border-width: 7px; border-top-width: 4px; border-radius: 4px 4px 28px 28px; }
  .jackie-bottom-paper { padding: 20px 24px; background-size: 26px 26px; }
  .jackie-belief-note { padding: 9px 11px; font-size: min(calc(var(--portfolio-body-size, 17) * .9px), 16px); }
  .jackie-hero-sticky > .jackie-motion { width: 88%; }
  .jackie-hero-board { min-height: calc(var(--jackie-stage-h, 100vh) * .7); grid-template-columns: 1fr; border-width: 7px; border-radius: 26px; }
  .jackie-hero-copy { padding: 34px 28px 12px; }
  .jackie-hero-copy strong { margin-top: 18px; }
  .jackie-hero-art { padding: 8px 28px 34px; }
  .jackie-hero-art img { height: calc(var(--jackie-stage-h, 100vh) * .32); }
  .jackie-torn-caption { right: -4%; bottom: -42px; width: 180px; padding: 18px 20px 23px; font-size: 17px; }
  .jackie-collage-label { top: 13%; width: 210px; }
  .jackie-sample-cloud > .jackie-motion { width: 44vw; }
  .jackie-sample-cloud > :nth-child(1) { top: 33%; left: 0; }
  .jackie-sample-cloud > :nth-child(2) { right: 0; bottom: 17%; }
  .jackie-sample-cloud > :nth-child(3) { bottom: 4%; left: 19%; }
  .jackie-project-sticky, .jackie-project-scene.side-right .jackie-project-sticky { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; padding: 80px 48px; }
  .jackie-project-sticky > article, .jackie-project-scene.side-right article { width: min(92%,420px); }
  .jackie-project-sticky > aside, .jackie-project-scene.side-right aside { width: 72%; margin-top: -34px; align-self: flex-end; }
  .jackie-art-page { border-width: 5px; border-radius: 17px; }
  .jackie-assembly-scene { min-height: calc(var(--jackie-stage-h, 100vh) * 2.15); }
  .jackie-assembly-sticky { min-height: min(500px,var(--jackie-stage-h,100vh)); }
  .piece-main { width: min(calc(var(--jackie-stage-w, 100vw) * .72),350px); }
  .piece-detail { width: min(calc(var(--jackie-stage-w, 100vw) * .55),270px); }
  .piece-mini { width: min(calc(var(--jackie-stage-w, 100vw) * .48),235px); }
  .piece-note { width: min(calc(var(--jackie-stage-w, 100vw) * .58),270px); padding: 25px 24px 31px; }
  .piece-doodle { width: 92px; height: 92px; }
  .jackie-detail-crop { height: 160px; }
  .jackie-mini-art { height: 115px; }
  .toast-wrap { right: 14px; bottom: 16px; left: 14px; }
  .toast { max-width: none; }
}

/* iPad portrait must remain a real editor; phones keep the two-mode upload/view UI. */
@media (min-width: 700px) and (max-width: 820px) and (min-height: 700px) {
  body { overflow: hidden; }
  .mobile-only { display: none !important; }
  .desktop-studio.desktop-only { display: grid !important; grid-template-columns: 132px minmax(0,1fr) 0; }
  .desktop-studio.desktop-only.tools-open { grid-template-columns: 132px minmax(0,1fr) 0; }
  .app { height: 100vh; height: 100dvh; }
  .appbar { position: relative; padding: 0 12px; }
  .appbar-left .icon-btn { display: grid; }
  .brand-lockup small { display: block; }
  .sync-state,.appbar-actions { display: flex; }
  .appbar-actions .desktop-only { display: inline-flex !important; }
  .appbar-actions #btnExport,.appbar-actions #btnShare { display: none !important; }
  .workspace-head { display: flex !important; }
  .workspace-head > div:first-child { min-width: 0; }
  .workspace-head h1 { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-head p { max-width: 185px; }
  .children-panel { display: block !important; }
  .book-stage { display: grid !important; }
  .book-stage.scroll-mode { display: block !important; }
  .book-shell { min-height: 360px; }
  .turn-btn { display: grid !important; }
  .page-strip { display: flex !important; }
  .page-strip.hide,.book-stage.hide { display: none !important; }
  .inspector { display: block !important; }
  .inspector { top: auto; right: 0; bottom: 0; left: 132px; width: auto; height: min(58vh,590px); height: min(58dvh,590px); border-top: 1px solid var(--line); border-left: 0; box-shadow: 0 -18px 44px rgba(19,23,30,.2); transform: translateY(0); }
  .tools-closed .inspector { right: 0; left: 132px; width: auto; height: min(58vh,590px); height: min(58dvh,590px); border-top: 1px solid var(--line); border-left: 0; transform: translateY(105%); }
}

/* Explicit iPad matrix: split view, 834 portrait, and short landscape. */
@media (min-width: 821px) and (max-width: 900px) and (orientation: portrait) {
  .desktop-studio.desktop-only,.desktop-studio.desktop-only.tools-open { grid-template-columns: 136px minmax(0,1fr) 0; }
  .workspace-head { min-height: 70px; }
  .workspace-head p { display: none; }
  .book-stage { grid-template-columns: 38px minmax(0,1fr) 38px; margin-right: 7px; margin-left: 7px; padding-right: 7px; padding-left: 7px; }
  .book-shell { height: min(calc(var(--app-height,100dvh) - 230px),610px); min-height: 380px; }
  .inspector,.tools-closed .inspector { width: min(430px,62vw); }
  .child-item span:nth-child(2) small,.child-item > small { display: none; }
  .ipad-creative-dock { right: 9px; left: 9px; grid-template-columns: repeat(7,minmax(46px,1fr)) minmax(64px,1.25fr); }
  .ipad-creative-dock > button b { font-size: 8px; }
}

@media (min-width: 700px) and (max-width: 820px) and (orientation: portrait) {
  .ipad-creative-dock { right: 9px; left: 9px; grid-template-columns: repeat(4,1fr); }
  .ipad-save-state { grid-column: span 2; min-height: 46px; }
  .book-stage { margin-bottom: 132px; }
  .page-strip { bottom: 134px; }
}

@media (min-width: 700px) and (max-width: 1180px) and (orientation: landscape) and (max-height: 820px) {
  .appbar { height: 54px; }
  .workspace-head { min-height: 62px; padding-top: 8px; padding-bottom: 8px; }
  .workspace-head p { display: none; }
  .book-stage { margin-bottom: 70px; }
  .book-shell { height: min(calc(var(--app-height,100dvh) - 180px),540px); min-height: 300px; }
  .ipad-creative-dock { min-height: 58px; padding: 5px; }
  .ipad-creative-dock > button { min-height: 46px; }
  .ipad-creative-dock .material-symbols-rounded { font-size: 20px; }
  .page-strip { bottom: 72px; }
}

html[data-device-profile="ipad-split"] .desktop-studio.desktop-only,
html[data-device-profile="ipad-split"] .desktop-studio.desktop-only.tools-open { grid-template-columns: 86px minmax(0,1fr) 0; }
html[data-device-profile="ipad-split"] .brand-lockup small,
html[data-device-profile="ipad-split"] .workspace-head p,
html[data-device-profile="ipad-split"] .work-mode-switch { display: none; }
html[data-device-profile="ipad-split"] .children-panel { padding-right: 7px; padding-left: 7px; }
html[data-device-profile="ipad-split"] .panel-title { justify-content: center; }
html[data-device-profile="ipad-split"] .panel-title > span,
html[data-device-profile="ipad-split"] .child-item span:nth-child(2),
html[data-device-profile="ipad-split"] .child-item > small { display: none; }
html[data-device-profile="ipad-split"] .child-item { min-height: 54px; justify-content: center; padding: 7px; }
html[data-device-profile="ipad-split"] .child-avatar { width: 42px; height: 42px; flex: 0 0 42px; }
html[data-device-profile="ipad-split"] .ipad-creative-dock { right: 8px; left: 8px; grid-template-columns: repeat(4,1fr); }
html[data-device-profile="ipad-split"] .ipad-save-state { display: none; }
html[data-device-profile="ipad-split"] .inspector,
html[data-device-profile="ipad-split"] .tools-closed .inspector { right: 0; left: 86px; width: auto; }

/* Family review, recovery, performance and accessibility gate */
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 2000; padding: 11px 15px; color: #fff; background: #17191d; border-radius: 10px; box-shadow: 0 8px 22px #0004; transform: translateY(-150%); transition: transform .16s ease; }
.skip-link:focus { transform: translateY(0); }
:where(button,a,input,textarea,select,[tabindex]):focus-visible { outline: 3px solid color-mix(in srgb,var(--accent,#ff5b50) 72%,white); outline-offset: 2px; }
.approved-feedback { position: relative; z-index: 4; display: flex; max-height: 54px; gap: 5px; margin-top: 5px; overflow: hidden; }
.approved-feedback > span { display: flex; min-width: 0; align-items: center; gap: 4px; padding: 4px 7px; color: color-mix(in srgb,var(--jackie-text,#202020) 86%,transparent); background: color-mix(in srgb,var(--jackie-paper,#fff) 86%,#ffe58a); border: 1px solid color-mix(in srgb,var(--jackie-text,#202020) 13%,transparent); border-radius: 999px; font: 700 9px/1.15 var(--portfolio-font,"Gaegu"),cursive; }
.approved-feedback i { font-style: normal; }
.approved-feedback q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approved-feedback q:before,.approved-feedback q:after { content: none; }
.feedback-review-panel > p,.version-panel > p { margin: 0 0 9px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.feedback-review-list,.version-list { display: grid; gap: 7px; }
.feedback-review-item { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.feedback-review-item.approved { background: #f4fbf6; }
.feedback-reaction { display: grid; width: 31px; height: 31px; place-items: center; background: #fff5cf; border-radius: 50%; font-size: 16px; }
.feedback-review-item > div:nth-child(2) { min-width: 0; }
.feedback-review-item b,.feedback-review-item q,.feedback-review-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-review-item b { font-size: 9px; }
.feedback-review-item q { margin: 2px 0; color: #353941; font: 700 12px/1.25 "Gaegu",cursive; }
.feedback-review-item q:before,.feedback-review-item q:after { content: none; }
.feedback-review-item small { color: var(--muted); font-size: 7px; }
.feedback-review-actions { display: flex; align-items: center; gap: 3px; }
.feedback-review-actions button { display: inline-flex; min-height: 34px; align-items: center; gap: 2px; padding: 0 7px; color: #126b4d; background: #e7f8ef; border-radius: 8px; font-size: 8px; font-weight: 800; }
.feedback-review-actions button.reject { width: 34px; justify-content: center; padding: 0; color: #a33f46; background: #fff0f1; }
.feedback-review-actions .material-symbols-rounded { font-size: 15px; }
.approved-label { padding: 5px; color: #177352; font-size: 8px; font-weight: 800; }
.feedback-review-empty,.version-empty { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 6px; color: var(--muted); background: #f7f8fa; border: 1px dashed var(--line); border-radius: 10px; }
.version-create { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; color: #fff; background: #282c33; border-radius: 10px; }
.version-row { display: grid; width: 100%; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.version-row > span:nth-child(2) { min-width: 0; }
.version-row b,.version-row small { display: block; }
.version-row b { font-size: 9px; }
.version-row small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.version-row em { color: var(--accent); font-size: 8px; font-style: normal; font-weight: 800; }
.sync-recovery-panel > span,.usability-panel > span,.release-readiness > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sync-recovery-panel > span em,.usability-panel > span em,.release-readiness > span em { color: var(--accent); font-size: 8px; font-style: normal; font-weight: 850; }
.sync-recovery-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.sync-recovery-summary > span { display: flex; min-height: 36px; align-items: center; gap: 5px; padding: 7px; color: #59616c; background: #f6f7f9; border-radius: 9px; }
.sync-recovery-summary i { font-size: 16px; }
.sync-recovery-summary b { font-size: 8px; }
.conflict-recovery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; padding: 8px; background: #fff8e9; border: 1px solid #ecd7a5; border-radius: 10px; }
.conflict-recovery-actions p { grid-column: 1 / -1; color: #755820; font-size: 8px; line-height: 1.45; }
.conflict-recovery-actions button,.retry-pending,.run-release-check { display: flex; min-height: 39px; align-items: center; justify-content: center; gap: 5px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: 8px; font-weight: 800; }
.conflict-recovery-actions button:first-of-type { color: #245a91; }
.conflict-recovery-actions button:last-of-type { color: #3c744f; }
.retry-pending { width: 100%; margin-top: 7px; color: #4f5965; }
.retry-pending:disabled { opacity: .4; }
.usability-panel > p { margin: 6px 0 8px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.ux-milestone-list { display: grid; gap: 5px; }
.ux-milestone-list > span { display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 6px 7px; color: #747c87; background: #f7f8fa; border-radius: 8px; }
.ux-milestone-list > span.done { color: #17684e; background: #eef9f3; }
.ux-milestone-list i { font-size: 16px; }
.ux-milestone-list b { font-size: 8px; }
#btnResetUxMilestones { width: 100%; min-height: 36px; margin-top: 7px; color: #66707c; background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: 8px; font-weight: 800; }
.device-profile-status { margin: 7px 0; padding: 7px 8px; color: #56616e; background: #f5f7fa; border-radius: 8px; font-size: 7.5px; font-weight: 750; }
.device-matrix { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin-bottom: 7px; }
.device-matrix span { padding: 5px 2px; color: #6d7580; background: #eef1f4; border-radius: 6px; font-size: 7px; font-weight: 850; text-align: center; }
.device-matrix span.on { color: #fff; background: var(--accent); }
.readiness-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.readiness-list > span { display: flex; min-height: 36px; align-items: center; gap: 5px; padding: 6px; background: #f7f8fa; border-radius: 8px; }
.readiness-list i { color: #8b929c; font-size: 16px; }
.readiness-list .ready i { color: #168b67; }
.readiness-list b { font-size: 8px; line-height: 1.25; }
#performanceStatus { display: block; margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.portfolio-index-trigger { white-space: nowrap; }
.portfolio-index-panel { position: absolute; top: 76px; right: 18px; bottom: 92px; z-index: 132; display: grid; width: min(560px,calc(100% - 190px)); min-height: 0; grid-template-rows: auto auto auto minmax(0,1fr) auto; padding: 18px; color: #25282e; background: rgba(255,255,255,.985); border: 1px solid #dfe3e8; border-radius: 20px; box-shadow: 0 24px 70px rgba(25,31,40,.28); backdrop-filter: blur(18px); }
.portfolio-index-panel.hide { display: none; }
.portfolio-index-panel > header,.portfolio-index-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portfolio-index-panel > header { padding-bottom: 12px; border-bottom: 1px solid #e5e8ed; }
.portfolio-index-panel > header small { display: block; color: #78818d; font-size: 9px; font-weight: 800; }
.portfolio-index-panel > header h2 { margin: 2px 0 0; font: 800 23px/1.1 var(--portfolio-font,"Gaegu"),sans-serif; }
.portfolio-index-panel > header button { display: grid; width: 42px; height: 42px; place-items: center; background: #f2f4f7; border-radius: 12px; }
.portfolio-index-actions { display: grid; grid-template-columns: minmax(160px,.8fr) minmax(210px,1.2fr); gap: 8px; padding: 12px 0 9px; }
.portfolio-index-actions > button,.portfolio-index-actions > label { display: flex; min-width: 0; min-height: 46px; align-items: center; gap: 8px; padding: 7px 10px; background: #f5f7fa; border: 1px solid #e4e8ed; border-radius: 12px; }
.portfolio-index-actions > button { text-align: left; }
.portfolio-index-actions > button > span { color: var(--accent); }
.portfolio-index-actions b,.portfolio-index-actions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-index-actions b { font-size: 10px; }
.portfolio-index-actions small { color: #7c8490; font-size: 8px; }
.portfolio-index-actions label input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 11px; }
.portfolio-chapter-nav { display: flex; gap: 5px; padding: 0 0 10px; overflow-x: auto; scrollbar-width: thin; }
.portfolio-chapter-nav button { min-width: 52px; min-height: 34px; padding: 0 9px; color: #646d79; background: #f2f4f7; border: 1px solid transparent; border-radius: 9px; font-size: 9px; font-weight: 850; }
.portfolio-chapter-nav button.on { color: #fff; background: var(--accent); }
.portfolio-index-list { min-height: 0; overflow: auto; border: 1px solid #e5e8ed; border-radius: 13px; background: #fafbfc; }
.portfolio-index-list button { display: grid; width: 100%; min-height: 48px; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 7px 11px; text-align: left; border-bottom: 1px solid #eceff2; }
.portfolio-index-list button:last-child { border-bottom: 0; }
.portfolio-index-list button:hover,.portfolio-index-list button.on { background: #fff; }
.portfolio-index-list button.on { box-shadow: inset 3px 0 var(--accent); }
.portfolio-index-list button > strong { display: grid; width: 31px; height: 31px; place-items: center; color: #fff; background: #30343b; border-radius: 9px; font-size: 9px; }
.portfolio-index-list button b,.portfolio-index-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-index-list button b { font-size: 10px; }
.portfolio-index-list button small { margin-top: 2px; color: #7b8490; font-size: 8px; }
.portfolio-index-list button > em { color: #8b939e; font-size: 8px; font-style: normal; }
.portfolio-index-chapter { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 38px; padding: 7px 11px; color: #fff; background: #30343b; }
.portfolio-index-chapter small { color: #ffb4a8; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.portfolio-index-chapter b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-index-chapter span { color: #c8cdd4; font-size: 8px; }
.portfolio-index-empty { display: grid; min-height: 150px; place-items: center; color: #858e99; font-size: 10px; font-weight: 800; }
.portfolio-index-panel > footer { padding-top: 10px; color: #77808b; font-size: 9px; font-weight: 800; }
.portfolio-index-panel > footer button { min-height: 36px; padding: 0 13px; background: #eef1f4; border-radius: 9px; font-size: 9px; font-weight: 850; }
.thumb-gap { display: grid; width: 22px; flex: 0 0 22px; place-items: center; color: #9aa1aa; font-size: 14px; font-weight: 900; }
.portfolio-art-image { transition: opacity .18s ease; }
.portfolio-art-image:not([src]) { opacity: 0; }
.art-frame:has(.portfolio-art-image:not([src])),.jackie-detail-crop:has(.portfolio-art-image:not([src])),.jackie-mini-art:has(.portfolio-art-image:not([src])) { background-image: linear-gradient(105deg,rgba(255,255,255,.05) 35%,rgba(255,255,255,.42) 48%,rgba(255,255,255,.05) 61%); background-size: 240% 100%; animation: portfolio-image-wait 1.4s linear infinite; }
@keyframes portfolio-image-wait { to { background-position: -240% 0; } }
.page-rhythm-label { position: absolute; top: 3.2%; right: 4%; z-index: 3; padding: 3px 7px; color: color-mix(in srgb,var(--jackie-text,#202020) 68%,transparent); border: 1px solid color-mix(in srgb,var(--jackie-text,#202020) 16%,transparent); border-radius: 999px; background: color-mix(in srgb,var(--jackie-paper,#fff) 86%,transparent); font: 800 7px/1 var(--portfolio-font,"Gaegu"),sans-serif; letter-spacing: .04em; }
.inline-chapter-mark { position: absolute; top: 3%; left: 4%; z-index: 4; display: flex; max-width: 58%; align-items: center; gap: 6px; padding: 5px 8px; color: #fff; background: color-mix(in srgb,var(--jackie-coral,#e35342) 88%,#222); border-radius: 7px; box-shadow: 0 5px 13px #0002; }
.inline-chapter-mark b { font-size: 6.5px; letter-spacing: .09em; }
.inline-chapter-mark em { overflow: hidden; font: 800 8px/1.1 var(--portfolio-font,"Gaegu"),sans-serif; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.page-design.role-feature .art-frame { min-height: 66%; }
.page-design.role-feature h3 { font-size: clamp(28px,4vw,46px); }
.composition-role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.composition-role-grid button { display: grid; min-height: 58px; place-items: center; align-content: center; gap: 3px; padding: 6px 3px; color: #646d79; background: #f5f6f8; border: 1px solid var(--line); border-radius: 10px; }
.composition-role-grid button .material-symbols-rounded { font-size: 19px; }
.composition-role-grid button b { font-size: 8px; }
.composition-role-grid button.on { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 7px 17px color-mix(in srgb,var(--accent) 24%,transparent); }
.rhythm-studio { display: grid; gap: 9px; padding: 11px; background: linear-gradient(145deg,#f7f8fa,#eef1f4); border: 1px solid var(--line); border-radius: 13px; }
.rhythm-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rhythm-studio-head b { font-size: 10px; }
.rhythm-studio-head em { color: var(--accent); font-size: 8px; font-style: normal; font-weight: 900; }
.rhythm-studio > p { margin: 0; color: #747c86; font-size: 8px; line-height: 1.45; }
.rhythm-current { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rhythm-current > span { display: grid; gap: 2px; min-width: 0; padding: 8px; background: #fff; border: 1px solid #e1e5e9; border-radius: 9px; }
.rhythm-current b { overflow: hidden; color: #2f343b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.rhythm-current small { overflow: hidden; color: #8a929c; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.rhythm-feature-toggle,.rhythm-preview-button,.rhythm-preview button { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; color: #4d5560; background: #fff; border: 1px solid #dce1e6; border-radius: 9px; font-size: 8px; }
.rhythm-feature-toggle .material-symbols-rounded { color: #aab0b8; font-size: 17px; }
.rhythm-feature-toggle.on { color: #805916; background: #fff8df; border-color: #e9c96b; }
.rhythm-feature-toggle.on .material-symbols-rounded { color: #e1a91d; font-variation-settings: "FILL" 1; }
.rhythm-preview-button { color: #fff; background: #252b33; border-color: #252b33; }
.rhythm-preview { display: grid; gap: 7px; padding-top: 2px; }
.rhythm-preview > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.rhythm-preview > div > div { display: grid; min-width: 0; place-items: center; gap: 2px; padding: 6px 2px; background: #fff; border-radius: 7px; }
.rhythm-preview > div b { color: #252b33; font-size: 13px; }
.rhythm-preview > div small,.rhythm-preview > small { color: #818994; font-size: 6px; text-align: center; }
.rhythm-preview > div p { grid-column: 1 / -1; margin: 2px 0 0; color: #717984; font-size: 6px; line-height: 1.4; }
.rhythm-preview > div em { grid-column: 1 / -1; color: var(--accent); font-size: 7px; font-style: normal; font-weight: 800; text-align: center; }
.rhythm-preview button { color: #fff; background: var(--accent); border-color: var(--accent); }
.rhythm-preview button:disabled { opacity: .45; }
.feature-crown { position: absolute; top: 4%; left: 5%; z-index: 12; display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; color: #6f5015; background: #fff4c9e8; border: 1px solid #e3c25d; border-radius: 999px; font: 900 7px/1 var(--portfolio-font,"Gaegu"),sans-serif; box-shadow: 0 4px 12px #5b47151d; }
.feature-crown .material-symbols-rounded { font-size: 12px; font-variation-settings: "FILL" 1; }
.page-design.pace-breath { padding: 10%; }
.page-design.pace-breath .art-frame { margin: 4% 5%; }
.page-design.pace-pause { padding: 12%; }
.page-design.pace-pause .art-frame { max-height: 55%; margin-top: 7%; }
.page-design.pace-opening .page-rhythm-label { letter-spacing: .18em; }
.page-design.pace-hero .art-frame { min-height: 68%; }
.portfolio-index-list button strong { position: relative; }
.portfolio-index-list button strong > i { position: absolute; top: -7px; right: -5px; color: #dcaa22; font-size: 12px; font-variation-settings: "FILL" 1; }
.feature-artwork { position: absolute; inset: 0; overflow: hidden; }
.feature-artwork img { width: 100%; height: 100%; object-fit: var(--photo-fit,cover); object-position: var(--photo-x,50%) var(--photo-y,50%); filter: var(--photo-filter,none); transform: scale(var(--photo-scale,1)) rotate(var(--photo-rotate,0deg)); }
.role-feature .art-frame { position: relative; overflow: hidden; background: #151515; }
.role-feature .page-rhythm-label { color: #fff; background: #151515cc; border-color: #ffffff30; }
.role-feature > h3,.role-feature > .art-date,.role-feature > p { z-index: 4; }
.compare-art-grid { display: grid; width: 100%; height: 100%; grid-template-columns: 1fr 1fr; gap: 3%; }
.compare-art-grid figure,.process-art-grid figure { display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0,1fr) auto; gap: 5px; margin: 0; }
.compare-art-grid figure > div,.process-art-grid figure > div { min-height: 0; overflow: hidden; background: color-mix(in srgb,var(--jackie-paper,#fff) 88%,#dfe4e8); border: 6px solid #fff; box-shadow: 0 8px 16px #0002; }
.compare-art-grid img,.process-art-grid img { width: 100%; height: 100%; object-fit: contain; }
.compare-art-grid figcaption,.process-art-grid figcaption { color: color-mix(in srgb,var(--jackie-text,#202020) 68%,transparent); font: 800 8px/1.1 var(--portfolio-font,"Gaegu"),sans-serif; text-align: center; }
.compare-art-grid figure:last-child img,.process-art-grid figure:last-child img { object-fit: var(--photo-fit,contain); object-position: var(--photo-x,50%) var(--photo-y,50%); filter: var(--photo-filter,none); transform: scale(var(--photo-scale,1)) rotate(var(--photo-rotate,0deg)); }
.art-collage-grid { display: grid; width: 100%; height: 100%; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.art-collage-grid figure { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #fff; border: 6px solid #fff; box-shadow: 0 8px 18px #0002; }
.art-collage-grid .cell-0 { grid-row: 1 / -1; transform: rotate(-1.5deg); }
.art-collage-grid .cell-1 { transform: rotate(1.8deg); }
.art-collage-grid .cell-2 { transform: rotate(-1deg); }
.art-collage-grid .cell-3 { position: absolute; right: 7%; bottom: 8%; width: 30%; height: 28%; transform: rotate(5deg); }
.art-collage-grid img { width: 100%; height: 100%; object-fit: cover; }
.art-collage-grid .cell-0 img { object-fit: var(--photo-fit,contain); object-position: var(--photo-x,50%) var(--photo-y,50%); filter: var(--photo-filter,none); transform: scale(var(--photo-scale,1)) rotate(var(--photo-rotate,0deg)); }
.art-collage-grid figcaption { position: absolute; right: 4px; bottom: 3px; display: grid; width: 22px; height: 22px; place-items: center; color: #fff; background: #20242acc; border-radius: 50%; font-size: 7px; font-weight: 900; }
.quote-story-layout { display: grid; width: 100%; height: 100%; grid-template-columns: minmax(80px,.72fr) minmax(0,1.28fr); align-items: center; gap: 7%; }
.quote-art-mini { height: 64%; padding: 5%; overflow: hidden; background: #fff; box-shadow: 0 11px 23px #0002; transform: rotate(-4deg); }
.quote-art-mini img { width: 100%; height: 100%; object-fit: contain; filter: var(--photo-filter,none); }
.quote-story-layout blockquote { margin: 0; color: var(--jackie-text,#202020); font: 800 clamp(20px,3vw,38px)/1.1 var(--portfolio-font,"Gaegu"),sans-serif; text-wrap: balance; }
.role-quote > p { display: none; }
.process-art-grid { display: grid; width: 100%; height: 100%; grid-template-columns: minmax(0,1fr) 30px minmax(0,1.08fr); align-items: center; gap: 4px; }
.process-art-grid > .material-symbols-rounded { display: grid; width: 30px; height: 30px; place-items: center; color: #fff; background: var(--jackie-coral,#e35342); border-radius: 50%; font-size: 17px; box-shadow: 0 5px 12px #0002; }
.story-image-empty { display: grid; width: 100%; height: 100%; place-items: center; padding: 10px; color: #8a9199; font-size: 8px; font-weight: 800; text-align: center; }
.page-design.role-quiet { padding: 13%; }
.page-design.role-quiet .art-frame { max-height: 52%; margin-top: 8%; }
.page-design.role-statement h3 { max-width: 82%; font-style: italic; }
.page-design.role-collection .art-frame { outline: 6px double color-mix(in srgb,var(--jackie-text,#202020) 15%,transparent); outline-offset: 5px; }
.scrapbook-chapter-card { width: clamp(310px,38vw,470px); flex: 0 0 clamp(310px,38vw,470px); place-items: center; color: #fff; background: color-mix(in srgb,var(--jackie-ink,#1d1d1d) 92%,var(--jackie-coral,#e35342)); border: 1px solid #ffffff22; }
.portfolio-chapter-page { position: relative; display: grid; align-content: center; gap: 13px; padding: 13%; color: var(--jackie-text,#202020); background: var(--jackie-paper,#f7f4ed); overflow: hidden; }
.portfolio-chapter-page > small { color: var(--jackie-coral,#e35342); font: 900 9px/1 Georgia,serif; letter-spacing: .18em; }
.portfolio-chapter-page > strong { font: 800 clamp(34px,5vw,62px)/.95 var(--portfolio-font,"Gaegu"),sans-serif; }
.portfolio-chapter-page > span { color: color-mix(in srgb,var(--jackie-text,#202020) 62%,transparent); font-size: 11px; }
.portfolio-chapter-page .chapter-feature-cue { color: color-mix(in srgb,var(--jackie-coral,#e35342) 82%,#5e4818); border-color: color-mix(in srgb,var(--jackie-coral,#e35342) 38%,transparent); }
.portfolio-chapter-page .chapter-progress { background: color-mix(in srgb,var(--jackie-text,#202020) 10%,transparent); }
.scrapbook-chapter-card > div { display: grid; width: 78%; min-height: 72%; align-content: center; gap: 12px; padding: 10%; border: 1px solid #ffffff2d; }
.scrapbook-chapter-card small,.scrapbook-chapter-card strong,.scrapbook-chapter-card span { display: block; }
.scrapbook-chapter-card small { color: var(--jackie-coral,#e35342); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.scrapbook-chapter-card strong { font: 800 clamp(30px,4vw,54px)/.98 var(--portfolio-font,"Gaegu"),sans-serif; }
.scrapbook-chapter-card span { color: #ffffffaa; font-size: 12px; }
.chapter-feature-cue { display: inline-flex; width: max-content; max-width: 100%; align-items: center; padding: 6px 9px; color: #f4d467; border: 1px solid #f4d46766; border-radius: 999px; font-size: 8px; }
.chapter-progress { position: relative; display: block; width: 100%; height: 2px; margin-top: 5px; overflow: hidden; background: #ffffff25; }
.chapter-progress:after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--chapter-progress); background: var(--jackie-coral,#e35342); }
.chapter-orbit { position: absolute; top: 9%; right: 8%; width: 54px; height: 54px; border: 1px dashed currentColor; border-radius: 50%; opacity: .18; }
.mood-wander .chapter-orbit { border-radius: 30% 70% 60% 40%; transform: rotate(27deg); }
.mood-wonder .chapter-orbit { width: 64px; height: 28px; border-radius: 50%; transform: rotate(-12deg); }
.mood-remember .chapter-orbit { border-style: double; transform: rotate(45deg); }
.jackie-chapter-scene { height: calc(var(--jackie-stage-h,720px) * 1.25); }
.jackie-chapter-sticky { position: sticky; top: 0; display: grid; width: 100%; height: var(--jackie-stage-h,720px); place-items: center; overflow: hidden; }
.jackie-chapter-sticky > div { display: grid; width: min(70%,720px); min-height: 54%; align-content: center; gap: 12px; padding: 8%; color: var(--jackie-paper,#f7f4ed); border: 1px solid color-mix(in srgb,var(--jackie-coral,#e35342) 62%,transparent); background: color-mix(in srgb,var(--jackie-ink,#1d1d1d) 89%,var(--jackie-coral,#e35342)); box-shadow: 0 30px 80px #0007; }
.jackie-chapter-sticky small { color: var(--jackie-coral,#e35342); font-weight: 900; letter-spacing: .17em; }
.jackie-chapter-sticky strong { font: 800 clamp(44px,7vw,90px)/.92 var(--portfolio-font,"Gaegu"),sans-serif; }
.jackie-chapter-sticky span { color: color-mix(in srgb,var(--jackie-paper,#f7f4ed) 66%,transparent); font-size: clamp(14px,2vw,23px); }
.jackie-assembly-scene.motion-rise .jackie-project-number,.jackie-assembly-scene.motion-float .jackie-project-number { writing-mode: vertical-rl; }
.jackie-assembly-scene.motion-zoom .jackie-assembly-sticky,.jackie-assembly-scene.motion-reveal .jackie-assembly-sticky { perspective: 1200px; }
.run-release-check { width: 100%; margin-top: 8px; color: #fff; background: #252931; border-color: #252931; }
.release-verdict { margin-top: 7px; padding: 8px; color: #6c747f; background: #f5f6f8; border-radius: 8px; font-size: 8px; font-weight: 800; line-height: 1.4; text-align: center; }
.release-verdict.pass { color: #17684e; background: #eaf8f0; }
.release-verdict.fail { color: #a3403e; background: #fff0ef; }
.family-feedback-bar { position: absolute; right: 50%; bottom: 42px; z-index: 95; display: grid; width: min(880px,calc(100vw - 32px)); grid-template-columns: 150px auto minmax(180px,1fr) auto; align-items: end; gap: 8px; padding: 10px; color: #25282e; background: rgba(255,255,255,.96); border: 1px solid #dfe3e8; border-radius: 15px; box-shadow: 0 14px 36px #0005; backdrop-filter: blur(14px); transform: translateX(50%); }
.family-feedback-bar label > span,.family-feedback-bar legend { display: block; margin-bottom: 4px; color: #69717c; font-size: 8px; font-weight: 800; }
.family-feedback-bar select,.family-feedback-bar input { width: 100%; height: 39px; padding: 0 10px; background: #f6f7f9; border: 1px solid #d9dee5; border-radius: 9px; }
.family-feedback-bar fieldset { display: flex; gap: 3px; margin: 0; padding: 0; border: 0; }
.family-feedback-bar fieldset button { width: 39px; height: 39px; background: #f5f6f8; border: 1px solid transparent; border-radius: 9px; font-size: 17px; }
.family-feedback-bar fieldset button.on { background: #fff5cf; border-color: #e8c447; }
#btnFamilyFeedbackSubmit { display: inline-flex; min-height: 39px; align-items: center; gap: 5px; padding: 0 12px; color: #fff; background: #252931; border-radius: 9px; font-size: 9px; }
#btnFamilyFeedbackSubmit:disabled { opacity: .42; }

/* 16-20: template-native surfaces — each portfolio has its own physical grammar. */
.modern-page-surface,.scrapbook-page-surface,.inkframe-page-surface { position: relative; width: 100%; height: 100%; isolation: isolate; }
.modern-page-surface > .page-design,.inkframe-page-surface > .page-design { z-index: 1; }
.modern-edge-tab { position: absolute; top: 11%; right: -1px; z-index: 8; display: grid; width: 28px; height: 48px; place-items: center; color: color-mix(in srgb,var(--jackie-text,#202020) 68%,transparent); background: color-mix(in srgb,var(--jackie-paper,#fff) 78%,var(--accent)); border: 1px solid color-mix(in srgb,var(--jackie-text,#202020) 13%,transparent); border-right: 0; border-radius: 8px 0 0 8px; font: 700 8px/1 Georgia,serif; writing-mode: vertical-rl; box-shadow: -4px 5px 11px #0001; pointer-events: none; }
.modern-binding-shadow { position: absolute; top: 0; bottom: 0; left: 0; z-index: 7; width: 8%; background: linear-gradient(90deg,#0002,transparent 72%); mix-blend-mode: multiply; pointer-events: none; }
.modern-page-surface.insert-vellum:after { content: ""; position: absolute; inset: 2.6%; z-index: 6; background: linear-gradient(115deg,rgba(240,245,238,.35),rgba(255,255,255,.08)),repeating-linear-gradient(0deg,transparent 0 10px,rgba(44,56,48,.025) 11px); border: 1px solid rgba(90,104,95,.2); box-shadow: inset 0 0 38px rgba(77,90,81,.08); backdrop-filter: saturate(.78) contrast(.94); pointer-events: none; }
.modern-vellum-note { position: absolute; right: 8%; bottom: 5%; z-index: 9; padding: 5px 8px; color: #55615b; background: rgba(246,249,242,.82); border: 1px solid #65736a45; font: 700 7px/1.1 Georgia,serif; letter-spacing: .12em; transform: rotate(-1.5deg); pointer-events: none; }
.modern-page-surface.insert-ticket:after { content: ""; position: absolute; top: 0; right: 17%; bottom: 0; z-index: 6; border-left: 1px dashed color-mix(in srgb,var(--accent) 50%,transparent); pointer-events: none; }
.modern-ticket-stub { position: absolute; top: 5%; right: 5%; z-index: 9; padding: 6px 9px 6px 18px; color: var(--jackie-paper,#fff); background: var(--jackie-text,#202020); font: 800 7px/1 Georgia,serif; letter-spacing: .1em; clip-path: polygon(7px 0,100% 0,100% 100%,7px 100%,0 75%,7px 50%,0 25%); transform: rotate(90deg) translateX(100%); transform-origin: right top; pointer-events: none; }

.scrapbook-page-surface { overflow: hidden; background-color: #f5f5f2; background-image: radial-gradient(circle at 10px 10px,#9da4a91b 1px,transparent 1.4px); background-size: 20px 20px; }
.scrapbook-page-surface.surface-gallery-wall { background-color: #f1f0ec; background-image: linear-gradient(#aeb5bb17 1px,transparent 1px),linear-gradient(90deg,#aeb5bb17 1px,transparent 1px); background-size: 26px 26px; }
.scrapbook-page-surface.surface-contact-strip { background: #202326 repeating-linear-gradient(90deg,transparent 0 8%,#ffffff08 8.2% 8.5%); }
.scrapbook-page-surface.surface-polaroid-wall { background-color: #eef1ee; background-image: radial-gradient(#8d989544 .7px,transparent .8px); background-size: 5px 5px; }
.scrapbook-mounted-page { position: absolute; inset: 7% 8% 10%; z-index: 2; overflow: hidden; background: var(--jackie-paper,#fff); border: 10px solid #fff; box-shadow: 0 18px 38px #1d252d32; transform: rotate(-.35deg); }
.surface-contact-strip .scrapbook-mounted-page { inset: 5% 10% 8%; border-width: 14px 8px 28px; box-shadow: 0 20px 45px #0008; transform: rotate(.45deg); }
.surface-polaroid-wall .scrapbook-mounted-page { inset: 9% 12% 14%; border-width: 12px 12px 42px; transform: rotate(-1.8deg); }
.scrapbook-mounted-page > .page-design { inset: 0; }
.scrapbook-wall-number { position: absolute; top: 3.8%; left: 4%; z-index: 5; color: #737b82; font: 900 10px/1 Georgia,serif; letter-spacing: .12em; }
.surface-contact-strip .scrapbook-wall-number { color: #fff9; }
.scrapbook-pin { position: absolute; z-index: 6; width: 10px; height: 10px; background: var(--accent); border: 2px solid #fff9; border-radius: 50%; box-shadow: 0 3px 5px #0004; pointer-events: none; }
.scrapbook-pin.pin-a { top: 6.5%; left: 13%; }
.scrapbook-pin.pin-b { top: 7%; right: 14%; background: color-mix(in srgb,var(--accent) 55%,#f6c45d); }
.scrapbook-catalog-label { position: absolute; right: 4%; bottom: 3.5%; z-index: 7; max-width: 55%; overflow: hidden; color: #707880; font: 800 7px/1.2 Georgia,serif; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.surface-contact-strip .scrapbook-catalog-label { color: #fffc; }

.inkframe-page-surface { overflow: hidden; background: color-mix(in srgb,var(--jackie-paper,#f7f4ed) 94%,var(--jackie-coral,#e35342)); }
.inkframe-page-surface > .page-design { transition: clip-path .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1); }
.inkframe-page-surface.mask-cross > .page-design { clip-path: polygon(0 7%,43% 7%,43% 0,57% 0,57% 7%,100% 7%,100% 93%,57% 93%,57% 100%,43% 100%,43% 93%,0 93%); }
.inkframe-page-surface.mask-rise > .page-design { clip-path: polygon(0 7%,100% 0,100% 100%,0 94%); }
.inkframe-page-surface.mask-fan > .page-design { clip-path: polygon(4% 0,100% 5%,96% 100%,0 94%); transform: rotate(-.7deg) scale(.985); }
.inkframe-page-surface.mask-slide > .page-design { clip-path: polygon(7% 0,100% 0,93% 100%,0 100%); }
.inkframe-page-surface.mask-zoom > .page-design { clip-path: polygon(4% 4%,96% 0,100% 96%,0 100%); }
.inkframe-page-surface.mask-float > .page-design { clip-path: ellipse(72% 68% at 50% 50%); transform: scale(.96); }
.inkframe-page-surface.mask-stack > .page-design { clip-path: polygon(3% 2%,97% 5%,95% 98%,5% 95%); transform: rotate(.65deg) scale(.98); }
.inkframe-page-surface.mask-reveal > .page-design { clip-path: polygon(0 0,91% 0,100% 10%,100% 100%,9% 100%,0 90%); }
.inkframe-register { position: absolute; z-index: 8; width: 18px; height: 18px; opacity: .72; pointer-events: none; }
.inkframe-register:before,.inkframe-register:after { content: ""; position: absolute; background: var(--jackie-coral,#e35342); }
.inkframe-register:before { top: 8px; left: 0; width: 18px; height: 1px; }
.inkframe-register:after { top: 0; left: 8px; width: 1px; height: 18px; }
.inkframe-register.top-left { top: 3%; left: 3%; }
.inkframe-register.bottom-right { right: 3%; bottom: 3%; }
.inkframe-torn-edge { position: absolute; top: 0; right: -1px; bottom: 0; z-index: 7; width: 12px; background: var(--jackie-coral,#e35342); clip-path: polygon(100% 0,35% 2%,75% 4%,20% 7%,68% 10%,25% 13%,80% 16%,30% 19%,72% 22%,18% 25%,75% 28%,28% 31%,70% 34%,20% 37%,78% 40%,26% 43%,72% 46%,18% 49%,74% 52%,24% 55%,80% 58%,25% 61%,70% 64%,17% 67%,76% 70%,26% 73%,68% 76%,21% 79%,79% 82%,25% 85%,70% 88%,20% 91%,78% 94%,28% 97%,100% 100%); pointer-events: none; }
.inkframe-scene-label { position: absolute; right: 5%; bottom: 3%; z-index: 9; padding: 4px 6px; color: var(--jackie-paper,#fff); background: var(--jackie-text,#202020); font: 800 7px/1 Georgia,serif; letter-spacing: .1em; transform: rotate(-2deg); pointer-events: none; }

.scrapbook-card,.jackie-assembly-scene { content-visibility: auto; contain-intrinsic-size: 560px 690px; }
.performance-mode .scrapbook-card { filter: drop-shadow(0 10px 12px rgba(35,42,51,.14)); }
.performance-mode .jackie-noise,.performance-mode .sticker-hover-ring,.performance-mode .art-hover-border { display: none; }
.performance-mode .jackie-piece,.performance-mode .jackie-motion { will-change: auto; }
.performance-mode .page-design .art-frame > img { transition: none; }

@media (max-width: 699px) {
  .portfolio-index-panel { display: none !important; }
  .family-feedback-bar { bottom: 14px; grid-template-columns: 1fr auto; }
  .family-feedback-message { grid-column: 1 / -1; grid-row: 2; }
  #btnFamilyFeedbackSubmit { grid-column: 1 / -1; justify-content: center; }
}

@media (min-width: 700px) and (max-width: 900px) {
  .portfolio-index-panel { top: 66px; right: 10px; bottom: 88px; left: 96px; width: auto; padding: 14px; border-radius: 17px; }
  .portfolio-index-actions { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .inspector button,.inspector input:not([type="range"]),.inspector select,.page-strip button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,*:before,*:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .jackie-piece,.jackie-motion { transform: none !important; opacity: 1 !important; }
}

@media print {
  .appbar, .children-panel, .inspector, .workspace-head, .turn-btn, .page-strip, .toast-wrap { display: none !important; }
  .desktop-studio { display: block !important; }
  .book-workspace { display: block; background: #fff; }
  .book-stage { display: block !important; margin: 0; padding: 0; background: #fff; }
  .book-shell { height: 100vh; max-height: none; filter: none; }
  @page { size: landscape; margin: 0; }
}