:root {
    --navy:#153444;
    --navy-deep:#102b39;
    --teal:#007a75;
    --teal-dark:#00635f;
    --teal-light:#e8f5f2;
    --ink:#203b49;
    --muted:#526874;
    --line:#dce5e9;
    --surface:#fff;
    --bg:#f4f7f8;
    --orange:#8c4d0d;
    --orange-bg:#fff4e4;
    --error:#a12629;
    --radius:14px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-synthesis:none
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-size:16px;
    line-height:1.6
}

a {
    color:var(--teal-dark);
    text-underline-offset:4px
}

button,input,textarea {
    font:inherit
}

button,a,input,textarea,summary {
    -webkit-tap-highlight-color:transparent
}

:focus-visible {
    outline:3px solid var(--teal);
    outline-offset:4px
}

input:focus,textarea:focus {
    outline:2px solid var(--teal);
    outline-offset:2px
}

h1,h2,h3,p {
    margin:0
}

h1,h2,h3 {
    color:var(--navy-deep);
    line-height:1.2;
    letter-spacing:-.035em
}

h1 {
    font-size:clamp(2rem,4vw,2.75rem);
    font-weight:750
}

h2 {
    font-size:1.4rem;
    font-weight:700
}

h3 {
    font-size:1.15rem
}

p+p {
    margin-top:12px
}

ul {
    padding-left:22px
}

form {
    margin:0
}

.container {
    width:min(1180px,calc(100% - 64px));
    margin-inline:auto
}

.skip-link {
    position:absolute;
    top:-100px;
    left:20px;
    z-index:10;
    padding:12px 20px;
    background:white;
    border:2px solid var(--teal)
}

.skip-link:focus {
    top:12px
}

.site-header {
    background:var(--surface);
    border-top:4px solid var(--teal);
    border-bottom:1px solid var(--line)
}

.header-inner {
    width:min(1180px,calc(100% - 64px));
    margin:auto;
    display:flex;
    align-items:center;
    gap:36px;
    min-height:88px
}

.brand {
    display:inline-flex;
    align-items:baseline;
    gap:9px;
    color:var(--navy);
    text-decoration:none;
    white-space:nowrap;
    letter-spacing:-.04em
}

.brand-name {
    font-size:25px;
    font-weight:800
}

.brand-product {
    font-size:20px;
    font-weight:450
}

.main-nav a {
    display:inline-flex;
    min-height:44px;
    align-items:center;
    text-decoration:none;
    font-weight:650;
    color:var(--navy);
    border-bottom:2px solid var(--teal)
}

.account {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:20px;
    min-width:0
}

.account-name {
    font-size:14px;
    color:var(--muted);
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.header-caption {
    margin-left:auto;
    color:var(--muted);
    font-size:14px
}

.test-banner {
    background:var(--orange-bg);
    border-bottom:1px solid #eadbc5;
    color:#74420c;
    font-size:13px
}

.test-banner .container {
    display:flex;
    gap:16px;
    align-items:center;
    padding-block:10px
}

.test-banner strong {
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.09em;
    white-space:nowrap
}

.main-content {
    padding-block:42px 60px;
    min-height:65vh
}

.eyebrow {
    font-size:11px;
    line-height:1.5;
    font-weight:750;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--teal-dark);
    margin-bottom:9px
}

.lead {
    font-size:17px;
    color:var(--muted);
    line-height:1.7;
    margin-top:14px;
    max-width:660px
}

.page-heading {
    margin-bottom:30px
}

.card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    min-width:0;
    box-shadow:0 2px 4px #15344403
}

.section-description {
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
    margin-top:12px;
    margin-bottom:22px
}

.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px
}

.section-heading .eyebrow {
    margin-bottom:4px
}

.section-number {
    font-size:24px;
    font-weight:400;
    width:46px;
    height:46px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--teal-light);
    color:var(--teal-dark)
}

.compose-card .section-heading {
    justify-content:flex-start
}

.button {
    border:1px solid transparent;
    border-radius:8px;
    padding:11px 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    min-height:46px;
    font-size:14px;
    font-weight:650;
    cursor:pointer;
    text-decoration:none;
    line-height:1.5
}

.button-primary {
    background:var(--teal);
    color:white
}

.button-primary:hover {
    background:var(--teal-dark)
}

.button-wide {
    width:100%;
    justify-content:space-between
}

.button-quiet {
    color:var(--navy);
    border-color:var(--line);
    background:white;
    font-size:13px;
    min-height:44px
}

