:root{--navy:#18294c;--ink:#211450;--indigo:#533bd3;--blue:#2d61ed;--teal:#0d9c99;--mint:#ddf9f0;--paper:#fff;--line:#d9e2f5;--muted:#5c6884;--warm:#fff2d8;--shadow:0 18px 50px rgba(23,42,85,.095)}*{box-sizing:border-box}body{margin:0;background:#f5f7ff;color:var(--navy);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #2c8fff;outline-offset:3px}.preview-ribbon{background:#0c4b52;color:#fff;text-align:center;padding:9px 20px;font-size:12px;font-weight:750;letter-spacing:.025em}.status-dot{display:inline-block;height:8px;width:8px;border-radius:99px;background:#51edac;margin-right:8px}.top{height:69px;display:flex;align-items:center;gap:18px;background:#fff;padding:0 max(24px,calc((100vw - 1180px)/2));box-shadow:0 2px 16px rgba(28,34,81,.06)}.logo img{height:32px;max-width:74px}.top-name{font-weight:800;color:var(--ink)}.top-link{margin-left:auto;text-decoration:none;font-weight:750;color:var(--indigo);font-size:13px}.main{max-width:1180px;margin:auto;padding:24px 20px 40px}.hero{border-radius:23px;overflow:hidden;background:linear-gradient(116deg,#1c315b 0%,#293e72 55%,#3b3a95 100%);color:white;padding:35px 40px;display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:center;box-shadow:var(--shadow)}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;margin:0 0 11px;color:#bed3ff}.eyebrow.dark{color:#5542b2}.star{color:#ffbd59;margin:0 4px}.hero h1{font-size:clamp(34px,4.2vw,55px);letter-spacing:-.05em;line-height:1.035;margin:0 0 14px;font-weight:880}.hero h1 em{font-style:normal;color:#90f0dc}.hero-sub{font-size:15px;color:#dae6ff;line-height:1.5;margin:0;max-width:520px}.hero-visual{display:flex;gap:8px;justify-content:end}.visual-step{width:33.333%;padding:17px 13px;border:1px solid rgba(255,255,255,.25);border-radius:15px;background:rgba(255,255,255,.11);min-height:116px}.visual-step:nth-child(2){background:rgba(129,240,210,.16)}.visual-step span{font-size:11px;color:#a1f0e5;display:block;font-weight:900}.visual-step strong{display:block;font-size:21px;margin:6px 0 2px}.visual-step small{font-size:11px;color:#d9e9fc}.appgrid{display:grid;grid-template-columns:minmax(0,1.64fr) minmax(310px,1fr);gap:19px;margin-top:20px;align-items:start}.card{background:#fff;border:1px solid #e1e7f7;border-radius:22px;box-shadow:var(--shadow);padding:26px}.panel-head{display:flex;gap:13px;align-items:center;margin-bottom:23px}.marker{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:#eae8ff;color:#5033c9;font-weight:700}.marker.teal{background:#dbfaf3;color:#09867e}.panel-head h2{margin:0;color:var(--ink);font-size:25px;letter-spacing:-.045em}.two-fields{display:grid;grid-template-columns:.7fr 1fr;gap:14px}.field{min-width:0}.field label{display:block;color:#283250;font-weight:780;font-size:13px;margin-bottom:8px}.field select,.field textarea{width:100%;border-radius:13px;border:1px solid #cfd9ef;background:#fbfcff;color:#263257;min-height:47px;padding:12px 13px;outline-color:#7464db}.field textarea{resize:vertical;min-height:86px;line-height:1.55}.context{margin:18px 0;border:1px solid #dde4f2;border-radius:14px;padding:0 15px;background:#f7f9ff}.context summary{cursor:pointer;padding:14px 0;display:flex;justify-content:space-between;font-size:13px;color:#3a306c}.context summary::marker{content:""}.context .muted{font-weight:500;color:#77829b}.context-body{padding:6px 0 15px}.context-body textarea{min-height:86px}.micro{font-size:12px;line-height:1.5;color:var(--muted);margin:6px 0 0}.big-field{margin:22px 0 10px}.big-field textarea{background:#fff;min-height:205px;font-size:15px}.draft-foot{display:flex;justify-content:space-between;color:#65738d;font-size:12px;font-weight:730;margin-top:8px}.sample-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;color:#67708a;margin:15px 0 17px}.text-action{background:none;border:0;border-bottom:1px dashed #5544be;color:#3d30ad;padding:0 0 1px;font-size:12px;font-weight:800}.privacy{display:flex;gap:12px;padding:14px 15px;border-left:4px solid #14aa8e;border-radius:10px;background:#eefcf7}.privacy strong{font-size:12px;color:#126251}.privacy p{font-size:12px;color:#507265;margin:3px 0 0;line-height:1.45}.buttons{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:19px}.primary{border:0;border-radius:12px;padding:14px 19px;background:linear-gradient(120deg,#6b35df,#3654df);color:white;font-size:13px;font-weight:800;box-shadow:0 8px 18px rgba(75,56,207,.22)}.secondary{border:1px solid #bfc8ec;border-radius:12px;padding:13px 15px;color:#33209f;background:white;font-size:13px;font-weight:800}.quiet{border:0;background:transparent;color:#65718b;padding:12px;font-size:13px;font-weight:800}.saved-actions{margin-top:9px;min-height:21px;font-size:12px;color:#397660}.small-link{border:0;background:transparent;text-decoration:underline;color:#4d39aa;font-size:12px;margin-left:8px}.sidecol{display:grid;gap:17px}.principles{padding:25px 23px;background:linear-gradient(180deg,#f4f2ff,#fff 44%)}.principles h2{font-size:22px}.principle{display:flex;gap:11px;margin-bottom:21px}.principle:last-child{margin-bottom:4px}.principle-icon{width:35px;height:35px;min-width:35px;display:grid;place-items:center;border-radius:11px;font-size:18px;font-weight:900}.principle-icon.blue{background:#e7f0ff;color:#315cce}.principle-icon.green{background:#dbf9ec;color:#0c8670}.principle-icon.orange{background:#fff1d8;color:#ad6a02}.principle strong{font-size:14px;color:var(--ink)}.principle p{font-size:12px;line-height:1.5;color:var(--muted);margin:4px 0 0}.tip{padding:23px;border-radius:20px;background:linear-gradient(145deg,#dbf7ed,#e1f1ff);color:#194c5e;border:1px solid #bde8ea}.tip span{font-size:10px;font-weight:900;letter-spacing:.1em;color:#137977}.tip h3{font-size:20px;letter-spacing:-.035em;line-height:1.2;margin:9px 0}.tip p{font-size:13px;line-height:1.6;margin:0}.feedback{margin-top:22px;scroll-margin-top:10px}.feedback-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.feedback-top h2{font-size:28px;color:var(--ink);margin:0}.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.feedback-block{border:1px solid #dce5f5;border-radius:16px;padding:20px;min-width:0}.feedback-block h3{color:var(--ink);font-size:18px;margin:0 0 12px}.feedback-block.strength{background:#f0faf5;border-color:#bee8d3}.feedback-block.correction{background:#fff8f1;border-color:#f4d9ba}.feedback-block.step{background:#f1f5ff;border-color:#cddcfd}.feedback-block.cheer{background:#f9f1ff;border-color:#e6d6ff}.feedback-block p,.feedback-block li{font-size:14px;color:#2c3d5e;line-height:1.55}.feedback-block ul{margin:0;padding-left:20px}.feedback-block li{margin-bottom:7px}.feedback-block li:last-child{margin-bottom:0}.feedback-block .source{display:block;color:#346d5c;font-size:12px;margin-top:3px}.revise-area{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #dce3f3;padding-top:20px;margin-top:19px}.revise-area strong{font-size:15px;color:var(--ink)}.revise-area p{font-size:12px;color:#606e86;margin:4px 0 0}.footer{font-size:12px;color:#68728b;padding:22px 2px 0;display:flex;justify-content:space-between;gap:8px}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:30px 28px}.hero-visual{justify-content:stretch}.appgrid{grid-template-columns:1fr}.sidecol{grid-template-columns:1fr 1fr}.principle{margin-bottom:12px}.top{padding:0 23px}}
@media(max-width:620px){.top{height:56px;padding:0 16px}.top-name{font-size:13px}.top-link{font-size:12px}.main{padding:13px 12px 30px}.hero{padding:23px 21px;border-radius:17px;gap:18px}.hero h1{font-size:36px}.hero-sub{font-size:13px}.hero-visual{gap:5px}.visual-step{padding:10px 8px;min-height:86px}.visual-step strong{font-size:15px}.visual-step small{font-size:10px}.card{padding:19px;border-radius:18px}.appgrid{margin-top:13px;gap:13px}.panel-head{margin-bottom:17px}.two-fields{grid-template-columns:1fr;gap:12px}.big-field{margin-top:14px}.big-field textarea{min-height:180px}.sidecol{grid-template-columns:1fr}.feedback-top{align-items:start}.feedback-top .secondary{padding:10px;font-size:12px}.feedback-grid{grid-template-columns:1fr}.revise-area{align-items:start;flex-direction:column}.footer{flex-direction:column}.buttons .primary{flex-grow:1}}
@media(max-width:360px){.hero h1{font-size:31px}.hero-visual{flex-wrap:wrap}.visual-step{min-width:calc(33% - 4px)}.buttons{gap:5px}.buttons button{font-size:12px}}

@media(max-width:620px){.hero{padding:18px 19px;gap:12px}.hero h1{font-size:33px;margin-bottom:8px}.hero-visual{gap:6px}.visual-step{min-height:56px;padding:7px 9px}.visual-step span,.visual-step small{display:none}.visual-step strong{font-size:13px;margin:2px 0}.hero-sub{font-size:12px}.main{padding-top:10px}}


/* HQ Writing Feedback 3.1: meaningful workspace contrast, not decorative pills. */
:root{--v31-indigo:#4931c4;--v31-deep:#1d2c5d;--v31-azure:#176fb2;--v31-teal:#077d79;--v31-ink:#17294d}
body{background:radial-gradient(ellipse 75% 28% at 50% 430px,rgba(193,214,255,.55),transparent 95%),linear-gradient(180deg,#e8effb 0%,#eff3fc 56%,#f8faff 100%)}
/* The 3-step display is a labeled sequence, not 3 faux buttons. */
.hero-visual{align-self:stretch;align-items:center;gap:0;border-left:1px solid rgba(229,243,255,.22);padding-left:22px;position:relative}
.visual-step,.visual-step:nth-child(2){border:0;border-radius:0;box-shadow:none;background:transparent;min-height:0;padding:12px 8px 10px 16px;position:relative;border-top:2px solid rgba(159,197,249,.6)}
.visual-step:nth-child(2){border-top-color:#80e6cc}.visual-step:nth-child(3){border-top-color:#ffcb75}
.visual-step span{font-size:11px;letter-spacing:.07em;color:#a9cffd}
.visual-step:nth-child(2) span{color:#8ef0d5}.visual-step:nth-child(3) span{color:#ffd589}
.visual-step strong{font-size:21px}.visual-step small{font-size:11px}
/* Workspace is materially different from the background and the guidance. */
.compose.card{border:1px solid #b9c9f6;border-top:6px solid #5b42d3;box-shadow:0 18px 38px rgba(26,46,101,.14);background:linear-gradient(175deg,#e7eaff 0%,#f6f8ff 27%,#f9fbff 100%);padding:25px}
.compose>.panel-head{margin-bottom:18px}
.compose .panel-head h2{font-size:27px}
.zone-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:850;letter-spacing:-.015em;color:#243b78;margin-bottom:15px}
.zone-number{font-size:11px;letter-spacing:.07em;color:#4d3cc0;border-left:3px solid #6555de;padding-left:7px}
.setup-zone{background:linear-gradient(145deg,#ecedff,#eef5ff);border:1px solid #ccd6f5;border-radius:16px;padding:18px 19px 12px;margin-bottom:17px}
.setup-zone .field select,.setup-zone .field textarea{background:#fff;border-color:#aabce1}
.setup-zone .context{background:rgba(255,255,255,.8);border:1px solid #b6c4eb;box-shadow:none;margin-bottom:3px}
.context summary{font-weight:750;color:#383282}
.context summary:focus-visible{outline-offset:4px}
.draft-zone{background:#fff;border:1px solid #a9c8e7;border-left:5px solid #17a1a1;border-radius:17px;padding:20px 20px 15px;box-shadow:0 8px 20px rgba(24,65,120,.07)}
.draft-zone .zone-title{color:#0c716f}
.draft-zone .zone-number{border-left-color:#10a5a1;color:#087b7b}
.draft-zone .big-field{margin:0 0 10px}
.draft-zone .big-field textarea{background:#fffefa;border:1.5px solid #91b5cf;box-shadow:inset 0 1px 7px rgba(30,56,100,.055);line-height:1.7;min-height:235px}
.draft-zone .big-field textarea:focus{background:#fff;box-shadow:0 0 0 3px rgba(20,157,165,.12)}
.draft-zone .draft-foot{color:#3c5876}
.sample-actions{border-top:1px solid #dde7f6;padding-top:13px;margin-top:16px}
.sample-actions>span{font-weight:700;color:#526583}
.text-action{color:#4435b4;border-bottom:1px solid #8079d2;text-decoration:none}
.text-action:hover{color:#28238b;border-bottom:2px solid #3e2db6}
.privacy{background:#e9f7f2;border:1px solid #c1e6d7;border-left:4px solid #139584}
.privacy strong{font-size:12.5px}
.buttons{margin-top:17px}
.primary{background:linear-gradient(115deg,#5630cb,#2755df);box-shadow:0 9px 18px rgba(55,57,180,.22)}
.primary:hover{filter:brightness(1.07)}
.secondary:hover{background:#f2f0ff;border-color:#7867ce}
/* Instructions are emphatically content, not cards that could be pressed. */
.principles.card{color:#fff;background:linear-gradient(155deg,#203468,#2d326d 55%,#283981);border:1px solid #455b92;border-top:5px solid #8be9d6;box-shadow:0 13px 32px rgba(25,36,87,.17)}
.principles .panel-head h2{color:#fff}.principles .eyebrow.dark{color:#a7e8e5}
.principles .marker.teal{background:#baf5e8;color:#125e5d}
.principle{border-bottom:1px solid rgba(210,224,252,.17);padding-bottom:16px;margin-bottom:16px}
.principle:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.principle strong{color:#fff;font-size:14px}.principle p{color:#d3ddf6;font-size:12.5px}
.principle-icon.blue{background:rgba(160,188,255,.25);color:#f2f6ff}
.principle-icon.green{background:rgba(102,236,205,.24);color:#b3ffea}
.principle-icon.orange{background:rgba(255,191,102,.22);color:#ffdfa5}
.tip{background:linear-gradient(145deg,#dbf4ed,#d9edfc);border:1px solid #91d5ca;border-left:5px solid #0f9a8b}
.tip h3{color:#174d64}
.feedback.card{border:1px solid #b9c8f2;border-top:6px solid #5540cc;background:linear-gradient(180deg,#e9edff 0%,#f7f9ff 24%,#fff 100%);box-shadow:0 18px 42px rgba(28,43,98,.13)}
.feedback-top{padding:2px 2px 16px;border-bottom:1px solid #bac7eb;margin-bottom:21px}
.feedback-block{border-width:1px 1px 1px 5px;box-shadow:0 4px 12px rgba(24,40,78,.045)}
.feedback-block.strength{background:#e5f6ec;border-color:#b2dac5;border-left-color:#0d996a}
.feedback-block.correction{background:#fff1e4;border-color:#edd4ba;border-left-color:#d68527}
.feedback-block.step{background:#eaf1ff;border-color:#bad0f6;border-left-color:#3768c7}
.feedback-block.cheer{background:#f3eafe;border-color:#d8c2ee;border-left-color:#814bcc}
.feedback-block h3{font-size:18.5px}
@media(max-width:900px){.hero-visual{border-left:0;border-top:1px solid rgba(229,243,255,.22);padding-left:0;padding-top:15px}.compose.card{padding:20px}}
@media(max-width:620px){.hero-visual{padding-top:10px}.visual-step{padding:5px 7px 3px 8px}.visual-step strong{font-size:13px}.compose.card{padding:15px;border-top-width:5px}.setup-zone{padding:13px 12px 11px;margin-bottom:13px}.draft-zone{padding:15px 13px 12px}.zone-title{margin-bottom:11px}.draft-zone .big-field textarea{min-height:195px}.feedback.card{padding:18px}.feedback-top{flex-direction:column;align-items:stretch}.feedback-top .secondary{align-self:flex-start}}
@media(max-width:360px){.hero-visual{gap:0}.visual-step{padding:7px 4px}.setup-zone{padding:11px 10px}.draft-zone{padding:12px 10px}}


/* HQ Writing Feedback 3.2 — intentionally compact workspace, consistent with HQ site.
   Overrides the approved 3.1 color/clarity layer, keeps all functional targets accessible. */
:root{--shadow:0 9px 25px rgba(23,42,85,.08)}
.preview-ribbon{padding:6px 14px;font-size:11px}
.top{height:55px;padding:0 max(18px,calc((100vw - 1240px)/2))}
.logo img{height:29px}
.main{max-width:1260px;padding:13px 18px 26px}
.hero{grid-template-columns:minmax(0,1.35fr) minmax(335px,.8fr);padding:19px 27px;gap:24px;border-radius:16px;box-shadow:0 7px 22px rgba(23,42,85,.1)}
.hero .eyebrow{margin-bottom:5px}
.hero h1{font-size:clamp(29px,2.6vw,38px);line-height:1.1;letter-spacing:-.04em;margin:0 0 7px}
.hero h1 br{display:none}
.hero h1 em{margin-left:.2em}
.hero-sub{font-size:13px;line-height:1.42;max-width:630px}
.hero-visual{padding-left:15px}
.visual-step{padding:7px 6px 5px 9px;min-width:0}
.visual-step span{font-size:10px}
.visual-step strong{font-size:15px;margin:4px 0 0}
.visual-step small{font-size:10px}
.appgrid{grid-template-columns:minmax(0,1.85fr) minmax(275px,.85fr);gap:13px;margin-top:12px}
.card{border-radius:15px}
.compose.card{padding:16px 18px 17px;border-top-width:4px}
.compose>.panel-head{gap:10px;margin-bottom:11px}
.marker{height:35px;width:35px;min-width:35px;font-size:18px;border-radius:9px}
.panel-head h2,.compose .panel-head h2{font-size:22px}
.eyebrow.dark{margin-bottom:4px}
.zone-title{font-size:12px;margin-bottom:9px;gap:8px}
.setup-zone{padding:11px 13px 10px;margin-bottom:12px;border-radius:11px}
.two-fields{gap:11px}
.field label{font-size:12px;margin-bottom:5px}
.field select{min-height:41px;padding:8px 10px;border-radius:10px;font-size:13px}
.context{margin:10px 0 0;padding:0 12px;border-radius:10px}
.context summary{padding:9px 0;font-size:12px}
.context-body{padding:4px 0 10px}
.draft-zone{padding:12px 13px 12px;border-radius:12px;border-left-width:4px}
.draft-zone .big-field{margin:0 0 7px}
.draft-zone .big-field textarea{min-height:168px;height:168px;padding:11px 12px;line-height:1.5;font-size:14px;border-radius:10px}
.draft-foot{margin-top:5px;font-size:11px}
.sample-actions{margin:9px 0 10px;padding-top:9px;gap:9px}
.privacy{padding:9px 11px;border-radius:8px;gap:9px}
.privacy p{margin-top:1px;font-size:11px}
.privacy strong{font-size:11.5px}
.buttons{margin-top:11px;gap:7px}
.buttons .primary,.buttons .secondary,.buttons .quiet{font-size:12px;border-radius:9px;padding:11px 14px;min-height:42px}
.saved-actions{min-height:15px;margin-top:5px}
.sidecol{gap:12px}
.principles{padding:17px}
.principles .panel-head{margin-bottom:14px;gap:9px}
.principles h2{font-size:18px}
.principle{gap:8px;padding-bottom:11px;margin-bottom:11px}
.principle-icon{width:30px;height:30px;min-width:30px;border-radius:8px;font-size:15px}
.principle strong{font-size:12.5px}
.principle p{font-size:11.5px;line-height:1.38;margin-top:3px}
.tip{padding:14px 16px;border-radius:13px}
.tip h3{font-size:16px;margin:5px 0}
.tip p{font-size:11.5px;line-height:1.48}
.feedback.card{padding:20px;border-top-width:4px}
.feedback-top h2{font-size:23px}
.feedback-top{padding-bottom:11px;margin-bottom:13px}
.feedback-grid{gap:10px}
.feedback-block{padding:14px;border-radius:11px}
.feedback-block h3{font-size:16px;margin-bottom:8px}
.feedback-block p,.feedback-block li{font-size:13px}
.revise-area{margin-top:14px;padding-top:14px}
.footer{padding-top:11px}
@media(max-width:900px){
 .hero{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 21px}
 .hero-visual{border-left:0;border-top:1px solid rgba(229,243,255,.22);padding:8px 0 0}
 .appgrid{grid-template-columns:1fr}
 .sidecol{grid-template-columns:1fr 1fr}
 .compose.card{padding:16px}
}
@media(max-width:620px){
 .preview-ribbon{font-size:10px;padding:5px 8px}
 .top{height:48px;padding:0 13px}
 .top-name{font-size:12px}
 .main{padding:9px 10px 20px}
 .hero{padding:13px 15px 11px;gap:8px;border-radius:12px}
 .hero h1{font-size:clamp(23px,6vw,29px);line-height:1.1;margin-bottom:5px}
 .hero .eyebrow{font-size:9px;margin-bottom:5px}
 .hero-sub{font-size:12px;line-height:1.35}
 .hero-visual{padding-top:6px}
 .visual-step{padding:3px 4px 0 5px;border-top-width:1px}
 .visual-step strong{font-size:11px;margin:1px 0}
 .visual-step span,.visual-step small{display:none}
 .appgrid{margin-top:9px;gap:10px}
 .compose.card{padding:12px 11px;border-radius:12px}
 .compose>.panel-head{margin-bottom:10px}
 .panel-head h2,.compose .panel-head h2{font-size:19px}
 .setup-zone{padding:9px;margin-bottom:10px}
 .zone-title{margin-bottom:7px}
 .two-fields{grid-template-columns:1fr;gap:8px}
 .field select{min-height:42px}
 .context{margin-top:9px}
 .draft-zone{padding:10px}
 .draft-zone .big-field textarea{min-height:158px;height:158px}
 .draft-foot{font-size:10px}
 .sample-actions{margin:8px 0;padding-top:8px}
 .privacy{padding:9px}
 .buttons{gap:6px}
 .buttons .primary{flex-grow:1}
 .sidecol{grid-template-columns:1fr}
 .principles{padding:14px}
 .feedback.card{padding:13px}
 .feedback-top{gap:8px}
 .feedback-grid{grid-template-columns:1fr}
 .footer{flex-direction:column}
}
@media(max-width:360px){.hero h1{font-size:22px}.visual-step{min-width:0}.buttons button{font-size:11px}}
/* Compact desktop setup in one row; description is deliberately secondary. */
@media(min-width:960px){
 .hero{padding:13px 22px;gap:14px}
 .hero h1{font-size:clamp(29px,2.4vw,35px)}
 .hero .eyebrow{margin-bottom:2px}
 .hero-sub{font-size:12px;line-height:1.32}
 .compose>.panel-head{margin-bottom:8px}
 .setup-zone{display:grid;grid-template-columns:118px minmax(0,1fr) 167px;gap:10px;align-items:end;padding:10px 11px;margin-bottom:9px}
 .setup-zone .zone-title{align-self:center;margin:0}
 .setup-zone .two-fields{gap:8px}
 .setup-zone .context{margin:0;min-width:0;align-self:end}
 .setup-zone .context summary{min-height:41px;align-items:center;gap:4px}
 .setup-zone .context .muted{display:none}
 .setup-zone .context-body{position:relative}
 .draft-zone{padding:10px 12px}
 .draft-zone .big-field textarea{height:154px;min-height:154px}
 .privacy{padding:7px 9px}
 .sample-actions{margin:7px 0;padding-top:7px}
 .buttons{margin-top:8px}
}
@media(min-width:960px) and (max-width:1099px){
 .setup-zone{grid-template-columns:1fr 160px}
 .setup-zone .zone-title{grid-column:1/-1}
 .setup-zone .two-fields{grid-column:1}
 .setup-zone .context{grid-column:2}
}
/* When students request feedback on phones, show the result directly after the draft.
   Explanatory material follows the task instead of separating writing and feedback. */
@media(max-width:620px){
 .main{display:flex;flex-direction:column}
 .appgrid{display:contents}
 .hero{order:1;margin-bottom:9px}
 .compose{order:2}
 .feedback{order:3;margin-top:10px}
 .sidecol{order:4;margin-top:10px}
 .footer{order:5}
}