/* cogo-teacher-guide-design-r1 — scope: teacher/admin usage guide only. */
body[data-view="guide19"] #main .tg-design-r1{--tg-ink:#193830;--tg-muted:#65796f;--tg-line:#e0e9e4;--tg-paper:#fff;--tg-soft:#f4f8f5;--tg-green:#1b6655;--tg-mint:#dff2e8;max-width:1560px;color:var(--tg-ink);padding:0 0 8px;box-sizing:border-box}
#main .tg-design-r1 *{box-sizing:border-box}
#main .tg-design-r1 svg{width:24px;height:24px;flex:none;display:block}
#main .tg-design-r1 button{font:inherit;cursor:pointer}
#main .tg-design-r1 button:focus-visible{outline:3px solid #60b399;outline-offset:4px}
#main .tg-design-r1>.tg-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;isolation:isolate;overflow:hidden;margin:0 0 24px;padding:30px 38px;border:1px solid #d3e8dc;border-radius:25px;background:radial-gradient(ellipse at 72% 80%,#bee5d780,transparent 53%),linear-gradient(115deg,#f2f8ee,#e9f5ef 56%,#e2f2e9);color:var(--tg-ink);box-shadow:inset 0 1px 0 #ffffffd9}
#main .tg-design-r1>.tg-hero:after{content:none}
#main .tg-design-r1 .tg-hero-copy{position:relative;z-index:1;flex:1 1 auto;min-width:0}
#main .tg-design-r1 .tg-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:750;letter-spacing:.5px;color:#477966}
#main .tg-design-r1 .tg-eyebrow i{width:6px;height:6px;border-radius:50%;background:#359e79;box-shadow:0 0 0 4px #329b7810}
#main .tg-design-r1 .tg-hero h1{font-size:clamp(29px,2.6vw,42px);font-weight:850;letter-spacing:-1.7px;line-height:1.23;margin:12px 0 13px;color:#193e32;text-wrap:balance}
#main .tg-design-r1 .tg-hero h1 span{color:#287759}
#main .tg-design-r1 .tg-hero p{font-size:13px;line-height:1.8;color:#57756a;margin:0;word-break:keep-all}
#main .tg-design-r1 .tg-hero-art{width:350px;height:175px;position:relative;flex:0 0 350px;margin:0 14px 0 0;pointer-events:none}
#main .tg-design-r1 .tg-orbit{position:absolute;width:290px;height:290px;border:1px solid #83b8a333;left:35px;top:-62px;border-radius:50%;box-shadow:0 0 0 30px #ffffff24,0 0 0 31px #83b8a31a,0 0 0 62px #ffffff18}
#main .tg-design-r1 .tg-art-card{position:absolute;background:#ffffffed;border:1px solid #fff;box-shadow:0 14px 35px #254f3f14;border-radius:17px;color:#335c4d}
#main .tg-design-r1 .tg-art-back{width:171px;padding:15px 16px;left:163px;top:6px;transform:rotate(8deg);display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:center}
#main .tg-design-r1 .tg-art-back b{font-size:13px}
#main .tg-design-r1 .tg-art-back>span{color:#75a58d}
#main .tg-design-r1 .tg-art-checks{grid-column:1/-1;display:flex;gap:8px}
#main .tg-design-r1 .tg-art-checks i{font-style:normal;width:35px;height:30px;border-radius:7px;background:#e7f2e9;color:#73a38b;display:grid;place-items:center;font-size:14px}
#main .tg-design-r1 .tg-art-front{left:13px;top:39px;width:220px;padding:18px 19px;transform:rotate(-6deg);animation:tg-float-r1 6s ease-in-out infinite}
#main .tg-design-r1 .tg-art-icon{float:right;background:#d9eee2;border-radius:10px;width:36px;height:36px;display:grid;place-items:center;color:#438369;margin:0 0 10px 8px}
#main .tg-design-r1 .tg-art-icon svg{width:21px;height:21px}
#main .tg-design-r1 .tg-art-front b{display:block;font-size:12px;line-height:1.5;max-width:125px}
#main .tg-design-r1 .tg-art-lines{display:grid;gap:5px;margin-top:11px}
#main .tg-design-r1 .tg-art-lines i{display:block;height:4px;width:77px;background:#dce8e1;border-radius:3px}
#main .tg-design-r1 .tg-art-lines i+ i{width:53px;background:#eaf0eb}
#main .tg-design-r1 .tg-art-people{display:flex;align-items:center;margin-top:16px}
#main .tg-design-r1 .tg-art-people>i{width:26px;height:26px;border:2px solid white;border-radius:50%;background:radial-gradient(circle at 50% 35%,#578675 0 4px,transparent 4.5px),radial-gradient(ellipse at 50% 115%,#578675 0 12px,transparent 12.5px),#d9e9df}
#main .tg-design-r1 .tg-art-people>i+i{margin-left:-6px;background-color:#f1e6d8}
#main .tg-design-r1 .tg-art-people>i:nth-child(3){background-color:#dde7ee}
#main .tg-design-r1 .tg-art-people>span{margin-left:auto;background:#2b7a5d;color:white;border-radius:50%;padding:5px;box-shadow:0 3px 8px #2b7a5d25}
#main .tg-design-r1 .tg-art-people svg{width:13px;height:13px}
#main .tg-design-r1 .tg-art-spark{position:absolute;color:#4b9c7a;font-size:22px;font-weight:300}
#main .tg-design-r1 .tg-art-spark-one{left:-6px;top:13px}
#main .tg-design-r1 .tg-art-spark-two{right:2px;bottom:3px;color:#8cb49a;font-size:27px}
#main .tg-design-r1 .tg-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:24px;align-items:start}
#main .tg-design-r1 .tg-nav{padding:15px 11px;background:var(--tg-paper);border:1px solid var(--tg-line);border-radius:20px;display:flex;flex-direction:column;gap:5px;min-width:0;box-shadow:0 3px 16px #244a3603}
#main .tg-design-r1 .tg-nav-head{display:flex;align-items:center;justify-content:space-between;padding:7px 12px 15px;font-size:11px;letter-spacing:.2px;color:var(--tg-muted);font-weight:750}
#main .tg-design-r1 .tg-nav-head b{font-size:10px;border:1px solid var(--tg-line);border-radius:6px;padding:2px 6px;font-weight:600}
#main .tg-design-r1 .tg-nav button{border:1px solid transparent;border-radius:12px;padding:12px 11px;display:flex;gap:12px;align-items:center;min-height:62px;text-align:left;background:transparent;color:var(--tg-ink);transition:background .16s,color .16s,transform .16s;position:relative}
#main .tg-design-r1 .tg-nav button:hover{background:var(--tg-soft);transform:translateX(2px)}
#main .tg-design-r1 .tg-nav-icon{display:grid;place-items:center;width:31px;height:34px;color:#8a9e92;flex:0 0 31px}
#main .tg-design-r1 .tg-nav-icon svg{width:21px;height:21px}
#main .tg-design-r1 .tg-nav-copy{min-width:0;flex:1}
#main .tg-design-r1 .tg-nav-copy b{display:block;font-size:13px;line-height:1.4;font-weight:750;word-break:keep-all}
#main .tg-design-r1 .tg-nav-copy small{display:block;font-size:10px;margin-top:3px;line-height:1.5;color:var(--tg-muted);word-break:keep-all}
#main .tg-design-r1 .tg-nav-arrow{font-size:20px;opacity:0;margin-left:auto}
#main .tg-design-r1 .tg-nav button[aria-current="page"]{background:#214f40;color:white;box-shadow:0 5px 13px #214f4021}
#main .tg-design-r1 .tg-nav button[aria-current="page"] .tg-nav-icon{color:#b5e4ce}
#main .tg-design-r1 .tg-nav button[aria-current="page"] small{color:#b3d4c5}
#main .tg-design-r1 .tg-nav button[aria-current="page"] .tg-nav-arrow{opacity:1;color:#b6dfcc}
#main .tg-design-r1 .tg-content{min-width:0}
#main .tg-design-r1 .tg-article{padding:29px 32px 0;background:var(--tg-paper);border:1px solid var(--tg-line);border-radius:22px;box-shadow:0 9px 30px #244a3606;overflow:hidden;animation:tg-enter-r1 .25s ease-out both}
#main .tg-design-r1 .tg-article-head{display:flex;gap:18px;align-items:center;padding:0 0 25px;border-bottom:1px solid var(--tg-line);margin-bottom:24px}
#main .tg-design-r1 .tg-topic-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(140deg,#edf6ef,#deefe5);border:1px solid #d8e8dc;color:#3f8166;flex:0 0 64px;box-shadow:inset 0 2px 0 #ffffffb0}
#main .tg-design-r1 .tg-topic-icon svg{width:29px;height:29px}
#main .tg-design-r1 .tg-topic-copy{flex:1;min-width:0}
#main .tg-design-r1 .tg-kicker{font-size:10px;color:var(--tg-muted);font-weight:650;margin-bottom:5px}
#main .tg-design-r1 .tg-kicker span{margin:0 6px;color:#b4c5ba}
#main .tg-design-r1 .tg-article h2{margin:0 0 5px;color:var(--tg-ink);font-size:29px;line-height:1.3;letter-spacing:-1px;font-weight:850}
#main .tg-design-r1 .tg-topic-copy>p{margin:0;color:var(--tg-muted);font-size:12px;line-height:1.7;word-break:keep-all}
#main .tg-design-r1 .tg-topic-position{display:flex;align-items:baseline;gap:5px;flex:none;align-self:flex-start;padding-top:5px;color:var(--tg-muted);font-size:11px}
#main .tg-design-r1 .tg-topic-position b{font-size:22px;letter-spacing:-1px;font-weight:700;color:#4d8069}
#main .tg-design-r1 .tg-steps-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px}
#main .tg-design-r1 .tg-steps-label h3{margin:0;font-size:12px;font-weight:750;color:var(--tg-ink)}
#main .tg-design-r1 .tg-steps-label>span{font-size:10px;color:var(--tg-muted)}
#main .tg-design-r1 .tg-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:0 0 26px;padding:0;list-style:none}
#main .tg-design-r1 .tg-steps li{margin:0;padding:20px 21px 21px;min-width:0;border:1px solid var(--tg-line);border-radius:14px;background:linear-gradient(135deg,var(--tg-paper),var(--tg-soft));transition:border-color .18s,box-shadow .18s,transform .18s}
#main .tg-design-r1 .tg-steps li:hover{border-color:#a6cdb6;box-shadow:0 7px 18px #214f4007;transform:translateY(-2px)}
#main .tg-design-r1 .tg-step-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
#main .tg-design-r1 .tg-step-number{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid #d2e5d8;background:#e9f3eb;color:#487c5d;font-size:10px;font-weight:800;flex:none}
#main .tg-design-r1 .tg-step-rule{height:1px;flex:1;background:linear-gradient(90deg,#d6e7dc,transparent)}
#main .tg-design-r1 .tg-steps h4{margin:0 0 8px;font-size:15px;font-weight:800;line-height:1.5;letter-spacing:-.3px;color:var(--tg-ink);word-break:keep-all}
#main .tg-design-r1 .tg-steps p{margin:0;color:var(--tg-muted);font-size:12px;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
#main .tg-design-r1 .tg-action-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 -32px;padding:20px 32px;border-top:1px solid var(--tg-line);background:var(--tg-soft)}
#main .tg-design-r1 .tg-action-bar>div{display:flex;gap:12px;align-items:center;min-width:0}
#main .tg-design-r1 .tg-action-symbol{width:31px;height:31px;display:grid;place-items:center;border:1px solid #c9dfd0;border-radius:50%;color:#6d997b;flex:none}
#main .tg-design-r1 .tg-action-symbol svg{width:15px;height:15px}
#main .tg-design-r1 .tg-action-bar p{margin:0;font-size:10px;color:var(--tg-muted);line-height:1.8}
#main .tg-design-r1 .tg-action-bar strong{font-size:11px;font-weight:700;color:var(--tg-ink)}
#main .tg-design-r1 .tg-open{border:1px solid #1c5e49;border-radius:12px;background:linear-gradient(125deg,#2a7459,#1c5947);color:#fff;padding:9px 10px 9px 18px;display:inline-flex;align-items:center;gap:18px;flex:none;min-height:46px;font-size:12px;font-weight:750;box-shadow:0 5px 11px #214f401a;transition:transform .18s,box-shadow .18s}
#main .tg-design-r1 .tg-open>span{display:grid;place-items:center;width:28px;height:28px;background:#ffffff17;border-radius:7px}
#main .tg-design-r1 .tg-open svg{width:16px;height:16px}
#main .tg-design-r1 .tg-open:hover{transform:translateY(-2px);box-shadow:0 8px 18px #214f4024}
@keyframes tg-enter-r1{from{transform:translateY(5px);opacity:.75}to{transform:translateY(0);opacity:1}}
@keyframes tg-float-r1{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(-5deg)}}
@media(max-width:1190px){#main .tg-design-r1 .tg-layout{grid-template-columns:210px minmax(0,1fr);gap:18px}#main .tg-design-r1 .tg-article{padding:24px 24px 0}#main .tg-design-r1 .tg-action-bar{margin:0 -24px;padding:18px 24px}#main .tg-design-r1 .tg-hero-art{flex-basis:280px;width:280px;margin-right:0;transform:scale(.88);transform-origin:right center}#main .tg-design-r1 .tg-hero{padding:27px 30px}#main .tg-design-r1 .tg-topic-icon{width:52px;height:52px;flex-basis:52px;border-radius:16px}#main .tg-design-r1 .tg-steps li{padding:17px}#main .tg-design-r1 .tg-action-symbol{display:none}}
@media(max-width:980px){#main .tg-design-r1 .tg-hero-art{display:none}#main .tg-design-r1 .tg-hero h1{font-size:32px}#main .tg-design-r1 .tg-steps{grid-template-columns:1fr}#main .tg-design-r1 .tg-steps li{display:grid;grid-template-columns:29px 1fr;column-gap:12px;padding:17px}#main .tg-design-r1 .tg-step-top{grid-row:1/3;margin:0;align-self:start}#main .tg-design-r1 .tg-step-rule{display:none}#main .tg-design-r1 .tg-steps h4{font-size:14px;margin-bottom:6px}#main .tg-design-r1 .tg-action-bar{align-items:stretch;flex-direction:column}#main .tg-design-r1 .tg-open{justify-content:space-between}#main .tg-design-r1 .tg-topic-position{display:none}}
@media(max-width:760px){#main .tg-design-r1 .tg-hero{padding:24px;border-radius:20px;margin-bottom:16px}#main .tg-design-r1 .tg-hero h1{font-size:29px;letter-spacing:-1.1px}#main .tg-design-r1 .tg-hero h1 span{display:block}#main .tg-design-r1 .tg-hero p{font-size:12px}#main .tg-design-r1 .tg-layout{grid-template-columns:1fr;gap:16px}#main .tg-design-r1 .tg-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:10px;border-radius:17px}#main .tg-design-r1 .tg-nav-head{grid-column:1/-1;padding:5px 8px 9px}#main .tg-design-r1 .tg-nav button{gap:7px;min-height:47px;padding:9px 8px}#main .tg-design-r1 .tg-nav-copy b{font-size:11px}#main .tg-design-r1 .tg-nav-copy small{display:none}#main .tg-design-r1 .tg-nav-icon{width:23px;flex-basis:23px;height:23px}#main .tg-design-r1 .tg-nav-icon svg{width:18px;height:18px}#main .tg-design-r1 .tg-nav-arrow{display:none}#main .tg-design-r1 .tg-article{padding:22px 20px 0;border-radius:18px}#main .tg-design-r1 .tg-article-head{gap:12px;padding-bottom:20px;margin-bottom:20px}#main .tg-design-r1 .tg-article h2{font-size:24px;letter-spacing:-.7px}#main .tg-design-r1 .tg-topic-icon{width:44px;height:44px;flex-basis:44px;border-radius:14px}#main .tg-design-r1 .tg-topic-icon svg{width:23px;height:23px}#main .tg-design-r1 .tg-topic-copy>p{font-size:11px}#main .tg-design-r1 .tg-steps{gap:10px;margin-bottom:20px}#main .tg-design-r1 .tg-steps li{padding:16px 13px;column-gap:10px}#main .tg-design-r1 .tg-action-bar{padding:17px 20px;margin:0 -20px}#main .tg-design-r1 .tg-action-bar p br{display:none}#main .tg-design-r1 .tg-action-bar strong{display:block}#main .tg-design-r1 .tg-open{font-size:12px;min-height:46px}}
[data-theme="dark"] #main .teacher-guide298.tg-design-r1{--tg-ink:#dfede4;--tg-muted:#a2b8aa;--tg-line:#344c3f;--tg-paper:#1d3027;--tg-soft:#23382b;--tg-green:#86bc9c;--tg-mint:#344f3e}
[data-theme="dark"] #main .tg-design-r1>.tg-hero{background:radial-gradient(ellipse at 75% 70%,#4a7f603b,transparent 60%),#213a2c;border-color:#3e5d47}
[data-theme="dark"] #main .tg-design-r1 .tg-hero h1{color:#e5f3e7}
[data-theme="dark"] #main .tg-design-r1 .tg-hero h1 span{color:#a4d8b5}
[data-theme="dark"] #main .tg-design-r1 .tg-hero p,[data-theme="dark"] #main .tg-design-r1 .tg-eyebrow{color:#b1cdbb}
[data-theme="dark"] #main .tg-design-r1 .tg-topic-icon{background:#304c39;border-color:#3d6149;color:#afd5b9}
[data-theme="dark"] #main .tg-design-r1 .tg-step-number{background:#304b38;border-color:#496c53;color:#b5d8bb}
[data-theme="dark"] #main .tg-design-r1 .tg-topic-position b{color:#a5d0b0}
[data-theme="dark"] #main .tg-design-r1 .tg-step-rule{background:linear-gradient(90deg,#3c5d45,transparent)}
[data-theme="dark"] #main .tg-design-r1 .tg-action-symbol{border-color:#527358;color:#aed4b2}
@media(prefers-reduced-motion:reduce){#main .tg-design-r1 *,#main .tg-design-r1 *:before,#main .tg-design-r1 *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}