/* K웹툰 캐릭터와 명료한 학습 선택을 중심으로 만든 반응형 퀘스트 스튜디오 디자인이다. */
@charset "UTF-8";
:root{--ink:#252b3e;--muted:#7c8191;--purple:#6555c7;--purple-soft:#eeebfb;--teal:#297f78;--line:#e7e8ef;--paper:#f7f8fa;--white:#fff;--radius:20px;font-family:'Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.4;cursor:default}button,a{touch-action:manipulation}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #8d73e0;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:fixed;z-index:200;left:12px;top:-70px;background:#fff;padding:16px;border:2px solid var(--purple)}.skip-link:focus{top:12px}
.app-shell{display:grid;grid-template-columns:224px minmax(0,1fr);max-width:1680px;margin:auto;min-height:100vh}.sidebar{height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:34px 21px 22px;background:white;border-right:1px solid var(--line);gap:12px}.brand{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:900;letter-spacing:1px}.brand-icon{width:41px;height:43px;display:grid;place-items:center;border-radius:13px;background:#6254c7;color:#fff;font-size:31px;position:relative}.brand-icon span{position:absolute;right:-5px;top:-12px;font-size:20px;color:#eab763}.brand small{display:block;font-size:9px;font-weight:700;letter-spacing:2.3px;margin-top:3px}.nav-label{font-size:11px;font-weight:700;color:#989bab;letter-spacing:1px;margin:35px 13px 2px}.desktop-nav{display:grid;gap:8px}.desktop-nav button{display:flex;align-items:center;text-align:left;gap:13px;min-height:49px;border:0;background:transparent;border-radius:12px;padding:11px 15px;font-size:14px;font-weight:700;color:#7a7e8e}.desktop-nav button>span{font-size:22px;width:22px;text-align:center}.desktop-nav button.active{background:#eeeafa;color:#6250bd;box-shadow:inset 3px 0 #7360cf}.desktop-nav small{margin-left:auto;background:white;padding:2px 6px;border-radius:6px;font-size:11px}.side-links{display:grid;gap:8px;border-top:1px solid var(--line);margin:12px 8px 0;padding-top:21px}.side-links a{font-size:12px;min-height:34px;display:flex;align-items:center;gap:12px;color:#8a8d9d}.side-links a span{width:22px;font-weight:800;text-align:center;color:#a39abf}.side-coach{margin-top:auto;background:#f6f7fb;border-radius:19px;padding:0 15px 17px;text-align:center}.side-coach img{width:87px;height:91px;object-fit:contain;margin:-9px auto 0}.side-coach b{font-size:12px}.side-coach p{font-size:11px;line-height:1.8;color:#9795a5;margin-bottom:0}.portal-link{font-size:11px;color:#9592a2;padding-top:7px;min-height:30px}
.workspace{min-width:0}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 38px}.breadcrumb{font-size:11px;color:#9c9dac;letter-spacing:1px}.breadcrumb span{padding:0 13px;color:#d4d3dc}.breadcrumb b{color:#777285;font-size:12px;letter-spacing:0}.account-zone{display:flex;align-items:center;gap:17px}.save-info{font-size:12px;color:#9a97a5}.account-link{font-size:12px;font-weight:800;background:#f3f0fa;color:#746399;padding:11px 17px;border-radius:20px;min-height:40px}.mobile-brand{display:none}main{padding:34px 38px 0;max-width:1390px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#9894a7;margin:0 0 9px}.page-heading h1{font-size:29px;letter-spacing:-1.4px;margin:0 0 10px;font-weight:800;line-height:1.4}.page-heading p:not(.eyebrow){font-size:14px;color:#91909e;margin:0}.available{background:#fff;border:1px solid #e9e5ef;padding:9px 13px;border-radius:30px;font-size:11px;white-space:nowrap;color:#8b859b;display:flex;gap:7px;align-items:center}.available i{width:6px;height:6px;background:#5aab90;border-radius:50%}
.focus-grid{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:22px}.featured{min-height:306px;position:relative;border:1px solid #e1dbf0;border-radius:22px;overflow:hidden;background:#edeaf9;display:flex;align-items:center}.feature-copy{position:relative;z-index:2;padding:31px 28px;width:68%}.feature-tag{display:inline-flex;align-items:center;gap:6px;background:#ffffff95;color:#796997;font-size:10px;font-weight:800;padding:6px 10px;border-radius:6px}.feature-tag:before{content:'✦';font-size:12px;color:#a18cca}.featured h2{font-size:27px;line-height:1.45;letter-spacing:-1px;margin:14px 0 10px;max-width:330px}.feature-copy>p{font-size:13px;line-height:1.9;color:#8c7f9d;margin:0;max-width:320px}.feature-meta{display:flex;gap:10px;font-size:11px;color:#9b8eac;margin:17px 0}.feature-actions{display:flex;gap:10px;align-items:center}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;border-radius:10px;border:0;padding:12px 18px;font-size:13px;font-weight:800}.primary{background:#6854be;color:white;box-shadow:0 3px 0 #4d3e91;transition:background .15s,transform .15s}.primary:hover{background:#5844af;transform:translateY(-1px)}.secondary{color:#83718f;background:white;border:1px solid #e3dbe9;box-shadow:none;font-size:12px}.circle-button{width:44px;height:44px;border-radius:12px;background:#ffffffa6;border:1px solid #dcd1ed;font-size:24px;color:#9983b0}.feature-art{position:absolute;inset:0;pointer-events:none;overflow:hidden}.scene-art{position:absolute;width:74%;height:100%;right:-26%;object-fit:cover;opacity:.19;mask-image:linear-gradient(90deg,transparent,black 60%)}.hero-character{position:absolute;right:-12px;bottom:-23px;width:40%;height:93%;object-fit:contain;filter:drop-shadow(0 10px 4px #87789625)}.comic-label{position:absolute;right:28px;top:32px;border:2px solid #685976;background:#fff9e9;border-radius:13px 13px 13px 1px;transform:rotate(7deg);font-size:10px;padding:8px 11px;letter-spacing:1px;font-weight:900;color:#796687}.art-number{position:absolute;right:15px;bottom:4px;font-size:88px;font-weight:900;opacity:.06;letter-spacing:-7px;color:#573f84}
.moment-card{border:1px solid var(--line);border-radius:21px;background:#fff;padding:21px 22px}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.card-heading .eyebrow{font-size:9px;margin:0;letter-spacing:1.2px}.text-button{padding:0;border:0;background:none;color:#9a8bab;font-size:11px;min-height:30px;white-space:nowrap}.moment-card h2{font-size:16px;margin:11px 0 0;letter-spacing:-.5px}.progress-orbit{height:108px;width:108px;border-radius:50%;margin:17px auto 14px;background:conic-gradient(#7b67c4 var(--done,0%),#efecf5 0);padding:7px}.progress-orbit>span{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:white;width:100%;height:100%}.progress-orbit b{font-size:31px;color:#65527d}.progress-orbit small{font-size:9px;color:#a499ad;margin-top:2px}.moment-stats{display:flex;justify-content:center;gap:0}.moment-stats>div{text-align:center;flex:1}.moment-stats>div+div{border-left:1px solid #eeebf3}.moment-stats b{display:block;font-size:18px;font-weight:800;color:#786386}.moment-stats span{font-size:10px;color:#a59bab}.moment-card>p{font-size:10px;line-height:1.7;color:#a498ae;text-align:center;margin:13px 0}.review-link{border-top:1px solid #f0ebf5;padding-top:12px;display:flex;justify-content:space-between;font-size:10px;color:#9786a3;min-height:30px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}.section-heading h2{font-size:20px;letter-spacing:-.8px;margin:0}.section-heading .eyebrow{margin:0 0 7px;font-size:9px}.collections{margin-top:33px}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.collection-card{border:1px solid #e2e9e6;border-radius:16px;text-align:left;min-height:127px;padding:20px 17px;position:relative;overflow:hidden;background:#edf5f0;color:#466a62;width:100%;transition:transform .15s}.collection-card:hover{transform:translateY(-3px)}.collection-card[data-group=little]{background:#fbf1e4;border-color:#f1e5d5;color:#8a7151}.collection-card[data-group=phonics]{background:#edf2fa;border-color:#dfe6f2;color:#617aa2}.collection-card h3{font-size:16px;margin:0 0 7px;position:relative;z-index:1;letter-spacing:-.5px}.collection-card p{font-size:10px;margin:0;color:inherit;opacity:.65;position:relative;z-index:1;max-width:70%;line-height:1.8}.collection-card small{font-size:10px;display:block;margin-top:16px;color:inherit;opacity:.75}.collection-card img{position:absolute;height:112px;width:100px;object-fit:contain;right:-8px;bottom:-20px;opacity:.93}.collection-card .collection-number{position:absolute;right:19px;top:10px;font-size:36px;font-weight:900;opacity:.09}.library-section{margin-top:34px}.result-count{font-size:12px;color:#aaa0b0}.search-row{display:flex;align-items:center;gap:15px}.search-field{display:flex;align-items:center;gap:12px;background:white;border:1px solid #e3e2eb;border-radius:12px;padding:0 15px;height:48px;flex:1;min-width:0;color:#aba2b7}.search-field>span{font-size:24px}.search-field input{border:0;outline:none;background:none;font-size:13px;flex:1;min-width:0;color:#62546e;height:100%}.search-field kbd{font-size:9px;border:1px solid #eeebf2;border-radius:5px;padding:4px;color:#b1a6bc}.sort-field{display:flex;align-items:center;gap:8px;font-size:11px;color:#a096a8}select{border:1px solid #e4e1ec;color:#8a7b96;background:white;border-radius:9px;font-size:11px;padding:9px 11px;min-height:39px}.filter-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0 21px;flex-wrap:wrap}.category-tabs{display:flex;gap:5px;flex-wrap:wrap}.category-tabs button{border:0;background:transparent;color:#a398ab;border-radius:8px;padding:9px 12px;min-height:37px;font-size:11px}.category-tabs button[aria-pressed=true]{background:#e9e4f7;color:#806ca6;font-weight:800}.select-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.reset-filter{font-size:10px;color:#a795b3;background:none;border:0;padding:8px;min-height:38px}.quest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.quest-card{border:1px solid #e6e3eb;background:#fff;border-radius:17px;overflow:hidden;transition:transform .18s,box-shadow .18s}.quest-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #4534570b}.quest-cover{position:relative;height:130px;padding:20px;background:#f0edf9;overflow:hidden}.quest-cover:after{content:'';position:absolute;width:140px;height:140px;border:1px solid #ffffffb0;border-radius:50%;right:-10px;bottom:-50px;box-shadow:0 0 0 17px #ffffff35,0 0 0 34px #ffffff25}.quest-cover[data-group=little]{background:#f9f0e3}.quest-cover[data-group=phonics]{background:#eaf1f9}.quest-cover img{position:absolute;width:88px;height:98px;right:4px;bottom:-16px;object-fit:contain;z-index:1;opacity:.96}.quest-expression{position:relative;z-index:2;font-size:17px;line-height:1.55;font-weight:800;letter-spacing:-.4px;display:block;color:#88799f;max-width:73%;padding-top:22px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.quest-badge{position:absolute;left:15px;top:12px;z-index:3;background:#ffffffcb;border-radius:5px;font-size:9px;color:#a293ae;padding:4px 7px;font-weight:800}.quest-badge.complete{background:#e8f7ed;color:#4e9472}.bookmark-button{position:absolute;right:12px;top:10px;z-index:3;width:34px;height:34px;border:1px solid #ffffff80;border-radius:50%;background:#ffffffbb;color:#a295b1;font-size:20px}.bookmark-button[aria-pressed=true]{color:#8664ba;background:#fff}.quest-card-body{padding:18px 17px 0}.quest-category{font-size:9px;color:#ac9bb9;letter-spacing:.3px}.quest-card h3{font-size:16px;line-height:1.55;letter-spacing:-.5px;margin:7px 0 8px}.quest-card-body>p{font-size:12px;color:#a497ad;line-height:1.8;min-height:43px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 14px}.quest-meta{display:flex;gap:11px;flex-wrap:wrap;font-size:10px;color:#b0a2b7;padding-bottom:15px}.quest-card-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0ebf5;padding:12px 17px;gap:10px}.quest-card-footer button{font-size:11px;border:0;background:none;color:#a89ab2;min-height:32px;padding:0 7px}.quest-card-footer a{font-size:12px;font-weight:800;color:#8870a6;min-height:32px;display:flex;align-items:center;gap:13px}.pagination{display:flex;align-items:center;justify-content:center;gap:22px;margin:25px 0}.pagination span{font-size:12px;color:#9e8daa}.pagination .secondary{font-size:11px;padding:9px 15px;min-height:38px}
.connections{display:grid;grid-template-columns:1fr 1.5fr;gap:30px;margin:34px 0 0;padding:27px;border-radius:18px;background:#eff3f2;border:1px solid #e1e7e5}.connections h2{font-size:18px;line-height:1.6;letter-spacing:-.7px;margin:0 0 8px;color:#55746e}.connections p{font-size:11px;line-height:1.8;color:#8b9d98;margin:0}.connection-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.connection-links a{border:1px solid #e0e7e4;border-radius:11px;padding:15px 13px;background:#ffffffa6;min-height:88px}.connection-links b{display:flex;gap:6px;justify-content:space-between;font-size:11px;color:#72877f;line-height:1.6}.connection-links small{display:block;font-size:9px;line-height:1.8;color:#a4b0ab;margin-top:7px}.page-footer{display:flex;align-items:center;justify-content:space-between;padding:30px 0;font-size:10px;color:#b1aab9;gap:15px}.state-panel{text-align:center;padding:70px 20px;max-width:700px;margin:auto}.state-panel h1{font-size:25px}.state-panel h3{font-size:21px}.state-panel p{font-size:14px;color:#95879f;line-height:1.8;margin-bottom:22px}.state-panel.compact{padding:35px 15px}.empty-symbol{font-size:35px;color:#b0a0c4}.loading-orbit{display:block;width:44px;height:44px;margin:20px auto;border:3px solid #e5deef;border-top-color:#8973b8;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sync-notice{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 15px;border:1px solid #eedcba;background:#fff7e5;border-radius:11px;margin-bottom:23px;font-size:12px;color:#a58655;line-height:1.7}.sync-notice button{border:0;background:none;color:#9c7b4f;text-decoration:underline;font-size:11px;white-space:nowrap;min-height:34px}.admin-resources{margin-top:25px;padding:17px;border:1px solid #e4dbea;border-radius:12px;color:#91809f;font-size:13px}.admin-resources summary{cursor:pointer;min-height:30px}.admin-resources a{display:inline-flex;padding:12px;font-size:12px;text-decoration:underline}.mobile-nav{display:none}
.quest-dialog{padding:0;width:min(610px,calc(100% - 28px));max-height:90dvh;border:1px solid #d8cfe6;border-radius:24px;box-shadow:0 30px 90px #24123433;color:var(--ink)}.quest-dialog::backdrop{background:#25183975;backdrop-filter:blur(5px)}.dialog-close{position:absolute;top:13px;right:14px;width:40px;height:40px;z-index:4;border:1px solid #e4dced;background:#fffefc;border-radius:50%;font-size:16px;color:#8b739e}.detail-illustration{height:130px;background:linear-gradient(135deg,#e9e4f5,#f7efdf);position:relative;overflow:hidden;padding:25px}.detail-illustration span{display:block;font-size:12px;font-weight:800;color:#9b82ab;max-width:65%}.detail-illustration img{position:absolute;height:145px;width:160px;right:52px;bottom:-29px;object-fit:contain}.detail-content{padding:26px 29px}.detail-meta{display:flex;gap:10px;font-size:12px;color:#aa96b5}.detail-content h2{font-size:26px;line-height:1.6;letter-spacing:-1px;margin:10px 0}.detail-content>p{font-size:15px;line-height:1.8;color:#9b85a8}.detail-content h3{font-size:14px;margin:25px 0 10px}.expression-list{border:1px solid #e8e0f0;border-radius:13px;overflow:hidden}.expression-row{display:flex;align-items:center;gap:15px;padding:13px 15px;background:#fbf9fe}.expression-row+.expression-row{border-top:1px solid #eee6f5}.expression-row>div{flex:1;min-width:0}.expression-row b{font-size:16px;line-height:1.7;display:block;color:#7e6595;overflow-wrap:anywhere}.expression-row small{font-size:12px;color:#ac97b8;line-height:1.8}.expression-row button{width:40px;height:40px;border:1px solid #e6dcf0;border-radius:50%;background:white;color:#a28ab2;font-size:17px;flex-shrink:0}.detail-steps{display:flex;gap:7px;padding:0;list-style:none;counter-reset:step}.detail-steps li{flex:1;text-align:center;font-size:11px;background:#f4f1f8;border-radius:9px;padding:10px 5px;color:#ad9bbb;line-height:1.8}.detail-steps li:before{counter-increment:step;content:counter(step);display:block;color:#977baa;font-weight:900;font-size:16px}.detail-content .detail-note{font-size:12px;line-height:1.9;background:#fbf8ef;padding:12px;border-radius:9px;color:#a99570}.detail-actions{display:flex;gap:10px;margin-top:22px;position:sticky;bottom:0;background:white;padding-top:7px}.detail-actions .primary{flex:1}.detail-actions .secondary{min-width:90px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:#544566;color:#fff;border:1px solid #79678a;border-radius:14px;max-width:90vw;padding:13px 20px;font-size:13px;line-height:1.8;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.visible{opacity:1;transform:translate(-50%,0)}
.growth-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.growth-stat{background:white;border:1px solid #e7e1ec;border-radius:17px;padding:24px}.growth-stat b{font-size:32px;color:#8a72a0;display:block}.growth-stat span{font-size:13px;color:#aa98b3;display:block;margin-top:8px}.growth-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.growth-track{padding:22px;background:white;border:1px solid #e4deeb;border-radius:15px}.growth-track h3{font-size:15px;margin:0 0 12px}.growth-track p{font-size:12px;color:#a28baa}.growth-track progress{width:100%;height:8px;accent-color:#8a71b1}.history-list{margin-top:27px}.history-list h2{font-size:20px}.history-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #e9e2ef;padding:18px 0}.history-row b{font-size:14px;color:#8b749b}.history-row small{display:block;font-size:11px;color:#b4a0be;margin-top:7px}.history-row a{font-size:12px;color:#a08bab;min-height:40px;display:flex;align-items:center}.progress-caption{font-size:12px;color:#aa96b5;line-height:1.8}
/* 정보와 컨트롤의 명도 대비를 장식용 색상과 분리한다. */
.feature-copy>p,.quest-card-body>p,.detail-content>p{color:#71667f}.quest-meta,.quest-category,.feature-meta,.result-count,.text-button,.reset-filter,.sort-field,.select-filters select,.sort-field select,.category-tabs button,.quest-card-footer button,.quest-card-footer a,.quest-badge{color:#786a87}.eyebrow,.nav-label,.breadcrumb,.save-info,.side-links a,.portal-link,.side-coach p,.page-footer,.review-link,.moment-card>p,.moment-stats span,.moment-stats b,.moment-card .text-button,.progress-orbit small{color:#7d7389}.quest-expression{color:#726080}.quest-category{font-size:11px}.quest-meta{font-size:12px}.quest-card-body>p{font-size:14px}.quest-card h3{font-size:17px}.quest-card-footer a,.quest-card-footer button{font-size:13px;min-height:40px}.quest-card-footer{padding:10px 14px}.bookmark-button{width:40px;height:40px}.category-tabs button,select,.text-button,.reset-filter{min-height:44px}.category-tabs button,select{font-size:12px}.collection-card p,.collection-card small{font-size:12px;opacity:1}.collection-card p{max-width:75%}.collection-card img{opacity:.7}.connection-links small,.connection-links b{color:#668078;font-size:11px}.detail-meta,.expression-row small,.detail-steps li,.detail-note,.growth-stat span,.growth-track p,.history-row small,.progress-caption{color:#786584}.expression-row b{color:#644e7b}.detail-content .detail-note{color:#8b7141}.detail-meta,.detail-steps li,.detail-content h3{font-size:13px}
@media(min-width:1500px){main{padding:38px 48px 0}.featured{min-height:328px}.featured h2{font-size:31px}.feature-copy{padding:35px}.quest-cover{height:150px}.quest-expression{font-size:19px}}
@media(max-width:1200px){.app-shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding-inline:16px}.brand{font-size:15px}.focus-grid{grid-template-columns:minmax(0,1fr) 240px;gap:17px}.feature-copy{padding:25px 23px;width:73%}.featured h2{font-size:24px}.feature-copy>p{font-size:12px}.hero-character{width:39%;right:-22px}.feature-meta{font-size:11px}.feature-actions .primary{font-size:12px;padding:11px 14px}.page-heading h1{font-size:25px}.available{display:none}main{padding:28px 26px 0}.topbar{padding:0 26px}.quest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.connections{grid-template-columns:1fr;gap:18px}.collection-card{padding:17px 13px;min-height:150px}.collection-card h3{font-size:14px}.collection-card p{max-width:75%;font-size:11px}.collection-card img{height:88px;width:74px;bottom:-14px}.collection-card small{font-size:11px}.filter-row{gap:12px}}
@media(max-width:960px){.focus-grid{grid-template-columns:1fr}.moment-card{display:grid;grid-template-columns:1fr 100px;gap:8px;align-items:center;padding:19px 22px}.moment-card .card-heading{grid-column:1}.moment-card h2{grid-column:1;margin:0}.progress-orbit{grid-column:2;grid-row:1/5;width:85px;height:85px;margin:0;justify-self:end}.progress-orbit b{font-size:25px}.moment-stats{justify-content:start;gap:24px;grid-column:1}.moment-stats>div{flex:none;text-align:left}.moment-stats>div+div{padding-left:20px}.moment-stats b{font-size:16px}.moment-card>p{grid-column:1/3;text-align:left;margin:5px 0}.review-link{grid-column:1/3;padding-top:8px}.collection-grid{gap:9px}.collection-card h3{font-size:13px}.collection-card p{max-width:100%}.collection-card img{opacity:.3}.featured{min-height:286px}.feature-copy{width:70%}.hero-character{right:0;width:37%}.breadcrumb{font-size:10px}.save-info{display:none}.growth-tracks{grid-template-columns:1fr}.growth-stat{padding:18px}.growth-stat b{font-size:26px}.growth-stat span{font-size:11px}}
@media(max-width:700px){.app-shell{display:block}.sidebar{display:none}.workspace{width:100%}.topbar{height:66px;padding:0 19px;position:sticky;top:0;z-index:20;background:#fffffff2;backdrop-filter:blur(12px)}.breadcrumb{display:none}.mobile-brand{display:block;font-size:28px;font-weight:900;position:relative;color:#7661bd}.mobile-brand span{font-size:17px;position:absolute;right:-12px;top:-3px;color:#e8b260}.account-link{font-size:12px;padding:9px 14px;min-height:39px}main{padding:24px 17px 83px}.page-heading{margin-bottom:21px}.page-heading h1{font-size:23px;letter-spacing:-1.1px;max-width:330px}.page-heading p:not(.eyebrow){font-size:12px}.page-heading .eyebrow{font-size:9px;letter-spacing:1.2px}.featured{min-height:290px;border-radius:19px}.feature-copy{padding:24px 20px;width:77%}.featured h2{font-size:25px;max-width:230px;line-height:1.5}.feature-copy>p{font-size:12px;max-width:220px}.feature-tag{font-size:9px}.hero-character{width:39%;right:-16px;bottom:-29px;opacity:.8}.comic-label{right:12px;top:20px;font-size:8px;padding:6px;max-width:77px}.feature-meta{gap:8px;font-size:10px;flex-wrap:wrap;margin:14px 0 18px}.feature-actions .primary{font-size:12px;gap:9px;padding:12px 14px}.feature-actions .circle-button{width:41px;height:44px;font-size:21px}.moment-card{border-radius:17px}.collections{margin-top:28px}.collection-grid{grid-template-columns:1fr;gap:9px}.collection-card{min-height:102px;padding:18px 20px;border-radius:14px}.collection-card h3{font-size:16px}.collection-card p{font-size:12px;max-width:75%}.collection-card small{font-size:11px;margin-top:10px}.collection-card img{height:119px;width:125px;right:2px;opacity:.8;bottom:-24px}.collection-card .collection-number{right:120px;top:14px;font-size:46px}.section-heading h2{font-size:19px}.section-heading .eyebrow{font-size:9px}.section-heading .text-button{font-size:11px}.library-section{margin-top:28px}.search-row{gap:9px;flex-wrap:wrap}.search-field{height:48px;padding:0 12px;width:100%;flex-basis:100%}.search-field input{font-size:12px}.sort-field{margin-left:auto}.filter-row{margin:11px 0 17px;gap:10px}.category-tabs{width:100%;gap:4px}.category-tabs button{font-size:11px;padding:8px 10px;min-height:40px}.select-filters{width:100%;gap:5px}.select-filters select{font-size:11px;padding:8px;min-height:41px}.reset-filter{margin-left:auto;padding:5px;font-size:10px}.quest-grid{grid-template-columns:1fr;gap:16px}.quest-card{border-radius:17px}.quest-cover{height:141px}.quest-expression{font-size:21px;max-width:72%;padding-top:25px}.quest-cover img{width:114px;height:128px;right:12px;bottom:-18px}.quest-card-body{padding:19px 19px 0}.quest-card h3{font-size:18px;margin:8px 0}.quest-card-body>p{font-size:14px;min-height:0}.quest-meta{font-size:12px;padding-bottom:16px}.quest-card-footer{padding:10px 15px}.quest-card-footer a,.quest-card-footer button{font-size:13px;min-height:43px}.quest-badge{font-size:10px;left:17px;top:15px}.bookmark-button{right:16px;top:12px}.pagination{gap:18px;margin:22px 0}.pagination .secondary{min-height:44px}.connections{padding:22px 18px;margin-top:26px;border-radius:16px}.connections h2{font-size:18px}.connections p{font-size:12px}.connection-links{grid-template-columns:1fr}.connection-links a{min-height:72px;padding:13px 16px}.connection-links b{font-size:13px}.connection-links small{font-size:11px}.page-footer{font-size:9px;padding:26px 0;flex-wrap:wrap;gap:8px}.mobile-nav{position:fixed;z-index:40;bottom:0;left:0;right:0;border-top:1px solid #e7e0ed;background:#fffffff5;backdrop-filter:blur(13px);padding:6px 9px calc(6px + env(safe-area-inset-bottom));display:flex;justify-content:space-around}.mobile-nav button{border:0;background:transparent;color:#9b8dab;display:flex;align-items:center;flex-direction:column;gap:2px;font-size:10px;min-width:70px;min-height:49px;border-radius:10px;flex:1}.mobile-nav span{font-size:21px}.mobile-nav button.active{background:#f0ebf9;color:#8164ac;font-weight:800}.toast{bottom:86px;font-size:12px;width:max-content;max-width:90vw;text-align:center}.quest-dialog{border-radius:22px;max-height:88dvh}.detail-content{padding:23px 20px}.detail-content h2{font-size:23px}.detail-content>p{font-size:14px}.detail-illustration{height:117px}.detail-illustration img{height:140px;right:36px;bottom:-27px}.detail-steps{gap:5px}.detail-steps li{font-size:11px}.detail-meta{font-size:11px}.expression-row{padding:12px}.expression-row b{font-size:16px}.detail-content .detail-note{font-size:12px}.detail-actions .primary{font-size:13px;padding:13px}.detail-actions .secondary{font-size:12px;min-width:76px}.sync-notice{font-size:12px;display:block}.sync-notice button{display:block;margin-top:7px}.growth-stats{gap:8px}.growth-stat{padding:17px 11px}.growth-stat b{font-size:25px}.growth-stat span{font-size:11px;line-height:1.8}.history-row b{font-size:13px}.history-row small{font-size:10px}.history-row a{white-space:nowrap;font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}