:root{--hand:'Caveat',ui-rounded,cursive;--ink-hand:var(--teal-800);--rule:34px}
.hero3{position:relative;background:var(--surface-page);overflow:hidden;border-bottom:1px solid var(--border-default)}
.hero3::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(var(--rule) - 1px),var(--teal-100) calc(var(--rule) - 1px),var(--teal-100) var(--rule));opacity:0;animation:rulesFade 1.1s var(--ease-out) .1s forwards;pointer-events:none}
@keyframes rulesFade{to{opacity:.5}}
.hero3-inner{position:relative;display:grid;grid-template-columns:0.92fr 1.08fr;gap:var(--space-12);align-items:center;padding:var(--space-16) var(--space-6) var(--space-16)}
.hero3-copy{position:relative;padding-left:var(--space-8)}
.hero3-copy::before{content:"";position:absolute;left:0;top:-8px;bottom:-8px;width:1px;background:var(--coral-500);opacity:.6;transform-origin:top;animation:drawDown 1s var(--ease-out) .3s both}
.hero3-copy h1{font-family:var(--font-display);font-weight:300;font-size:clamp(40px,4.6vw,var(--text-5xl));line-height:1.14;letter-spacing:var(--tracking-tight)}
.hero3-copy h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero3-copy h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:3px;background:var(--coral-500);transform:scaleX(0);transform-origin:left;animation:drawRight .6s var(--ease-out) 1.1s both}
.sheet-wrap{position:relative}
.sheet{position:relative;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-6) var(--space-6) var(--space-8);transform:rotate(-.5deg);animation:sheetIn .7s var(--ease-out) both}
@keyframes sheetIn{from{opacity:0;transform:rotate(-2deg) translateY(18px)}to{opacity:1;transform:rotate(-.5deg)}}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--border-default);padding-bottom:var(--space-3);margin-bottom:var(--space-4);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted)}
.sheet-q{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);border-left:2px solid var(--teal-200);padding-left:var(--space-4);margin-bottom:var(--space-5)}
.work{display:grid;gap:6px}
.wline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:var(--space-4);opacity:0;animation:lineIn .4s var(--ease-out) both}
@keyframes lineIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hand{font-family:var(--hand);font-size:27px;line-height:1.35;color:var(--ink-hand)}
.hand sub{font-size:.62em}
.circled{position:relative;display:inline-block;padding:0 2px}
.circled svg{position:absolute;left:-9px;top:-7px;width:calc(100% + 18px);height:calc(100% + 14px);overflow:visible}
.circled svg ellipse{fill:none;stroke:var(--coral-500);stroke-width:2;stroke-linecap:round;stroke-dasharray:230;stroke-dashoffset:230;animation:circleDraw .75s var(--ease-out) 1.9s forwards}
@keyframes circleDraw{to{stroke-dashoffset:0}}
.note{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--coral-700);opacity:0;animation:lineIn .45s var(--ease-out) both}
.note::before{content:"";flex:0 0 22px;height:1px;background:var(--coral-500);transform:scaleX(0);transform-origin:left;animation:drawRight .35s var(--ease-out) both;animation-delay:inherit}
.fix{font-family:var(--hand);font-size:25px;color:var(--coral-600)}
.tick{display:flex;align-items:center;gap:10px;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--border-strong);opacity:0;animation:lineIn .4s var(--ease-out) 3.7s both}
.tick svg path{fill:none;stroke:var(--coral-500);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:circleDraw .5s var(--ease-out) 3.8s forwards}
.tick span{font-size:var(--text-sm);color:var(--text-secondary)}
.comment{position:relative;margin:calc(var(--space-6) * -1) 0 0 var(--space-10);background:var(--surface-inverse);color:var(--text-on-brand);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-lg);opacity:0;animation:lineIn .5s var(--ease-out) 4.1s both;max-width:520px}
.comment p{font-family:var(--font-display);font-weight:300;font-size:var(--text-lg);line-height:var(--leading-snug)}
.comment .who{font-size:var(--text-sm);color:var(--teal-200);margin-top:var(--space-2);display:block}
.comment-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.replay{margin-top:var(--space-5);background:none;border:0;padding:0;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--text-link);cursor:pointer;text-decoration:underline;text-decoration-color:var(--teal-300);text-underline-offset:3px}
.replay:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
.hero3-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-sm);color:var(--text-secondary);border-top:1px solid var(--border-default);padding-top:var(--space-4);margin-top:var(--space-2)}
.margin-list{display:grid;gap:var(--space-8)}
.margin-step{display:grid;grid-template-columns:112px 1fr;gap:var(--space-6);align-items:start;padding-bottom:var(--space-6);border-bottom:1px solid var(--border-default)}
.margin-step:last-child{border-bottom:0}
.margin-step .ann{font-family:var(--hand);font-size:26px;color:var(--coral-600);text-align:right;line-height:1.2;padding-top:2px}
.gradetable{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.gradetable caption{text-align:left;font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--teal-300);padding-bottom:var(--space-4)}
.gradetable th,.gradetable td{text-align:left;padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--border-on-inverse)}
.gradetable th{font-weight:600;font-size:var(--text-sm);color:var(--teal-200);letter-spacing:var(--tracking-wide)}
.gradetable td:first-child{color:var(--text-on-brand)}
.gradetable td.num{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:300;color:var(--brand-accent);line-height:1}
.paper-faq{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);box-shadow:var(--shadow-sm)}
.paper-faq .faq-item{border-top:1px solid var(--border-default)}
.paper-faq .faq-item:first-child{border-top:0}
.qno{font-family:var(--font-display);font-size:var(--text-lg);font-weight:300;color:var(--coral-600);min-width:32px}
.faq-q3{width:100%;background:none;border:0;padding:var(--space-5) 0;display:grid;grid-template-columns:32px 1fr auto;gap:var(--space-4);align-items:baseline;cursor:pointer;font-family:var(--font-body);font-size:var(--text-md);font-weight:600;color:var(--text-primary);text-align:left}
.faq-a3{padding:0 0 var(--space-5) calc(32px + var(--space-4));color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:68ch}
.faq-ans{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s var(--ease-out),opacity .24s var(--ease-out)}
.faq-ans>div{overflow:hidden;min-height:0}
.faq-ans.open{grid-template-rows:1fr;opacity:1}
.faq-sign{color:var(--brand-accent);font-weight:400;display:inline-block;transition:transform var(--duration-base) var(--ease-out)}
.faq-sign.open{transform:rotate(45deg)}
.marks-label{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:var(--tracking-wide);white-space:nowrap}
@media(max-width:1080px){.hero3-inner{grid-template-columns:1fr;gap:var(--space-10);padding:var(--space-12) var(--space-6)}.comment{margin-left:0;max-width:none}.sheet{transform:none}}
@media(max-width:720px){.wline{grid-template-columns:1fr;gap:2px}.hand{font-size:24px}.margin-step{grid-template-columns:1fr;gap:var(--space-2)}.margin-step .ann{text-align:left}.gradetable td.num{font-size:var(--text-xl)}.paper-faq{padding:var(--space-4)}}
@media(prefers-reduced-motion:reduce){.hero3::before{opacity:.5}.wline,.note,.tick,.comment,.sheet{opacity:1;animation:none}.circled svg ellipse,.tick svg path{stroke-dashoffset:0;animation:none}.hero3-copy h1 em::after,.hero3-copy::before{transform:none;animation:none}}
.board-strip{background:var(--surface-inverse);border-top:1px solid var(--border-on-inverse)}
.board-strip-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);padding:var(--space-5) var(--space-6)}
.board-list{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.board{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--teal-100);border:1px solid var(--border-on-inverse);border-radius:var(--radius-pill);padding:5px 14px}
@media(prefers-reduced-motion:reduce){.faq-ans,.faq-sign{transition:none}}