.outliyr-n-of-1 {
    --n1-ink: #10243e;
    --n1-blue: #1e5a88;
    --n1-signal: #2d9da3;
    --n1-paper: #f5fafc;
    --n1-line: #cfe0e8;
    --n1-warn: #9b4b20;
    position: relative;
    box-sizing: border-box;
    margin: 2.4rem auto;
    max-width: 760px;
    overflow: hidden;
    border: 1px solid var(--n1-line);
    border-radius: 18px;
    background: #fff;
    color: var(--n1-ink);
    box-shadow: 0 18px 48px rgba(16, 36, 62, .08);
    font-family: inherit;
}

.outliyr-n-of-1 *, .outliyr-n-of-1 *::before, .outliyr-n-of-1 *::after { box-sizing: border-box; }
.outliyr-n-of-1 p, .outliyr-n-of-1 h3, .outliyr-n-of-1 ol, .outliyr-n-of-1 dl { margin-top: 0; }

.outliyr-n-of-1__header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 28px 30px 22px;
}

.outliyr-n-of-1__mark {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 50%;
    background: var(--n1-ink);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.outliyr-n-of-1__label {
    margin-bottom: 6px;
    color: var(--n1-signal);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.outliyr-n-of-1 h3 {
    margin-bottom: 0;
    color: var(--n1-ink);
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 750;
    letter-spacing: -.025em;
    line-height: 1.18;
}

.outliyr-n-of-1__rules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 30px 24px 122px;
}

.outliyr-n-of-1__rules span {
    border: 1px solid var(--n1-line);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--n1-blue);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
}

.outliyr-n-of-1__rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0;
    padding: 0 30px 28px;
    list-style: none;
    counter-reset: n1-step;
}

.outliyr-n-of-1__rail li {
    position: relative;
    min-width: 0;
    padding: 28px 18px 0 0;
    counter-increment: n1-step;
}

.outliyr-n-of-1__rail li::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--n1-signal);
    box-shadow: 0 0 0 1px var(--n1-signal);
    content: '';
}

.outliyr-n-of-1__rail li:not(:last-child)::after {
    position: absolute;
    top: 8px;
    left: 18px;
    width: calc(100% - 18px);
    height: 2px;
    background: var(--n1-line);
    content: '';
}

