*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f7fb;color:#111827}a{color:inherit;text-decoration:none}nav{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:14px 28px;border-bottom:1px solid #d9e2ec;background:#f5f7fbf5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{font-weight:950;white-space:nowrap}.modeSwitch{justify-self:center;display:inline-grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:4px;padding:4px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.modeSwitch button,.languages button{border:0;border-radius:6px;background:transparent;color:#475569;font-weight:850;cursor:pointer}.modeSwitch button{min-height:36px;padding:0 14px}.languages{display:flex;gap:6px}.languages button{width:38px;height:34px;border:1px solid #cbd5e1;background:#fff}.modeSwitch .active,.languages .active{background:#122033;color:#fff}.hero,.band{width:min(1240px,calc(100% - 40px));margin:0 auto}.hero{min-height:calc(100vh - 66px);display:grid;grid-template-columns:.78fr 1.22fr;gap:34px;align-items:center;padding:38px 0}.hero img,.screenGrid img{width:100%;display:block;border:1px solid #cbd5e1;border-radius:8px;background:#fff;box-shadow:0 18px 42px #0f172a1f}.eyebrow{margin:0 0 12px;color:#0f766e;font-size:.82rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}h1,h2,h3,p{letter-spacing:0}h1{margin:0;font-size:clamp(2.45rem,5.2vw,5.1rem);line-height:.95}h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1}h3{margin:0 0 12px}.lead,.sectionHeader p,.twoCol p,li,.report p{color:#4b5563;font-size:1.03rem;line-height:1.65}.lead{max-width:720px;font-size:1.18rem}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.primary,.secondary{min-height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:0 18px;font-weight:950}.primary{background:#122033;color:#fff}.secondary{border:1px solid #cbd5e1;background:#fff}.band{padding:66px 0;border-top:1px solid #d9e2ec}.sectionHeader{max-width:860px;margin-bottom:24px}.twoCol{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:start}table,.stepCard,.noteCard,.callout,.screenGrid article,.diagram,.reportGrid article{border:1px solid #d9e2ec;border-radius:8px;background:#fff}table{width:100%;border-collapse:collapse;overflow:hidden}th,td{padding:15px 16px;border-bottom:1px solid #e5e7eb;text-align:left}th{background:#eaf3f8}code{border-radius:5px;background:#eef2f7;padding:4px 7px;font-weight:800}.manualGrid,.detailGrid,.noteGrid,.screenGrid,.diagramGrid,.reportGrid{display:grid;gap:16px}.manualGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.manualGrid.twoCards,.detailGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.noteGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.stepCard,.noteCard,.callout,.diagram,.reportGrid article{padding:22px}.callout{margin-top:22px;border-color:#99f6e4;background:#ecfeff}.callout p{margin-bottom:0}.noteCard h3{color:#0f766e}.screenGrid p{margin:-4px 18px 18px;color:#4b5563;font-size:.96rem;line-height:1.55}ol,ul{margin:0;padding-left:20px}.screenGrid,.diagramGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.screenGrid article{overflow:hidden}.screenGrid img{aspect-ratio:16 / 9.6;object-fit:cover;object-position:top left;border:0;border-bottom:1px solid #d9e2ec;border-radius:0;box-shadow:none}.screenGrid h3{padding:16px 18px 18px;text-transform:capitalize}.diagramFlow{display:flex;flex-wrap:wrap;gap:10px}.diagramFlow span{position:relative;display:inline-flex;align-items:center;min-height:38px;border:1px solid #cbd5e1;border-radius:6px;padding:0 12px;background:#f8fafc;color:#334155;font-weight:800}.diagramFlow span:not(:last-child):after{content:"→";margin-left:10px;color:#0f766e}.reportGrid{grid-template-columns:1fr 1fr;margin-top:16px}.walkthrough{display:grid;gap:28px}.legendPanel{margin-bottom:26px;border:1px solid #d9e2ec;border-radius:8px;background:#fff;padding:20px}.legendPanel h3{margin-bottom:14px;color:#122033}.legendGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.legendItem{display:grid;grid-template-columns:18px 1fr;column-gap:10px;row-gap:2px;align-items:start;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc;padding:12px}.legendItem p{grid-column:2;margin-bottom:0;color:#4b5563;font-size:.9rem;line-height:1.45}.legendSwatch{width:18px;height:18px;margin-top:2px;border-radius:5px;border:1px solid #cbd5e1}.legendSwatch.green{background:#bbf7d0}.legendSwatch.grey{background:#d1d5db}.legendSwatch.blue,.legendSwatch.sidebar{background:#2563eb}.legendSwatch.orange{background:#f59e0b}.legendSwatch.accepted{background:#16a34a}.legendSwatch.red{background:#dc2626}.legendSwatch.today{background:#fef3c7}.walkStep{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:start;border:1px solid #d9e2ec;border-radius:8px;background:#fff;padding:18px}.walkImage img{width:100%;display:block;border:1px solid #cbd5e1;border-radius:6px;box-shadow:0 12px 28px #0f172a1a}.walkText h3{font-size:1.5rem}.walkText ul{margin-top:14px}.architectureDiagram{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.layer,.entity,.sequenceStep{border:1px solid #d9e2ec;border-radius:8px;background:#fff}.layer{min-height:240px;display:grid;align-content:start;gap:10px;padding:18px}.layer strong{color:#0f766e}.layer span{display:block;border:1px solid #cbd5e1;border-radius:6px;background:#f8fafc;padding:10px;font-weight:800}.entityGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.entity{padding:18px}.entity h3{color:#122033}.entity li{font-size:.94rem}.sequence{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.sequenceStep{position:relative;min-height:180px;padding:18px}.sequenceStep span{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:999px;background:#122033;color:#fff;font-weight:950}.sequenceStep strong{display:block;margin-top:12px}.sequenceStep p{color:#4b5563;line-height:1.5}@media(max-width:920px){nav,.hero,.twoCol,.manualGrid,.detailGrid,.noteGrid,.screenGrid,.diagramGrid,.reportGrid,.walkStep,.legendGrid,.architectureDiagram,.entityGrid,.sequence,.manualGrid.twoCards{grid-template-columns:1fr}.modeSwitch{justify-self:stretch}.hero{min-height:auto}}