:root{--bg:#040810;--panel:#0b1018;--text:#d8e6fb;--muted:#7f8aa8;--line:#ffffff0f;color:var(--text);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{background:var(--bg);color:var(--text);letter-spacing:.04em;overflow:hidden}button{font:inherit}button:disabled{cursor:wait;opacity:.64}.page{grid-template-rows:70px 54px minmax(0,1fr);gap:12px;width:min(100%,1180px);height:calc(100dvh - 16px);min-height:0;margin:8px auto;display:grid}.header{border-bottom:1px solid #7aa2f71a;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:0;padding:5px 0 8px;display:grid}.logo-thdp,.logo-oppa{white-space:nowrap;font-weight:900;line-height:1}.logo-thdp{color:#edf4ff;letter-spacing:.06em;font-size:1.02rem}.logo-oppa{color:#bb9af7;letter-spacing:.08em;font-size:.62rem}.user-status{text-align:center;color:#7aa2f7;align-content:center;justify-items:center;min-width:0;min-height:50px;font-size:.82rem;line-height:1.35;display:grid}.user-name{color:#fff;text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.user-class-info{color:#a9b1d6;text-overflow:ellipsis;white-space:nowrap;min-height:16px;margin-top:1px;font-size:.68rem;line-height:1.35;overflow:hidden}.header-actions{justify-content:center;align-items:center;gap:10px;min-height:27px;margin-top:3px;display:flex}.header-action{cursor:pointer;color:#a9b1d6;letter-spacing:.02em;background:0 0;border:0;padding:0;font-size:.68rem}.header-action.back{color:#040810;background:#7aa2f7;border-radius:999px;padding:5px 10px;font-weight:800;box-shadow:0 3px 12px #7aa2f740}.header-action.back:hover,.header-action.back:focus-visible{background:#bb9af7;outline:none}.header-action.refresh{color:#9ece6a}.intro{text-align:center;align-content:center;justify-items:center;min-height:0;padding:3px 0;display:grid}.title{letter-spacing:1.4px;color:#0000;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px #bb9af740);background:linear-gradient(135deg,#7aa2f7 10%,#bb9af7 90%);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:900;line-height:1.25}.state-note{color:#a9b1d6;text-overflow:ellipsis;white-space:nowrap;max-width:min(100%,700px);min-height:18px;margin:3px 0 0;font-size:.67rem;line-height:1.5;overflow:hidden}.state-note.error{color:#ff9e64}.review-access-banner{color:#c8e9a8;letter-spacing:.025em;background:#9ece6a1a;border:1px solid #9ece6a70;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;max-width:min(100%,720px);margin-top:8px;padding:6px 11px;font-size:.65rem;line-height:1.35;display:inline-flex}.review-access-banner strong{color:#9ece6a;font-size:.65rem}.review-access-banner.expired{color:#ffd0b2;background:#ff9e641a;border-color:#ff9e6485}.review-access-banner.expired strong{color:#ff9e64}.review-blocked-panel{text-align:center;background:linear-gradient(145deg,#ff9e641c,#bb9af714);border:1px solid #ff9e647a;border-radius:18px;align-content:center;place-self:center;justify-items:center;gap:9px;width:min(100%,680px);min-height:0;padding:clamp(24px,4vw,44px);display:grid;box-shadow:0 18px 48px -30px #ff9e648f}.review-blocked-icon{color:#ff9e64;border:1px solid #ff9e648f;border-radius:50%;place-items:center;width:48px;height:48px;font-size:1.45rem;font-weight:900;display:grid}.review-blocked-panel h2{color:#ffb68b;letter-spacing:.06em;margin:5px 0 0;font-size:clamp(.92rem,1.8vw,1.1rem)}.review-blocked-panel p{color:#f5f7ff;max-width:500px;margin:0;font-size:clamp(.85rem,1.55vw,1rem);font-weight:750;line-height:1.55}.review-blocked-panel span{color:#a9b1d6;max-width:500px;font-size:.72rem;line-height:1.55}.review-back-button{color:#d6e7ff;letter-spacing:.03em;cursor:pointer;background:#7aa2f729;border:1px solid #7aa2f794;border-radius:10px;margin-top:10px;padding:9px 15px;font-size:.72rem;font-weight:800}.review-back-button:hover,.review-back-button:focus-visible{background:#bb9af72e;border-color:#bb9af7;outline:none}.module-grid{grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;min-height:0;display:grid}.module-card{--card-color:#7aa2f7;--hover-shadow:#7aa2f773;border:1px solid var(--line);background:var(--panel);min-width:0;height:100%;min-height:0;color:inherit;text-align:center;cursor:pointer;border-radius:14px;place-items:center;padding:clamp(15px,1.7vw,22px);transition:transform .22s,border-color .22s,box-shadow .22s;display:grid;position:relative;overflow:hidden}.module-card:hover:not(:disabled),.module-card:focus-visible:not(:disabled){border-color:var(--card-color);box-shadow:0 16px 38px -16px var(--hover-shadow);outline:none;transform:translateY(-5px)}.module-card:after{content:"";background:var(--card-color);filter:blur(58px);opacity:.12;pointer-events:none;border-radius:50%;width:130px;height:130px;position:absolute;bottom:-58px;right:-52px}.module-card:hover:not(:disabled):after,.module-card:focus-visible:not(:disabled):after{opacity:.28}.module-title{color:#fff;letter-spacing:.035em;margin:0;font-size:clamp(.96rem,1.35vw,1.14rem);line-height:1.35}.modal{z-index:1000;background:#000000db;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-box{background:var(--panel);text-align:center;border:1px solid #7aa2f7;border-radius:13px;width:min(100%,360px);padding:22px;box-shadow:0 0 24px #7aa2f733}.modal-title{color:#bb9af7;margin:0 0 10px;font-size:1rem;line-height:1.4}.modal-desc{color:#a9b1d6;margin:0 0 18px;font-size:.76rem;line-height:1.65}.modal-actions{gap:10px;display:flex}.modal-button{color:#040810;cursor:pointer;background:linear-gradient(135deg,#7aa2f7,#bb9af7);border:0;border-radius:7px;flex:1;min-height:40px;font-size:.76rem;font-weight:700}@media (width<=900px) and (orientation:landscape){.page{grid-template-rows:50px 38px minmax(0,1fr);gap:8px;width:min(100%,960px);height:calc(100dvh - 12px);margin:6px auto}.header{gap:9px;padding:2px 0 5px}.logo-thdp{font-size:.74rem}.logo-oppa{font-size:.43rem}.user-status{min-height:42px;font-size:.63rem}.user-class-info{min-height:13px;font-size:.54rem}.header-actions{gap:7px;min-height:21px;margin-top:1px}.header-action{font-size:.54rem}.header-action.back{padding:3px 7px}.title{letter-spacing:.85px;font-size:1.02rem}.state-note{min-height:14px;margin-top:1px;font-size:.53rem}.module-grid{gap:8px}.module-card{border-radius:11px;padding:11px}.module-title{margin:0;font-size:clamp(.72rem,1.5vw,.9rem)}}@media (width<=700px) and (orientation:portrait){.page{grid-template-rows:62px 46px minmax(0,1fr);gap:9px;width:min(100% - 20px,430px);height:calc(100dvh - 18px);margin:9px auto}.header{gap:7px;padding:4px 0 7px}.logo-thdp{font-size:.76rem}.logo-oppa{font-size:.43rem}.user-status{min-height:49px;font-size:.62rem}.user-class-info{min-height:14px;font-size:.55rem}.header-actions{gap:8px;min-height:23px;margin-top:2px}.header-action{font-size:.57rem}.header-action.back{padding:4px 8px}.title{letter-spacing:.7px;font-size:1.08rem}.state-note{min-height:16px;margin-top:1px;font-size:.57rem}.module-grid{grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:minmax(0,1fr);gap:9px}.module-card{border-radius:12px;padding:12px}.module-title{margin:0;font-size:clamp(.76rem,3.25vw,.92rem)}}@media (width<=700px) and (orientation:portrait) and (height<=650px){.page{grid-template-rows:52px 38px minmax(0,1fr);gap:6px}.header{padding:2px 0 4px}.user-status{min-height:39px;font-size:.56rem}.user-class-info{display:none}.header-actions{min-height:20px;margin-top:0}.header-action{font-size:.51rem}.header-action.back{padding:3px 7px}.title{font-size:.94rem}.state-note{min-height:13px;font-size:.5rem}.module-grid{gap:7px}.module-card{padding:9px}.module-title{margin:0;font-size:.72rem}}.hub-entrance-overlay{z-index:2000;background:radial-gradient(circle at 50% 42%,#7aa2f729,#0000 42%),linear-gradient(145deg,#040810 0%,#090d1b 55%,#040810 100%);place-items:center;padding:24px;display:grid;position:fixed;inset:0;overflow:hidden}.hub-entrance-overlay:before,.hub-entrance-overlay:after{content:"";aspect-ratio:1;filter:blur(70px);pointer-events:none;border-radius:50%;width:min(68vw,620px);position:absolute}.hub-entrance-overlay:before{background:#bb9af724;top:-33%;left:-18%}.hub-entrance-overlay:after{background:#7aa2f724;bottom:-40%;right:-24%}.hub-entrance-content{z-index:1;text-align:center;width:min(100%,760px);animation:.68s both hub-entrance-fade-in;position:relative}.hub-entrance-label{color:#9ece6a;letter-spacing:.24em;margin:0 0 24px;font-size:clamp(.66rem,1.2vw,.82rem);font-weight:800}.hub-entrance-ko{color:#f4f7ff;letter-spacing:.015em;text-wrap:balance;margin:0;font-size:clamp(1.38rem,3.2vw,2.55rem);font-weight:800;line-height:1.55;animation:.76s .12s both hub-entrance-rise}.hub-entrance-vi{color:#b9c4df;letter-spacing:.01em;margin:20px 0 0;font-size:clamp(.85rem,1.7vw,1.05rem);line-height:1.7;animation:.76s .48s both hub-entrance-rise}.hub-entrance-progress{background:#ffffff1f;border-radius:999px;width:min(100%,300px);height:2px;margin:42px auto 0;overflow:hidden}.hub-entrance-progress span{border-radius:inherit;background:linear-gradient(90deg,#7aa2f7,#bb9af7,#9ece6a);width:0;height:100%;animation:5s linear forwards hub-entrance-progress;display:block}@keyframes hub-entrance-fade-in{0%{opacity:0}to{opacity:1}}@keyframes hub-entrance-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes hub-entrance-progress{0%{width:0}to{width:100%}}@media (width<=700px) and (orientation:portrait){.hub-entrance-overlay{padding:22px 18px}.hub-entrance-label{margin-bottom:20px}.hub-entrance-ko{line-height:1.6}.hub-entrance-vi{margin-top:18px}.hub-entrance-progress{margin-top:34px}}@media (width<=900px) and (orientation:landscape){.hub-entrance-overlay{padding:14px 28px}.hub-entrance-label{margin-bottom:13px}.hub-entrance-ko{font-size:clamp(1.05rem,3.5vw,1.65rem);line-height:1.42}.hub-entrance-vi{margin-top:12px;font-size:clamp(.72rem,1.8vw,.88rem);line-height:1.45}.hub-entrance-progress{margin-top:22px}}@media (prefers-reduced-motion:reduce){.hub-entrance-content,.hub-entrance-ko,.hub-entrance-vi,.hub-entrance-progress span{animation:none}.hub-entrance-progress span{width:100%}}.hub-entrance-ko-default{display:inline}.hub-entrance-ko-portrait{display:none}@media (width<=700px) and (orientation:portrait){.hub-entrance-ko-default{display:none}.hub-entrance-ko-portrait{display:inline}}.page{grid-template-rows:58px 86px minmax(0,1fr);gap:14px;width:min(100%,1180px);height:calc(100dvh - 16px);margin:8px auto;padding:0 4px}.header{border-bottom-color:#7aa2f72b;grid-template-columns:minmax(145px,1fr) auto minmax(145px,1fr);gap:12px;padding:5px 0 8px}.header-back-label,.header-journal{color:#9ac2ff;letter-spacing:.02em;align-items:center;min-height:34px;font-size:.72rem;font-weight:800;display:inline-flex}.header-back-label{cursor:pointer;background:0 0;border:0;justify-self:start;padding:0}.header-back-label:hover,.header-back-label:focus-visible{color:#d6e7ff;text-underline-offset:4px;outline:none;text-decoration:underline}.header-journal{color:#c3dcff;cursor:default;background:#3561ae1f;border:1px solid #6fa6ff5c;border-radius:9px;justify-self:end;padding:0 12px}.user-status{color:#9cafd2;white-space:nowrap;justify-content:center;align-items:center;gap:7px;min-width:0;min-height:34px;font-size:.7rem;line-height:1;display:flex}.user-name{color:#edf5ff;text-overflow:ellipsis;max-width:210px;font-weight:800;overflow:hidden}.user-meta{color:#9eafd0}.user-separator{color:#9eb3e073}.intro{align-content:center;padding:0}.intro-eyebrow{color:#ffc653;letter-spacing:.14em;margin:0 0 8px;font-size:.67rem;font-weight:900}.title{letter-spacing:.06em;color:#f7faff;-webkit-text-fill-color:currentColor;filter:drop-shadow(2px 3px #ffb84fe6);background:0 0;font-size:clamp(1.9rem,4vw,3rem)}.module-grid{gap:14px}.module-card{text-align:left;background:linear-gradient(135deg,#0e1b38fa,#071024f0);border-color:#7ba4f842;border-radius:16px;grid-template-columns:auto minmax(0,1fr) auto;place-items:center stretch;gap:14px;padding:20px;display:grid}.module-card:after{opacity:.08;width:150px;height:150px}.module-card.orange{--card-color:#7caaff;--hover-shadow:#64a0ff6b}.module-card.green{--card-color:#88d9ff;--hover-shadow:#5bcfff57}.module-card.purple{--card-color:#aa9cff;--hover-shadow:#ae8eff57}.module-card.cyan{--card-color:#78ddec;--hover-shadow:#55d4e857}.module-icon{width:58px;height:58px;color:var(--card-color);text-shadow:0 0 14px color-mix(in srgb, var(--card-color) 65%, transparent);border:1px dashed #82afff94;border-radius:14px;place-items:center;font-size:1.3rem;font-weight:900;line-height:1;display:grid}.icon-book{font-size:1.48rem}.icon-number{letter-spacing:-.06em;font-size:1.03rem}.icon-video{font-size:1.08rem}.module-title{letter-spacing:.02em;text-shadow:2px 2px #ffb84fb8;align-self:center;font-size:clamp(.92rem,1.35vw,1.18rem);font-weight:900;line-height:1.28}.module-arrow{color:#7fb5ff;align-self:center;font-size:1.35rem;font-weight:700}@media (width<=900px) and (orientation:landscape){.page{grid-template-rows:44px 52px minmax(0,1fr);gap:8px}.header{grid-template-columns:minmax(110px,1fr) auto minmax(110px,1fr);gap:8px}.header-back-label,.header-journal{min-height:28px;font-size:.55rem}.header-journal{border-radius:7px;padding:0 8px}.user-status{gap:5px;font-size:.54rem}.intro-eyebrow{margin-bottom:4px;font-size:.5rem}.title{font-size:1.45rem}.module-grid{gap:8px}.module-card{border-radius:11px;gap:9px;padding:10px}.module-icon{border-radius:10px;width:37px;height:37px;font-size:.85rem}.module-title{font-size:clamp(.62rem,1.25vw,.76rem)}.module-arrow{font-size:1rem}}@media (width<=700px) and (orientation:portrait){.page{grid-template-rows:58px 72px minmax(0,1fr);gap:10px;width:min(100% - 20px,430px);height:calc(100dvh - 18px);margin:9px auto}.header{grid-template-columns:minmax(0,1fr) auto;gap:7px}.header-back-label{font-size:.62rem}.header-journal{border-radius:8px;min-height:29px;padding:0 9px;font-size:.59rem}.user-status{grid-area:2/1/auto/-1;justify-content:flex-start;gap:6px;font-size:.56rem}.user-name{max-width:140px}.intro-eyebrow{margin-bottom:6px;font-size:.56rem}.title{font-size:clamp(1.65rem,8vw,2.35rem)}.module-grid{gap:10px}.module-card{border-radius:15px;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;padding:14px}.module-icon{border-radius:13px;width:50px;height:50px;font-size:1.08rem}.module-title{font-size:clamp(.86rem,3.9vw,1.04rem)}.module-arrow{font-size:1.25rem}}@media (width<=700px) and (orientation:portrait) and (height<=650px){.page{grid-template-rows:50px 58px minmax(0,1fr);gap:7px}.header-back-label{font-size:.55rem}.header-journal{min-height:25px;font-size:.52rem}.user-status{font-size:.5rem}.intro-eyebrow{margin-bottom:3px;font-size:.48rem}.title{font-size:1.35rem}.module-grid{gap:7px}.module-card{border-radius:12px;grid-template-columns:44px minmax(0,1fr) auto;gap:11px;padding:10px}.module-icon{border-radius:11px;width:42px;height:42px;font-size:.88rem}.module-title{font-size:.76rem}.module-arrow{font-size:1.05rem}}.header{grid-template-columns:minmax(145px,1fr) minmax(0,1fr) auto}.header-spacer{min-width:0}.intro-eyebrow.user-status{color:#8998b5;letter-spacing:.035em;justify-content:center;align-items:center;gap:7px;min-height:auto;margin:0 0 9px;font-size:.67rem;font-weight:600;line-height:1.25;display:flex}.intro-eyebrow .user-name{color:#c7d0df;text-overflow:ellipsis;white-space:nowrap;max-width:210px;font-weight:700;overflow:hidden}.intro-eyebrow .user-meta{color:#77849e}.intro-eyebrow .user-separator{color:#8998b56b}.title{color:#dbe3f0;-webkit-text-fill-color:currentColor;filter:none;text-shadow:none;letter-spacing:.045em;background:0 0;font-weight:800}.module-card{--card-border:#92a1be38;border-color:var(--card-border);box-shadow:none;transition:border-color .16s,background .16s}.module-card:after{display:none}.module-card:hover:not(:disabled),.module-card:focus-visible:not(:disabled){border-color:var(--card-border);box-shadow:none;transform:none}.module-icon{border-style:dashed;border-color:color-mix(in srgb, var(--card-color) 48%, transparent);color:color-mix(in srgb, var(--card-color) 78%, #d6ddea 22%);text-shadow:none}.module-title{color:#d5dce8;text-shadow:none;font-weight:750}.module-arrow{color:#8793aa}@media (width<=900px) and (orientation:landscape){.header{grid-template-columns:minmax(110px,1fr) minmax(0,1fr) auto}.intro-eyebrow.user-status{gap:5px;margin-bottom:4px;font-size:.5rem}}@media (width<=700px) and (orientation:portrait){.header{grid-template-columns:minmax(0,1fr) auto}.header-spacer{display:none}.intro-eyebrow.user-status{gap:6px;margin-bottom:6px;font-size:.56rem}.intro-eyebrow .user-name{max-width:140px}}@media (width<=700px) and (orientation:portrait) and (height<=650px){.intro-eyebrow.user-status{gap:5px;margin-bottom:3px;font-size:.48rem}}.intro-eyebrow.user-status{order:-1}.module-grid{grid-template-rows:minmax(118px,142px);grid-template-columns:repeat(4,minmax(150px,210px));place-content:center;gap:14px}.module-card{height:100%;padding:16px}.module-title{letter-spacing:.055em;font-family:Trebuchet MS,Arial Narrow,Bahnschrift,ui-sans-serif,system-ui,sans-serif;font-size:clamp(.8rem,1.05vw,.98rem);font-weight:700}.module-icon{border-radius:12px;width:50px;height:50px;font-size:1.08rem}.module-arrow{font-size:1.12rem}@media (width<=900px) and (orientation:landscape){.module-grid{grid-template-rows:minmax(78px,96px);grid-template-columns:repeat(4,minmax(120px,170px));gap:10px}.module-card{gap:9px;padding:10px}.module-icon{border-radius:10px;width:36px;height:36px;font-size:.78rem}.module-title{letter-spacing:.035em;font-size:clamp(.58rem,1.1vw,.72rem)}.module-arrow{font-size:.9rem}}@media (width<=700px) and (orientation:portrait){.module-grid{grid-template-rows:repeat(4,minmax(76px,88px));grid-template-columns:minmax(0,310px);place-content:center;gap:10px}.module-card{border-radius:14px;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;padding:12px 14px}.module-icon{border-radius:11px;width:44px;height:44px;font-size:.95rem}.module-title{letter-spacing:.045em;font-size:clamp(.78rem,3.5vw,.92rem)}.module-arrow{font-size:1.04rem}}@media (width<=700px) and (orientation:portrait) and (height<=650px){.module-grid{grid-template-rows:repeat(4,minmax(58px,66px));grid-template-columns:minmax(0,278px);gap:8px}.module-card{border-radius:12px;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:9px 11px}.module-icon{border-radius:9px;width:36px;height:36px;font-size:.74rem}.module-title{font-size:.69rem}.module-arrow{font-size:.88rem}}.module-grid{grid-template-rows:minmax(104px,126px);place-self:center stretch}.module-title{font-size:clamp(.92rem,1.2vw,1.1rem)}@media (width<=900px) and (orientation:landscape){.module-grid{grid-template-rows:minmax(70px,84px)}.module-title{font-size:clamp(.66rem,1.3vw,.82rem)}}@media (width<=700px) and (orientation:portrait){.module-grid{grid-template-rows:repeat(4,minmax(66px,78px));align-self:center}.module-title{font-size:clamp(.9rem,3.9vw,1.04rem)}}@media (width<=700px) and (orientation:portrait) and (height<=650px){.module-grid{grid-template-rows:repeat(4,minmax(54px,62px))}.module-title{font-size:.76rem}}.module-grid{align-content:start;align-self:start;padding-top:2px}.module-card.green{--card-color:#8295ba;--card-border:#5b719e66;background:linear-gradient(135deg,#121a2d 0%,#0a1020 100%)}.module-card .module-icon{border-color:color-mix(in srgb, var(--card-color) 45%, transparent);color:color-mix(in srgb, var(--card-color) 78%, #d6ddea 22%)}.module-card .module-title{color:#d7dce5}.module-card .module-arrow{color:color-mix(in srgb, var(--card-color) 58%, #8a94a7 42%)}@media (width<=900px) and (orientation:landscape){.module-grid{align-content:start;align-self:start;padding-top:0}}@media (width<=700px) and (orientation:portrait){.module-grid{align-content:start;align-self:start;padding-top:0}}.module-card.orange{--card-color:#c8d0dc;--card-border:#c1ccdb61;background:linear-gradient(135deg,#252c37 0%,#151b25 100%)}.module-card.orange .module-title{color:#dce3ed}@media (width<=700px) and (orientation:portrait){.module-grid{align-content:center;align-self:stretch;padding-top:0;padding-bottom:0}}.self-practice-stage{flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:0;display:flex}.self-practice-stage .intro{flex:none;align-content:center;justify-items:center;width:100%;padding:0;display:grid}.self-practice-stage .module-grid{flex:none;align-content:center;place-self:auto;width:100%;min-height:auto;padding:0}@media (width<=900px) and (orientation:landscape){.page{grid-template-rows:44px minmax(0,1fr);gap:8px}.self-practice-stage{gap:17px}}@media (width<=700px) and (orientation:portrait){.page{grid-template-rows:58px minmax(0,1fr);gap:10px}.self-practice-stage{justify-content:center;gap:22px}.self-practice-stage .intro{width:100%}.self-practice-stage .module-grid{grid-template-rows:repeat(4,minmax(76px,88px));align-content:start}}@media (width<=700px) and (orientation:portrait) and (height<=650px){.page{grid-template-rows:50px minmax(0,1fr);gap:7px}.self-practice-stage{gap:13px}.self-practice-stage .module-grid{grid-template-rows:repeat(4,minmax(58px,66px))}}.page{grid-template-rows:58px 28px minmax(0,1fr);gap:0}.hub-user-line.user-status{color:#b5c0d7;letter-spacing:.02em;white-space:nowrap;justify-content:center;align-items:center;gap:7px;min-height:28px;padding:2px 0 0;font-size:.76rem;line-height:1;display:flex;overflow:hidden}.hub-user-line .user-name{color:#e6ecf7;max-width:36%;font-weight:700}.hub-user-line .user-meta{color:#8e9ab4}.hub-user-line .user-separator{color:#596681}.self-practice-stage{gap:26px}@media (width<=900px) and (orientation:landscape){.page{grid-template-rows:44px 20px minmax(0,1fr);gap:0}.hub-user-line.user-status{gap:5px;min-height:20px;padding-top:1px;font-size:.58rem}.self-practice-stage{gap:15px}}@media (width<=700px) and (orientation:portrait){.page{grid-template-rows:58px 26px minmax(0,1fr);gap:0}.hub-user-line.user-status{gap:6px;min-height:26px;padding-top:1px;font-size:.68rem}.hub-user-line .user-name{max-width:42%}.self-practice-stage{gap:22px}.self-practice-stage .module-grid{grid-template-rows:repeat(4,minmax(68px,78px));grid-template-columns:minmax(0,294px);gap:10px}.self-practice-stage .module-card{grid-template-columns:42px minmax(0,1fr) auto;gap:11px;padding:10px 13px}.self-practice-stage .module-icon{width:40px;height:40px;font-size:.86rem}}@media (width<=700px) and (orientation:portrait) and (height<=650px){.page{grid-template-rows:50px 21px minmax(0,1fr);gap:0}.hub-user-line.user-status{min-height:21px;font-size:.58rem}.self-practice-stage{gap:12px}.self-practice-stage .module-grid{grid-template-rows:repeat(4,minmax(54px,61px));grid-template-columns:minmax(0,268px);gap:8px}}.module-card.purple{--card-color:#9c90c7;--card-border:#67549d7a;background:linear-gradient(135deg,#17142a 0%,#0d0b1a 100%)}.module-card.cyan{--card-color:#83b3b8;--card-border:#356f777a;background:linear-gradient(135deg,#0d2529 0%,#071619 100%)}.self-practice-stage{transform:translateY(-12px)}@media (width<=900px) and (orientation:landscape){.self-practice-stage{transform:translateY(-8px)}}@media (width<=700px) and (orientation:portrait){.self-practice-stage{transform:translateY(-14px)}}@media (width<=700px) and (orientation:portrait) and (height<=650px){.self-practice-stage{transform:translateY(-8px)}}@media (width>=901px){.page{grid-template-rows:64px 30px minmax(0,1fr);width:min(100% - 32px,1280px);height:calc(100dvh - 20px);margin:10px auto;padding:0 8px}.header{grid-template-columns:minmax(180px,1fr) minmax(0,1fr) auto;padding-bottom:10px}.header-back-label,.header-journal{min-height:38px;font-size:.76rem}.header-journal{padding:0 14px}.hub-user-line.user-status{min-height:30px;font-size:.78rem}.self-practice-stage{grid-template-columns:minmax(190px,.62fr) minmax(540px,1.38fr);justify-content:center;align-items:center;gap:clamp(34px,5vw,72px);width:min(100%,1080px);margin:0 auto;display:grid;transform:translateY(-10px)}.self-practice-stage .intro{text-align:left;justify-items:start;width:auto}.self-practice-stage .title{letter-spacing:.055em;font-size:clamp(2.25rem,4vw,3.4rem);line-height:1}.self-practice-stage .module-grid{grid-template-rows:repeat(2,minmax(92px,112px));grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:14px;width:100%;display:grid}.self-practice-stage .module-card{border-radius:15px;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;height:100%;padding:14px 16px}.self-practice-stage .module-icon{border-radius:12px;width:46px;height:46px;font-size:.96rem}.self-practice-stage .module-title{letter-spacing:.04em;font-size:clamp(.92rem,1.18vw,1.08rem)}.self-practice-stage .module-arrow{font-size:1.12rem}}@media (width<=900px) and (orientation:landscape){.page{grid-template-rows:42px 20px minmax(0,1fr);gap:0;width:min(100% - 14px,900px);height:calc(100dvh - 10px);margin:5px auto}.header{grid-template-columns:minmax(120px,1fr) minmax(0,1fr) auto;padding:2px 0 5px}.hub-user-line.user-status{min-height:20px;font-size:.56rem}.self-practice-stage{grid-template-columns:minmax(130px,.55fr) minmax(360px,1.45fr);justify-content:center;align-items:center;gap:clamp(16px,3vw,30px);width:min(100%,820px);margin:0 auto;display:grid;transform:translateY(-4px)}.self-practice-stage .intro{text-align:left;justify-items:start;width:auto}.self-practice-stage .title{letter-spacing:.045em;font-size:clamp(1.25rem,3vw,1.82rem);line-height:1}.self-practice-stage .module-grid{grid-template-rows:repeat(2,minmax(58px,68px));grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:8px;width:100%;display:grid}.self-practice-stage .module-card{border-radius:11px;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;height:100%;padding:9px 10px}.self-practice-stage .module-icon{border-radius:9px;width:33px;height:33px;font-size:.72rem}.self-practice-stage .module-title{letter-spacing:.035em;font-size:clamp(.62rem,1.32vw,.78rem)}.self-practice-stage .module-arrow{font-size:.92rem}}@media (width>=901px){.self-practice-stage{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:30px;width:min(100%,1060px);margin:0 auto;display:grid;transform:translateY(-10px)}.self-practice-stage .intro{text-align:center;justify-items:center;width:100%;display:grid}.self-practice-stage .title{letter-spacing:.055em;font-size:clamp(2.15rem,3.55vw,3.1rem);line-height:1}.self-practice-stage .module-grid{grid-template-rows:minmax(94px,112px);grid-template-columns:repeat(4,minmax(0,1fr));align-content:center;gap:14px;width:min(100%,980px);display:grid}.self-practice-stage .module-card{text-align:center;border-radius:15px;grid-template-rows:auto auto auto;grid-template-columns:1fr;align-content:center;justify-items:center;gap:8px;height:100%;padding:16px 14px}.self-practice-stage .module-icon{border-radius:12px;width:42px;height:42px;font-size:.9rem}.self-practice-stage .module-title{letter-spacing:.035em;font-size:clamp(.82rem,1.08vw,.98rem);line-height:1.28}.self-practice-stage .module-arrow{font-size:.95rem;line-height:1}}@media (width<=900px) and (orientation:landscape){.self-practice-stage{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:14px;width:min(100%,760px);margin:0 auto;display:grid;transform:translateY(-4px)}.self-practice-stage .intro{text-align:center;justify-items:center;width:100%;display:grid}.self-practice-stage .title{letter-spacing:.045em;font-size:clamp(1.3rem,3vw,1.8rem);line-height:1}.self-practice-stage .module-grid{grid-template-rows:minmax(66px,76px);grid-template-columns:repeat(4,minmax(0,1fr));align-content:center;gap:8px;width:min(100%,720px);display:grid}.self-practice-stage .module-card{text-align:center;border-radius:11px;grid-template-rows:auto auto auto;grid-template-columns:1fr;align-content:center;justify-items:center;gap:4px;height:100%;padding:7px 6px}.self-practice-stage .module-icon{border-radius:8px;width:28px;height:28px;font-size:.62rem}.self-practice-stage .module-title{letter-spacing:.02em;font-size:clamp(.54rem,1.15vw,.67rem);line-height:1.18}.self-practice-stage .module-arrow{font-size:.66rem;line-height:1}}.current-stage-banner{color:#aab9d6;letter-spacing:.08em;background:#7aa2f714;border:1px solid #7aa2f757;border-radius:999px;justify-content:center;align-items:center;gap:8px;width:fit-content;margin:-15px auto 0;padding:6px 11px;font-size:.62rem;line-height:1;display:inline-flex}.current-stage-banner strong{color:#d9e6ff;letter-spacing:.03em;font-size:.72rem}.current-stage-banner.review{background:#ff9e6414;border-color:#ff9e6461}.current-stage-banner.review strong{color:#ffd0b2}@media (width<=900px) and (orientation:landscape){.current-stage-banner{gap:5px;margin-top:-10px;padding:4px 8px;font-size:.5rem}.current-stage-banner strong{font-size:.58rem}}@media (width<=700px) and (orientation:portrait){.current-stage-banner{margin-top:-13px;padding:5px 9px;font-size:.54rem}.current-stage-banner strong{font-size:.64rem}}.self-practice-access-note{text-align:center;color:#c9d5eeb3;grid-column:1/-1;margin:2px 0 0;font-size:.72rem;line-height:1.35}@media (width<=700px) and (orientation:portrait){.self-practice-access-note{margin-top:0;font-size:.64rem}}