:root{--navy:#172f64;--blue:#278bd2;--ink:#171717;--cream:#fffdf8;--pink:#ffe3ef;--purple:#e9ddff;--sky:#e6f5ff;--green:#53bb82;--gold:#ffc857;--line:#bedcf2;--shadow:0 16px 44px rgba(31,65,111,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 5% 0%,#fff3e1 0,transparent 28%),radial-gradient(circle at 95% 5%,#f6e7fa 0,transparent 24%),var(--cream);color:var(--navy);font-family:"Tajawal","Cairo","Segoe UI",Tahoma,Arial,sans-serif;font-size:17px;line-height:1.65}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}img{max-width:100%}.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px clamp(16px,3vw,42px);background:rgba(255,253,248,.94);backdrop-filter:blur(12px);border-bottom:1px solid #e3edf6}.brand{border:0;background:none;text-align:right;color:var(--navy);line-height:1.1;padding:0}.brand-mark{display:block;font-weight:1000;font-size:clamp(26px,3vw,40px);letter-spacing:-2px;direction:ltr;text-align:left;background:linear-gradient(95deg,#278bd2,#7963bd,#f2a2bc,#53bbba);-webkit-background-clip:text;background-clip:text;color:transparent}.brand .star{color:var(--gold);-webkit-text-fill-color:var(--gold);font-size:.65em;vertical-align:top;margin-left:3px}.brand small{display:block;font-size:13px;font-weight:850}.main-nav{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.main-nav button{border:0;border-radius:999px;background:transparent;color:var(--navy);font-weight:850;padding:9px 13px;min-height:44px}.main-nav button:hover,.main-nav button.active{background:var(--sky)}.main-nav .parent-link{border:1px solid #d8e6ee;background:white}main{max-width:1500px;margin:auto;padding:clamp(16px,2.5vw,36px)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,4vw,60px);line-height:1.2;letter-spacing:-.03em}h2{font-size:clamp(25px,2.5vw,34px);line-height:1.25}h3{font-size:21px;line-height:1.3}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--pink);border-radius:999px;padding:6px 14px;font-weight:900;color:#744a81;margin-bottom:16px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:17px;border:2px solid transparent;min-height:48px;padding:10px 20px;background:var(--blue);color:white;font-weight:900;text-decoration:none;box-shadow:0 6px 0 rgba(23,47,100,.11)}.button:hover{transform:translateY(-2px)}.button.secondary{background:var(--green)}.button.purple{background:#8164c6}.button.button-quiet{background:white;color:var(--navy);border-color:var(--line);box-shadow:none}.button.button-danger{background:#cf4968}.button:disabled{opacity:.45;cursor:not-allowed;transform:none}.hero{display:grid;grid-template-columns:1fr .83fr;gap:clamp(24px,4vw,60px);align-items:center;min-height:540px}.hero-copy{padding:20px 0}.hero-copy p{font-size:clamp(18px,1.5vw,24px);max-width:660px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0}.hero-note{display:inline-flex;align-items:center;gap:10px;background:white;padding:10px 16px;border:1px solid #ddedf5;border-radius:15px;font-size:15px;font-weight:700}.hero-visual{position:relative;display:grid;place-items:center;min-height:470px;background:linear-gradient(145deg,#ffe5f0,#e8f7ff 50%,#eaf8e9);border:2px solid white;border-radius:40px;box-shadow:var(--shadow);overflow:hidden}.hero-visual::before,.hero-visual::after{content:"✿";position:absolute;color:#8bcf9e;font-size:90px;opacity:.45}.hero-visual::before{top:0;right:10px}.hero-visual::after{bottom:-20px;left:20px;color:#e7adca}.hero-visual img{height:390px;width:78%;object-fit:cover;border:9px solid white;border-radius:26px;box-shadow:0 18px 30px #7aa4ba44;transform:rotate(-3deg)}.hero-visual .hero-sticker{position:absolute;bottom:24px;right:28px;background:var(--gold);color:var(--navy);padding:8px 18px;border-radius:999px;transform:rotate(5deg);font-weight:1000}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:16px 0 26px}.section-head p{margin:5px 0 0;color:#536786}.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.chapter-card,.scene-card,.info-card{background:white;border:1.5px solid #dceaf3;border-radius:25px;box-shadow:var(--shadow);overflow:hidden}.chapter-card{padding:17px;display:flex;flex-direction:column}.chapter-image{height:180px;background:var(--tint);border-radius:18px;display:grid;place-items:center;overflow:hidden;margin-bottom:14px}.chapter-image img{width:85%;height:160px;object-fit:cover;object-position:top;border:6px solid white;border-radius:15px;transform:rotate(-4deg)}.chapter-number{font-size:14px;font-weight:1000;color:#7e6ab0}.chapter-card h3{margin:5px 0}.chapter-card p{font-size:14px;color:#536786}.chapter-card .button{margin-top:auto;width:100%}.progress-track{height:10px;background:#ecf3f8;border-radius:999px;overflow:hidden;margin:12px 0}.progress-track span{display:block;height:100%;background:var(--green);border-radius:inherit}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:18px}.scene-card{border:1.5px solid #dceaf3;display:block;text-align:right;color:var(--navy);padding:0;transition:transform .2s}.scene-card:hover{transform:translateY(-4px)}.scene-card img{display:block;width:100%;height:185px;object-fit:cover;object-position:center top;background:white}.scene-card .card-copy{display:block;padding:11px 14px 14px}.scene-card strong{display:block;font-size:18px}.scene-card small{display:block;color:#5a6e8a}.saved-pill{display:inline-block;background:#e2f7e9;color:#146641;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:900;margin-top:5px}.scene-top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}.scene-top h1{font-size:clamp(28px,3vw,44px);margin:0}.scene-top small{font-weight:900;color:#68549a}.scene-layout{display:grid;grid-template-columns:minmax(270px,35%) minmax(0,65%);gap:17px;align-items:start}.story-panel{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:13px}.art-panel{grid-column:2;grid-row:1;min-width:0}.panel{background:white;border:1.5px solid var(--line);border-radius:22px;padding:17px;box-shadow:0 8px 25px #2c528014}.panel.story-copy{background:var(--cream);font-size:clamp(17px,1.45vw,21px);line-height:1.85}.panel.story-copy p{margin:0}.panel.story-copy h2{font-size:19px;color:#6d5890;margin-bottom:8px}.panel.activity{background:var(--sky)}.panel.activity h3{margin-bottom:5px}.panel.activity p{margin:0}.scene-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.scene-badge{background:#8066bd;color:white;border-radius:16px;padding:7px 15px;font-size:28px;font-weight:1000;line-height:1}.chapter-pill{background:var(--pink);border-radius:999px;padding:7px 13px;font-weight:900}.art-panel{background:white;border:1.5px solid #b5d8f2;border-radius:22px;padding:12px;box-shadow:var(--shadow)}.workspace{position:relative;height:min(68vh,790px);min-height:430px;overflow:hidden;border-radius:15px;border:2px solid #d7eafa;background:#fff;touch-action:none}.art-stage{position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:var(--art-ratio,1);transform-origin:top left;touch-action:none;cursor:crosshair;background:#fff}.art-stage img,.art-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.art-stage img{z-index:3}.art-stage #fill-layer{z-index:1}.art-stage #stroke-layer{z-index:2}.workspace.pan-mode .art-stage{cursor:grab}.workspace.pan-mode:active .art-stage{cursor:grabbing}.workspace-hint{position:absolute;bottom:10px;left:10px;background:#ffffffde;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;pointer-events:none}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.tool-button{min-width:62px;min-height:47px;padding:7px 11px;border:1.5px solid #c5dfef;background:#fff;color:var(--navy);border-radius:13px;font-size:14px;font-weight:900}.tool-button:hover{background:#f3fbff}.tool-button.selected{border-color:var(--blue);background:var(--sky);box-shadow:inset 0 0 0 1px var(--blue)}.tool-button:disabled{opacity:.43;cursor:not-allowed}.tool-icon{font-size:21px;vertical-align:middle;margin-left:3px}.palette{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:10px;background:#f9fbff;border-radius:15px}.swatch{width:38px;height:38px;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 1px 4px #4564a04f;min-width:38px}.swatch.selected{outline:3px solid var(--navy);outline-offset:1px}.size-controls{display:flex;align-items:center;gap:6px;margin-inline-start:auto}.size-controls label{font-size:13px;font-weight:900}.size-controls select{border:1px solid var(--line);border-radius:9px;padding:6px;background:white;color:var(--navy)}.scene-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;flex-wrap:wrap}.save-status{font-size:13px;font-weight:800;color:#4c6b7e}.save-status.saving{color:#a16b32}.empty-state{background:white;border:2px dashed #bfdff0;border-radius:25px;padding:46px;text-align:center}.empty-state p{color:#536786}.info-card{padding:24px;margin:0 0 17px}.info-card h2{font-size:24px}.info-card ul{margin:0;padding-right:22px}.parent-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.parent-layout .info-card{margin:0}.parent-layout .wide{grid-column:1/-1}.settings-actions{display:flex;gap:10px;flex-wrap:wrap}.footer-note{text-align:center;color:#627491;font-size:13px;margin:25px 0}.toast{position:fixed;bottom:22px;right:22px;z-index:60;background:var(--navy);color:white;border-radius:14px;padding:10px 16px;font-weight:850;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}.modal{border:0;border-radius:23px;max-width:min(92vw,430px);padding:24px;color:var(--navy);box-shadow:0 25px 100px #132a5580}.modal::backdrop{background:#172f64a8}.dialog-actions{display:flex;gap:9px;justify-content:flex-end}.modal h2{font-size:26px}.muted{color:#61728b}.status-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.chapter-complete{background:#e8f8ed;border-radius:16px;padding:10px 15px;font-weight:900;color:#186541}.hidden{display:none!important}
@media(max-width:1050px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-layout{grid-template-columns:minmax(240px,34%) minmax(0,66%)}.hero{min-height:0}.hero-visual{min-height:390px}}
@media(max-width:760px){.site-header{position:static;align-items:flex-start;flex-direction:column;gap:9px}.main-nav{width:100%;justify-content:space-between}.main-nav button{font-size:13px;padding:7px 8px}.hero{grid-template-columns:1fr}.hero-visual{min-height:280px;order:-1}.hero-visual img{height:245px}.hero-visual .hero-sticker{bottom:8px;right:12px}.hero-copy{padding:0}.scene-layout{display:flex;flex-direction:column}.art-panel{order:1;width:100%}.story-panel{order:2;width:100%}.workspace{height:min(63vh,590px);min-height:360px}.parent-layout{grid-template-columns:1fr}.parent-layout .wide{grid-column:auto}.scene-top{align-items:flex-start}.scene-top .button{font-size:13px;padding:8px 12px}.panel.story-copy{font-size:18px}.size-controls{margin-inline-start:0}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:470px){main{padding:12px}.card-grid{grid-template-columns:1fr}.gallery-grid{gap:10px}.scene-card img{height:145px}.scene-card strong{font-size:15px}.site-header{padding:10px}.main-nav{gap:2px}.main-nav button{font-size:12px}.toolbar{gap:5px}.tool-button{font-size:12px;min-width:52px;padding:6px}.swatch{width:34px;height:34px;min-width:34px}.workspace{height:52vh;min-height:310px}.art-panel{padding:7px}}

/* Coloring screen: keep the artwork and its controls together on tablets. */
.scene-top-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.scene-top-actions .button{min-height:44px}
.story-panel[hidden]{display:none!important}
.focus-exit{display:none}
.install-card{background:#eaf7ff;border-color:#9ccdec}
.install-card ol{margin:0;padding-inline-start:25px}
.swatch{min-width:44px;width:44px;height:44px}
.workspace{height:min(70dvh,900px);min-height:240px}
@media(min-width:700px){
  .scene-layout{position:relative;display:flex;flex-direction:column;gap:12px}
  .art-panel{width:100%;grid-column:auto;grid-row:auto}
  .story-panel{width:100%;grid-column:auto;grid-row:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .story-panel .story-copy{grid-column:1/-1}
  .story-panel .panel{padding:12px 16px}
  .story-panel .scene-meta{min-height:44px}
  .palette{margin-top:8px}
  .toolbar{margin:8px 0}
}
@media(min-width:900px) and (orientation:landscape){
  body.scene-view .site-header{padding-block:3px;min-height:54px}
  body.scene-view .site-header .brand-mark{font-size:28px}
  body.scene-view .site-header .brand small{font-size:10px}
  body.scene-view main{padding-block:6px}
  .scene-top{margin-bottom:5px}
  .scene-top h1{font-size:26px}
  .story-panel:not([hidden]){position:absolute;z-index:20;inset-inline-start:0;top:0;width:min(420px,48vw);max-height:calc(100dvh - 130px);overflow:auto;display:flex;box-shadow:0 16px 48px #172f6438;border-radius:22px;background:#fff;padding:8px}
  .art-panel{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto auto 1fr;gap:8px;align-items:start}
  .workspace{grid-column:1;grid-row:1/4;margin:0}
  .palette{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,44px);gap:5px;justify-content:center;margin:0;padding:7px}
  .palette .size-controls{grid-column:1/-1;margin:0;justify-content:center}
  .toolbar{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0}
  .tool-button{min-width:0;min-height:44px;padding:4px;font-size:12px}
  .tool-icon{font-size:17px}
  .scene-footer{grid-column:2;grid-row:3;display:flex;flex-direction:column;gap:5px;margin:0}
  .scene-footer .button{width:100%;min-height:40px;padding:4px 8px;font-size:12px}
}
@media(max-width:699px){
  body.scene-view main{padding-inline:7px}
  .scene-top{flex-direction:column;align-items:stretch}
  .scene-top-actions{justify-content:flex-start}
  .scene-top-actions .button{flex:1 1 auto}
  .scene-layout{display:flex;flex-direction:column}
  .art-panel{order:1;width:100%}
  .story-panel{order:2;width:100%}
  .swatch{min-width:44px;width:44px;height:44px}
  .workspace{min-height:0}
}
@media(max-width:470px){.art-panel{padding:4px}}
body.focus-mode{overflow:hidden}
body.focus-mode .site-header,body.focus-mode .scene-top,body.focus-mode .story-panel,body.focus-mode .scene-footer,body.focus-mode .workspace-hint{display:none!important}
body.focus-mode main{max-width:none;padding:6px;height:100dvh;overflow:auto}
body.focus-mode .scene-layout{display:block}
body.focus-mode .art-panel{width:100%;padding:6px}
body.focus-mode .focus-exit{display:inline-flex;min-height:44px;margin-bottom:6px}

/* Ocean edition accents. */
:root{--blue:#177fa6;--green:#28a89e;--sky:#e5f7fb;--pink:#ffe7ed;--line:#b8e2e9}
.hero-visual{background:linear-gradient(145deg,#dff9f5,#e1f1ff 50%,#fff0dc)}
.hero-visual::before{content:"◌";color:#35bcb6}
.hero-visual::after{content:"✧";color:#f5a68e}
body.focus-mode .toolbar [data-tool="pan"],body.focus-mode .toolbar [data-action="zoom-in"],body.focus-mode .toolbar [data-action="zoom-out"],body.focus-mode .toolbar [data-action="reset-zoom"],body.focus-mode .toolbar [data-action="export-png"],body.focus-mode .toolbar [data-action="reset-art"],body.focus-mode .size-controls{display:none!important}
@media(min-width:900px) and (orientation:landscape){body.focus-mode .focus-exit{grid-column:2;grid-row:3;margin:0}body.focus-mode .scene-footer{display:none}}

/* White interiors in generated line art let the colouring layers show through. */
.art-stage img{mix-blend-mode:multiply}