.button-quiet:hover {
    background:var(--bg)
}

.stack-form {
    display:grid;
    gap:22px
}

.form-field label {
    display:block;
    font-weight:650;
    font-size:14px;
    margin-bottom:9px
}

.form-field input,.form-field textarea {
    display:block;
    width:100%;
    border:1px solid #7a929d;
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    padding:12px 14px;
    min-height:48px;
    max-width:100%
}

.form-field textarea {
    resize:vertical;
    line-height:1.7;
    min-height:200px
}

.form-field [aria-invalid=true] {
    border-color:var(--error);
    border-width:2px
}

.field-hint,.field-error {
    font-size:13px;
    line-height:1.6;
    margin-top:8px
}

.field-hint {
    color:var(--muted)
}

.field-error {
    color:var(--error);
    font-weight:550
}

.example {
    font-size:13px;
    padding:14px 16px;
    border-radius:8px;
    background:var(--bg);
    border-left:3px solid #b9ced3
}

.example strong {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted)
}

.example p {
    margin-top:4px;
    overflow-wrap:anywhere
}

.form-footnote {
    font-size:13px;
    color:var(--muted);
    padding-top:24px;
    margin-top:26px;
    border-top:1px solid var(--line)
}

.stock-note {
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:12px;
    color:var(--teal-dark);
    margin-top:20px
}

.stock-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--teal);
    border-radius:50%;
    flex:0 0 7px
}

.workspace-grid {
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);
    gap:24px;
    align-items:start
}

.count {
    display:grid;
    place-items:center;
    min-width:32px;
    height:32px;
    padding-inline:9px;
    border-radius:8px;
    background:var(--bg);
    border:1px solid var(--line);
    font-size:13px;
    font-weight:650
}

.draft-list {
    list-style:none;
    padding:0;
    margin:0
}

.draft-list li+li {
    border-top:1px solid var(--line)
}

.draft-link {
    display:block;
    padding:22px 0;
    color:var(--ink);
    text-decoration:none
}

.draft-link:hover .draft-row strong {
    text-decoration:underline;
    color:var(--teal-dark)
}

.draft-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    font-size:15px;
    margin-bottom:8px
}

.arrow {
    font-size:22px;
    line-height:1;
    color:var(--teal-dark)
}

.status-badge,.proposal-badge {
    display:inline-block;
    border-radius:5px;
    font-size:10px;
    letter-spacing:.035em;
    font-weight:700;
    padding:5px 9px;
    line-height:1.5;
    background:#edf2f5;
    color:#465e6c
}

.proposal-badge {
    background:var(--orange-bg);
    color:var(--orange);
    white-space:nowrap
}

.draft-preview {
    font-size:14px;
    line-height:1.65;
    margin-block:12px 10px;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}

.draft-date {
    display:block;
    font-size:12px;
    color:var(--muted);
    letter-spacing:.01em
}

.empty-state {
    text-align:center;
    padding:38px 12px 32px
}

.empty-symbol {
    display:grid;
    place-items:center;
    font-size:34px;
    color:#647f8b;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:12px;
    width:62px;
    height:62px;
    margin:0 auto 20px
}

.empty-state p {
    color:var(--muted);
    font-size:14px;
    margin:12px auto 20px;
    max-width:290px
}

.text-link {
    font-size:14px;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    gap:14px;
    font-weight:650
}

.readonly-card p:last-child {
    font-size:14px;
    color:var(--muted);
    margin-top:14px
}

.login-grid {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:96px;
    align-items:center;
    max-width:1000px;
    margin:25px auto 30px
}

.login-intro h1 {
    font-size:clamp(2.4rem,4vw,3.6rem);
    line-height:1.12
}

.login-intro .eyebrow {
    margin-bottom:20px
}

.login-intro .lead {
    margin-top:24px;
    max-width:410px;
    font-size:16px
}

.intro-points {
    list-style:none;
    padding:0;
    margin:32px 0;
    display:grid;
    gap:16px;
    font-size:14px
}

.intro-points li {
    display:flex;
    align-items:center;
    gap:14px
}

.point-marker {
    font-size:11px;
    font-weight:750;
    color:var(--teal-dark);
    background:var(--teal-light);
    border:1px solid #c8e4dc;
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex-shrink:0
}

.intro-note {
    font-size:13px;
    color:var(--muted);
    max-width:360px;
    border-left:2px solid #b9d1d1;
    padding-left:16px
}

