/* A readable storybook lesson, with one small task at a time. */
dialog.dream-tutorial{width:min(1060px,calc(100vw - 32px));height:min(760px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;padding:0;border:2px solid #cdb995;border-radius:26px;overflow:hidden;background:linear-gradient(135deg,#fffdf4,#fbf0dc);color:#304d52;box-shadow:0 20px 90px #28313e55}
dialog.dream-tutorial[open]{display:flex;flex-direction:column}
.dream-tutorial::backdrop{background:#203b4866}
.lesson-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 27px 12px;flex:none}
.lesson-kicker{font:700 11px/1.4 system-ui;letter-spacing:.09em;color:#6c7767}
.dream-tutorial .lesson-header h2{font:700 30px/1.15 Georgia,serif;letter-spacing:-.02em;margin:6px 0 0;color:#325c60}
#dream-lesson-title:focus{outline:none}
.lesson-close{flex:none;width:46px;height:46px;min-height:46px;background:#fff9ed;border:1px solid #ccb997;border-radius:50%;font:27px/1 system-ui;color:#736249}
.lesson-steps{display:flex;justify-content:center;gap:10px;padding:8px 24px 14px;flex:none}
.lesson-steps button{width:40px;height:40px;min-height:40px;border:1px solid #cfc4ad;border-radius:13px;background:#f3ecd9;font:700 16px system-ui;color:#716d5e}
.lesson-steps button[aria-current=step]{background:#2e7f7d;color:white;border-color:#226a68;box-shadow:0 3px 0 #20676522}
.lesson-steps button.done{background:#dfecdb;border-color:#b9cdaf;color:#3c654e}
.lesson-content{flex:1;min-height:0;overflow:auto;padding:16px 32px 24px;overscroll-behavior:contain}
.dream-tutorial p{font:16px/1.55 system-ui;max-width:none;margin:0}
.dream-tutorial .lesson-lead{font:18px/1.5 system-ui;color:#435c59;margin-bottom:20px}
.lesson-tip{margin:18px 0 0!important;padding:13px 17px;border:1px solid #e5ce9b;border-radius:14px;background:#fff2cf;color:#725b36}
.lesson-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 25px;background:#fffaf0;border-top:1px solid #d8c6a6;flex:none}
.lesson-footer button,.lesson-practice-action{min-height:46px;padding:11px 20px;border:1px solid #b9cfbe;border-radius:13px;background:#e4eddb;color:#3e6453;font:700 16px system-ui}
.lesson-footer .lesson-next,.lesson-practice-action{background:#277d7d;border-color:#1d6669;color:white}
.lesson-progress{font:14px system-ui;color:#776d59;white-space:nowrap}
.lesson-match-note{margin:0 26px 8px!important;padding:8px 13px;background:#f7e6bd;border:1px solid #d6c28c;border-radius:10px;font-size:13px!important;flex:none}
.lesson-worlds{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:18px;align-items:stretch}
.lesson-world{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;border-radius:22px;border:1px solid #c3cbae;background:radial-gradient(ellipse at top,#fff5b9,#c4e0d5);min-height:190px}
.lesson-world>span{display:grid;place-items:center;width:72px;height:72px;background:#e9c45f;border:2px solid #b99439;border-radius:50%;font-size:63px;line-height:1;color:#fffbd0;text-shadow:0 1px 3px #946b31}
.lesson-world.night{background:radial-gradient(ellipse at top,#9684b5,#35435e);border-color:#77628d;color:white}
.lesson-world.night p{color:#f8f1ff}
.lesson-world.night>span{background:#c9bde1;border-color:#9781b1;color:#22253b;text-shadow:none}
.lesson-world h3{font:700 23px Georgia;margin:0}
.lesson-world p{font-size:14px}
.lesson-goal{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:15px;text-align:center}
.lesson-goal>span{padding:9px 12px;border-radius:15px;background:#f4dbb9;font:700 29px Georgia;color:#936464}
.lesson-goal>b{font-size:27px}
.lesson-goal>p{width:100%;font-size:18px}
.lesson-deck{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:22px}
.lesson-deck-card{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:10px;border:2px solid #acbc84;border-radius:17px;background:linear-gradient(145deg,#edf3cc,#bcdbbf);min-height:105px;box-shadow:0 3px 0 #a4b49f22}
.lesson-deck-card.family-1{background:linear-gradient(145deg,#e1f3f6,#a1d2d9);border-color:#8ebdc7}
.lesson-deck-card.family-2{background:linear-gradient(145deg,#fff0c6,#eab89c);border-color:#d1a17a}
.lesson-deck-card>b{font:700 32px Georgia;color:#345c5c}.lesson-deck-card>span{font:20px system-ui}.lesson-deck-card>small{font:12px system-ui;white-space:nowrap}
.lesson-facts{display:grid;gap:12px}.lesson-facts p{padding-left:15px;border-left:4px solid #9dc6b5}.lesson-facts b{color:#2e6564}
.lesson-read-card{display:grid;grid-template-columns:240px 1fr;gap:35px;align-items:center}
.lesson-card{position:relative;width:100%;max-width:240px;border:2px solid #c7b28b;border-radius:19px;background:#fff9e8;padding:12px;color:#33545a;box-shadow:0 6px 12px #8b794019;text-align:center}
.lesson-cost{position:absolute;left:8px;top:8px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:55px;height:55px;border:2px solid white;border-radius:16px;background:#357e8d;color:white;font:800 25px/1 system-ui;box-shadow:0 2px 8px #526f6c33}
.lesson-cost small{font:10px/1.4 system-ui;margin-top:3px}.lesson-illustration{overflow:hidden;border-radius:13px;margin-bottom:9px}.lesson-illustration svg{display:block;width:100%;height:auto}
.lesson-card>strong{display:block;font:700 19px/1.4 Georgia}.lesson-card>small{display:block;font:13px/1.4 system-ui;color:#718071;margin-top:3px}
.lesson-card-values{display:flex;justify-content:space-evenly;gap:8px;margin-top:12px;padding:8px 0;background:#e9ecd7;border-radius:10px;font:13px/1.5 system-ui}.lesson-card-values b{font-size:18px}.lesson-ready{display:block;padding:7px;margin-top:8px;border-radius:9px;background:#ece8dc;font:12px/1.4 system-ui;color:#74695d}.lesson-ready.awake{background:#dfefd6;color:#446a43}
.lesson-chosen{border-color:#2a8984;box-shadow:0 0 0 4px #9dcac6,0 7px 18px #738b7224}
.lesson-legend{display:grid;gap:20px}.lesson-legend article{display:flex;align-items:center;gap:18px}.lesson-legend i{display:grid;place-items:center;flex:none;width:78px;height:64px;border-radius:16px;background:#d7e8e6;font:700 27px Georgia;font-style:normal;color:#276b71}.lesson-legend h3{font:700 20px Georgia;margin:0 0 5px}
.lesson-energy{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:23px}.lesson-energy>div{text-align:center}.lesson-energy b{display:grid;place-items:center;width:50px;height:50px;background:#357e8d;border:2px solid #94c4c8;color:white;font:800 24px system-ui;border-radius:16px;margin:auto}.lesson-energy span{display:block;margin-top:8px;font:13px system-ui;color:#607168}
.lesson-practice-top{display:flex;justify-content:space-between;gap:15px;align-items:center;font:16px system-ui}.lesson-practice-top>span{font-weight:700;color:#89724d}.lesson-practice-top>b{padding:7px 15px;background:#d6e9e8;color:#276c77;border-radius:12px}
.lesson-practice-instruction{padding:11px 14px;margin:10px 0 12px!important;border-radius:12px;background:#f4e8c9;color:#705f3d;min-height:48px}
.lesson-practice-board{display:flex;align-items:center;justify-content:center;gap:36px}.lesson-practice-card{width:200px;flex:none;text-align:center}.lesson-practice-card>span{font:700 13px/1.5 system-ui;color:#6d7667}.lesson-card-tap{display:block;width:100%;padding:0;margin-top:6px;border:0;background:none;border-radius:20px}.lesson-card-tap:disabled{opacity:1}.lesson-card-tap:not(:disabled){outline:3px dashed #e6ad5d;outline-offset:5px}.lesson-card-tap .lesson-card{margin:0}
.lesson-practice-arrow{font-size:38px;color:#9b8963}.lesson-practice-world{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;width:190px;min-height:170px;background:linear-gradient(135deg,#afa1c7,#535575);color:white;border:2px solid #8c77ac;border-radius:24px;padding:15px;flex:none}.lesson-practice-world:disabled{opacity:1}.lesson-practice-world:not(:disabled){outline:3px dashed #e7bd61;outline-offset:5px}.lesson-practice-world>span{color:#1a2035;background:#cdbddd;border:2px solid #b8a1d1;border-radius:50%;font-size:44px;line-height:1;padding:8px}.lesson-practice-world>b{font:700 31px Georgia}.lesson-practice-world>small{font:14px system-ui}
.lesson-practice-action{display:block;margin:15px auto 0;max-width:100%}.lesson-reset{display:block;margin:12px auto 0;padding:7px 10px;font:14px system-ui;text-decoration:underline;color:#6b7163;min-height:36px}
.lesson-fight{display:flex;align-items:center;justify-content:center;gap:24px}.lesson-fight>div{width:210px;position:relative}.lesson-fight-arrow{font-size:35px;color:#a67b40}.lesson-left-field>.lesson-card{filter:grayscale(.7);opacity:.6}.lesson-left-field>strong{position:absolute;bottom:17px;left:4px;right:4px;padding:10px;background:#f1dfc4;border:1px solid #bda581;border-radius:10px;font:700 14px system-ui;color:#795339;transform:rotate(-4deg)}
.dream-tutorial .lesson-fight-result{text-align:center;margin:17px auto 0;max-width:700px}
.lesson-ability-select{display:block;font:700 15px/1.5 system-ui;color:#596f63;margin-bottom:20px}.dream-tutorial .lesson-ability-select select{font:17px system-ui;min-height:48px;width:100%;padding:10px 14px;border-radius:13px;border:1px solid #cab796;margin-top:8px;background:#fffdf6;color:#32555a}
.lesson-ability-card{display:flex;align-items:center;gap:25px;min-height:175px;padding:22px 25px;border:1px solid #c9c6a2;border-radius:22px;background:linear-gradient(125deg,#e8f0da,#fff4d9);margin-bottom:20px}.lesson-ability-card>i{display:grid;place-items:center;flex:none;width:90px;height:90px;font:52px Georgia;color:#4e7864;background:#ffffed99;border:1px solid #bcceab;border-radius:26px;font-style:normal}.lesson-ability-card h3{font:700 25px Georgia;margin:0 0 7px;color:#356563}.lesson-ability-card div>span{display:inline-block;padding:4px 9px;border-radius:8px;background:#ecd99f;color:#765d32;font:700 12px system-ui;margin-bottom:10px}.lesson-ability-card small{display:block;font:13px/1.5 system-ui;margin-top:9px;color:#6f6650}
.lesson-start-plan{display:flex;align-items:center;gap:24px}.lesson-start-plan img{width:140px;height:140px;object-fit:contain;flex:none}.lesson-start-plan ol{margin:0;padding-left:24px;font:16px/1.55 system-ui}.lesson-start-plan li{padding-left:5px;margin-bottom:9px}.lesson-start-plan li::marker{font-weight:800;color:#277e79}
.lesson-extra{border:1px solid #d4c5a4;border-radius:13px;background:#fffaed;padding:13px 16px;margin-top:14px;font:15px/1.5 system-ui}.lesson-extra summary{cursor:pointer;font-weight:700;color:#42706b}.lesson-extra p{margin-top:12px}.lesson-elements{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px}.lesson-elements span{padding:7px 12px;background:#ddeace;border-radius:12px;font-weight:700;color:#436c5b}.lesson-elements span:nth-of-type(2){background:#d5e9ef;color:#3d7081}.lesson-elements span:nth-of-type(3){background:#f3dbc1;color:#936945}
.dream-learn-invite{display:flex;align-items:center;gap:24px;padding:22px 25px;border:1px solid #c9c69d;border-radius:22px;background:linear-gradient(120deg,#e7ecd2,#fff0ce);margin:20px 0}.dream-learn-invite>img{width:115px;height:115px;object-fit:contain;flex:none}.dream-learn-invite h3{font:700 25px Georgia;color:#346c6a;margin:0 0 8px}.dream-learn-invite p{font:16px/1.5 system-ui;color:#58705e;margin:0 0 14px}.dream-learn-invite button{min-height:48px;background:#277f7d;color:white;border:1px solid #1f6769;padding:12px 20px;border-radius:13px;font:700 16px system-ui}
.dream-quick-start{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:20px 0}.dream-quick-start>div{background:#fffcf2;border:1px solid #dbceac;border-radius:15px;padding:16px;font:15px/1.5 system-ui;color:#536c5f}.dream-quick-start b{display:block;color:#336b68;font-size:17px;margin-bottom:6px}
.duel-help-peek{position:absolute;right:66px;top:12px;z-index:9;min-height:42px;padding:9px 14px;background:#fff6df;border:1px solid #cabb95;border-radius:17px;color:#507367;font:700 14px system-ui}
@media(max-width:700px){dialog.dream-tutorial{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:20px}.lesson-header{padding:15px 16px 8px;gap:10px}.lesson-kicker{font-size:9px;letter-spacing:.06em}.dream-tutorial .lesson-header h2{font-size:23px}.lesson-close{width:40px;height:40px;min-height:40px}.lesson-steps{gap:6px;padding:8px 12px 11px}.lesson-steps button{width:34px;height:36px;min-height:36px;font-size:14px;border-radius:10px}.lesson-content{padding:14px 16px 20px}.dream-tutorial p{font-size:15px}.dream-tutorial .lesson-lead{font-size:17px;margin-bottom:16px}.lesson-footer{padding:11px 13px;gap:8px}.lesson-footer button{font-size:14px;padding:10px 13px}.lesson-progress{font-size:11px}.lesson-worlds{grid-template-columns:1fr 1fr;gap:12px}.lesson-world{min-height:155px;padding:15px 9px}.lesson-world>span{width:61px;height:61px;font-size:51px}.lesson-world h3{font-size:19px}.lesson-goal{grid-column:1/-1;grid-row:2;gap:12px;padding:10px 0}.lesson-goal>p{font-size:16px}.lesson-goal>span{font-size:25px}.lesson-tip{padding:11px 12px;margin-top:14px!important}.lesson-deck{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:17px}.lesson-deck-card{min-height:89px;padding:7px}.lesson-deck-card>b{font-size:26px}.lesson-deck-card>small{font-size:10px}.lesson-read-card{grid-template-columns:1fr;gap:18px}.lesson-read-card>.lesson-card{max-width:190px;margin:auto}.lesson-legend{gap:13px}.lesson-legend article{gap:13px}.lesson-legend i{width:57px;height:55px;font-size:22px}.lesson-legend h3{font-size:18px}.lesson-energy{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.lesson-energy b{width:42px;height:42px;font-size:22px}.lesson-energy span{font-size:12px;margin-top:5px}.lesson-practice-board{gap:13px}.lesson-practice-card{width:145px}.lesson-card{padding:8px;border-radius:15px}.lesson-cost{width:44px;height:44px;font-size:21px;left:4px;top:4px;border-radius:13px}.lesson-cost small{font-size:8px}.lesson-card>strong{font-size:15px}.lesson-card>small{font-size:11px}.lesson-card-values{font-size:10px;gap:4px;padding:6px 0;margin-top:8px}.lesson-card-values b{font-size:15px}.lesson-ready{font-size:10px;padding:6px}.lesson-practice-world{width:125px;min-height:155px;padding:10px;gap:8px;border-radius:19px}.lesson-practice-world>small{font-size:11px}.lesson-practice-world>b{font-size:26px}.lesson-practice-world>span{font-size:32px}.lesson-practice-arrow{font-size:22px}.lesson-practice-top{font-size:13px}.lesson-practice-top>b{padding:7px 9px}.lesson-practice-action{font-size:14px;padding:11px 13px}.lesson-fight{gap:12px}.lesson-fight>div{width:145px;min-width:0}.lesson-fight-arrow{font-size:24px}.lesson-left-field>strong{font-size:11px;padding:7px;bottom:11px}.lesson-ability-card{gap:15px;padding:16px;margin-bottom:18px}.lesson-ability-card>i{width:58px;height:68px;font-size:34px;border-radius:18px}.lesson-ability-card h3{font-size:22px}.lesson-start-plan{flex-direction:column;gap:12px}.lesson-start-plan img{width:75px;height:75px}.lesson-start-plan ol{font-size:15px}.lesson-match-note{margin:0 16px 5px!important;font-size:12px!important}.dream-learn-invite{gap:15px;padding:17px}.dream-learn-invite>img{width:65px;height:85px}.dream-learn-invite h3{font-size:22px}.dream-learn-invite p{font-size:14px}.dream-learn-invite button{font-size:14px;padding:11px 14px}.dream-quick-start{grid-template-columns:1fr;gap:9px}.dream-quick-start>div{padding:13px;font-size:14px}.duel-help-peek{right:62px;top:10px;font-size:12px;padding:9px 12px}}
@media(prefers-reduced-motion:no-preference){.lesson-card-tap:not(:disabled),.lesson-practice-world:not(:disabled){animation:lesson-pulse 2s ease-in-out infinite}@keyframes lesson-pulse{50%{outline-color:#ba8042;outline-offset:8px}}}

.lesson-practice-card{width:170px}
.lesson-practice-card .lesson-card{padding:9px}
.lesson-practice-card .lesson-card>strong{font-size:17px}
.lesson-practice-card .lesson-card>small{font-size:12px;margin-top:1px}
.lesson-practice-card .lesson-card-values{margin-top:7px;padding:5px 0;font-size:11px}
.lesson-practice-card .lesson-ready{margin-top:6px;padding:5px}
.lesson-practice-instruction{padding:10px 14px;margin:8px 0 10px!important;min-height:44px}
.lesson-practice-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.lesson-practice-actions .lesson-practice-action,.lesson-practice-actions .lesson-reset{margin:0}
@media(max-width:700px){.lesson-practice-card{width:145px}.lesson-practice-actions{gap:5px 9px}}