:root{--green:#294f40;--deep:#203f34;--sage:#708373;--gold:#d9ae51;--cream:#f7f7f0;--ink:#293f35;--muted:#80887c;--line:#e4e7dc;--serif:'Hiragino Mincho ProN','Yu Mincho',serif;--sans:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.7}button,input,textarea,select{font:inherit}button{cursor:pointer}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{color:inherit}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d6a33c;outline-offset:4px}button{border:0;background:none}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}button{transition:background .18s,transform .18s,box-shadow .18s}button:hover:not(:disabled){filter:brightness(.98)}.sidebar{width:235px;position:fixed;inset:0 auto 0 0;z-index:5;background:#fdfdf8;border-right:1px solid var(--line);padding:32px 23px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;font-family:var(--serif);font-size:21px;font-weight:bold;white-space:nowrap}.brand small{display:block;letter-spacing:1.8px;font:8px var(--sans);margin-top:3px}.seal{font-family:Georgia,serif;font-size:41px;color:#ad9147;line-height:1}.school-label{font-size:10px;color:#8e9887;letter-spacing:2px;margin:48px 15px 16px}.nav-item{width:100%;display:flex;align-items:center;text-align:left;gap:12px;padding:13px 12px;font-size:12px;margin:5px 0;border-radius:8px;color:#737e72}.nav-item>span{font-size:24px;line-height:1;width:22px;text-align:center}.nav-item small{margin-left:auto;font-size:10px;background:#ecf0e5;padding:0 6px;border-radius:4px}.nav-item.selected{background:var(--green);color:#fff}.sidebar-garden{margin-top:auto;border-top:1px solid var(--line);padding:24px 10px 18px}.sidebar-garden>span{display:block;font-size:28px;margin-bottom:9px}.sidebar-garden b{font-size:12px;font-weight:500;line-height:2}.sidebar-garden p{font-size:10px;color:var(--muted);margin-top:8px}.help-link{text-align:left;font-size:11px;padding:13px 10px;border-top:1px solid var(--line)}.sidebar-bottom{font:8px var(--sans);letter-spacing:2px;color:#969e8b;margin:24px 10px 0}.sidebar-bottom small{display:block;font-size:9px;letter-spacing:1px;margin-top:7px}.main-shell{margin-left:235px}.topbar{height:85px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 44px;background:#fbfcf6}.breadcrumb{font-size:11px;color:#8a9384}.breadcrumb span{margin:0 14px;color:#c0c5b7}.breadcrumb b{font-weight:500;color:#475d4d}.top-actions{display:flex;align-items:center;gap:23px}.sound-button{border:1px solid #d9dfd2;border-radius:30px;padding:7px 15px;font-size:11px;background:#fff}.user-pill{display:flex;align-items:center;gap:10px;text-align:left;font-size:11px}.user-avatar{width:34px;height:34px;background:#e4ead8;color:#51714e;border-radius:50%;display:grid;place-items:center}.user-pill small{display:block;font-size:9px;color:#929a89}.tiny-ring{--p:0%;width:27px;height:27px;background:conic-gradient(var(--green) var(--p),#e2e7da 0);border-radius:50%;position:relative}.tiny-ring:after{content:'';position:absolute;inset:4px;background:#fbfcf6;border-radius:50%}main{padding:30px 44px 35px;max-width:1580px;margin:auto;min-height:calc(100vh - 155px)}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{display:block;font-size:9px;font-weight:600;letter-spacing:2px;color:#8a947f;margin-bottom:5px}.page-heading h1{font-family:var(--serif);font-size:30px;letter-spacing:3px;font-weight:600}.page-heading p{font-size:12px;color:#7c8878;margin-top:9px}.season{font-family:var(--serif);font-size:12px;color:#8d977e;letter-spacing:1px}.hero{height:365px;border-radius:12px;overflow:hidden;position:relative;background-image:linear-gradient(90deg,rgba(245,245,226,.97) 0%,rgba(245,245,226,.86) 28%,rgba(245,245,226,.15) 59%,transparent 74%),url('/assets/academy.png');background-size:cover;background-position:center 48%;box-shadow:0 3px 12px #26382608}.hero-copy{position:relative;z-index:1;padding:36px 39px}.hero-tag{font-size:9px;letter-spacing:2px;color:#607553;border:1px solid #b6c1a6;border-radius:30px;display:inline-block;padding:4px 12px;background:#f8faed80}.hero h2{font-family:var(--serif);font-size:33px;line-height:1.65;font-weight:600;letter-spacing:2px;margin:15px 0 12px;color:#284735}.hero p{font-size:12px;line-height:1.9;color:#5a6c52}.button{background:var(--green);color:#fff;border-radius:7px;padding:13px 24px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:22px;box-shadow:0 3px 5px #1b3c2710}.button:hover:not(:disabled){background:#3b654f;transform:translateY(-1px)}.button.golden{background:#d5aa49;color:#fffdf5;box-shadow:0 4px 8px #8e6a3122}.button.light{background:#eaf0e3;color:var(--green);box-shadow:none}.button.small{padding:8px 16px;font-size:11px}.button.full{width:100%}.hero .button{margin-top:22px;padding:11px 23px;min-width:268px}.hero-note{font-size:9px;letter-spacing:1px;color:#809071;margin:10px 2px}.garden-caption{position:absolute;right:18px;bottom:16px;color:#fff;font-family:Georgia,serif;font-style:italic;font-size:10px;text-shadow:0 1px 3px #324221}.welcome-strip{margin:18px 0 26px;display:flex;align-items:center;gap:16px;background:#eff2e6;border:1px solid #e2e7d7;border-radius:9px;padding:10px 17px;min-height:77px}.portrait{display:inline-block;position:relative;overflow:hidden;flex-shrink:0}.portrait img{position:absolute;max-width:none;mix-blend-mode:multiply}.guide-avatar{width:53px;height:53px;background:#f9faf2;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid #e3e8d4}.guide-avatar .portrait{width:53px}.welcome-strip .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:2px}.welcome-strip p{font-size:11px;letter-spacing:.3px}.text-link{font-size:11px;color:#6c815b;padding:4px 0;white-space:nowrap}.welcome-strip>.text-link{margin-left:auto;background:#fbfcf5;border:1px solid #d7dfc9;border-radius:20px;padding:5px 12px;font-size:10px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-heading h2{font-family:var(--serif);font-size:20px;letter-spacing:1px}.section-heading h2 span{font:8px var(--sans);display:inline-block;color:#9bA18c;letter-spacing:1.5px;margin-left:14px}.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.path-card{text-align:left;background:#fdfef8;border:1px solid #dfe5d4;border-radius:10px;padding:21px 23px 16px;position:relative;overflow:hidden}.path-card:hover{transform:translateY(-3px);box-shadow:0 7px 18px #2b503412}.path-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.phase-icon{font-size:32px;line-height:1.1}.level{font-size:10px;color:#658251}.level b{font-size:9px;font-weight:400;color:#869975;margin-left:9px}.path-card h3{font-family:var(--serif);font-size:19px;letter-spacing:2px;margin-top:12px}.path-card p{font-size:10px;color:#8e987e;margin-top:5px}.path-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:15px;font-size:9px;color:#879276}.round-arrow{display:grid;place-items:center;border:1px solid #dce6ce;border-radius:50%;width:24px;height:24px;font-size:14px}.phase-1{background:#f3f5e9;border-color:#dde3c8}.phase-2{background:#fbf6e8;border-color:#e8dfc5}.phase-2 .level,.phase-2 .path-bottom{color:#a28b50}.home-bottom{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:22px}.continue-card,.pet-card{border:1px solid var(--line);background:#fcfcf6;border-radius:9px;padding:18px 22px}.continue-card h3{font-family:var(--serif);font-size:17px;letter-spacing:1px}.continue-card .eyebrow{font-size:8px;margin-bottom:3px}.next-lesson{display:flex;align-items:center;gap:15px;margin-top:14px}.lesson-number{font:22px Georgia,serif;color:#a8b38d}.next-lesson small{display:block;color:#909b7e;font-size:9px}.next-lesson b{font-size:11px;font-weight:500}.circle-button{border:1px solid #d8e1ca;width:31px;height:31px;border-radius:50%;margin-left:auto}.pet-card{display:flex;align-items:center;gap:13px;background:#f5f4e9;padding:15px}.pet-card>div{width:140px;display:flex;align-items:end;flex-shrink:0}.pet-card .portrait:first-child{width:83px}.pet-card .portrait:last-child{width:57px}.pet-card b{font-size:11px;display:block;font-family:var(--serif);white-space:nowrap}.pet-card p>span{font-size:10px;line-height:1.9;display:block;color:#899176;margin-top:6px}footer{font-size:9px;letter-spacing:1px;margin:0 44px;padding:18px 0;border-top:1px solid var(--line);color:#9aa18c;display:flex;justify-content:space-between}.mobile-only{display:none}.phase-tabs{display:flex;background:#ecefe4;padding:5px;border-radius:10px;margin:24px 0;gap:5px}.phase-tabs button{flex:1;padding:12px;border-radius:7px}.phase-tabs button.active{background:white;box-shadow:0 2px 4px #263c2012}.phase-tabs small{margin-left:14px;font-size:10px;color:var(--muted)}.journey-progress{display:flex;align-items:center;gap:20px;background:white;border:1px solid var(--line);padding:20px;border-radius:10px;font-size:12px}.journey-progress b{margin-left:10px}.progress-track{height:7px;background:#edf0e5;border-radius:20px;flex:1;overflow:hidden}.progress-track i{display:block;height:100%;background:#89a468;border-radius:20px}.journey-progress small{color:var(--muted)}.rank-section{margin-bottom:30px}.rank-label{display:flex;align-items:center;gap:13px;margin-bottom:12px}.rank-label>span{border:1px solid #cfd9bd;color:#76895b;border-radius:6px;padding:3px 12px;font-size:12px}.rank-label h2{font:18px var(--serif)}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.lesson-card{padding:18px;text-align:left;background:white;border:1px solid #dce5d1;border-radius:9px}.lesson-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1px;color:#98a087}.lesson-top b{font-size:16px;font-weight:400;color:var(--green)}.lesson-card h3{font-size:13px;margin:10px 0 12px}.lesson-card>span:last-child{font-size:10px;color:#8d997b}.lesson-card.done{background:#f0f5e8}.lesson-card.locked{background:#f2f2ec;border-style:dashed;color:#8a9182}.friends-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.friend-card{background:#fffef7;border:1px solid var(--line);border-radius:12px;text-align:center;padding:25px 15px}.friend-card .portrait{height:175px}.friend-card h2{font:20px var(--serif);margin:12px 0}.friend-card p{font-size:11px;color:#889378}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stats-grid article{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}.stats-grid article>span{font-size:12px;color:#819170}.stats-grid b{display:block;font:34px var(--serif);margin-top:10px}.stats-grid small{font:13px var(--sans);margin-left:7px}.record-list{margin-top:24px}.record-list article{display:flex;align-items:center;gap:20px;padding:18px;background:#fff;border-bottom:1px solid var(--line)}.record-check{color:#7d965e;font-size:22px}.record-list article>div{flex:1}.record-list small{font-size:9px;color:#89957d;display:block}.record-list b{font-size:12px;display:block}.record-list strong{color:#cda855;letter-spacing:2px}.record-list article>span:not(.record-check){font-size:14px;text-align:center}.empty{text-align:center;padding:60px 20px}.empty>span{font-size:50px}.empty h2{font:22px var(--serif);margin:15px 0}.empty .button{margin-top:25px}.notice{background:#f4edda;border-radius:8px;padding:14px;margin-top:20px;font-size:12px}.search-box{display:flex;align-items:center;gap:14px;background:white;border:1px solid var(--line);border-radius:9px;padding:4px 15px;margin:15px 0 22px}.search-box input{border:0;width:100%;background:transparent;padding:12px}.dictionary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.dictionary-grid article{background:#fff;border:1px solid var(--line);border-radius:9px;padding:20px}.dictionary-grid h3{font:18px var(--serif);margin-bottom:7px}.dictionary-grid p{font-size:12px;line-height:2;color:#7a8970}.lesson-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#909980}.lesson-title{margin:21px 0}.lesson-title h1{font:27px var(--serif);letter-spacing:2px}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:24px}.lesson-work{border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden}.work-top{display:flex;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--line);font-size:11px}.live-dot{display:inline-block;width:6px;height:6px;background:#8cab6e;border-radius:50%;margin-right:6px}#timer{font-variant-numeric:tabular-nums;color:#8c927f}.stage{min-height:330px;padding:28px;text-align:center;position:relative;background:#fffef9}.intro{max-width:510px;margin:auto;padding:8px 0}.intro-badge{font-size:42px}.intro h2{font:23px var(--serif);margin:9px 0 15px}.intro p{font-size:14px;line-height:2;text-align:left;margin-bottom:25px}.intro small{display:block;font-size:10px;color:#949c87;margin-top:13px}#feedback{font-size:12px;min-height:49px;padding:13px 20px;background:#f2f5eb;border-top:1px solid #e5eadb;text-align:center}#feedback.try-again{background:#fff2df;color:#9d7534}#feedback.good{color:#5a7b43}.keyboard-panel{padding:18px 16px 12px;background:#f7f8f1;border-top:1px solid var(--line)}.keyboard-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;gap:6px}.keyboard-title b{font-size:10px;font-weight:500}.keyboard-title span{font-size:9px;color:#879777}.key-row{display:flex;gap:4px;margin-bottom:5px;justify-content:center}.key{flex:1;min-width:0;text-align:center;display:grid;place-items:center;background:#fff;border:1px solid #d7ddd0;border-bottom:3px solid #cbd2c1;border-radius:5px;font-size:10px;height:34px;color:#6f7a64;position:relative;transition:background .1s}.key.wide{flex:1.6;font-size:8px}.key.space{flex:7}.key.target{background:#f6e6b1;border-color:#c7a758;color:#65562f;box-shadow:0 0 0 2px #e8d38b66}.key.pressed{background:#467452;color:white;transform:translateY(2px);border-bottom-width:1px}.home-key:after{content:'';width:7px;height:2px;background:#aab69c;position:absolute;bottom:5px}.keyboard-panel>p{font-size:8px;color:#939d87;margin-top:10px;text-align:center}.tutor{text-align:center}.tutor-art{height:196px;background:radial-gradient(ellipse at 50% 70%,#edf0db 0%,#f7f7f0 70%);margin-bottom:9px;display:flex;align-items:end;justify-content:center}.tutor-art .portrait{height:190px;max-width:200px}.tutor-name{font-size:11px;border:1px solid #dbe2ce;border-radius:20px;padding:5px 14px;background:#fdfef7}.speech{background:#fffef6;border:1px solid #dfe5d2;border-radius:12px;padding:19px;margin-top:17px;text-align:left;position:relative}.speech:before{content:'';position:absolute;width:12px;height:12px;top:-7px;left:calc(50% - 6px);background:#fffef6;border-top:1px solid #dfe5d2;border-left:1px solid #dfe5d2;transform:rotate(45deg)}.speech p{font-size:13px;line-height:2.1}.speech .text-link{margin-top:11px}.kind-note{font-size:11px;color:#899277;margin:17px 0;line-height:2}.stage-instruction{font-size:13px;color:#61794e;margin-bottom:20px;line-height:1.9}.stage-instruction b{display:inline-block;margin-left:15px;color:#a7904d}.flower-field{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;background:#eff4e7;border-radius:100px;padding:25px 15px}.flower{font-size:47px;line-height:1.4}.target-flower{filter:drop-shadow(0 4px 5px #dab65735)}.treasure{font-size:95px;margin:22px auto}.treasure:hover{transform:scale(1.04)}#chest-menu{min-height:42px}#scroll-garden{height:230px;overflow:auto;border:2px solid #d9e4c7;border-radius:12px;background:linear-gradient(#f2f7e9,#e5efd1)}.garden-path{height:840px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:30px}.garden-path>span{font-size:45px}.garden-path p{color:#9ca887;font-size:15px}.drag-area{display:flex;align-items:center;justify-content:space-around;min-height:235px}.drag-item{font-size:64px;touch-action:none;user-select:none;z-index:2;position:relative}.drag-item.dragging{transition:none;cursor:grabbing}#drop-zone{border:2px dashed #bbcda5;border-radius:16px;background:#f0f4e6;padding:38px 20px;min-width:150px;font-size:17px}#drop-zone small{display:block;font-size:10px;color:#8a9c75}.key-target{font-size:52px;display:inline-block;min-width:110px;padding:10px 25px;border:2px solid #d6c082;border-bottom:7px solid #c4ad6f;background:#fff6d8;border-radius:12px;margin:10px 0 22px}.sequence-dots{display:flex;justify-content:center;gap:10px;margin-bottom:15px;flex-wrap:wrap}.sequence-dots span{padding:4px 9px;background:#eef1e6;border-radius:5px;font-size:11px}.sequence-dots span.done{background:#527d4e;color:white}.muted{font-size:11px;color:#879277;line-height:1.9}.typing-model{white-space:pre-wrap;background:#f0f3e7;border:1px solid #e2e9d6;border-radius:8px;padding:15px;font-size:23px;letter-spacing:3px;margin:10px 0 18px;text-align:left;overflow-wrap:anywhere}.practice-input{background:#fff;width:100%;border:1px solid #cbd7bc;border-radius:7px;padding:13px 15px;font-size:19px;line-height:1.7;color:var(--green);margin:6px 0 18px;min-height:55px;resize:vertical}.practice-input:focus{border-color:#98af7b;background:#fefff9}.practice-input.large-text{font-size:32px}.stage textarea{min-height:130px}.input-hint{font-size:11px;color:#8a967a;margin-bottom:12px;min-height:16px}.maze{display:grid;grid-template-columns:repeat(3,75px);grid-template-rows:repeat(3,75px);gap:7px;justify-content:center}.maze>div{border:1px solid #d6e2c6;background:#eff4e6;border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:38px}.maze .portrait{height:65px}.move-arrow{display:block;font-size:25px;color:#a3b28b}.stage label{text-align:left;font-size:12px;display:block}.mini-window{border:1px solid #dce3d0;border-radius:10px;overflow:hidden;padding-bottom:20px;background:#fff}.mini-window>.practice-input,.mini-window>label{margin:15px}.mini-window>label .practice-input{width:100%;margin-left:0;margin-right:0}.window-bar{background:#edf2e5;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-size:11px;text-align:left;margin-bottom:20px}.window-bar span{font-size:9px;color:#96a184}.window-bar button{padding:4px 9px;border:1px solid #cad7b9;border-radius:5px;background:#fff}.file-shelf{display:flex;justify-content:space-around;padding:18px}.file-shelf>span{font-size:38px}.file-shelf small{display:block;font-size:10px}.mini-window h2{font:22px var(--serif);margin:20px}#file-editor{padding:20px}.browser-tabs{display:flex;background:#e4ebd9;gap:4px;padding:5px 5px 0}.browser-tabs button{padding:10px 20px;border-radius:6px 6px 0 0;font-size:12px}.browser-tabs button.active{background:#fff}.tab-scene{padding:36px;font-size:45px}.tab-scene h2{font-size:20px}.quiz-icon{font-size:39px;margin:2px 0 12px;color:#a4ae8c}.quiz-question{font-size:18px;line-height:1.8;margin-bottom:22px}.quiz-choices{display:grid;gap:12px}.choice{background:#f5f7ef;border:1px solid #dce4cf;border-radius:8px;text-align:left;padding:14px 18px;font-size:13px}.choice span{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:14px;border-radius:50%;background:#e3ead7;color:#7e9567;font-size:11px}.choice.correct{background:#e4f2d7;border-color:#8ba972}.choice.incorrect{border-color:#d5b17a;background:#fff6e5}.practice-table{width:100%;border-collapse:collapse;margin:18px 0 24px;table-layout:fixed}.practice-table th{background:#eaf0e0;border:1px solid #d4dfc5;padding:7px;color:#758b5b;font-size:12px}.practice-table th:first-child{width:35px}.practice-table td{border:1px solid #d4dfc5;padding:0}.practice-table input{width:100%;padding:13px 8px;border:0;background:#fff;color:var(--green);font-size:15px}.practice-table input:focus{background:#fff7dc}.sequence-output{min-height:63px;padding:16px;background:#edf3e4;border-radius:8px;margin-bottom:20px;font-size:12px}.code-block{background:#edf0e7;border-left:4px solid #95ac76;border-radius:8px;padding:22px;text-align:left;font-size:16px;line-height:2.6}.code-block select{padding:2px 16px;border:1px solid #b6c7a0;border-radius:4px;background:white;color:var(--green)}.code-block span{color:#7c955e}.watered{font-size:39px;padding:28px 0}.weather{font-size:63px;margin:10px 0 28px}.weather h2{font-size:20px}.button-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.paper{margin:15px auto 25px;background:#fffbee;border:1px solid #ece3c7;width:85%;padding:10px 20px 20px;box-shadow:3px 5px 0 #e9eedf}.paper p{font-size:14px;margin-bottom:10px}dialog{border:1px solid #e0e6d4;border-radius:18px;padding:37px;max-width:510px;width:calc(100% - 32px);background:#fffef8;color:var(--ink);box-shadow:0 30px 100px #17281840;max-height:90vh;overflow:auto}dialog::backdrop{background:#25382d66;backdrop-filter:blur(5px)}.modal-close{position:absolute;top:12px;right:14px;font-size:26px;color:#89977b;line-height:1;padding:4px 9px}dialog h2{font-family:var(--serif);font-size:24px;margin:10px 0 15px;line-height:1.6}dialog p{font-size:13px;line-height:2;margin-bottom:18px}.modal-icon{font-size:38px}.auth-tabs{display:flex;background:#eef2e6;border-radius:8px;padding:4px;margin:22px 0}.auth-tabs button{flex:1;padding:9px 5px;border-radius:5px;font-size:12px}.auth-tabs button.active{background:#fff;box-shadow:0 2px 4px #40502b0c}label{display:block;font-size:12px;margin:13px 0}label small{color:#8d997c;margin-left:9px;font-size:10px}label input:not(.practice-input),label select{display:block;width:100%;border:1px solid #d5dfc8;background:#fff;border-radius:7px;padding:11px;margin-top:6px;color:var(--ink)}.privacy-note{font-size:10px!important;color:#8c947e;margin-top:18px;line-height:1.9!important;margin-bottom:0!important}.form-error{color:#ab704a;min-height:5px;font-size:11px}.help-steps p{background:#f2f5e9;padding:12px 16px;border-radius:8px}.help-steps b{font-size:13px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#294b3b;color:white;padding:12px 24px;border-radius:9px;z-index:100;opacity:0;pointer-events:none;transition:.2s;max-width:90%;font-size:12px}#toast.show{opacity:1;transform:translate(-50%,0)}.result-flower{text-align:center;font-size:60px}.result-flower~.eyebrow,.result-flower~h2,.result-flower~p{text-align:center}.result-stars{text-align:center;font-size:31px;letter-spacing:9px;color:#d1aa50}.result-stats{display:flex;justify-content:center;gap:70px;margin:20px 0}.result-stats span{font-size:12px;text-align:center}.result-stats b{font:30px Georgia,serif}.result-stats small{display:block;font-size:10px;color:#8b987c;margin-top:5px}.result-message{background:#eff4e6;padding:15px;border-radius:8px}.result-home{display:block;margin:18px auto 0}.certificate{text-align:center;background:#fffbea;border:4px double #c9b977;border-radius:8px;padding:38px;margin-top:25px}.certificate>span{font-size:60px;color:#c5a150}.certificate h2{font:27px var(--serif);margin:12px}.certificate h3{font:21px var(--serif);margin:20px}.certificate p{font-size:13px}.search-result{padding:35px 10px}.search-result>span{font-size:10px;color:#8a9b77}.search-result h2{font-size:24px;margin:20px 0}.search-result p{line-height:2.2;font-size:14px}
@media(min-width:1500px){.hero{height:410px}.hero-copy{padding:43px 50px}.hero h2{font-size:40px}.hero p{font-size:14px}.hero .button{margin-top:25px}.path-card{padding:26px}.path-card h3{font-size:23px}.welcome-strip p{font-size:13px}.home-bottom{gap:24px}.pet-card{justify-content:center}.sidebar{width:260px}.main-shell{margin-left:260px}main{padding-left:50px;padding-right:50px}}
@media(max-width:1150px){.sidebar{width:195px;padding:26px 16px}.brand{font-size:17px;gap:8px}.brand small{font-size:7px}.seal{font-size:32px}.main-shell{margin-left:195px}.topbar{padding:0 25px}main{padding:25px}.path-card{padding:18px 15px}.path-card h3{font-size:17px;letter-spacing:1px}.level b{display:block;margin-left:0}.section-heading h2 span{display:none}.home-bottom{grid-template-columns:1fr 1fr}.pet-card{gap:8px}.pet-card>div{width:95px}.pet-card .portrait:first-child{width:55px}.pet-card .portrait:last-child{width:40px}.pet-card b{white-space:normal;font-size:10px}.lesson-layout{grid-template-columns:minmax(0,1fr) 190px;gap:16px}.stage{padding:22px 18px}.speech{padding:14px}.speech p{font-size:12px}.keyboard-title{display:block}.keyboard-title span{display:block}.key-row{gap:3px}.key{font-size:9px;height:30px}.key.wide{font-size:7px}.hero h2{font-size:30px}.friends-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.sidebar{position:relative;width:auto;height:auto;padding:16px 22px;flex-direction:row;align-items:center;gap:20px;border-right:0;border-bottom:1px solid var(--line)}.sidebar nav{display:flex;margin-left:auto;gap:5px}.nav-item{padding:7px 10px;width:auto;font-size:0;gap:0}.nav-item span{font-size:22px}.nav-item small,.school-label,.sidebar-garden,.sidebar-bottom,.help-link{display:none}.main-shell{margin-left:0}.topbar{height:62px}.hero{height:350px}.hero-copy{padding:30px}.hero h2{font-size:29px}.season{font-size:10px}.lesson-layout{grid-template-columns:minmax(0,1fr) 190px}.path-card p{font-size:9px}.path-card h3{font-size:16px}.pet-card{padding:15px}.pet-card>div{width:115px}.pet-card .portrait:first-child{width:65px}.pet-card .portrait:last-child{width:50px}.tutor-art{height:160px}.tutor-art .portrait{height:155px}.breadcrumb{font-size:10px}.key.wide{font-size:6px}footer{margin:0 25px}}
@media(max-width:620px){main{padding:23px 17px}.sidebar{padding:12px 17px;gap:8px}.brand{font-size:16px}.seal{font-size:30px}.brand small{font-size:6px;letter-spacing:1px}.nav-item{padding:7px}.nav-item>span{font-size:21px}.topbar{padding:0 17px}.breadcrumb{font-size:9px}.breadcrumb span{margin:0 5px}.top-actions{gap:10px}.sound-button{font-size:9px;padding:5px 10px}.button.small{font-size:9px;padding:7px 10px}.user-pill{gap:6px}.user-pill>span:nth-child(2){max-width:85px;overflow:hidden}.user-avatar{width:27px;height:27px}.tiny-ring{display:none}.page-heading h1{font-size:27px}.season{display:none}.page-heading{margin-bottom:20px}.hero{height:370px;background-position:60% center;background-image:linear-gradient(90deg,#f4f2dfef 5%,#f5f3e1d9 45%,#f5f3e147 95%),url('/assets/academy.png')}.hero-copy{padding:27px 23px}.hero h2{font-size:29px;line-height:1.65}.hero-tag{font-size:8px}.hero p{font-size:11px}.hero .button{min-width:0;font-size:11px;padding:12px 17px}.hero-note{font-size:8px}.garden-caption{font-size:8px}.welcome-strip{padding:12px;gap:10px;align-items:center}.welcome-strip>.text-link{display:none}.welcome-strip p{font-size:10px}.welcome-strip .eyebrow{font-size:8px}.guide-avatar{width:43px;height:43px}.guide-avatar .portrait{width:43px}.section-heading h2{font-size:18px}.section-heading .text-link{font-size:9px}.path-grid{gap:10px;grid-template-columns:1fr}.path-card{padding:17px 18px;display:grid;grid-template-columns:55px 1fr 85px;column-gap:8px}.path-top{display:contents}.phase-icon{grid-column:1;grid-row:1/4;align-self:center;font-size:34px}.level{grid-column:2;grid-row:1;font-size:9px}.level b{display:inline;margin-left:10px}.path-card h3{grid-column:2;grid-row:2;margin:3px 0;font-size:19px}.path-card p{grid-column:2;grid-row:3;font-size:9px}.path-bottom{grid-column:3;grid-row:1/4;display:flex;flex-direction:column-reverse;justify-content:center;gap:13px;margin:0;font-size:8px}.home-bottom{grid-template-columns:1fr;margin-top:15px;gap:13px}.pet-card{justify-content:center;gap:22px}.pet-card b{font-size:12px}.pet-card p>span{font-size:10px}.pet-card>div{width:130px}.pet-card .portrait:first-child{width:75px}.pet-card .portrait:last-child{width:55px}.lesson-layout{display:flex;flex-direction:column-reverse;gap:16px}.tutor{display:grid;grid-template-columns:70px 1fr;gap:0 15px;align-items:center}.tutor-art{height:85px;grid-column:1;grid-row:1;margin:0}.tutor-art .portrait{height:85px;max-width:70px}.tutor-name{grid-column:1;grid-row:2;font-size:8px;padding:2px 3px;border:none}.speech{grid-column:2;grid-row:1/3;margin:0;padding:12px}.speech:before{display:none}.speech p{font-size:12px;line-height:1.9}.speech .text-link{margin-top:4px;font-size:10px}.kind-note{grid-column:1/3;margin:8px 0 0;font-size:10px;line-height:1.6}.kind-note br{display:none}.tutor>#save-account{grid-column:1/3;font-size:10px}.lesson-title h1{font-size:23px}.lesson-heading{font-size:9px}.lesson-heading .text-link{font-size:9px}.stage{padding:22px 16px;min-height:300px}.keyboard-panel{padding:13px 8px 10px}.key-row{gap:2px;margin-bottom:3px}.key{height:28px;font-size:8px;border-radius:3px}.key.wide{font-size:5px}.keyboard-title b{font-size:9px}.keyboard-title span{font-size:8px}.keyboard-panel>p{font-size:7px}.lesson-grid{grid-template-columns:1fr}.lesson-card{padding:17px}.lesson-card h3{font-size:15px;margin:8px 0}.rank-label h2{font-size:17px}.phase-tabs small{display:block;margin:0;font-size:9px}.phase-tabs button{font-size:12px;padding:9px}.journey-progress{padding:14px;gap:10px;flex-wrap:wrap}.journey-progress>span{font-size:11px}.journey-progress small{font-size:9px}.progress-track{min-width:60px}.friends-grid{grid-template-columns:repeat(2,1fr);gap:12px}.friend-card{padding:18px 12px}.friend-card .portrait{height:140px}.friend-card h2{font-size:19px}.friend-card p{font-size:10px}.stats-grid{gap:9px}.stats-grid article{padding:15px 10px}.stats-grid article>span{font-size:9px}.stats-grid b{font-size:23px}.stats-grid small{font-size:10px;margin-left:4px}.record-list article{gap:10px;padding:14px 10px;flex-wrap:wrap}.record-list article>div{min-width:65%}.record-list article>span:not(.record-check){font-size:12px;margin-left:25px}.record-list strong{margin-left:auto}.dictionary-grid{grid-template-columns:1fr}.dictionary-grid article{padding:17px}.page-heading p{font-size:11px}.intro h2{font-size:22px}.intro p{font-size:13px}.quiz-question{font-size:17px}.choice{font-size:12px;padding:13px}.choice span{margin-right:8px}.typing-model{font-size:20px;letter-spacing:1px}.practice-input{font-size:18px}.drag-item{font-size:50px}#drop-zone{min-width:135px;font-size:13px;padding:30px 13px}.watered{font-size:30px}.button{font-size:12px;padding:12px 18px}.certificate{padding:25px 10px}.certificate h2{font-size:23px}footer{margin:0 17px;font-size:8px}footer>span{display:none}dialog{padding:29px 23px}dialog h2{font-size:23px}.result-stats{gap:45px}.result-flower{font-size:52px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.sidebar,.topbar,footer,.page-heading,.stats-grid,.record-list,.certificate .button,.notice{display:none}.main-shell{margin:0}main{padding:0}.certificate{margin-top:60px;border-width:5px}.certificate h2{font-size:32px}}
.ask-shion{position:fixed;bottom:20px;right:24px;z-index:8;border:1px solid #d6dfc8;border-radius:30px;box-shadow:0 4px 18px #2a422322;background:#fffef5;color:#47653b;padding:12px 20px;font-size:17px;font-weight:600}.ask-shion span{font-size:11px;margin-left:7px}.tutor-controls{display:grid;gap:6px}.tutor-controls .text-link{text-align:left;border-bottom:1px solid #e8eddc;padding-bottom:7px;margin-top:5px}.question-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.question-chips button{border:1px solid #d7e1c7;background:#f0f5e7;border-radius:30px;font-size:11px;padding:8px 12px}.answer-note{background:#f1f5e8;border-radius:10px;padding:19px;margin-top:23px}.answer-note h3{font:20px var(--serif);line-height:1.7}.answer-note ol{padding-left:22px;margin:16px 0;font-size:13px;line-height:2}.answer-note li{margin-bottom:12px;padding-left:3px}.help-bottom{margin-top:22px}.large-copy .speech p,.large-copy .stage-instruction,.large-copy .intro p,.large-copy .replay-copy,.large-copy .answer-note li{font-size:18px;line-height:2.2}.large-copy #feedback{font-size:16px}.large-copy .typing-model{font-size:28px}@media(max-width:620px){.ask-shion{right:13px;bottom:12px;padding:9px 15px;font-size:15px}.ask-shion span{font-size:10px}.tutor-controls{grid-template-columns:1fr 1fr;gap:4px}.tutor-controls .text-link{font-size:9px}.tutor-controls .text-link:last-child{grid-column:1/3}.large-copy .speech p{font-size:16px}footer{padding-bottom:64px}}
.classroom-strip{display:flex;margin-top:23px;border:1px solid var(--line);background:#fdfcf4;border-radius:10px;overflow:hidden;align-items:center;gap:27px}.classroom-strip img{width:43%;height:150px;object-fit:cover;object-position:center 47%}.classroom-strip h3{font:20px var(--serif);letter-spacing:1px;margin:7px 0 11px}.classroom-strip p{font-size:11px;color:#89977c;line-height:2}.classroom-strip .eyebrow{font-size:8px}@media(max-width:620px){.classroom-strip{gap:17px}.classroom-strip img{height:155px;width:42%}.classroom-strip h3{font-size:16px}.classroom-strip p{font-size:9px}.classroom-strip .eyebrow{font-size:6px;letter-spacing:1px}}
@media(min-width:851px){.nav-item{font-size:11px;white-space:nowrap}}
.school-emblem{width:51px;height:56px;object-fit:contain;flex-shrink:0}.brand{font-family:'Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;font-size:19px;letter-spacing:.5px;gap:8px}.brand>span{line-height:1.6}.brand small{font-size:7px;letter-spacing:1.6px;color:#83936e}.tutor-art{padding-top:9px;height:210px}.tutor-art .portrait{height:192px}@media(max-width:1150px){.school-emblem{width:42px;height:48px}.brand{font-size:16px;gap:5px}.brand small{font-size:6px;letter-spacing:1.1px}}@media(max-width:850px){.school-emblem{width:35px;height:39px}}@media(max-width:620px){.brand{font-size:15px}.school-emblem{width:32px;height:37px}.tutor-art{height:97px;padding-top:5px}.tutor-art .portrait{height:87px}}
/* The school desk fits in the visible window. Long input fields keep their own scroll. */
@media(min-width:640px){
 body{--app-head:62px}.topbar{height:62px}.main-shell{min-height:100dvh}.main-shell footer{display:none}main{padding:16px 25px;min-height:0}.sidebar{padding-top:22px}.sidebar-garden{padding-top:15px;padding-bottom:10px}.school-label{margin-top:28px}
 body[data-page="home"],body[data-page="lesson"]{overflow:hidden}body[data-page="home"] main,body[data-page="lesson"] main{height:calc(100dvh - var(--app-head));overflow:hidden}
 body[data-page="home"] main{display:grid;grid-template-rows:auto minmax(190px,1fr) auto auto auto;gap:13px}.page-heading{margin-bottom:0}.page-heading h1{font-size:26px}.page-heading .eyebrow{font-size:8px}.hero{height:auto;min-height:0}.hero-copy{padding:20px 28px}.hero h2{font-size:clamp(25px,2.5vw,35px);line-height:1.5;margin:10px 0}.hero p{font-size:11px}.hero .button{margin-top:15px;padding:10px 18px}.hero-note{margin-top:7px;font-size:8px}.welcome-strip{margin:0;min-height:55px;padding:7px 13px}.guide-avatar{width:42px;height:42px}.guide-avatar .portrait{width:42px}.welcome-strip p{font-size:11px}.section-heading{margin:0}.section-heading h2{font-size:19px}.path-card{padding:14px 18px 11px}.phase-icon{font-size:26px}.path-card h3{font-size:18px;margin-top:8px}.path-card p{margin-top:3px}.path-bottom{margin-top:9px}.home-bottom,.classroom-strip{display:none}
 body[data-page="lesson"] main{display:flex;flex-direction:column;gap:10px}.lesson-heading{min-height:24px;flex-shrink:0}.lesson-title{margin:0;flex-shrink:0}.lesson-title h1{font-size:24px}.lesson-title .eyebrow{margin-bottom:2px}.lesson-layout{min-height:0;flex:1;grid-template-columns:minmax(0,1fr) 200px;gap:17px}.lesson-work{display:grid;grid-template-rows:32px minmax(0,1fr) auto auto;min-height:0}.work-top{padding:7px 15px}.stage{min-height:0;padding:14px 18px;overflow:auto;display:flex;flex-direction:column;justify-content:center}.stage>.button{align-self:center;flex-shrink:0}.intro{padding:0;max-width:560px}.intro-badge{font-size:30px}.intro h2{font-size:20px;margin:5px 0 9px}.intro .eyebrow{font-size:8px}.intro p{font-size:13px;line-height:1.9;margin-bottom:15px}.intro small{font-size:9px;margin-top:8px}.intro .button{padding:10px 18px}#feedback{min-height:35px;font-size:11px;padding:8px 13px}.keyboard-panel{padding:10px 10px 7px}.keyboard-title{margin-bottom:7px;display:flex}.keyboard-title b{font-size:9px}.keyboard-title span{font-size:8px}.key{height:27px}.key-row{margin-bottom:3px}.keyboard-panel>p{margin-top:6px;font-size:7px}.tutor{min-height:0;display:flex;flex-direction:column;align-items:center}.tutor-art{height:235px;padding:0;margin:0 0 6px;flex-shrink:0;width:100%}.tutor-art .portrait{height:230px}.tutor-name{font-size:10px;padding:3px 10px}.speech{margin-top:13px;padding:13px;width:100%;overflow:auto;min-height:0;flex-shrink:1}.speech p{font-size:12px;line-height:1.85}.tutor-controls{gap:2px}.tutor-controls .text-link{font-size:10px;padding-bottom:5px;margin-top:4px}.kind-note{font-size:10px;line-height:1.7;margin:9px 0 0}.tutor>#save-account{font-size:9px;margin-top:5px}.ask-shion{position:fixed;bottom:15px;right:20px;padding:9px 14px}.lesson-layout{padding-bottom:43px}.stage-instruction{margin-bottom:12px;font-size:12px}.flower-field{padding:12px;gap:9px}.flower{font-size:36px}.key-target{font-size:37px;margin:5px auto 12px;padding:8px 20px;min-width:85px}.sequence-dots{margin-bottom:9px;gap:6px}.typing-model{font-size:20px;padding:10px;margin:5px 0 10px}.practice-input{padding:8px 11px;font-size:17px;min-height:41px;margin:4px 0 10px}.stage textarea{min-height:77px;max-height:110px}.input-hint{font-size:10px;margin-bottom:6px;min-height:0}.quiz-icon{font-size:29px;margin:0 0 7px}.quiz-question{font-size:16px;margin-bottom:12px}.quiz-choices{gap:7px}.choice{font-size:12px;padding:9px 12px}.treasure{font-size:75px;margin:5px auto}.drag-area{min-height:160px}.maze{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px)}.maze .portrait{height:51px}.mini-window{padding-bottom:12px;flex-shrink:0}.window-bar{padding:8px 12px;margin-bottom:10px}.mini-window h2{font-size:18px;margin:12px}.file-shelf{padding:8px}.file-shelf>span{font-size:28px}.stage label{margin:5px 0}.paper{margin:8px auto 12px;padding:8px}.paper p{font-size:12px;margin-bottom:6px}.practice-table{margin:8px 0 13px}.practice-table input{padding:8px;font-size:13px}.watered{font-size:30px;padding:12px 0}.weather{font-size:43px;margin:5px 0 16px}.tab-scene{padding:20px}.code-block{padding:14px;font-size:14px}.sequence-output{min-height:42px;padding:10px;margin-bottom:12px}#scroll-garden{height:175px;flex-shrink:0}
}
@media(min-width:640px) and (max-width:850px){body{--app-head:110px}.sidebar{height:54px;padding:7px 20px}.topbar{height:56px}.brand .school-emblem{height:37px;width:33px}main{padding:12px 20px}.lesson-layout{grid-template-columns:minmax(0,1fr) 184px;gap:13px}.hero-copy{padding:17px 25px}.hero h2{font-size:28px}.hero-tag{font-size:8px}.path-card{padding:12px}.path-card h3{font-size:16px}.path-card p{font-size:9px}.keyboard-title{display:block}.keyboard-title span{margin-top:2px}.stage{padding:12px 14px}.tutor-art{height:220px}.tutor-art .portrait{height:215px}.speech p{font-size:11px;line-height:1.9}.lesson-title h1{font-size:22px}.lesson-layout{padding-bottom:36px}}
@media(min-width:640px) and (max-height:740px){body[data-page="home"] main{gap:9px}.hero-copy{padding-top:14px;padding-bottom:14px}.hero h2{font-size:25px;line-height:1.4;margin:7px 0}.hero .button{margin-top:10px}.hero-note{display:none}.welcome-strip{min-height:45px}.welcome-strip .guide-avatar{width:34px;height:34px}.path-card{padding:10px 13px}.path-card h3{font-size:16px;margin-top:5px}.path-card p{font-size:9px}.phase-icon{font-size:22px}.path-bottom{margin-top:5px}.lesson-title h1{font-size:21px}.lesson-title .eyebrow{display:none}.tutor-art{height:160px}.tutor-art .portrait{height:155px}.speech p{font-size:11px;line-height:1.7}.kind-note{display:none}.intro-badge,.intro>.eyebrow{display:none}.intro h2{font-size:18px}.intro p{font-size:12px;line-height:1.7}.intro small{font-size:8px}.key{height:23px}.keyboard-panel{padding-top:7px}.keyboard-title{margin-bottom:5px}.lesson-layout{padding-bottom:32px}.stage-instruction{margin-bottom:8px}.flower{font-size:30px}.flower-field{gap:5px}.stage{padding:8px 13px}}

/* Individually illustrated portraits retain the complete silhouette. */
.portrait.individual{clip-path:none;background:transparent}.portrait.individual img{position:static;display:block;width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:normal}

.shift-guide{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 8px;font-size:12px;line-height:1.6}.shift-symbol{display:inline-grid;place-items:center;border:2px solid #ba9344;border-radius:7px;background:#fff8dc;font-size:32px;width:62px;height:48px}.shift-guide small{font-size:10px}.key[data-code^="Shift"]{font-size:10px}

.desktop-only{max-width:620px;margin:0 auto;padding:36px 24px;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:20px}.desktop-only img{width:76px;height:84px}.desktop-only h1{font-size:26px}.desktop-only p{font-size:16px;line-height:1.9}

.key[data-code="Enter"]{font-size:9px;min-width:48px;flex:1.6}

.mac-jis{display:block;width:100%;height:auto;max-height:210px;overflow:visible}.mac-key rect,.mac-key>path:not(.home-mark){fill:#fff;stroke:#bdc8b7;stroke-width:2}.mac-key text{font-family:var(--sans);font-size:23px;text-anchor:middle;fill:#354c40;pointer-events:none}.mac-key .kana-label{font-size:15px;fill:#75806e}.mac-key .small-label{font-size:17px}.mac-key .home-mark{fill:none;stroke:#829476;stroke-width:3}.mac-key.target rect,.mac-key.target>path:not(.home-mark){fill:#fff0b4;stroke:#b68a25;stroke-width:4}.mac-key.pressed rect,.mac-key.pressed>path:not(.home-mark){fill:#39774f}.mac-key.pressed text{fill:#fff}@media(min-width:640px){body[data-page="lesson"] .main-shell,body[data-page="home"] .main-shell{min-height:0}}
@media(min-width:640px) and (max-width:850px){.intro>.intro-badge,.intro>.eyebrow,.intro>h2,.intro>small{display:none}.intro p{font-size:12px;line-height:1.8;margin:0 0 12px}.intro .button{padding:9px 16px}.stage:has(.intro){overflow:hidden}.mac-jis{max-height:198px}}

.where-press{border:1px solid #c4a44f;border-radius:18px;background:#fff3c8;padding:2px 10px;font-size:11px;color:#54401b;margin-left:auto;margin-right:12px;white-space:nowrap}.where-key-pair{display:flex;gap:10px;justify-content:center;margin:18px 0}.where-key-pair>span{border:2px solid #c6cdbf;border-radius:9px;min-width:64px;padding:10px;font-size:30px;text-align:center;line-height:1.3}.where-key-pair small{display:block;font-size:12px}.where-key-pair>.where-key-symbol{background:#fff0b4;border-color:#bb8c25}.where-steps{padding-left:24px;font-size:14px;line-height:1.9}.where-steps li{margin-bottom:10px}.where-target{outline:3px solid #d29b23;outline-offset:3px}.mac-key.where-target{outline:none}.mac-key.where-target rect,.mac-key.where-target>path:not(.home-mark){fill:#ffe8a1;stroke:#ad7416;stroke-width:5}

/* Keep form prompts, both fields, and confirmation visible together. */
@media(min-width:640px){
 .stage{justify-content:safe center}
 #practice-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 14px;width:100%;flex-shrink:0}
 #practice-form>.stage-instruction,#practice-form>.input-hint,#practice-form>.button{grid-column:1/-1;margin:0}
 #practice-form>label{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0;text-align:left;font-size:12px}
 #practice-form>label small{display:block;margin:0;font-size:11px;overflow-wrap:anywhere}
 #practice-form .practice-input{width:100%;min-width:0;height:38px;min-height:38px;margin:0;padding:5px 8px;font-size:16px}
 #practice-form>.button{justify-self:center;padding:7px 20px}
 #practice-form>.input-hint{font-size:10px;line-height:1.5}
 .stage:has(#practice-form){padding:8px 14px}
}

@media(min-width:640px){.tutor .kind-note{display:none}.tutor .speech{margin-top:9px}}

/* Readable exercise text, including the model the learner copies. */
@media(min-width:640px){
 .stage-instruction{font-size:15px;line-height:1.6}
 #practice-form>label{font-size:15px;line-height:1.5}
 #practice-form>label small{font-size:15px;line-height:1.5;color:#40533c}
 #practice-form .practice-input{font-size:18px;height:40px;min-height:40px}
 #practice-form>.input-hint{font-size:11px}
 .lesson-work:has(#practice-form) .mac-jis{max-height:170px}
 .quiz-question{font-size:19px}.choice{font-size:15px}
 .intro p{font-size:15px;line-height:1.7}
}

/* A sunny Himawari classroom surrounds the readable learning cards. */
body[data-page="lesson"]{background:#dec8a1 url('/assets/classroom.png') center center / cover fixed no-repeat}
body[data-page="lesson"] .main-shell{background:linear-gradient(90deg,#fff9e51f,#fff9e50a)}
body[data-page="lesson"] .topbar,body[data-page="lesson"] .sidebar{background:#fffdf3ed}
body[data-page="lesson"] .lesson-heading,body[data-page="lesson"] .lesson-title{background:#fffdf2ed;border-radius:8px;padding-left:10px;padding-right:10px}
body[data-page="lesson"] .lesson-heading{color:#435138}
body[data-page="lesson"] .lesson-title .eyebrow{color:#61714d}
body[data-page="lesson"] .lesson-work{background:#fffef9f5;border-color:#c3ac79;box-shadow:0 4px 18px #49371720}
body[data-page="lesson"] .tutor-art{background:radial-gradient(ellipse at 50% 55%,#fff9e3b3,transparent 72%)}
body[data-page="lesson"] .tutor-name,body[data-page="lesson"] .speech{background:#fffef6f5;box-shadow:0 3px 12px #4937171a}

/* Choice questions and a compact keyboard share one screen. */
@media(min-width:640px){
 .lesson-work[data-exercise="quiz"]{grid-template-rows:32px minmax(0,1fr) auto auto}
 .lesson-work[data-exercise="quiz"] .keyboard-panel{display:block;padding:7px 10px}
 .lesson-work[data-exercise="quiz"] .mac-jis{max-height:150px}
 .lesson-work[data-exercise="quiz"] .keyboard-title{display:flex;margin-bottom:4px}
 .lesson-work[data-exercise="quiz"] .quiz-icon{display:none}
 .lesson-work[data-exercise="quiz"] .stage{padding:10px 16px}
 .lesson-work[data-exercise="quiz"] .quiz-question{font-size:19px;line-height:1.5;margin-bottom:12px;flex-shrink:0}
 .lesson-work[data-exercise="quiz"] .quiz-choices{gap:7px;flex-shrink:0}
 .lesson-work[data-exercise="quiz"] .choice{font-size:16px;line-height:1.5;padding:9px 12px}
}

/* Reserve enough room for dense exercises and keep the result card in view. */
@media(min-width:640px){
 .lesson-work:is([data-exercise="table"],[data-exercise="clipboard"],[data-exercise="sequence"],[data-exercise="repeat"],[data-exercise="files"] ) .mac-jis{max-height:130px}
 .lesson-work[data-exercise="table"] .practice-table{margin:5px 0 8px}
 .lesson-work[data-exercise="table"] .practice-table th{padding:4px}
 .lesson-work[data-exercise="table"] .practice-table input{padding:5px 8px;font-size:15px}
 dialog:has(.result-flower){padding:22px 30px;max-height:calc(100dvh - 32px)}
 dialog:has(.result-flower) .result-flower{font-size:40px;line-height:1.3}
 dialog:has(.result-flower) h2{margin:6px 0 10px}
 dialog:has(.result-flower) p{margin-bottom:10px}
 dialog:has(.result-flower) .result-stats{margin:12px 0}
 dialog:has(.result-flower) .result-message{padding:10px}
 dialog:has(.result-flower) .result-home{margin-top:10px}
}

/* A consistent desktop lesson budget: content first, keyboard always present. */
@media(min-width:640px){
 body[data-page="lesson"] main{gap:6px;padding-top:8px;padding-bottom:8px}
 body[data-page="lesson"] .lesson-title{display:flex;align-items:center;gap:14px}
 body[data-page="lesson"] .lesson-title .eyebrow{display:none}
 body[data-page="lesson"] .lesson-title h1{font-size:22px;line-height:1.5}
 .lesson-layout{padding-bottom:32px}
 .lesson-work .keyboard-panel{padding:6px 10px}
 .lesson-work .keyboard-title{display:flex;margin-bottom:3px}
 .lesson-work .mac-jis{max-height:150px}
 .lesson-work .stage{padding:8px 14px}
 .stage>.stage-instruction{margin-bottom:8px}
 .typing-model{padding:6px 10px;margin:4px 0 6px}
 .stage .practice-input{margin-top:3px;margin-bottom:6px}
 .stage textarea{min-height:66px;height:66px}
 .stage .input-hint{margin-bottom:3px;line-height:1.6}
 .mini-window:has(#file-name-form) .file-shelf,.mini-window:has(#file-name-form) #file-action{display:none}
 #file-name-form{padding:0 12px}
 .lesson-work[data-exercise="save"] .paper{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;padding:6px;margin:4px 12px;font-size:14px}
 .lesson-work[data-exercise="save"] .paper h2{font-size:16px;margin:0}
 .lesson-work[data-exercise="save"] .paper p{margin:0;line-height:1.5}
}

/* Keep the physical-key map readable instead of shrinking it per exercise. */
@media(min-width:640px){
 body[data-page="lesson"] .lesson-work .keyboard-panel .mac-jis{max-height:198px}
 .mac-key text{font-size:28px;fill:#243c30}
 .mac-key .kana-label{font-size:18px;fill:#465d40}
 .mac-key .small-label{font-size:19px}
 .shift-guide{margin:0 0 4px;gap:8px}
 .shift-symbol{height:36px;font-size:26px}
 .stage .typing-model{line-height:1.5}
 .stage .button{padding-top:8px;padding-bottom:8px}
}
@media(min-width:640px){.lesson-work[data-exercise="clipboard"] .move-arrow{font-size:16px;line-height:1;height:16px;margin:0}.lesson-work[data-exercise="clipboard"] .stage label{margin:2px 0}}
@media(min-width:640px){.lesson-work[data-exercise="save"] .window-bar{padding:4px 10px;margin-bottom:3px}.lesson-work[data-exercise="save"] .mini-window{padding-bottom:5px}}

@media print{dialog,.ask-shion,#toast{display:none!important}dialog::backdrop{background:transparent!important;backdrop-filter:none!important}body{background:white!important}.certificate{break-inside:avoid}}

.certificate-emblem{display:block;width:80px;height:87px;object-fit:contain;margin:0 auto 12px}

/* Assign home rows explicitly: optional notices must never take the hero's row. */
@media(min-width:640px){
 body[data-page="home"] main{grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:8px;padding-top:12px;padding-bottom:72px}
 body[data-page="home"] main>.notice{grid-row:1;margin:0;padding:8px 12px;font-size:11px;line-height:1.5}
 body[data-page="home"] .page-heading{grid-row:2;margin:0}
 body[data-page="home"] .hero{grid-row:3;min-width:0}
 body[data-page="home"] .welcome-strip{grid-row:4;min-height:48px;padding:5px 12px}
 body[data-page="home"] .section-heading{grid-row:5}
 body[data-page="home"] .path-grid{grid-row:6;grid-template-columns:repeat(3,minmax(0,1fr))}
 body[data-page="home"] .hero-copy{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-content:center;align-items:center;gap:6px 16px;padding:12px 22px}
 body[data-page="home"] .hero-tag{grid-column:1;justify-self:start;font-size:8px;letter-spacing:1px}
 body[data-page="home"] .hero h2{grid-column:1;grid-row:2;font-size:clamp(22px,3.4vh,30px);line-height:1.35;letter-spacing:1px;margin:0}
 body[data-page="home"] .hero p{grid-column:1;grid-row:3;font-size:10px;line-height:1.6}
 body[data-page="home"] .hero .button{grid-column:2;grid-row:2;min-width:0;max-width:250px;margin:0;padding:12px 15px;gap:10px;font-size:11px}
 body[data-page="home"] .hero-note{grid-column:2;grid-row:3;display:block;margin:0;font-size:8px;letter-spacing:0;background:#faf8e6d9;border-radius:4px;padding:3px 6px}
 body[data-page="home"] .garden-caption{bottom:5px;right:12px;font-size:8px}
 body[data-page="home"] .path-card{padding:10px 12px}
 body[data-page="home"] .path-card h3{font-size:15px;line-height:1.5;letter-spacing:0;margin-top:6px}
 body[data-page="home"] .path-card p{font-size:9px;line-height:1.5}
 body[data-page="home"] .path-bottom{margin-top:6px}
 body[data-page="home"] .phase-icon{font-size:23px}
}

/* The opening uses the whole available window without cropping the film. */
body[data-page="opening"]{overflow:hidden;background:#192e25}
.opening-screen{height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#192e25;color:#fffbed}
.opening-screen video{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.opening-actions{padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;background:#203f34}
.opening-actions p{font-size:12px}.opening-actions .text-link{color:#fffbed}.opening-actions button[hidden]{display:none}
#registered-continue{margin-bottom:12px}
dialog:has(#auth-form){max-height:calc(100dvh - 24px);padding:20px 28px}
dialog:has(#auth-form) h2{font-size:24px;margin:8px 0}
dialog:has(#auth-form) p{margin-bottom:10px}
dialog:has(#auth-form) label{margin:8px 0}
dialog:has(#auth-form) input{padding:8px 12px}
dialog:has(#auth-form) .privacy-note{font-size:10px;line-height:1.6;margin-bottom:0}
.opening-viewer{width:min(1100px,calc(100vw - 24px));max-width:none;height:calc(100dvh - 24px);max-height:none;padding:0;border:0;background:#192e25;color:#fffbed;overflow:hidden}
.opening-viewer[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
.opening-viewer video{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.opening-viewer .opening-actions p{margin:0}
.opening-replay-link{display:block;margin:9px auto;text-decoration:underline}

/* Show the first click and the physical key sequence before practice. */
.intro .operation-steps{text-align:left;margin:0 0 10px;padding-left:25px;font-size:14px;line-height:1.65}
.operation-steps li{padding-left:3px;margin:3px 0}
.operation-steps li::marker{font-weight:700;color:#745215}
.intro .start-cue{font-size:13px;line-height:1.5;font-weight:600;color:#654b20;margin:8px 0}
.intro:has(.operation-steps)>.intro-badge,.intro:has(.operation-steps)>.eyebrow,.intro:has(.operation-steps)>h2,.intro:has(.operation-steps)>small{display:none}
@media(max-height:740px){.intro .operation-steps{font-size:13px;line-height:1.5;margin-bottom:6px}.intro .start-cue{font-size:12px;margin:5px 0}}

.intro:has(.operation-steps){display:flex;flex-direction:column;align-items:stretch}
.intro:has(.operation-steps) .start-cue{order:-2;margin-top:0}
.intro:has(.operation-steps) .button-row{order:-1;justify-content:center}
.operation-label{text-align:left;font-size:12px;font-weight:600;margin:8px 0 2px}

.intro:has(.operation-steps) .operation-goal{order:-3;font-size:17px;font-weight:700;line-height:1.5;margin:0 0 6px;text-align:center}
.intro:has(.operation-steps) .start-cue{line-height:1.4;margin-bottom:5px}
.intro .operation-steps{line-height:1.5;margin-bottom:0}
.operation-steps li{margin:2px 0}

/* Every typing lesson shows the literal target before instructions. */
.intro:has(.operation-goal)>.intro-badge,.intro:has(.operation-goal)>.eyebrow,.intro:has(.operation-goal)>h2,.intro:has(.operation-goal)>small{display:none}
.intro .operation-goal{font-size:15px;font-weight:700;line-height:1.5;margin:0 0 8px;text-align:center}
.intro .intro-model{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font-size:23px;line-height:1.4;color:#294f40}
.intro:has(.operation-steps) .operation-goal{font-size:14px;margin-bottom:3px}
.intro:has(.operation-steps) .intro-model{font-size:20px;line-height:1.3}

.selection-intro>.intro-badge,.selection-intro>.eyebrow,.selection-intro>h2,.selection-intro>small{display:none}
.selection-intro>p{white-space:pre-line;text-align:left;margin:0 0 8px;font-size:14px;line-height:1.6}
.selection-preview{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0}
.selection-preview>div{display:grid;gap:2px}
.selection-preview small{display:block;margin:0;font-size:11px}
.selection-preview span{display:block;background:#fff;border:1px solid #c4cdbc;border-radius:4px;padding:4px 8px;font-size:15px}
.selection-preview mark{background:#b4d5ff;color:#182e45}
.selection-intro .start-cue{font-size:12px;line-height:1.4;margin:5px 0}

.clipboard-preview span{font-size:12px;text-align:left;line-height:1.6;padding:4px 6px}

/* One screen: purpose and examples first, then at most two actions per page. */
.lesson-guide{width:100%;max-width:600px;margin:auto;display:flex;flex-direction:column;gap:8px;min-height:0;text-align:left}
.guide-page-label{font-size:12px;font-weight:700;color:#596f50}
.guide-purpose{font-size:15px;line-height:1.7}
.guide-model{font-size:21px;line-height:1.4;font-weight:700;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;background:#f0f4e7;border-radius:6px;padding:5px 8px}
.guide-complete{font-size:12px;line-height:1.5;color:#53654d}
.guide-steps{padding-left:25px;margin:0;font-size:15px;line-height:1.7}
.guide-steps li{padding-left:4px;margin-bottom:9px}
.guide-steps li::marker{font-weight:700;color:#76551d}
.guide-actions{margin-top:3px;text-align:center;flex-shrink:0}
.guide-actions>span{display:block;font-size:11px;margin-bottom:5px}
.guide-actions .button-row{justify-content:center;gap:8px}
.stage:has(.lesson-guide){overflow:hidden}
.replay-guide{margin:12px 0;min-height:160px}
@media(max-height:740px){.lesson-guide{gap:5px}.guide-purpose,.guide-steps{font-size:13px;line-height:1.55}.guide-steps li{margin-bottom:6px}.guide-model{font-size:18px}.guide-complete{font-size:11px}}

#live-key-hint{font-weight:600;color:#654811} .key.where-target{background:#ffe8a1;box-shadow:0 0 9px #c49435}.practice-table input.where-target,.practice-input.where-target{background:#fff6ce;outline:3px solid #c38b17;outline-offset:-3px}

/* Practical courses stay on one screen; instructions and menus are paginated. */
body[data-page="practical"]{overflow:hidden}
body[data-page="practical"] #main{height:calc(100dvh - var(--app-head,88px) - 32px);overflow:hidden;padding-bottom:12px}
body[data-page="practical"] #ask-shion{display:none}
.practical{height:100%;display:flex;flex-direction:column;gap:10px;min-height:0;font-size:13px}
.practical h1{font-size:22px;line-height:1.5}.practical-bar,.practical-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.practical-list{display:grid;gap:8px;flex:1;min-height:0}.practical-item{border:1px solid var(--line);background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;text-align:left}.practical-item b{flex:1}.practical-item span,.practical-item small{font-size:11px}
.practical-guide{flex:1;background:white;border:1px solid var(--line);border-radius:16px;padding:25px;display:flex;flex-direction:column;justify-content:center;gap:15px;min-height:0}.practical-guide .guide-model{font-size:20px;white-space:pre-wrap}.practical .button-row{flex-shrink:0;align-items:center;justify-content:center}
.pr-goal{background:#f8efd6;padding:8px 12px;border-radius:8px;white-space:pre-wrap;font-size:12px;line-height:1.6}
.pr-workspace{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;min-height:0;flex:1}.pr-controls,.pr-preview{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0;overflow:hidden}.pr-controls{display:flex;flex-direction:column;justify-content:center;gap:8px}.pr-controls form{display:flex;flex-direction:column;gap:10px}.pr-controls label{display:flex;flex-direction:column;font-size:12px;font-weight:600;gap:4px}.pr-controls input,.pr-controls textarea,.pr-controls select{width:100%;min-width:0;background:#fff;padding:8px;border:1px solid #9da99e;border-radius:6px;font-weight:400;font-size:14px}.pr-controls textarea{resize:none}.pr-controls .button{padding:8px 12px}.pr-context{font-size:11px;line-height:1.6}.pr-preview{font-size:12px}.pr-preview>b{display:block;margin-bottom:12px;color:#657466}.pr-preview table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:10px}.pr-preview td,.pr-preview th{border:1px solid #d6ded5;padding:5px 3px}.pr-paper{white-space:pre-wrap;background:#fbfaf4;min-height:75px;padding:10px;font-size:14px}.pr-preview dl div{margin-bottom:10px}.pr-preview dd{margin:0;font-size:14px;overflow-wrap:anywhere}.pr-file{font-size:15px;line-height:2.2;overflow-wrap:anywhere}.pr-print{border:1px solid #9da99e;background:#fff;min-height:160px;max-width:165px;margin:auto;display:flex;flex-direction:column;padding:12px;gap:10px}.pr-print.landscape{max-width:100%;min-height:100px}.pr-bars meter{width:90px;margin:0 6px}.pr-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}.pr-bottom p{font-size:12px;line-height:1.6;flex:1}.pr-bottom button{white-space:nowrap;padding:10px}.practical #pr-hint-text{font-size:12px;line-height:1.6;background:#fff3ce;padding:6px 10px;border-radius:8px;flex-shrink:0}.pr-keyboard{height:120px;flex-shrink:0}.pr-keyboard svg{width:100%;height:100%}.pr-success{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;text-align:center}.pr-success>span{font-size:55px}.pr-success p{white-space:pre-wrap}
@media(max-height:740px){.practical{gap:6px}.practical h1{font-size:18px}.pr-keyboard{height:90px}.pr-controls,.pr-preview{padding:8px}.pr-controls form{gap:5px}.pr-controls input,.pr-controls select,.pr-controls textarea{padding:5px;font-size:12px}.practical-guide{padding:16px}.practical-guide .guide-steps{font-size:14px}.practical-item{padding:7px}.practical .button{padding:8px 12px}}

.practical #pr-hint{background:#edf1e5;color:#294f40}

/* The top navigation already occupies space above the practical course. */
body[data-page="practical"] .main-shell{min-height:0}
.practical>h1,.practical>.pr-goal{flex-shrink:0}
.practical .button-row{margin-top:0;min-width:0}
.practical-guide{justify-content:flex-start;padding-top:clamp(18px,5vh,40px)}

/* Keep the familiar companion beside the task, with a full-width keyboard below. */
body[data-page="practical"] #main{height:calc(100dvh - var(--app-head,88px))}
.pr-lesson-body{display:grid;grid-template-columns:minmax(0,1fr) 174px;gap:14px;flex:1;min-height:0}
.pr-main{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.pr-main>h1,.pr-main>.pr-goal{flex-shrink:0}
.pr-main h1{font-size:20px}.pr-main .practical-guide{padding:18px;gap:12px}
.pr-main .guide-model{font-size:18px}.pr-main .button-row{gap:8px}.pr-main .button-row .button{padding:9px 12px;font-size:12px}
.pr-main .practical-tools{gap:6px}.pr-main .practical-tools button{font-size:11px}
.pr-coach{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;gap:6px}
.pr-coach-art{height:185px;width:100%;flex-shrink:1;min-height:90px;background:radial-gradient(ellipse,#f8ebc8,transparent 70%)}
.pr-coach-art img{width:100%;height:100%;object-fit:contain}
.pr-coach-name{font-size:12px;color:#596b4e}
.pr-coach-speech{position:relative;background:#fffef8;border:1px solid #dedfcf;border-radius:15px;padding:13px;width:100%;box-shadow:0 3px 10px #294f4009}
.pr-coach-speech:before{content:'';position:absolute;top:-7px;left:calc(50% - 6px);width:12px;height:12px;background:#fffef8;border-left:1px solid #dedfcf;border-top:1px solid #dedfcf;transform:rotate(45deg)}
.pr-coach-speech p,.practical .pr-coach-speech #pr-hint-text{font-size:12px;line-height:1.8;padding:0;background:none;overflow-wrap:anywhere}
.pr-coach-speech button{font-size:11px;margin-top:8px;text-align:left}.pr-coach-note{font-size:10px;text-align:center;color:#79866d}
.practical .pr-keyboard{height:210px;flex-shrink:0;background:#f1f3e9;border:1px solid #e0e5d7;border-radius:12px;padding:6px 12px}
.practical .pr-keyboard svg{max-height:none}
.pr-main .pr-workspace{gap:8px}.pr-main .pr-controls,.pr-main .pr-preview{padding:8px}
.pr-main .pr-controls form{gap:6px}.pr-main .pr-controls input,.pr-main .pr-controls textarea,.pr-main .pr-controls select{padding:6px;font-size:13px}
.pr-main .pr-preview table{font-size:10px}.pr-main .pr-preview td,.pr-main .pr-preview th{padding:3px 2px}
@media(max-height:740px){.practical .pr-keyboard{height:160px}.pr-coach-art{height:140px}.pr-coach-note{display:none}.pr-coach-speech{padding:10px}.pr-main{gap:5px}.pr-main h1{font-size:18px}.pr-main .guide-steps{font-size:13px}.pr-main .practical-guide{padding:12px;gap:8px}}

/* All courses use the beginner lesson frame and its keyboard/tutor components. */
.shared-lesson .lesson-layout{min-height:0;flex:1}
.shared-lesson .lesson-title h1{font-size:22px}
.shared-lesson .pr-shared-stage{gap:8px;overflow:hidden;text-align:left}
.shared-lesson .practical-guide{border:0;border-radius:0;background:none;padding:0;gap:10px;justify-content:center;width:100%}
.shared-lesson .practical-guide .guide-model{font-size:20px;text-align:center}
.shared-lesson .button-row{gap:8px;margin:0}.shared-lesson .button-row .button{padding:9px 13px;font-size:12px}
.shared-lesson .pr-reassurance{font-size:11px;line-height:1.5;text-align:center;padding:5px 8px;min-height:26px;color:#6b795d}
.shared-lesson #pr-hint{background:transparent;color:inherit}
.shared-lesson #pr-hint-text{padding:0;background:none;line-height:1.8}
.shared-lesson .pr-goal{flex-shrink:0;margin:0;font-size:11px;padding:5px 8px}
.shared-lesson .pr-workspace{width:100%;flex:1;gap:8px;min-height:0}
.shared-lesson .pr-controls,.shared-lesson .pr-preview{padding:7px;border-radius:7px}
.shared-lesson .pr-controls form{gap:5px}
.shared-lesson .pr-controls input,.shared-lesson .pr-controls textarea,.shared-lesson .pr-controls select{padding:5px;font-size:12px}
.shared-lesson .pr-controls textarea{height:64px}
.shared-lesson .pr-controls label{font-size:11px}
.shared-lesson .pr-preview table{font-size:10px}
.shared-lesson .pr-preview th,.shared-lesson .pr-preview td{padding:3px 2px}
.shared-lesson .pr-bottom{width:100%;min-height:35px;flex-shrink:0}.shared-lesson .pr-bottom p{font-size:11px}.shared-lesson .pr-bottom button{font-size:11px;padding:7px}
.shared-lesson .pr-context{font-size:10px}

.shared-lesson .pr-controls .button{padding:5px 10px}

/* Give every course a little more working room without changing the layout. */
@media(min-width:640px){
 body[data-page="lesson"] main{padding-left:12px;padding-right:12px}
 body[data-page="lesson"] .lesson-layout{gap:12px;padding-bottom:8px}
}

.pr-symbol-button{display:flex;align-items:center;gap:6px;font-size:11px;text-align:left}
.pr-symbol-button b{font-size:32px;line-height:1.1;color:#294f40;background:#f3eccd;border-radius:5px}
.symbol-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0;text-align:center}
.symbol-comparison>div{border:1px solid #cdd6c6;border-radius:12px;padding:12px;background:#f7f8f1}
.symbol-comparison strong{display:block;font-size:84px;line-height:1.2;color:#294f40}
.symbol-comparison span,.symbol-comparison p{font-size:13px}

.pr-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.pr-menu-heading .button{padding:10px 14px;font-size:13px;white-space:nowrap}

/* Real teaching controls, kept on their own short page in the fixed lesson frame. */
.guide-demo{width:100%;display:grid;gap:5px;text-align:left;min-height:0}
.guide-demo>small{font-size:10px;color:#64775b}.guide-demo label{display:grid;gap:3px;font-size:12px;font-weight:700}
.guide-demo select,.guide-demo input,.guide-demo textarea{width:100%;font:inherit;font-size:16px;line-height:1.35;background:white;border:2px solid #c7a958;border-radius:7px;padding:6px 9px;box-sizing:border-box}
.guide-demo textarea{height:53px;resize:none}.guide-demo input{height:36px}
.guide-demo output{display:block;background:#f6f2db;border-radius:6px;padding:6px 10px;font-size:14px;white-space:pre-wrap;line-height:1.5;min-height:30px}
.demo-note,.demo-target{font-size:12px;line-height:1.5;margin:0;white-space:pre-wrap}.guide-demo .text-link{font-size:12px;padding:2px}
.demo-table{width:100%;border-collapse:collapse;font-size:13px}.demo-table td,.demo-table th{border:1px solid #bfcab6;padding:3px;text-align:center}.demo-cell{background:#ffe9a1;font-weight:bold}
.demo-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.demo-keys kbd{padding:5px 8px;background:white;border:2px solid #c7a958;border-radius:5px;font-size:16px}
.demo-buttons{display:flex;flex-wrap:wrap;gap:5px}.demo-buttons button{background:#fff;border:1px solid #c7a958;border-radius:6px;padding:6px 9px;font:inherit;font-size:12px}
.demo-action{display:grid;text-align:center;gap:6px;background:#f7f2dd;border:1px solid #dfd6b2;border-radius:10px;padding:12px}.demo-action b{font-size:23px}.demo-action span{font-size:14px}
.support-nav{display:flex;gap:8px}.support-nav[hidden]{display:none}.support-nav button{background:#fff;border:1px solid #c7a958;border-radius:5px;padding:4px 9px;font:inherit;font-size:12px}
.demo-action{padding:7px;gap:4px}.demo-action button,.demo-drag button{font:inherit;font-size:22px;background:#fff;border:2px solid #c7a958;border-radius:8px;padding:7px;cursor:pointer}
.demo-scroll{height:100px;overflow-y:auto;background:#f4f7e5;border:2px solid #c7a958;border-radius:8px;text-align:center}.demo-scroll>div{padding:10px}
.demo-drag{display:flex;justify-content:space-around;align-items:center;padding:10px;min-height:70px}.demo-drag button{touch-action:none}.demo-drag [data-demo-drop]{border:2px dashed #b3ba84;border-radius:8px;padding:20px;font-size:12px}
.guide-field-targets{display:grid;gap:6px;width:100%}.guide-field-targets>div{display:flex;align-items:center;gap:12px;background:#f4f5e9;border-radius:7px;padding:6px 12px}.guide-field-targets small{font-size:12px;min-width:95px}.guide-field-targets strong{font-size:17px;white-space:pre-wrap;line-height:1.5}.pr-goal>span{display:block;white-space:pre-wrap}
#welcome-home{margin-top:12px}#welcome-other{display:block;margin:16px auto 0}
.pr-now{width:100%;box-sizing:border-box;margin:0;padding:8px 11px;background:#fff4cb;border-left:4px solid #bd963e;border-radius:6px;font-size:14px;font-weight:700;line-height:1.55;flex-shrink:0;text-align:left}
.pr-field-model{display:block;font-size:12px;font-weight:600;line-height:1.5;color:#365b41;white-space:pre-wrap}.pr-current-field{background:#fff6d6;border-radius:6px;outline:2px solid #d2ae54;outline-offset:2px}
.shared-lesson .pr-controls label{gap:2px}.shared-lesson .pr-controls form{gap:7px}
.shared-lesson .pr-bottom{gap:6px}.shared-lesson .pr-bottom>p{flex:1;min-width:0}.shared-lesson .pr-bottom>button{flex-shrink:0}.shared-lesson .pr-controls{justify-content:flex-start}.shared-lesson .pr-controls form{margin:0}
.shared-lesson .pr-controls label{margin:0}.shared-lesson .pr-controls input,.shared-lesson .pr-controls textarea,.shared-lesson .pr-controls select{margin:0}
/* Keep field names and short examples on one row; controls occupy the next row. */
.shared-lesson .pr-controls label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:7px;line-height:1.35}
.shared-lesson .pr-controls label>input,.shared-lesson .pr-controls label>textarea,.shared-lesson .pr-controls label>select{grid-column:1/-1}
.shared-lesson .pr-field-model{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.shared-lesson .pr-controls textarea{height:58px}.shared-lesson .pr-context{line-height:1.4;margin:0}
.shared-lesson .pr-preview>b{margin-bottom:5px}.shared-lesson .pr-preview .pr-print{min-height:0;padding:7px;gap:5px;font-size:12px}.shared-lesson .pr-preview dl{margin:0}.shared-lesson .pr-preview dl div{margin-bottom:4px}.shared-lesson .pr-preview dd{font-size:12px;line-height:1.5}
.shared-lesson .pr-preview .pr-paper{margin:0;padding:7px;min-height:0}.shared-lesson .pr-preview .pr-file{line-height:1.7}.shared-lesson .pr-preview table{margin-bottom:4px}.shared-lesson .pr-preview .pr-calculated{font-size:13px;line-height:1.5}.shared-lesson .pr-bars{line-height:1.5}
.shared-lesson .pr-preview td,.shared-lesson .pr-preview th{padding:2px;line-height:1.3}.shared-lesson .pr-preview .pr-calculated{margin:0}
.shared-lesson .pr-controls textarea{height:52px}
.shared-lesson .pr-controls textarea{height:54px;min-height:54px}
/* Highlight the answer inside its border, never over the example above it. */
.shared-lesson .pr-controls label{row-gap:4px}
.shared-lesson .pr-current-field{outline:none}
.shared-lesson .pr-controls :is(input,textarea,select):is(.where-target,:focus-visible){outline:3px solid #c38b17;outline-offset:-3px;box-shadow:none}
.concept-meaning{font-size:14px;line-height:1.65;text-align:left;margin:0}.concept-example{font-size:17px;line-height:1.5;font-weight:700;white-space:pre-wrap;background:#f4f1da;padding:9px 12px;border-radius:7px;text-align:center;overflow-wrap:anywhere}
.cell-map{border-collapse:collapse;width:100%;margin:16px 0;text-align:center;font-size:16px}.cell-map th,.cell-map td{border:1px solid #acbaa0;padding:8px}.cell-map .cell-address{background:#fff0b1;color:#294f40}.cell-map td.cell-address{border:3px solid #b18729}
.concept-cell{display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;line-height:1.5}.concept-cell mark{display:inline-block;background:#ffecaa;border:2px solid #b69037;border-radius:5px;padding:2px 8px;color:#294f40}
.course-party{text-align:center}.party-medal{display:block;font-size:38px;line-height:1.1}.course-party h2{font-size:22px;margin:8px 0}.course-party p{font-size:13px;line-height:1.6}.party-friends{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:12px 0}.party-friends>div{min-width:0}.party-friends .portrait,.party-friends>div>img{display:block;width:100%;height:70px!important;max-height:70px;aspect-ratio:auto!important;object-fit:contain}.party-friends .portrait img{width:100%;height:100%;object-fit:contain}.party-friends small{font-size:10px}.party-message{background:#fff3ce;border-radius:10px;padding:9px;margin-bottom:12px!important}.course-diploma{text-align:center;border:3px double #b89648;padding:14px;background:#fffdf2}.course-diploma img{height:65px;display:block;margin:0 auto}.course-diploma small{display:block;color:#7d7046}.course-diploma h2{font-size:25px;margin:10px 0}.course-diploma h3{font-size:22px;margin:14px 0}.course-diploma p{font-size:13px;line-height:1.8;margin-bottom:14px}.course-diploma strong{font-size:13px}.course-next{display:block;margin:10px auto 0}#pr-certificate-status{font-size:12px;min-height:20px}
@media(prefers-reduced-motion:no-preference){.party-friends>div{animation:party-bow 1.5s ease-in-out 2}.party-friends>div:nth-child(even){animation-delay:.2s}@keyframes party-bow{50%{transform:translateY(-5px)}}}

/* First use of SUM: one concept per screen, with the actual three cells. */
.sum-intro p{margin:5px 0;font-size:14px;line-height:1.5}
.sum-intro>strong{font-size:17px}
.sum-intro-table{border-collapse:collapse;margin:5px 0;width:100%;font-size:14px}
.sum-intro-table th,.sum-intro-table td{border:1px solid #d5cfaf;padding:3px 10px}
.sum-intro-table td{background:#fff2bd}
.sum-intro .concept-example{margin-top:5px;padding:5px 9px;font-size:16px}

.pr-field-nav{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:4px;font-size:13px}
.pr-field-nav button{font:inherit;padding:2px 5px;border:1px solid #d9d0b8;border-radius:5px;background:#fffdf2;color:#514733;cursor:pointer}
.pr-field-nav button:disabled{opacity:.4;cursor:default}
.pr-preview .pr-calculated,.pr-preview .pr-extra-result{margin:2px 0;font-size:13px;line-height:1.4}
.pr-preview #pr-preview-content>p:not(.pr-paper):not(.pr-file){margin:3px 0}
.sum-intro-table th,.sum-intro-table td{padding:2px 10px}
.pr-controls:has(.pr-field-nav){gap:2px;padding:5px}
.pr-field-nav{line-height:1.2;margin-bottom:2px}
.pr-field-nav button{line-height:1.2}
.pr-preview:has(.pr-calculated),.pr-preview:has(table){padding:5px}
.pr-preview #pr-preview-content>p:not(.pr-paper):not(.pr-file){font-size:13px;line-height:1.3;margin:2px 0}

.range-goal-table{width:100%;border-collapse:collapse;margin:5px 0;text-align:center;font-size:16px;line-height:1.3}.range-goal-table th,.range-goal-table td{border:2px solid #cfaa4f;padding:3px 8px;background:#fff3c7}.practical-guide:has(.range-goal-table) p{margin:5px 0}.practical-guide:has(.range-goal-table) .concept-example{font-size:15px;padding:4px 8px;margin-top:5px}

.beginner-meaning{font-size:14px;line-height:1.5;margin:3px 0;color:#354b3a}
.practical-guide .guide-purpose{margin:3px 0;line-height:1.5}
.pr-preview .range-goal-table{font-size:15px;line-height:1.2;margin:3px 0}
.pr-preview .range-goal-table th,.pr-preview .range-goal-table td{background:#fff;border:1px solid #ccc;padding:2px 6px}
.pr-preview .range-goal-table .range-picked th,.pr-preview .range-goal-table .range-picked td{background:#ffed9f;border-color:#c69a2e;font-weight:700}
.lesson-guide .guide-model:has(+.guide-actions){margin-top:3px}
.pr-preview:has(.range-goal-table) .range-goal-table{font-size:14px;margin:2px 0;line-height:1.2}
.pr-preview:has(.range-goal-table) .range-goal-table td,.pr-preview:has(.range-goal-table) .range-goal-table th{padding:2px 4px}
.pr-preview:has(.range-goal-table) p.pr-extra-result{margin:2px 0;font-size:12px;line-height:1.3}
.pr-preview:has(.range-goal-table){padding:5px 8px}
.pr-preview:has(.range-goal-table)>b{margin-bottom:2px}

.lesson-guide .clipboard-preview{margin:0}
.lesson-guide:has(.range-goal-table) .concept-example{font-size:15px;padding:4px 8px}
.lesson-guide:has(.range-goal-table) .range-goal-table{margin:1px 0}
.shared-lesson .pr-reassurance{font-size:13px;line-height:1.4}
.pr-preview:has(.pr-calculated){padding-top:5px;padding-bottom:5px}
.pr-preview:has(.pr-calculated){padding-top:2px;padding-bottom:2px}
.shared-lesson .practical-guide:has(.range-goal-table){gap:4px;justify-content:flex-start}
.shared-lesson .practical-guide:has(.range-goal-table) p,.shared-lesson .practical-guide:has(.range-goal-table) table{margin:1px 0}
.shared-lesson .practical-guide{gap:4px;justify-content:flex-start}
.shared-lesson .practical-guide .guide-purpose{margin:0}
.shared-lesson .practical-guide .concept-example{padding:5px 8px;font-size:16px;line-height:1.4}
.shared-lesson .practical-guide .range-goal-table{font-size:15px;line-height:1.2}
.shared-lesson .practical-guide .range-goal-table th,.shared-lesson .practical-guide .range-goal-table td{padding:1px 4px}
/* Keep all helper controls visible at the current narrow lesson width. */
.shared-lesson .tutor-controls{gap:2px}
.shared-lesson .tutor-controls .text-link{padding:2px 0;line-height:1.4}

/* 実践編も初級と同じ教室・キーボード・案内役の枠を使う。 */
.ws-home-links{display:flex;align-items:center;gap:8px}.ws-home-links .button{font-size:12px;padding:8px 12px}
.ws-menu h1{font-size:24px;margin:12px 0}.ws-menu>p{margin:10px 0;font-size:14px}.ws-levels{display:flex;gap:10px}.ws-menu .practical-list{margin-top:12px}.ws-menu .practical-item{min-height:70px}.ws-menu .practical-item span{font-size:12px}
.ws .ws-stage{display:flex;align-items:stretch;justify-content:flex-start;padding:8px;gap:5px;text-align:left;min-height:0;overflow:hidden}
.ws-instruction{flex:none;display:flex;flex-direction:column;gap:2px;background:#fff8dc;border-left:3px solid #bba458;padding:5px 8px;font-size:12px;line-height:1.45}.ws-instruction b{font-size:14px}.ws-instruction span{font-size:11px}
.ws-toolbar{display:flex;flex-wrap:wrap;gap:4px;flex:none}.ws-toolbar button,.ws-canvas button{font:inherit;font-size:11px;border:1px solid #b8c8ba;border-radius:4px;padding:4px 6px;background:#fff;color:#294d3f;cursor:pointer}.ws-toolbar button:focus-visible,.ws-canvas button:focus-visible{outline:2px solid #b59642;outline-offset:-2px}
.ws-canvas{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px}.ws-canvas p{font-size:12px;margin:4px}.ws-empty{margin:auto;text-align:center;font-size:14px}.ws-edit{display:flex;gap:6px;align-items:center;flex:none}.ws-edit label{margin:0;display:flex;align-items:center;gap:8px;flex:1;font-size:12px}.ws-edit input{margin:0;padding:4px 6px;height:29px;min-width:0;width:100%;font-size:13px}.ws-edit button{flex:none}
.ws-grid{table-layout:fixed;width:100%;border-collapse:collapse;font-size:12px;flex:1;min-height:0}.ws-grid th{background:#eef2e9;font-weight:500;font-size:11px;height:18px;padding:0}.ws-grid th:first-child{width:25px}.ws-grid td{padding:0;border:1px solid #cbd4ca;height:24px}.ws-grid td button{display:block;width:100%;height:100%;min-height:24px;border:0;border-radius:0;background:white;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.ws-grid button.ws-range{background:#fff0a8}.ws-grid button.ws-selected{outline:2px solid #436c54;outline-offset:-2px}.ws-grid button.ws-bold{font-weight:800}
.ws #ws-feedback{margin:0;flex:none;font-size:11px;line-height:1.3;min-height:15px}.ws-purpose{font-size:11px;padding:4px 9px;color:#4d614c;flex:none;line-height:1.4}.ws-note{font-size:11px!important;color:#62735f}.ws #ws-coach{font-size:13px;line-height:1.6}.ws #ws-status{display:block;font-size:10px;line-height:1.4;margin-top:7px}
.ws-body-label{margin:0;display:flex;flex-direction:column;flex:1;min-height:0;font-size:12px}.ws-body-label textarea{font-size:14px;line-height:1.6;resize:none;flex:1;min-height:55px;margin:2px 0;padding:7px}.ws-chart{display:flex;flex-direction:column;justify-content:center;gap:13px;flex:1}.ws-chart>div{display:flex;align-items:center;gap:7px;font-size:12px}.ws-chart span{width:70px}.ws-chart i{background:#649176;display:block;height:22px}.ws-chart b{font-size:12px}
.ws-dialog h2{font-size:22px}.ws-dialog p{font-size:14px;line-height:1.7}.ws-dialog pre{white-space:pre-wrap;background:#f4f6ee;padding:12px;font:inherit;text-align:left}.ws-dialog label{text-align:left}.ws-dialog .ws-choices{display:flex;flex-direction:column;gap:8px}.ws-dialog select,.ws-dialog input{font-size:15px}.ws-model{width:100%;border-collapse:collapse;margin:10px 0}.ws-model td,.ws-model th{border:1px solid #ced6c9;padding:6px;font-size:13px}.ws-model small{display:block;color:#6a7a63;font-size:10px}
@media(max-height:750px){.ws-instruction{padding:3px 6px}.ws-instruction b{font-size:12px}.ws-instruction span{font-size:10px}.ws-grid td,.ws-grid td button{height:21px;min-height:21px}.ws-toolbar button{font-size:10px;padding:3px 5px}.ws .ws-stage{gap:3px}.ws-purpose{font-size:10px;padding:2px 7px}}
.ws .ws-instruction{padding:3px 6px;gap:1px}.ws .ws-instruction b{font-size:12px;line-height:1.35}.ws .ws-instruction span{font-size:11px;line-height:1.4}.ws .ws-edit input{height:26px;padding:2px 5px}.ws .ws-edit button{line-height:1.3;padding:4px 6px}.ws .ws-grid td,.ws .ws-grid td button{height:21px;min-height:21px;line-height:1.2}.ws .ws-grid th{height:16px;line-height:1.2}.ws .ws-grid td button{font-size:12px}
.ws-empty .ws-model{margin:4px 0}.ws-empty .ws-model td,.ws-empty .ws-model th{padding:2px 5px;font-size:11px}.ws-empty .ws-model small{display:none}.ws-empty pre{white-space:pre-wrap;font:inherit;font-size:12px;margin:6px 0;text-align:left}.ws-empty{width:100%}
.ws-writing-model{flex:none;background:#f2f5e9;border:1px solid #ced8c0;border-radius:5px;padding:4px 7px;text-align:left}.ws-writing-model>b{display:block;font-size:11px;line-height:1.4}.ws-writing-model pre{font:inherit;font-size:13px;line-height:1.4;margin:2px 0;white-space:pre-wrap}.ws .ws-body-label>b{font-size:12px;color:#294f40}.ws .ws-body-label textarea{border:2px solid #7a9466;background:white;outline-offset:-3px}.ws .ws-body-label textarea::placeholder{font-size:11px;color:#707a6d}
.ws .ws-body-label{margin:0!important}.ws-body-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;flex:none}.ws .ws-body-heading label{font-size:11px;line-height:1.3;margin:0!important;color:#294f40;font-weight:700}.ws .ws-body-heading button{padding:2px 6px;line-height:1.3}.ws .ws-body-label textarea{height:55px;min-height:50px!important;padding:3px 5px;font-size:13px;line-height:1.4;margin:2px 0 0;flex:1 1 0}
.ws .ws-next-action{box-shadow:inset 0 0 0 2px #bd9633!important;background-color:#fff4c2!important}.ws #ws-feedback{font-size:10px;line-height:1.35;min-height:14px}
.ws-dialog .ws-save-next{padding:8px 10px;background:#fff4cf;border-left:3px solid #bf9d40;font-size:14px;text-align:left}.ws-dialog .ws-next-action{box-shadow:inset 0 0 0 2px #bd9633;background-color:#fff9de;outline-offset:-3px}
.ws-step-list{font-size:12px;line-height:1.55}.ws-step-title{display:block;font-size:13px;margin-bottom:4px}.ws-step-list ol{padding-left:22px;margin:0}.ws-step-list li{padding:3px 4px;margin:3px 0}.ws-step-list .ws-step-current{background:#fff1ba;border-radius:4px;color:#283e30;font-weight:700}.ws .speech .ws-step-list{font-size:12px}
.ws-stamp-track{display:flex;gap:8px;margin:8px 0}.ws-mini-stamp{width:30px;height:30px;display:grid;place-items:center;border:1px dashed #a1b096;border-radius:50%;color:#6b7967;background:white;font-size:12px}.ws-mini-stamp.is-done{border:2px solid #bc9231;background:#fff5bd;font-size:22px}.ws-menu .ws-project-card{position:relative;padding-right:95px;min-height:76px}.ws-project-card .ws-stamp{position:absolute;right:12px;top:9px;width:67px;height:57px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:25px;line-height:1.2;border:1px dashed #a8b09e;border-radius:50%;background:#f6f8f1}.ws-project-card .ws-stamp small{font-size:10px;font-weight:700;line-height:1.5}.ws-project-card.ws-done .ws-stamp{border:2px solid #b88e32;background:#fff2b5;transform:rotate(-7deg);color:#80631d}.ws-project-card.ws-up-next{border:2px solid #bba04a;background:#fffcdf}.ws-celebration-stamp{width:108px;height:108px;border:3px double #b89432;border-radius:50%;background:#fff4bd;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:0 auto 10px;font-size:49px;line-height:1.1;transform:rotate(-8deg)}.ws-celebration-stamp b{font-size:20px;color:#806224}.ws-menu .practical-list{margin-top:8px}
.ws .tutor-art{height:175px;flex:none}.ws .tutor-art .portrait{height:170px}.ws .speech{padding:10px}.ws .tutor-controls{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px}.ws .tutor-controls .text-link{font-size:10px;line-height:1.4;text-align:left;padding:2px 0}.ws #ws-status{margin-top:3px}.ws .ws-step-list{font-size:12px;line-height:1.5}.ws .ws-step-list li{margin:2px 0;padding:2px 3px}
/* 長い作品名が横並びのflexで圧縮されないよう、各行の場所を固定。 */
.ws-menu .ws-project-card{display:grid;grid-template-columns:minmax(0,1fr) 70px;grid-template-rows:auto auto auto;gap:2px 10px;padding:9px 12px;min-height:86px;text-align:left;align-content:center;align-items:center}
.ws-project-card>b{grid-column:1;grid-row:1;min-width:0;font-size:14px;line-height:1.4;white-space:normal;word-break:normal;overflow-wrap:anywhere}
.ws-menu .ws-project-card>span:not(.ws-stamp){grid-column:1;grid-row:2;min-width:0;font-size:12px;line-height:1.4;white-space:normal}
.ws-project-card>small{grid-column:1;grid-row:3;min-width:0;font-size:10px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.ws-menu .ws-project-card>.ws-stamp{position:static;grid-column:2;grid-row:1 / 4;justify-self:end;width:64px;height:57px;flex-shrink:0}
/* スタンプの文字行の余白と傾きをなくし、円の中心にそろえる。 */
.ws-mini-stamp{flex:none;line-height:1;text-align:center;padding:0}
.ws-menu .ws-project-card>.ws-stamp{font-size:25px;line-height:1;text-align:center;transform:none;padding:0;gap:2px}
.ws-menu .ws-project-card>.ws-stamp small{display:block;margin:0;line-height:1.2;text-align:center}
.ws-celebration-stamp{transform:none;line-height:1;gap:5px;text-align:center}
/* 実践初級は記録を保持した9作品を3作品ずつ表示し、1画面に収める。 */
.ws-menu .ws-pages{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;flex:none;font-size:13px}
.ws-pages button{border:1px solid #b5c3b0;background:#fff;border-radius:6px;padding:9px 14px;color:#294d3f;font:inherit;cursor:pointer}
.ws-pages button:disabled{opacity:.4;cursor:default}
.ws-menu .ws-menu-resume{flex:none;margin:5px 0}
.ws-menu-resume .button{font-size:14px;padding:10px 16px}
.ws-menu h1{margin:5px 0}.ws-menu>p{margin:5px 0}.ws-menu .ws-levels .button{padding:7px 14px;font-size:13px}.ws-menu .ws-menu-resume{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:12px}.ws-menu .ws-project-card{min-height:82px}.ws-menu .ws-stamp-track{margin:4px 0}
.wd .work-top{font-size:11px}.wd .ws-stage{gap:5px}.wd-screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;align-items:stretch;background:#f5f8f4;border:1px solid #bdcebe;border-radius:5px;padding:8px;font-size:12px;overflow:hidden}.wd-screen p{margin:2px 0;font-size:12px;line-height:1.4}.wd-screen button{font:inherit;cursor:pointer}.wd-action{border:1px solid #7e9c7f;border-radius:5px;background:#fff;padding:6px 9px;color:#294d3f;flex:none}.wd-action:disabled{opacity:.45}.wd-screen input,.wd-screen select{font-size:13px;margin:2px 0;padding:4px 6px;height:28px}.wd-screen label{font-size:12px;margin:0}.wd-body-label{flex:none}.wd-screen textarea{margin:0;min-height:40px!important;height:50px;flex:1;resize:none;font-size:13px;line-height:1.4;padding:4px}.wd-paper{white-space:pre-wrap;background:#fff;border:1px solid #ccd6c9;padding:6px;font:inherit;line-height:1.4;margin:2px 0;flex:1;min-height:0}.wd-desktop{display:flex;flex-direction:column;flex:1;background:#e4eee1;padding:10px;border-radius:6px}.wd-dock{margin-top:auto;align-self:center;background:#fafaf4;padding:8px;border-radius:8px}.wd-apps{display:flex;gap:7px}.wd-apps button{flex:1}.wd-menubar{display:flex;align-items:center;gap:15px}.wd-file-menu{background:#fff;padding:3px;border:1px solid #b5c3b0;align-self:flex-start}.wd-finder{display:flex;flex:1;gap:10px}.wd-finder aside{background:#e4ebdf;padding:8px}.wd-choices{display:flex;flex-direction:column;gap:4px}.wd-choices button{background:white;border:1px solid #b5c3b0;border-radius:4px;padding:4px;font-size:11px;text-align:left}.wd-coach{font-size:13px;line-height:1.7}.wd #wd-feedback{font-size:11px;line-height:1.4;margin:0;flex:none}.wd-complete{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}.wd-complete .ws-celebration-stamp{width:70px;height:70px;font-size:30px;margin:0}.wd-complete .ws-celebration-stamp b{font-size:12px}
.wd-sheet-edit{display:flex;align-items:end;gap:5px;flex:none}.wd-sheet-edit label{flex:1;min-width:0}.wd-sheet-edit input{width:100%;margin:0}.wd-sheet-edit button,.wd-sheet-tools button{font-size:10px;padding:4px;border:1px solid #a5b59c;border-radius:4px;background:white}.wd-sheet-tools{display:flex;gap:4px;flex:none}.wd .wd-bordered td,.wd .wd-bordered th{border:2px solid #43604b}.wd-bars{font-size:11px;flex:1}.wd-bars i{display:inline-block;background:#639273;height:12px;margin:0 4px}.wd .ws-model{margin:2px 0}.wd .ws-model td{font-size:11px;padding:3px}.wd-screen .ws-grid td button{height:18px;min-height:18px}.wd-screen .ws-grid td{height:18px}.wd-screen .ws-grid{flex:1}.wd .ws-writing-model pre{font-size:12px}
.wd-sheet-edit{align-items:center}.wd-sheet-edit label{display:flex;align-items:center;gap:5px;white-space:nowrap}.wd-sheet-edit input{flex:1;min-width:0;height:25px}.wd-screen:has(.ws-grid){padding:5px;gap:3px}.wd .wd-screen .ws-grid td,.wd .wd-screen .ws-grid td button{height:18px;min-height:18px;padding:0 2px;line-height:1.1}.wd .wd-screen .ws-grid th{height:14px;line-height:1.1}
.wd .wd-screen{line-height:1.35;gap:4px}.wd .wd-screen label:has(input),.wd .wd-screen label:has(select){display:flex;align-items:center;gap:8px;white-space:nowrap}.wd .wd-screen label input,.wd .wd-screen label select{flex:1;min-width:0;width:auto}.wd .wd-screen .ws-model{flex:none;table-layout:fixed;border-collapse:collapse;margin:0;line-height:1.1}.wd .wd-screen .ws-model td{padding:1px 4px;font-size:11px;line-height:1.2;height:18px}.wd .wd-screen .wd-paper{flex:none;line-height:1.35;padding:4px;margin:0}.wd .wd-screen:has(.wd-choices){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:6px}.wd-screen:has(.wd-choices)>b:first-child{grid-column:1;grid-row:1}.wd-screen:has(.wd-choices)>.wd-paper,.wd-screen:has(.wd-choices)>.ws-model{grid-column:1;grid-row:2;align-self:start}.wd-screen:has(.wd-choices)>b:nth-last-child(2){grid-column:2;grid-row:1}.wd-screen:has(.wd-choices)>.wd-choices{grid-column:2;grid-row:2;align-self:start}.wd .wd-choices button{font-size:11px;line-height:1.4;padding:5px}
.wd .wd-complete{display:grid;grid-template-columns:76px 1fr;gap:4px 8px;font-size:11px;text-align:left;align-content:center}.wd-complete .ws-celebration-stamp{grid-column:1;grid-row:1 / 5;align-self:center}.wd-complete>b,.wd-complete>p,.wd-complete>button{grid-column:2}.wd .wd-complete>p{font-size:11px}.wd .wd-complete>button{padding:5px;font-size:11px}
.ws-graduation-tutor{height:125px;display:flex;justify-content:center}.ws-graduation-tutor .portrait{height:125px;width:125px}.ws-graduation-tutor img{height:100%;width:100%;object-fit:contain}
.ws-party{text-align:center}.ws-party .ws-celebration-stamp{width:65px;height:65px;font-size:28px;margin-bottom:5px}.ws-party .ws-celebration-stamp b{font-size:12px}.ws-party h2{font-size:22px;margin:7px 0}.ws-party p{font-size:12px;line-height:1.5;margin:7px 0}.ws-party .party-friends{margin:8px 0}.ws-party .button{font-size:12px;padding:9px 12px}.ws-party .button-row{margin-top:7px}
.wd-dock{display:flex;align-items:center;gap:8px}.wd-dock small{font-size:10px}.wd-finder-face{display:inline-grid;place-items:center;width:30px;height:30px;background:linear-gradient(90deg,#69bbed 50%,#e4f4ff 50%);color:#244a6d;font-size:25px;border-radius:5px;vertical-align:middle}.wd .wd-finder aside{flex:none;width:145px}.wd .wd-finder aside p{padding:7px 3px;font-size:11px}.wd .wd-finder>p{padding:8px;font-size:12px}
.wd .wd-screen:has(#wd-body),.wd .wd-screen:has(#wd-revised-body){padding:5px;gap:3px}.wd .wd-screen .ws-writing-model{padding:3px 5px}.wd .wd-screen .ws-writing-model pre{font-size:12px;line-height:1.25;margin:1px 0}.wd .wd-screen:has(#wd-revised-body)>p{font-size:11px;line-height:1.3}.wd .wd-screen:has(#wd-revised-body) textarea{min-height:32px!important}.wd .wd-screen:has(#wd-revised-body) .wd-action{padding:4px 8px}