.login-card {
    padding:36px
}

.login-card h2 {
    font-size:1.75rem
}

.login-card .stack-form {
    margin-top:28px
}

.login-card .section-description {
    margin-bottom:0
}

.back-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    font-size:13px;
    text-decoration:none;
    margin-top:-16px;
    margin-bottom:14px
}

.back-link:hover {
    text-decoration:underline
}

.detail-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px
}

.detail-heading .draft-date {
    margin-top:12px
}

.status-large {
    font-size:12px;
    padding:8px 12px
}

.stock-banner {
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--teal-light);
    border:1px solid #c7e4dc;
    border-radius:10px;
    color:#275b54;
    padding:14px 20px;
    font-size:13px;
    margin-bottom:26px
}

.stock-banner strong {
    display:inline-block;
    margin-right:5px
}

.detail-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(250px,.43fr);
    gap:24px;
    align-items:start
}

.detail-main {
    display:grid;
    gap:24px;
    min-width:0
}

.proposal-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin:0;
    gap:0 24px
}

.proposal-field {
    padding:19px 0;
    min-width:0;
    border-top:1px solid var(--line);
    overflow-wrap:anywhere
}

.proposal-field dt {
    font-size:12px;
    color:var(--muted);
    font-weight:550
}

.proposal-field dd {
    font-size:15px;
    margin:7px 0 0;
    font-weight:650;
    color:var(--navy)
}

.proposal-field p {
    letter-spacing:normal;
    font-weight:400;
    font-size:12px;
    color:var(--muted);
    margin-top:7px;
    line-height:1.6
}

.mass-field dd {
    font-size:23px;
    letter-spacing:-.04em;
    color:var(--teal-dark);
    font-weight:700
}

.field-full {
    grid-column:1/-1
}

.original-text {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:15px;
    line-height:1.9;
    margin:22px 0 0;
    padding:4px 0 4px 18px;
    border-left:3px solid #96bcb7;
    color:var(--ink)
}

.confirmation-card {
    border-radius:var(--radius);
    border:1px solid #edd6b4;
    background:var(--orange-bg);
    padding:26px;
    min-width:0;
    color:#664112
}

.confirmation-card .eyebrow {
    color:var(--orange)
}

.confirmation-card h2 {
    color:#71420d
}

.confirmation-card>p:not(.eyebrow) {
    font-size:13px;
    margin-top:16px;
    line-height:1.8
}

.confirmation-list {
    list-style:none;
    margin:24px 0;
    padding:0;
    display:grid;
    gap:20px;
    counter-reset:confirmation
}

.confirmation-list li {
    font-size:14px;
    line-height:1.75;
    overflow-wrap:anywhere;
    border-top:1px solid #ead7bc;
    padding-top:16px
}

.confirmation-list li:before {
    content:counter(confirmation,decimal-leading-zero);
    counter-increment:confirmation;
    font-size:10px;
    font-weight:750;
    display:block;
    color:#8b4b09;
    letter-spacing:.08em;
    margin-bottom:5px
}

.confirmation-card .confirmation-footer {
    padding-top:18px;
    border-top:1px solid #e1cba9;
    color:#79572d;
    font-size:12px
}

.technical-details {
    padding:0
}

.technical-details summary {
    padding:20px 26px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    color:var(--navy)
}

.technical-details summary span {
    font-size:12px;
    color:var(--muted);
    font-weight:400;
    margin-left:12px
}

.technical-details pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    background:var(--bg);
    border-top:1px solid var(--line);
    font-size:12px;
    padding:24px;
    margin:0;
    border-radius:0 0 var(--radius) var(--radius)
}

.error-summary {
    background:#fff1f1;
    border:1px solid #dbafb0;
    border-left:4px solid var(--error);
    padding:20px 24px;
    border-radius:10px;
    margin-bottom:28px;
    overflow-wrap:anywhere
}

.error-summary h2 {
    font-size:18px;
    color:var(--error)
}

.error-summary p {
    margin-top:8px;
    font-size:14px
}

.error-summary ul {
    margin-bottom:0;
    font-size:14px
}

.error-summary a {
    color:var(--error)
}

.site-footer {
    display:flex;
    justify-content:space-between;
    gap:24px;
    border-top:1px solid var(--line);
    padding-block:24px 30px;
    font-size:12px;
    color:var(--muted)
}