.outliyr-n-of-1__rail span, .outliyr-n-of-1__rail strong, .outliyr-n-of-1__rail small { display: block; }
.outliyr-n-of-1__rail span { margin-bottom: 4px; color: var(--n1-signal); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.outliyr-n-of-1__rail strong { overflow-wrap: anywhere; color: var(--n1-ink); font-size: .96rem; line-height: 1.3; }
.outliyr-n-of-1__rail small { margin-top: 4px; color: #52697d; font-size: .8rem; line-height: 1.35; }

.outliyr-n-of-1__safety {
    margin: 0;
    border-top: 1px solid #ead8cb;
    border-bottom: 1px solid #ead8cb;
    background: #fff8f3;
    padding: 14px 30px;
    color: #60331d;
    font-size: .87rem;
    line-height: 1.5;
}

.outliyr-n-of-1__details { border-bottom: 1px solid var(--n1-line); }
.outliyr-n-of-1__details summary {
    position: relative;
    cursor: pointer;
    padding: 16px 56px 16px 30px;
    color: var(--n1-ink);
    font-size: .9rem;
    font-weight: 750;
    list-style: none;
}
.outliyr-n-of-1__details summary::-webkit-details-marker { display: none; }
.outliyr-n-of-1__details summary::after { position: absolute; top: 50%; right: 30px; content: '+'; color: var(--n1-signal); font-size: 1.3rem; transform: translateY(-50%); }
.outliyr-n-of-1__details[open] summary::after { content: '−'; }
.outliyr-n-of-1__details summary:focus-visible { outline: 3px solid rgba(45, 157, 163, .3); outline-offset: -3px; }
.outliyr-n-of-1__details dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; margin: 0; padding: 0 30px 22px; }
.outliyr-n-of-1__details dl div { min-width: 0; }
.outliyr-n-of-1__details dt { margin-bottom: 3px; color: #65798a; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.outliyr-n-of-1__details dd { margin: 0; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.45; }
.outliyr-n-of-1__details--limits p { margin: 0; padding: 0 30px 22px; color: #52697d; font-size: .88rem; line-height: 1.5; }

.outliyr-n-of-1__method { margin: 0; padding: 14px 30px 0; color: #607487; font-size: .76rem; line-height: 1.45; }
.outliyr-n-of-1__method a { color: var(--n1-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.outliyr-n-of-1__method a:focus-visible { outline: 3px solid rgba(45, 157, 163, .3); outline-offset: 3px; }

.outliyr-n-of-1__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 18px 30px 28px;
}

.outliyr-n-of-1__actions a, .outliyr-n-of-1__actions button {
    min-height: 44px;
    border: 1px solid var(--n1-line);
    border-radius: 10px;
    background: #fff;
    padding: 11px 15px;
    color: var(--n1-blue);
    font: inherit;
    font-size: .84rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
}
.outliyr-n-of-1__actions a.outliyr-n-of-1__primary { border-color: var(--n1-ink); background: var(--n1-ink); color: #fff; }
.outliyr-n-of-1__actions button { cursor: pointer; }
.outliyr-n-of-1__actions a:hover, .outliyr-n-of-1__actions button:hover { transform: translateY(-1px); }
.outliyr-n-of-1__actions a:focus-visible, .outliyr-n-of-1__actions button:focus-visible { outline: 3px solid rgba(45, 157, 163, .35); outline-offset: 3px; }
.outliyr-n-of-1__actions [data-n-of-1-status] { flex-basis: 100%; min-height: 1em; color: #607487; font-size: .75rem; }
.outliyr-n-of-1--editor .outliyr-n-of-1__actions { pointer-events: none; }
.outliyr-n-of-1__placeholder { color: #718697; font-style: italic; }
.outliyr-n-of-1__incomplete { margin: 0; border-top: 1px solid #ead8cb; background: #fff8f3; padding: 10px 30px; color: var(--n1-warn); font-size: .78rem; font-weight: 700; }

@media (max-width: 620px) {
    .outliyr-n-of-1 { margin: 1.8rem 0; border-radius: 14px; }
    .outliyr-n-of-1__header { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 22px 20px 18px; }
    .outliyr-n-of-1__mark { width: 52px; height: 52px; font-size: .88rem; }
    .outliyr-n-of-1__rules { padding: 0 20px 20px; }
    .outliyr-n-of-1__rail { grid-template-columns: 1fr; gap: 0; padding: 0 20px 22px 30px; }
    .outliyr-n-of-1__rail li { padding: 0 0 22px 28px; }
    .outliyr-n-of-1__rail li::before { top: 2px; }
    .outliyr-n-of-1__rail li:not(:last-child)::after { top: 20px; left: 8px; width: 2px; height: calc(100% - 20px); }
    .outliyr-n-of-1__safety { padding: 14px 20px; }
    .outliyr-n-of-1__details summary { padding: 15px 50px 15px 20px; }
    .outliyr-n-of-1__details summary::after { right: 20px; }
    .outliyr-n-of-1__details dl { grid-template-columns: 1fr; padding: 0 20px 20px; }
    .outliyr-n-of-1__details--limits p, .outliyr-n-of-1__method { padding-right: 20px; padding-left: 20px; }
    .outliyr-n-of-1__actions { padding: 18px 20px 22px; }
    .outliyr-n-of-1__actions a, .outliyr-n-of-1__actions button { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .outliyr-n-of-1__actions a, .outliyr-n-of-1__actions button { transition: none; }
}