/* The original paper-and-pencil square, with its dimension marks aligned. */
.math-board.square-lesson{--sq-size:220px;--split:62%;min-width:0;padding:30px 24px 27px;box-shadow:0 12px 35px #23473008}
.square-lesson .paper-label{display:block}
.square-lesson .formula{margin:18px 0 0;font:italic 33px Georgia,serif}
.square-lesson .square-measure{--split:inherit;width:var(--sq-size);margin:57px auto 17px;position:relative;left:12px}
.square-lesson .square{width:var(--sq-size);height:var(--sq-size);grid-template-columns:var(--split) calc(100% - var(--split));grid-template-rows:var(--split) calc(100% - var(--split));border:1.5px solid #274c3c;font:italic 30px Georgia,serif;transition:grid-template-columns 90ms ease-out,grid-template-rows 90ms ease-out}
.square-lesson .square>div{border:.75px solid #355445;min-width:0;min-height:0}
.square-lesson .aa{background:#bdd477}.square-lesson .ab,.square-lesson .ba{background:#d8e4b6}.square-lesson .bb{background:#f6e0a3}
.square-lesson .side-top,.square-lesson .side-left{width:var(--sq-size);font-size:19px}
.square-lesson .side-top{top:-53px;height:23px}
.square-lesson .side-left{left:-63px;height:23px}
.square-lesson .side-total{color:#294d3c}
.square-lesson .side-total span{background:#eef0df;padding:0 9px}
.square-lesson .side-parts{top:-23px;grid-template-columns:var(--split) calc(100% - var(--split));font:italic 18px Georgia,serif;transition:grid-template-columns 90ms ease-out}
.square-lesson .sq-side-parts-left{position:absolute;left:-23px;top:0;height:100%;width:18px;display:grid;grid-template-rows:var(--split) calc(100% - var(--split));font:italic 18px Georgia,serif;transition:grid-template-rows 90ms ease-out}
.square-lesson .sq-side-parts-left span{display:flex;align-items:center;justify-content:center}
.square-lesson .side-parts span:first-child,.square-lesson .sq-side-parts-left span:first-child{color:#46672e}
.square-lesson .side-parts span:last-child,.square-lesson .sq-side-parts-left span:last-child{color:#8a621e}
.square-lesson .equation{margin:18px 0 14px;font:italic 27px Georgia,serif}
.square-lesson .equation .sq-term-a{color:#4a622d;border-bottom:3px solid #bdd477}.square-lesson .equation .sq-term-ab{color:#66753f;border-bottom:3px solid #d8e4b6}.square-lesson .equation .sq-term-b{color:#906a2b;border-bottom:3px solid #f6e0a3}
.square-lesson .slider-label{margin:0;font-size:11px;font-weight:600}
.square-lesson #ratio{display:block;width:min(200px,100%);height:44px;margin:0 auto;background:transparent;accent-color:#215c46;cursor:ew-resize}
.square-lesson .scribble{font:italic 16px/1.4 Georgia,serif;margin-top:0;color:#52694b}
@media(max-width:950px){.math-board.square-lesson{--sq-size:210px;padding:30px 14px 25px}}
@media(max-width:650px){.math-board.square-lesson{--sq-size:220px;max-width:450px;width:calc(100% - 20px);margin:0 auto;transform:rotate(.7deg)}}
@media(max-width:380px){.math-board.square-lesson{--sq-size:190px;padding-left:9px;padding-right:9px}.square-lesson .side-left{left:-59px}.square-lesson .square-measure{left:25px}.square-lesson .square{font-size:27px}.square-lesson .scribble{font-size:15px}.square-lesson .equation{font-size:26px}}
@media(prefers-reduced-motion:reduce){.square-lesson .square,.square-lesson .side-parts,.square-lesson .sq-side-parts-left{transition:none}}
@media(max-width:650px){.hero{grid-template-columns:minmax(0,1fr)}.hero>div:first-child{min-width:0}.hero h1{font-size:clamp(48px,12vw,76px)}.hero .button{max-width:100%;font-size:13px;padding:17px 16px;gap:8px}}