@font-face{font-family:Gaegu;src:url('/codex-film-studio/styles/crayon-book/showcase/_assets/assets/fonts/Gaegu-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#f4efe3;--ink:#343258;--muted:#686474;--red:#a94335;--green:#66754b;--line:#34325830;--hand:Gaegu,'Crayon Hand SC',cursive;--body:'Trebuchet MS','PingFang SC','Microsoft Yahei',sans-serif;color-scheme:light;scroll-behavior:smooth;scroll-padding-top:24px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--body);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%236c6044' opacity='.065' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}a:hover{color:var(--red)}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--red);outline-offset:5px}[hidden]{display:none!important}p{margin:0 0 18px}h1,h2,h3{font-family:var(--hand);font-weight:700;line-height:1.04;margin:0}h1{font-size:clamp(72px,8.3vw,125px);letter-spacing:-.055em}h1 em,h2 em{font-style:normal;color:var(--red)}h2{font-size:clamp(40px,5vw,68px);letter-spacing:-.035em}h3{font-size:31px;line-height:1.15}html[lang=zh-CN] h1{font-size:clamp(65px,7.5vw,106px);line-height:1.15;letter-spacing:.025em}html[lang=zh-CN] h2{font-size:clamp(32px,4.5vw,52px);line-height:1.25}html[lang=zh-CN] h3{font-size:27px;line-height:1.4}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.section{padding-block:88px;border-top:1px solid var(--line)}.eyebrow{font-size:11px;line-height:1.5;font-weight:700;letter-spacing:.14em}.small{font-size:13px;color:var(--muted);line-height:1.8}.skip{position:absolute;top:-100px;left:20px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 18px}.skip:focus{top:8px}.masthead{padding-block:14px;border-bottom:1px solid var(--line)}.studio-brand-name{font:700 11px/1.3 var(--body);letter-spacing:.05em}.masthead nav{display:flex;gap:27px;font-size:13px}.masthead nav a{text-decoration:none}.language{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}.language button{border:0;background:transparent;min-height:36px;padding:5px 10px;font-size:12px}.language button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.hero{padding-block:42px 0}.issue{display:flex;justify-content:space-between;gap:20px;align-items:center}.issue a{font-size:12px}.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:6%;align-items:center;padding:40px 0 55px}.hand-note{font:700 28px/1.2 var(--hand);color:var(--green);transform:rotate(-3deg);transform-origin:left;margin:10px 0 24px}.hero-intro{padding:12px 0 0}.lede{font-size:19px;line-height:1.85}.watch-link{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--red);margin-top:30px;padding:10px 0;font:700 26px var(--hand);text-decoration:none;color:var(--red)}.watch-link>span:last-child{font:36px var(--body)}.crayons{display:flex;gap:10px;height:48px;margin:0 0 28px;align-items:center;transform:rotate(-7deg)}.crayons i{display:block;width:99px;height:18px;background:var(--red);border-radius:2px 0 0 3px;position:relative;box-shadow:inset 0 5px #fff2,inset 0 -5px #0001}.crayons i:before{content:'';position:absolute;left:15px;right:20px;top:0;bottom:0;background:#f0cf9d99;border-inline:2px solid #34325866}.crayons i:after{content:'';position:absolute;right:-17px;border-left:18px solid var(--red);border-top:9px solid transparent;border-bottom:9px solid transparent}.crayons i:nth-child(2){background:var(--green);transform:translateY(10px) rotate(3deg)}.crayons i:nth-child(2):after{border-left-color:var(--green)}.crayons i:nth-child(3){background:var(--ink);transform:translateY(-2px) rotate(-4deg)}.crayons i:nth-child(3):after{border-left-color:var(--ink)}.palette{display:flex;align-items:center;flex-wrap:wrap;gap:18px 30px;padding:22px 0;border-top:1px solid var(--line);font-size:12px}.palette>span{display:flex;align-items:center;gap:9px}.palette>span:first-child{margin-right:auto}.palette i{width:20px;height:20px;background:var(--swatch);border:1px solid #34325833;border-radius:38% 47% 40% 30%;transform:rotate(-8deg)}.section-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:end;margin-bottom:38px}.section-heading .eyebrow{margin-bottom:22px}.section-heading>p,.section-heading>div>p:last-child{margin-bottom:0}.film-section{padding-top:60px}.film-meta{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:16px;font-size:10px;letter-spacing:.07em;color:var(--muted)}.screen{margin:0;scroll-margin-top:24px}video{display:block;width:100%;aspect-ratio:16/9;background:#e9e3d1;box-shadow:0 12px 32px #34325815;border-radius:2px}figcaption{display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:10px;letter-spacing:.08em;padding:18px 0;border-bottom:1px solid var(--line)}figcaption a{font-size:12px;letter-spacing:0}.chapter-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:35px 0 20px}.chapter-heading h3{font-size:28px}.chapter-heading .small{font-size:10px;letter-spacing:.05em}.chapters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.chapters button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:2px;padding:11px 13px;background:transparent;line-height:1.5;font-size:13px;transition:background .15s,border-color .15s}.chapters button time{font-size:10px;color:var(--muted);margin-bottom:4px}.chapters button:hover{border-color:var(--red);background:#bd56440a}.chapters button[aria-current=true]{border-color:var(--red);box-shadow:inset 0 -3px var(--red);background:#bd564410}.film-footnote{display:flex;align-items:start;justify-content:space-between;gap:30px;margin:24px 0 0;font-size:12px;color:var(--muted)}.film-footnote p{max-width:700px;margin:0}.film-footnote a{flex-shrink:0}.playback-message{background:#bd564417;padding:15px;margin-top:15px;font-size:14px}.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.principles article+article{border-left:1px solid var(--line);padding-left:35px}.principles h3{margin:16px 0}.principles p,.notes-grid p{font-size:14px;line-height:1.9;color:var(--muted);margin:0}.material-drawing{height:160px;position:relative;margin-bottom:25px;display:grid;place-items:center}.material-drawing svg{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.pigment svg{stroke:var(--red);stroke-width:11;opacity:.45;stroke-dasharray:29 3 17 2}.pigment span{position:absolute;font:700 95px/1 var(--hand);transform:rotate(-9deg)}.reveal .wax-lines{stroke:var(--green);stroke-width:7;stroke-dasharray:9 1 16 2;opacity:.8}.reveal .guide-line{stroke:var(--red);stroke-width:2}.book .book-shadow{fill:#34325815;stroke:none}.book .turned-leaf{fill:var(--paper)}.make-section{background:#e9c7ad33}.make-section .section-heading{grid-template-columns:1.4fr 1fr}.repository-link{display:grid;grid-template-columns:1fr auto;gap:8px 24px;text-decoration:none;padding:22px 0;margin-bottom:28px;border-block:1px solid var(--line)}.repository-link strong{grid-column:2;grid-row:1/3;align-self:center;font-size:19px;font-weight:400}.repository-link>span:last-child{font-size:13px;color:var(--muted)}film-agent-start{display:block}.prompt-paper{position:relative;padding:35px 40px 20px;margin:36px 0 25px;border:1px solid var(--line);background:#f8f3e7;box-shadow:4px 6px 0 #34325808;border-radius:2px 7px 3px 4px}.prompt-paper:before{content:'';position:absolute;width:100px;height:24px;left:calc(50% - 50px);top:-13px;background:#d0b98b55;transform:rotate(-3deg)}.prompt-paper blockquote{margin:20px 0 24px;font:700 25px/1.6 var(--hand);white-space:pre-wrap;overflow-wrap:anywhere}html[lang=zh-CN] .prompt-paper blockquote{font-size:20px;line-height:1.9}.prompt-paper button{padding:10px 15px;border:1px solid var(--ink);background:transparent;border-radius:2px;font-size:13px}.prompt-paper button:hover{background:#3432580c}.copy-status{min-height:1.8em;margin:10px 0 0;font-size:12px;color:var(--green)}.starter-note{max-width:850px;margin-bottom:0}.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px}.note-number{font:700 42px var(--hand);color:var(--red)}.notes-grid h3{margin:12px 0 18px}.resource-links{display:flex;flex-wrap:wrap;gap:15px 28px;border-top:1px solid var(--line);padding-top:25px;margin-top:38px;font-size:13px}.sources{padding-bottom:70px}.source-list article{display:grid;grid-template-columns:180px 1fr;gap:35px;padding:30px 0;border-top:1px solid var(--line)}.source-list h3{font-size:28px;margin-bottom:12px}.source-list p{font-size:14px;line-height:1.9;color:var(--muted);max-width:830px}.source-list a{display:inline-block;font-size:13px;margin-right:25px}footer{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);padding-block:35px 45px;font-size:12px}footer p{margin:0;text-align:center;color:var(--muted)}
@media(min-width:1000px){.hero-grid>div:first-child{animation:arrive .7s both}.hero-intro{animation:arrive .7s .1s both}}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.masthead nav{gap:16px}.hero-grid{gap:5%;grid-template-columns:1.1fr 1fr}.lede{font-size:17px}.crayons{transform:scale(.85) rotate(-7deg);transform-origin:left}.principles{gap:22px}.principles article+article{padding-left:22px}.notes-grid{gap:25px}.repository-link{grid-template-columns:1fr}.repository-link strong{grid-row:auto;grid-column:auto}.film-footnote{flex-direction:column;gap:12px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.masthead{padding-block:12px}.masthead nav{gap:23px}.hero{padding-top:30px}.hero-grid,.section-heading,.make-section .section-heading{grid-template-columns:1fr;gap:28px}.hero-grid{padding-block:30px 35px}.hero-intro{padding:0}.hero h1{font-size:85px}.hand-note{font-size:27px}.crayons{display:none}.lede{font-size:17px}.hero-intro .small{max-width:540px}.palette{gap:14px 20px}.palette>span:first-child{width:100%;margin:0}.section{padding-block:55px}.section-heading{margin-bottom:28px}.section-heading .eyebrow{margin-bottom:16px}.chapters{grid-template-columns:repeat(3,minmax(0,1fr))}.chapter-heading{align-items:start;flex-direction:column;gap:8px}.principles,.notes-grid{grid-template-columns:1fr;gap:30px}.principles article{display:grid;grid-template-columns:135px 1fr;gap:0 22px}.principles article+article{border-left:0;border-top:1px solid var(--line);padding:30px 0 0}.material-drawing{grid-row:1/4;margin:0;height:145px;align-self:center}.principles h3{margin:9px 0 12px}.notes-grid article{border-bottom:1px solid var(--line);padding-bottom:25px}.notes-grid h3{margin-top:5px}.source-list article{grid-template-columns:1fr;gap:12px}.prompt-paper{padding:30px 24px 18px}.prompt-paper blockquote{font-size:24px}.source-list a{margin-bottom:8px}footer{flex-wrap:wrap}footer p{text-align:left}footer>a:last-child{width:100%}figcaption{font-size:9px}.issue .eyebrow{font-size:10px}.issue a{font-size:11px}}
@media(max-width:420px){.wrap{width:calc(100% - 32px)}.hero h1{font-size:76px}.principles article{grid-template-columns:1fr}.material-drawing{grid-row:auto;height:135px;margin-bottom:20px;max-width:250px}.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-heading h3{font-size:27px}.language button{padding-inline:8px}.studio-header-actions{gap:8px!important}.palette{font-size:11px;gap:12px}.palette i{width:16px;height:16px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.title-zh{display:none}html[lang=zh-CN] .title-zh{display:inline}html[lang=zh-CN] .title-en{display:none}

/* CJK handwriting is shipped with the page, rather than supplied by the OS. */
@font-face {
  font-family: 'Crayon Hand SC';
  src: url('fonts/CrayonHandSC-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
html[lang=zh-CN] :is(h1,h2,h3,.hand-note,.watch-link,.prompt-paper blockquote) {
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .015em;
}
html[lang=zh-CN] h1 {
  font-size: clamp(70px,8vw,112px);
  line-height: 1.18;
  -webkit-text-stroke: 1.1px currentColor;
}
html[lang=zh-CN] h2 { -webkit-text-stroke: .45px currentColor; }
html[lang=zh-CN] h3 { -webkit-text-stroke: .2px currentColor; }
html[lang=zh-CN] .hand-note { line-height: 1.5; -webkit-text-stroke: .25px currentColor; }
html[lang=zh-CN] .watch-link { -webkit-text-stroke: .25px currentColor; }
html[lang=zh-CN] .prompt-paper blockquote { line-height: 1.95; }
/* Surface-fixed pigment gaps: never animate or reseed the grain. */
html[lang=zh-CN] :is(h1,.section-heading h2,.hand-note) {
  -webkit-mask-image: url('wax-grain.svg');
  mask-image: url('wax-grain.svg');
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
  mask-mode: alpha;
}