.site-footer>span {
    font-weight:700;
    white-space:nowrap
}

.site-footer p {
    max-width:580px;
    text-align:right
}

@media(max-width:950px) {
    .header-inner {
        gap:24px
    }
    .account-name {
        display:none
    }
    .login-grid {
        gap:40px
    }
    .login-card {
        padding:28px
    }
    .detail-grid {
        grid-template-columns:minmax(0,1fr) minmax(230px,.55fr)
    }
    .card {
        padding:24px
    }
    .technical-details {
        padding:0
    }
    .confirmation-card {
        padding:22px
    }
    .workspace-grid {
        gap:18px
    }
}

@media(max-width:720px) {
    .container,.header-inner {
        width:calc(100% - 36px)
    }
    .header-inner {
        flex-wrap:wrap;
        column-gap:16px;
        row-gap:0;
        padding-block:16px;
        min-height:auto
    }
    .brand {
        flex:1;
        gap:6px
    }
    .brand-name {
        font-size:23px
    }
    .brand-product {
        font-size:18px
    }
    .header-caption {
        font-size:12px;
        margin:4px 0 0;
        width:100%
    }
    .account {
        margin:0
    }
    .main-nav {
        order:3;
        width:100%;
        padding-top:10px
    }
    .main-nav a {
        font-size:13px;
        min-height:36px
    }
    .button-quiet {
        font-size:12px;
        padding:9px 11px
    }
    .test-banner .container {
        display:block;
        padding-block:9px;
        line-height:1.6
    }
    .test-banner strong {
        display:block;
        margin-bottom:2px;
        font-size:10px
    }
    .test-banner span {
        font-size:12px
    }
    .main-content {
        padding-block:30px 40px
    }
    .page-heading {
        margin-bottom:24px
    }
    .lead {
        font-size:15px;
        margin-top:12px
    }
    .workspace-grid,.detail-grid,.login-grid {
        grid-template-columns:minmax(0,1fr);
        gap:22px
    }
    .card {
        padding:22px
    }
    .technical-details {
        padding:0
    }
    .login-grid {
        margin:0;
        gap:28px
    }
    .login-intro h1 {
        font-size:2.65rem
    }
    .login-intro .lead {
        font-size:15px;
        margin-top:18px;
        max-width:none
    }
    .login-intro .eyebrow {
        margin-bottom:12px
    }
    .intro-points {
        margin:22px 0;
        gap:12px;
        font-size:13px
    }
    .intro-note {
        max-width:none
    }
    .login-intro {
        grid-row:2;
    }
    .login-card {
        grid-row:1;
        padding:26px
    }
    .login-card h2 {
        font-size:1.65rem
    }
    .section-description {
        font-size:13px
    }
    .section-heading {
        gap:12px
    }
    .section-number {
        width:40px;
        height:40px
    }
    .section-heading h2 {
        font-size:1.25rem
    }
    .form-field textarea {
        min-height:190px
    }
    .stock-note {
        font-size:12px;
        align-items:baseline
    }
    .detail-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:14px
    }
    .detail-heading h1 {
        font-size:2rem
    }
    .stock-banner {
        padding:15px 16px;
        align-items:baseline;
        font-size:12px
    }
    .stock-banner strong {
        display:block
    }
    .proposal-grid {
        gap:0;
        grid-template-columns:minmax(0,1fr)
    }
    .proposal-field {
        padding:17px 0
    }
    .field-full {
        grid-column:auto
    }
    .proposal-field dd {
        font-size:16px
    }
    .mass-field dd {
        font-size:24px
    }
    .detail-main {
        gap:20px
    }
    .detail-grid {
        gap:20px
    }
    .detail-main {
        display:contents;
    }
    .original-card {
        grid-row:3;
    }
    .technical-details {
        grid-row:4;
    }
    .confirmation-card {
        padding:24px;
        grid-row:2
    }
    .proposal-badge {
        font-size:10px;
        padding:5px 7px
    }
    .original-text {
        font-size:14px;
        padding-left:14px
    }
    .technical-details summary {
        padding:19px 22px
    }
    .technical-details summary span {
        display:block;
        margin:6px 0 0 18px
    }
    .site-footer {
        display:block;
        font-size:11px
    }
    .site-footer p {
        text-align:left;
        margin-top:8px
    }
    .empty-state {
        padding:30px 5px
    }
    .error-summary {
        padding:18px
    }
    .back-link {
        margin-top:-10px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
}