:root{font-family:Arial,"Segoe UI",sans-serif;color:#202020;background:#fff;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,textarea{font:inherit}button{cursor:pointer}em,i{font-style:normal}button:focus-visible,textarea:focus-visible{outline:2px solid #303030;outline-offset:3px}
.site-header{position:relative;min-height:126px;padding:18px 24px}.site-title{font-size:clamp(32px,4.5vw,72px);line-height:1.06;font-weight:400;letter-spacing:.015em;white-space:nowrap}
.main-layout{width:min(644px,calc(100% - 32px));margin:8px auto 96px}.editor-panel,.board-panel{width:100%}.editor-panel h1,.board-panel h2{margin:0 0 12px;text-align:center;font-family:"Segoe Print","Comic Sans MS",cursive;font-size:clamp(50px,6vw,76px);font-style:normal;font-weight:400;line-height:1.15;letter-spacing:.015em}
.editor-wrap{height:384px;display:flex;flex-direction:column;border:2px solid #252525;border-radius:30px;background:#fff;overflow:hidden}.editor-wrap:focus-within{border-color:#111}textarea{width:100%;min-height:0;flex:1;resize:none;border:0;outline:0;padding:20px 24px;background:transparent;color:#202020;font-family:Consolas,"Courier New",monospace;font-size:16px;line-height:1.55;tab-size:4}textarea:focus-visible{outline:0}.editor-actions{display:flex;align-items:end;justify-content:space-between;padding:5px 8px 7px}.button{display:grid;place-items:center;flex:none;background:#fff;border-radius:18px;line-height:1.12;font-family:"Segoe Print","Comic Sans MS",sans-serif;font-style:normal}.button-example{width:158px;height:86px;border:2px solid #ec3838;color:#e63232;font-size:19px}.button-example:hover{background:#fff5f5}.button-run{width:138px;height:93px;border:2px solid #222;color:#e63232;padding:4px}.button-run svg{width:58px;height:48px}.button-run span{color:#252525;font-size:18px}.button-run:hover:not(:disabled){background:#fafafa}.button-run:disabled{opacity:.55;cursor:wait}.status{margin:12px 6px 0;font-size:14px;line-height:1.5;white-space:pre-wrap}.status:not(.error){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.status.error{color:#a42424}
.board-panel{margin-top:8px}.board-panel h2{margin-bottom:4px}.board{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));width:100%;aspect-ratio:2 / 1;overflow:hidden;border:2px solid #f2f2f2;border-radius:26px;background:#fff}.cell{min-width:0;min-height:0;background:#fff}
.book-button{position:absolute;top:160px;left:calc(50% + 390px);display:flex;align-items:stretch;width:142px;height:188px;padding:0;border:0;background:transparent;transform:rotate(5deg);transition:transform .2s}.book-button:hover{transform:rotate(2deg) translateY(-4px)}.book-coil{position:absolute;left:0;top:12px;bottom:12px;width:24px;z-index:2;background:repeating-linear-gradient(to bottom,transparent 0 10px,#383532 10px 13px,#b6aaa0 13px 15px,transparent 15px 23px);border-radius:8px}.book-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;margin-left:12px;border:1px solid #b49b82;border-radius:3px 9px 9px 3px;background:linear-gradient(115deg,#b69272 0%,#d8b99b 52%,#c7a784 100%);box-shadow:3px 6px 0 #eee6dd,6px 10px 14px #0002;color:#372a20}.book-mark{font-size:36px}.book-word{font-family:"Segoe Print","Comic Sans MS",sans-serif;font-size:18px}
.theory-dialog{width:min(690px,calc(100vw - 28px));max-width:none;max-height:min(850px,calc(100dvh - 30px));padding:0;border:0;background:transparent;box-shadow:0 22px 70px #0004;overflow:auto}.theory-dialog::backdrop{background:#1c1c1cb3}.notebook-page{position:relative;min-height:760px;padding:52px 52px 70px 112px;background:linear-gradient(to right,transparent 0 86px,#d9aaa0 86px 87px,transparent 87px),repeating-linear-gradient(to bottom,#f8f6e6 0 32px,#c9cabc 33px,#f8f6e6 34px);border:1px solid #e2ddc6;color:#2b2a27;box-shadow:inset 12px 0 20px #8a7a5830}.notebook-page::before{content:"";position:absolute;left:31px;top:38px;bottom:38px;width:14px;background:radial-gradient(circle,#74736c 0 6px,transparent 7px) center top / 14px 126px repeat-y}.notebook-page h2{margin:0 0 30px;font-family:"Segoe Print","Comic Sans MS",sans-serif;font-size:35px;font-weight:400;line-height:1.4}.notebook-lead{margin:0 0 28px;font-size:17px;line-height:34px}.dialog-close{position:absolute;right:24px;top:20px;border:0;background:transparent;font-size:34px;line-height:1;color:#38342e}.theory-list{margin:0}.theory-list>div{margin:0 0 18px}.theory-list dt{font-size:16px;font-weight:700;line-height:34px;overflow-wrap:anywhere}.theory-list dd{margin:0;font-size:15px;line-height:34px}.theory-list code{font-family:Consolas,"Courier New",monospace}.theory-colors{font-size:15px;line-height:34px}
@media(max-width:1120px){.book-button{left:auto;right:30px;top:145px;width:96px;height:130px}.book-word{font-size:12px}.book-mark{font-size:25px}}
@media(max-width:780px){.site-header{min-height:106px;padding:16px 14px 0}.site-title{padding-right:42px;font-size:clamp(23px,5.5vw,39px);white-space:normal}.book-button{top:16px;right:14px;left:auto;width:37px;height:45px;transform:none}.book-button:hover{transform:none}.book-coil{top:5px;bottom:5px;width:7px;background:repeating-linear-gradient(to bottom,#34302c 0 2px,transparent 2px 7px)}.book-cover{margin-left:5px;border-radius:2px 4px 4px 2px;box-shadow:1px 2px 0 #eee6dd}.book-mark{font-size:18px}.book-word{display:none}.main-layout{width:calc(100% - 24px);margin:0 auto 54px}.editor-panel h1,.board-panel h2{font-size:clamp(47px,12vw,64px);margin-bottom:5px}.editor-wrap{height:380px;border-radius:23px}.board-panel{margin-top:12px}.board{border-radius:20px}.button-example{width:112px;height:61px;font-size:14px;border-radius:15px}.button-run{width:85px;height:63px;border-radius:15px}.button-run svg{width:35px;height:32px}.button-run span{font-size:13px}.notebook-page{min-height:700px;padding:52px 21px 45px 64px;background:linear-gradient(to right,transparent 0 47px,#d9aaa0 47px 48px,transparent 48px),repeating-linear-gradient(to bottom,#f8f6e6 0 32px,#c9cabc 33px,#f8f6e6 34px)}.notebook-page::before{left:15px}.notebook-page h2{font-size:28px}.theory-list dt{font-size:13px}.theory-list dd,.theory-colors,.notebook-lead{font-size:13px}}
@media(max-width:390px){.site-title{font-size:23px}.editor-wrap{height:360px}textarea{padding:15px;font-size:13px}}

.lesson-panel{margin:0 0 42px;padding:0 2px}.lesson-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;color:#737373;font-size:13px}.text-button{border:0;padding:5px 0;background:none;color:#555;text-decoration:underline;text-underline-offset:3px;font-size:13px}.lesson-panel h2{margin:0 0 8px;font-size:29px;font-weight:500;letter-spacing:-.025em}.lesson-goal{margin:0 0 22px;font-size:16px;line-height:1.55}.lesson-label{display:block;margin:20px 0 9px;color:#777;font-size:12px}.target-board{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));width:min(340px,100%);aspect-ratio:2/1;overflow:hidden;border:1px solid #ededed;border-radius:13px;background:#fff}.target-cell{min-width:0;min-height:0}.lesson-command,.lesson-example{margin:0;padding:0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:1.55}.lesson-command{font-weight:700}.lesson-explanation{margin:8px 0 0;max-width:540px;color:#555;font-size:14px;line-height:1.5}.lesson-example{padding:13px 15px;border-radius:12px;background:#f8f8f7;color:#333}.lesson-stage{margin:16px 0 0;color:#555;font-size:14px;line-height:1.45}
.run-actions{display:flex;align-items:end;gap:10px}.stop-button{height:42px;padding:7px 13px;border:1px solid #888;border-radius:12px;background:#fff;color:#333;font-size:13px}.stop-button[hidden],.run-line[hidden],#lesson-teaching[hidden],.lesson-actions[hidden]{display:none}.run-line{margin:12px 3px 0;padding:8px 10px;border-left:3px solid #d39030;background:#fff8e7;font-family:Consolas,"Courier New",monospace;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}textarea::selection{background:#ffe29b;color:#202020}.cell{transition:background-color .18s ease}
.lesson-actions{margin:25px 0 0}.lesson-feedback{min-height:22px;margin:0 0 14px;color:#555;font-size:14px;line-height:1.5}.lesson-feedback.success{color:#2b6846}.lesson-feedback.error{color:#a42424}.lesson-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.quiet-button{min-height:42px;padding:8px 14px;border:1px solid #c7c7c7;border-radius:12px;background:#fff;color:#262626;font-size:13px}.quiet-button:hover:not(:disabled){background:#f7f7f7}.quiet-button:disabled{opacity:.4;cursor:not-allowed}.primary-button{border-color:#252525}
@media(max-width:780px){.lesson-panel{margin-bottom:30px;padding:0 2px}.lesson-panel h2{font-size:24px}.lesson-goal{font-size:14px}.lesson-example{font-size:12px}.lesson-buttons{justify-content:center}.quiet-button{flex:1 1 auto;min-width:84px}.stop-button{height:36px;padding:5px 8px;font-size:11px}.run-actions{gap:5px}.run-line{font-size:11px}}
.target-cell{box-shadow:inset 0 0 0 .5px #eeeeee55}