.page-shell{place-items:center;width:100%;height:100dvh;min-height:100vh;padding:16px;display:grid;overflow:hidden}.tutorial-layout{background:var(--paper);width:min(1320px,100vw - 32px);height:min(850px,100dvh - 32px);min-height:0;box-shadow:var(--shadow);border:1px solid #40211614;border-radius:34px;grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr);display:grid;overflow:hidden}.content-panel{z-index:2;background:var(--paper);flex-direction:column;min-width:0;min-height:0;padding:clamp(30px,4vh,52px) clamp(38px,4.5vw,68px);display:flex;position:relative}.education-header{flex:none;align-items:center;gap:14px;width:100%;display:flex}.education-home-link{border-radius:18px;outline:none;flex:none;text-decoration:none;display:inline-flex}.education-home-link:focus-visible{box-shadow:0 0 0 4px #ffc94f59}.brand-mark{background:linear-gradient(145deg,#ffd86a,#f3b72a);border-radius:18px;place-items:center;width:54px;height:54px;font-size:29px;transition:transform .18s;display:grid;box-shadow:0 5px #4021161a}.education-home-link:hover .brand-mark{transform:translateY(-2px)}.education-brand{flex-direction:column;gap:2px;min-width:0;display:flex}.education-brand strong{letter-spacing:-.02em;font-size:1.02rem;font-weight:900}.education-brand span{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;font-weight:650;overflow:hidden}.step-badge{background:var(--yellow-soft);color:#805016;border:1px solid #f5ad1647;border-radius:999px;flex:none;margin-left:auto;padding:8px 13px;font-size:.82rem;font-weight:850}.tutorial-progress{background:#40211614;border-radius:999px;flex:none;width:100%;height:6px;margin-top:24px;overflow:hidden}.tutorial-progress-bar{border-radius:inherit;background:linear-gradient(90deg, var(--yellow-strong), var(--yellow));width:9.09091%;height:100%;transition:width .42s cubic-bezier(.2,.8,.2,1)}.lesson-content{flex-direction:column;justify-content:center;align-items:flex-start;width:100%;max-width:610px;min-height:0;margin:auto 0;padding:30px 0;display:flex}.lesson-label{color:#b27613;letter-spacing:.13em;margin:0 0 12px;font-size:.8rem;font-weight:950}.lesson-content h1{max-width:590px;color:var(--ink);letter-spacing:-.06em;text-wrap:balance;margin:0;font-size:clamp(2.8rem,4vw,4.35rem);line-height:.96}.lesson-intro{color:#78645a;max-width:540px;margin:18px 0 0;font-size:clamp(1.05rem,1.3vw,1.22rem);font-weight:550;line-height:1.45}.action-card{background:linear-gradient(145deg,#ffd76b,#ffc547);border:2px solid #e0960e61;border-radius:26px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;width:100%;margin-top:clamp(24px,3vh,34px);padding:20px 22px;display:grid;box-shadow:0 8px #40211621,0 18px 34px #f5ad161f}.action-icon{width:56px;height:56px;color:var(--ink);background:#fff8df;border-radius:18px;flex:none;place-items:center;font-size:1.3rem;font-weight:950;display:grid;box-shadow:0 5px #4021161f}.action-copy{flex-direction:column;gap:5px;min-width:0;display:flex}.action-copy span{color:#865614;letter-spacing:.11em;font-size:.7rem;font-weight:950}.action-copy strong{color:var(--ink);letter-spacing:-.02em;font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.25}.simple-tip{color:#88766b;align-items:flex-start;gap:11px;margin-top:22px;display:flex}.simple-tip>span{flex:none;margin-top:1px;font-size:1.2rem}.simple-tip p{max-width:500px;margin:0;font-size:.87rem;font-weight:600;line-height:1.45}.simple-tip[hidden]{display:none}.simple-tip.is-warning{color:#76521f;background:#ffc94f24;border:1px solid #f5ad1640;border-radius:17px;width:100%;padding:13px 15px}.tutorial-navigation{border-top:1px solid #40211614;flex:none;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;width:100%;padding-top:18px;display:grid}.tutorial-button{min-height:48px;font:inherit;cursor:pointer;border:0;border-radius:15px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:.88rem;font-weight:850;transition:transform .16s,box-shadow .16s,background .16s,opacity .16s;display:inline-flex}.tutorial-button:focus-visible{outline:none;box-shadow:0 0 0 4px #ffc94f4d}.tutorial-button--back{color:#725f54;background:#f3eee8}.tutorial-button--back:hover:not(:disabled){background:#ebe3dc;transform:translate(-2px)}.tutorial-button--next{background:var(--brown);color:#fff;min-width:126px;box-shadow:0 5px #4021162e}.tutorial-button--next:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px #4021162e}.tutorial-button--next:active:not(:disabled){transform:translateY(2px);box-shadow:0 3px #4021162e}.tutorial-button:disabled{opacity:.35;cursor:default;box-shadow:none}.navigation-hint{color:#a29389;text-align:center;font-size:.76rem;font-weight:650}.visual-panel{background:linear-gradient(145deg,#ffde88e0,#fff4d7c7);justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.visual-panel:before{content:"";pointer-events:none;border:1px solid #40211614;border-radius:28px;position:absolute;inset:24px}.ambient{filter:blur(2px);opacity:.7;pointer-events:none;border-radius:50%;position:absolute}.ambient-one{background:#ffc94f80;width:380px;height:380px;top:-80px;right:-90px}.ambient-two{background:#fff8e5b8;width:240px;height:240px;bottom:60px;left:40px}.phone-3d{z-index:2;width:min(440px,82%);height:min(680px,100% - 60px);position:relative}.phone-3d canvas{touch-action:none;outline:none;display:block;width:100%!important;height:100%!important}.lesson-content.is-changing{animation:.28s cubic-bezier(.2,.8,.2,1) lessonChange}@keyframes lessonChange{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media (width>=1051px) and (height<=780px){.page-shell{padding:10px}.tutorial-layout{width:min(1180px,100vw - 20px);height:calc(100dvh - 20px)}.content-panel{padding:24px 38px}.brand-mark{border-radius:14px;width:44px;height:44px;font-size:23px}.education-brand strong{font-size:.92rem}.education-brand span{font-size:.77rem}.step-badge{padding:6px 10px;font-size:.73rem}.tutorial-progress{margin-top:17px}.lesson-content{padding:18px 0}.lesson-label{margin-bottom:8px;font-size:.7rem}.lesson-content h1{font-size:clamp(2.45rem,6.2vh,3.45rem)}.lesson-intro{margin-top:12px;font-size:.94rem}.action-card{border-radius:20px;gap:15px;margin-top:18px;padding:14px 17px}.action-icon{border-radius:14px;width:46px;height:46px;font-size:1.05rem}.action-copy strong{font-size:1rem}.simple-tip{margin-top:15px}.simple-tip p{font-size:.78rem}.tutorial-navigation{padding-top:13px}.tutorial-button{min-height:42px;padding:0 15px;font-size:.8rem}.phone-3d{width:min(420px,84%);height:min(620px,100% - 42px)}}@media (width<=1050px){.page-shell{height:auto;min-height:100dvh;padding:14px;overflow:visible}.tutorial-layout{grid-template-columns:1fr;width:100%;height:auto;min-height:auto}.content-panel{padding:32px 28px 34px}.lesson-content{margin:30px 0;padding:0}.visual-panel{min-height:720px}.phone-3d{width:min(430px,78vw);height:660px}}@media (width<=620px){.page-shell{padding:0}.tutorial-layout{box-shadow:none;border:0;border-radius:0}.content-panel{padding:22px 20px 28px}.education-header{gap:10px}.brand-mark{border-radius:14px;width:44px;height:44px;font-size:23px}.education-brand strong{font-size:.86rem}.education-brand span{max-width:145px;font-size:.7rem}.step-badge{padding:6px 9px;font-size:.68rem}.tutorial-progress{margin-top:18px}.lesson-content{margin:34px 0}.lesson-content h1{font-size:clamp(2.55rem,12vw,3.6rem)}.lesson-intro{font-size:1rem}.action-card{border-radius:21px;gap:14px;margin-top:24px;padding:17px}.action-icon{border-radius:15px;width:48px;height:48px}.simple-tip{margin-top:18px}.tutorial-navigation{grid-template-columns:1fr 1fr;gap:10px;padding-top:16px}.navigation-hint{display:none}.tutorial-button{width:100%;min-height:48px;padding:0 12px}.visual-panel{min-height:620px}.phone-3d{width:min(390px,88vw);height:590px}}