:root{--navy:#182c58;--navy2:#253d70;--ink:#1f2c47;--muted:#73809a;--bg:#f6f8fc;--surface:#fff;--border:#e5eaf3;--shadow:0 16px 44px rgba(31,55,105,.09);--r:22px;--mint:#dcf5e8;--violet:#f0e9ff;--peach:#ffeadc;--blue:#e5f1ff;--yellow:#fff4ce}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;line-height:1.55}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #56a9e8;outline-offset:3px}.wrap{width:min(1170px,calc(100% - 40px));margin:auto}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2rem,4vw,3.15rem);line-height:1.17;letter-spacing:-.04em}h2{font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:-.035em;line-height:1.2}h3{font-size:1.12rem;line-height:1.3}p{line-height:1.65}small{font-size:.77rem}.site-header{background:var(--navy);color:white;position:sticky;top:0;z-index:100;box-shadow:0 6px 22px rgba(10,28,70,.11)}.topbar{min-height:78px;display:flex;align-items:center;gap:16px;justify-content:space-between}.naked{border:0;background:transparent}.brand{display:flex;align-items:center;color:white;text-align:left;gap:11px;padding:0}.brand-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:#f6d477;color:#142850;font-size:1.7rem;font-weight:900}.brand-name{display:flex;flex-direction:column;line-height:1.15}.brand-name strong{letter-spacing:.12em;font-size:1rem}.brand-name small{letter-spacing:.15em;color:#bdc9e1;margin-top:7px;font-size:.62rem;font-weight:700}.top-nav{display:flex;gap:7px;align-items:center}.nav-btn{color:#d6def0;border:0;background:transparent;padding:10px 15px;border-radius:10px;font-weight:700;font-size:.84rem}.nav-btn:hover,.nav-btn.active{color:white;background:#344d7e}.offline-tag{font-size:.69rem;white-space:nowrap;background:#2b4774;color:#8de6b2;border-radius:50px;padding:8px 11px;font-weight:850;letter-spacing:.08em}.offline-tag:first-letter{color:#75eca1}.site-footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#8e99ae;padding:32px 0;font-size:.76rem}.main-space{padding-top:34px;min-height:calc(100vh - 160px)}.eyebrow{letter-spacing:.16em;font-weight:850;font-size:.7rem;text-transform:uppercase;color:#6b7eb0}.eyebrow.light{color:#d6e3ff}.hero{background:linear-gradient(120deg,#1c366c 0%,#1b2c59 58%,#253b70 100%);color:white;min-height:310px;border-radius:28px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(290px,.75fr);position:relative;overflow:hidden;padding:43px 46px;box-shadow:0 20px 44px rgba(25,45,86,.12)}.hero::before{content:"";position:absolute;width:300px;height:300px;border:45px solid #ffffff06;border-radius:100%;right:-110px;bottom:-190px}.hero::after{content:"✧   ✦";position:absolute;font-size:75px;right:39%;top:10%;color:#ffffff14}.hero h1{max-width:700px;margin:9px 0 15px;color:#fff}.hero p{max-width:510px;color:#d2def2;font-size:.96rem}.hero .pills{margin:24px 0 0}.hero-art{position:relative;display:grid;place-items:center;min-height:228px}.floating-card{position:absolute;box-shadow:0 12px 25px #0002;border:6px solid #fffd;border-radius:25px;text-align:center;display:grid;place-items:center}.floating-card.one{width:135px;height:135px;font-size:4.5rem;background:#ffdd76;left:10%;top:4%;transform:rotate(-13deg)}.floating-card.two{width:119px;height:119px;font-size:4.4rem;background:#aee2c5;right:6%;top:20%;transform:rotate(13deg)}.floating-card.three{width:140px;height:125px;font-size:4.2rem;background:#e8d8ff;left:29%;bottom:0;transform:rotate(3deg)}.pills{display:flex;flex-wrap:wrap;gap:9px}.pill{font-size:.77rem;border-radius:50px;padding:7px 12px;background:#fff2;color:#edf4ff;border:1px solid #fff3;font-weight:700}.primary,.secondary,.soft-btn,.text-btn,.danger-btn,.outline-btn{border:0;border-radius:12px;padding:12px 17px;font-weight:800;font-size:.89rem;transition:transform .13s,background .13s}.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.soft-btn:hover:not(:disabled),.outline-btn:hover:not(:disabled){transform:translateY(-2px)}.primary{background:#f6ce69;color:#2f3260}.secondary{color:white;background:var(--navy)}.outline-btn{border:1px solid #d8dfee;background:white;color:#304974}.soft-btn{background:#eef3fe;color:#304974}.danger-btn{background:#fff0ef;color:#b34c49}.text-btn{background:transparent;color:#4764a0;padding:5px 0}.actionbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px;margin-bottom:20px}.section-heading h2{margin:6px 0 0}.section-heading p{margin:3px 0;color:var(--muted);font-size:.88rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:18px 0}.stat{background:white;border:1px solid var(--border);border-radius:17px;padding:17px 20px;display:flex;align-items:center;gap:13px;box-shadow:0 5px 12px #182c5806}.stat-emoji{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;background:var(--blue)}.stat strong{display:block;font-size:1.35rem;line-height:1.1}.stat small{display:block;color:var(--muted);margin-top:3px}.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.module-card{border:1px solid var(--border);border-radius:23px;background:white;overflow:hidden;box-shadow:0 7px 16px #1b315608;transition:transform .14s,box-shadow .14s}.module-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.module-visual{height:144px;position:relative;display:flex;align-items:center;justify-content:center;gap:17px;overflow:hidden}.module-visual span{display:block;filter:drop-shadow(0 9px 0 #00000008);font-size:3.3rem}.module-visual span:nth-child(1){transform:rotate(-14deg)}.module-visual span:nth-child(3){transform:rotate(15deg)}.module-info{padding:19px 19px 22px}.module-info h3{margin:4px 0;font-size:1.14rem}.module-info p{font-size:.84rem;color:#68758c;min-height:56px;margin:7px 0 14px}.overline{color:#7d89a0;font-size:.66rem;font-weight:850;letter-spacing:.1em}.module-card button{width:100%}.bg-mint{background:linear-gradient(135deg,#e0f8e9,#ccefe4)}.bg-peach{background:linear-gradient(135deg,#ffeadc,#ffdfcc)}.bg-lilac{background:linear-gradient(135deg,#f0e7ff,#e4ddff)}.bg-blue{background:linear-gradient(135deg,#e2f4ff,#cee7ff)}.bg-yellow{background:linear-gradient(135deg,#fff4ca,#ffe9b3)}.bg-rose{background:linear-gradient(135deg,#ffe8f0,#fdd9e5)}.info-band{background:#eef3fe;border:1px solid #dfe8fa;border-radius:18px;padding:18px 22px;margin-top:23px;display:flex;align-items:center;gap:13px;color:#445a81}.info-band .large-icon{font-size:1.6rem}.info-band p{margin:0;font-size:.85rem}.module-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:13px;margin-bottom:18px}.bread{font-size:.84rem;color:#657a9d}.bread button{border:0;background:transparent;color:#4b6598;font-weight:800;padding:5px}.game-shell{background:white;border:1px solid var(--border);border-radius:25px;overflow:hidden;box-shadow:var(--shadow)}.game-banner{padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:15px}.game-banner h1{font-size:clamp(1.55rem,3vw,2.3rem);margin:5px 0 8px}.game-banner p{margin:0;color:#54657b;font-size:.88rem}.game-emoji{font-size:4.2rem;white-space:nowrap}.game-body{padding:25px 30px 34px;max-width:1000px;margin:auto}.standard-line{font-size:.78rem;color:#8792a5;background:#f8faff;border:1px dashed #dce4f2;border-radius:12px;padding:11px 14px;margin-bottom:22px}.question-title{font-size:1.15rem;font-weight:900;text-align:center;margin:0 0 15px}.centered{text-align:center}.stage{border:1px solid #ecf0f7;border-radius:20px;background:#fbfcff;padding:24px;min-height:290px}.feedback{min-height:50px;display:flex;align-items:center;justify-content:center;margin:16px 0 5px;font-size:.96rem;font-weight:800;text-align:center;color:#4770ab}.feedback.correct{color:#138356}.feedback.wrong{color:#b54d51}.game-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0 0}.score-tag{border:1px solid #dfe6f3;background:#fff;border-radius:50px;padding:8px 14px;color:#576b8b;font-size:.82rem;font-weight:800}.card-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.choice{background:white;border:2px solid #e2e9f3;border-radius:17px;min-width:105px;min-height:105px;padding:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;transition:transform .13s,border-color .13s}.choice:hover:not(:disabled),.choice.selected{transform:translateY(-3px);border-color:#6d9be8}.choice .big-emoji{font-size:2.4rem;line-height:1.2}.choice strong{font-size:.93rem}.emotions-show{text-align:center}.emotion-face{font-size:6.4rem;line-height:1.5;filter:drop-shadow(0 8px 8px #00000012)}.emotion-label{font-size:1.6rem;font-weight:900}.emotion-prompt{font-size:1.02rem;color:#6d7891;margin:12px 0 20px}.spin-disk{width:136px;height:136px;margin:8px auto 22px;border-radius:50%;border:9px solid #fff;box-shadow:0 8px 21px #26487522;background:conic-gradient(#ffc969 0 60deg,#a4e6c5 60deg 120deg,#d8c7ff 120deg 180deg,#ffd7ca 180deg 240deg,#b6e5fa 240deg 300deg,#f7bce1 300deg);position:relative;transition:transform .8s cubic-bezier(.2,.8,.3,1)}.spin-disk::after{content:"✦";position:absolute;inset:29px;background:white;border-radius:50%;display:grid;place-items:center;font-size:2.1rem;color:#25396e;box-shadow:0 2px 7px #0002}.spin-disk::before{content:"▼";position:absolute;top:-25px;left:calc(50% - 11px);font-size:22px;z-index:2;color:var(--navy)}.food-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}.bucket{min-height:125px;border:3px dashed #b8c7d9;border-radius:18px;text-align:center;padding:20px 12px;background:white}.bucket.healthy{border-color:#a3d7bd;background:#effdf4}.bucket.sometimes{border-color:#ffc7a9;background:#fff4ed}.bucket h3{margin:8px 0 4px}.bucket small{color:#75819b}.food-tile{min-width:111px;min-height:108px}.food-selected{border-color:#416ec3!important;background:#edf4ff}.scenario{padding:25px;background:linear-gradient(120deg,#f4efff,#fff);border-radius:17px;text-align:center;font-size:1.35rem;font-weight:850;margin-bottom:18px}.scenario-counter{color:#7c7baa;font-weight:800;font-size:.82rem;text-align:center;margin-bottom:9px}.answer-button{min-height:76px;text-align:left;flex:1;min-width:240px;border-radius:16px;border:2px solid #e6eaf3;background:white;padding:14px 20px;color:#293d61;font-weight:800}.answer-button:hover:not(:disabled){border-color:#6d98dd;background:#f5f9ff}.story-deck,.story-answer{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;min-height:118px}.story-answer{background:#f0f7ff;border:2px dashed #bcd0e9;border-radius:17px;padding:15px;align-items:center}.story-card{background:white;width:145px;min-height:119px;padding:12px;border:2px solid #e1e8f1;border-radius:16px;text-align:center;cursor:pointer}.story-card .story-pic{display:block;font-size:2.8rem;line-height:1.3}.story-card p{font-size:.77rem;line-height:1.3;margin:4px 0}.story-card.selected-card{border-color:#6d9be8;background:#fff}.empty-state{font-size:.83rem;color:#8291ad;margin:auto}.math-mode-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}.math-tab{background:#f2f5fa;border:1px solid #e2e8f3;color:#526a8e;font-weight:800;border-radius:50px;padding:9px 13px;font-size:.82rem}.math-tab.active{background:#234d91;color:white;border-color:#234d91}.math-scene{text-align:center;background:#fffcf0;border:1px solid #f7eed7;border-radius:20px;padding:22px 15px;margin:13px auto 20px;max-width:650px}.math-question{font-size:1.2rem;font-weight:900;color:#304875}.math-symbols{font-size:2.35rem;max-width:540px;word-break:break-word;line-height:1.7;letter-spacing:4px;margin:14px auto}.math-equation{font-size:clamp(2.4rem,6vw,4rem);font-weight:950;color:#283b67;line-height:1.6}.math-two{display:grid;grid-template-columns:1fr 1fr;gap:17px}.math-group{padding:17px;background:white;border-radius:17px;border:1px solid #f0e5c9}.math-number{font-size:3.3rem;font-weight:900;color:#283f75}.math-option{font-size:1.35rem;font-weight:900;min-width:84px;min-height:77px}.progress-wrap{max-width:330px;margin:20px auto 0}.progress-head{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:#7c879e;margin-bottom:7px;font-weight:750}.progress-bg{background:#e7edf5;height:9px;border-radius:20px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#60c79c,#377ccf);height:100%;border-radius:20px;transition:width .2s}.art-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0}.art-tool{font-size:1.5rem;width:57px;height:53px;border:2px solid #e3eaf4;background:white;border-radius:12px;color:var(--art-color,#3b72d6)}.art-tool.active{border-color:#253f78;background:#e9f2ff}.color-dot{width:28px;height:28px;border-radius:50%;border:2px solid #fff;outline:2px solid transparent}.color-dot.active{outline-color:#28395e}.art-board{background:white;border:9px solid #eff2fa;border-radius:19px;max-width:624px;margin:15px auto;display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1.6}.art-cell{border:1px solid #f2f4f8;display:grid;place-items:center;padding:0;background:white;font-size:clamp(1.1rem,3vw,2.3rem);font-weight:900;line-height:1}.art-cell:hover{background:#f1f6ff}.form-page{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px;align-items:start}.side-panel,.panel{background:white;border:1px solid var(--border);box-shadow:0 6px 17px #102d5406;border-radius:22px;padding:23px}.side-panel{position:sticky;top:100px}.side-panel h3{margin-bottom:17px}.side-link{width:100%;text-align:left;border:0;border-radius:12px;padding:12px 13px;background:transparent;color:#586982;font-weight:800;margin:2px 0;font-size:.86rem}.side-link:hover,.side-link.active{background:#eef3fd;color:#223b73}.panel h2{margin:0 0 9px}.panel p.muted{color:var(--muted);font-size:.85rem}.form-group{margin:20px 0}.form-group label{display:block;font-size:.86rem;font-weight:850;margin-bottom:7px}.form-group textarea,.form-group input,.form-group select{display:block;width:100%;border:1px solid #dbe2ee;background:#fbfcff;border-radius:12px;padding:11px 13px;color:#263b61;min-height:46px}.form-group textarea{min-height:180px;resize:vertical;font-family:"Cascadia Code",Consolas,monospace;font-size:.82rem}.hint{font-size:.77rem;color:#7a879c;margin-top:6px}.notice{background:#fffbeb;border:1px solid #f3dfa5;border-radius:14px;padding:13px 15px;color:#7c6533;font-size:.82rem}.upload-file{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.import-label{display:inline-flex;cursor:pointer;align-items:center;justify-content:center}.timeline{display:grid;gap:10px}.timeline-row{display:flex;align-items:start;gap:18px;padding:14px 16px;background:white;border:1px solid var(--border);border-radius:15px}.timeline-time{font-weight:900;color:#375583;white-space:nowrap;font-size:.86rem;width:105px}.timeline-name{font-weight:850}.timeline-desc{font-size:.83rem;color:#74809a}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.guide-step{background:white;border:1px solid var(--border);border-radius:16px;padding:17px}.guide-step strong{display:block;margin:9px 0 5px}.guide-step p{font-size:.83rem;color:#7c88a0;margin:0}.step-index{width:37px;height:37px;background:#e5eeff;color:#375c9e;border-radius:12px;display:grid;place-items:center;font-weight:900}.empty-panel{text-align:center;padding:35px;color:#7e8ca5}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,25px);padding:12px 22px;border-radius:16px;background:#253763;color:white;font-weight:800;font-size:.84rem;box-shadow:0 11px 35px #0e1d4950;opacity:0;pointer-events:none;transition:.2s;z-index:200;text-align:center;max-width:min(90vw,470px)}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:31px}.hero-art{display:none}.modules{grid-template-columns:repeat(2,1fr)}.form-page{grid-template-columns:1fr}.side-panel{position:static}.side-panel-links{display:flex;flex-wrap:wrap}.side-link{width:auto}.guide-grid{grid-template-columns:1fr 1fr}.offline-tag{display:none}}
@media(max-width:650px){.topbar{padding:12px 0;min-height:72px;flex-wrap:wrap}.top-nav{order:2;width:100%;justify-content:center}.nav-btn{font-size:.75rem;padding:9px 12px}.wrap{width:min(100% - 24px,1170px)}.main-space{padding-top:16px}.hero{padding:27px 23px;min-height:0}.hero h1{font-size:1.9rem}.stats{grid-template-columns:1fr 1fr}.stat:last-child{grid-column:1/-1}.modules{grid-template-columns:1fr}.module-visual{height:125px}.module-info p{min-height:0}.game-banner{padding:20px}.game-banner .game-emoji{font-size:2.6rem}.game-body{padding:19px 15px 23px}.stage{padding:17px 10px}.food-layout{grid-template-columns:1fr 1fr;gap:9px}.bucket{min-height:120px;padding:12px 5px}.choice{min-width:90px;min-height:99px;padding:11px}.math-two{gap:7px}.math-group{padding:12px 3px}.math-symbols{font-size:1.7rem;letter-spacing:1px}.math-tab{font-size:.72rem;padding:8px 11px}.timeline-row{gap:10px}.timeline-time{width:75px;font-size:.75rem}.guide-grid{grid-template-columns:1fr}.panel,.side-panel{padding:17px}.site-footer{font-size:.67rem}}
@media print{.site-header,.site-footer,.game-controls,.top-nav,.info-band,#toast,.module-card button,.actionbar,.game-header-controls{display:none!important}body{background:white}.main-space{padding:0}.game-shell,.stage,.panel{border:0;box-shadow:none}.hero{color:black;background:white;box-shadow:none}.hero h1{color:black}.modules{grid-template-columns:repeat(3,1fr)}.module-card{break-inside:avoid}.timeline-row{break-inside:avoid}}
.print-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.print-card{border:2px dashed #b8c5d7;border-radius:14px;min-height:195px;padding:15px;text-align:center;break-inside:avoid;display:flex;flex-direction:column;justify-content:center;align-items:center}.print-emoji{font-size:3.5rem;margin-bottom:8px}.print-card strong{font-size:1.08rem}.print-card p{font-size:.83rem;color:#596982;margin:6px 0 0}.print-card:has(.print-emoji){background:#fff}
@media(max-width:650px){.print-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.print-card{min-height:155px}}
@media print{.print-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.print-card{min-height:182px}.print-card p{font-size:10px}.panel{padding:5px}h1{font-size:24px}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* === Workshop Portfolio / Submission Archive === */
.archive-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 24px}
.archive-summary>div{background:#fff;border:1px solid #e4eaf5;border-radius:17px;padding:18px 20px;box-shadow:0 5px 22px #18325709;display:flex;flex-direction:column;gap:5px}
.archive-summary strong{font-size:1.27rem;color:#18335e;line-height:1.3}
.archive-summary span{font-size:.85rem;color:#6b7891}
.work-columns{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px, .75fr);gap:20px;align-items:start}
.work-form-panel h2,.work-list-panel h2{margin:10px 0 7px}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.work-form-panel .form-group{margin-top:14px}
.work-form-panel input[type=file]{display:block;background:#f8fbff;width:100%;padding:11px;border:1px dashed #c9d7ec;border-radius:12px}
.archive-send{border-radius:17px;margin-top:25px;padding:21px;background:#f3f8ff;border:1px solid #dce9fb}
.work-status{color:#28486c;font-size:.85rem;border-left:3px solid #5286d5;background:#fff;border-radius:8px;padding:12px 14px;margin-top:15px;line-height:1.55;overflow-wrap:anywhere}
.saved-work{padding:17px 0;border-bottom:1px solid #e7ecf5}
.saved-work-title{font-weight:800;color:#1f3659;margin-bottom:4px;overflow-wrap:anywhere}
.saved-work .actionbar{margin-top:11px;gap:6px;flex-wrap:wrap}
.small-act{border:1px solid #d6e0ef;background:#fff;color:#34577b;padding:7px 10px;border-radius:9px;font-size:.75rem;font-weight:750}
.small-act:hover{background:#eaf3ff}
.small-act.danger-text{color:#ac4056;border-color:#f2ced5}
.work-shell textarea{min-height:110px}
@media(max-width:900px){.work-columns{grid-template-columns:1fr}}
@media(max-width:650px){.archive-summary{grid-template-columns:1fr}.archive-summary>div{padding:13px 16px}.work-grid{grid-template-columns:1fr}.work-form-panel,.work-list-panel{padding:17px}.archive-send{padding:16px}.work-actions{flex-wrap:wrap}}
@media print{.work-shell .archive-send,.work-shell .work-list-panel{display:none}.work-columns{display:block}}