.pt-directive-tool {
    /* 品牌强调色。用于当前项、链接和主要操作。 */
    --pt-directive-theme-primary: #1769c2;
    /* 深色代码背景。用于区分可复制代码与正文说明。 */
    --pt-directive-theme-code: #17202b;
    /* 标题文字。用于页面和内容层级标题。 */
    --pt-directive-text-title: #182230;
    /* 正文文字。用于说明、表格和表单内容。 */
    --pt-directive-text-body: #344054;
    /* 次要文字。用于辅助信息和字段标签。 */
    --pt-directive-text-muted: #667085;
    /* 页面底色。用于工具主体与官网其他区域分层。 */
    --pt-directive-bg-page: #f5f7fa;
    /* 内容底色。用于指令详情和表单区域。 */
    --pt-directive-bg-content: #ffffff;
    /* 弱化底色。用于搜索、表头和当前项。 */
    --pt-directive-bg-subtle: #f0f4f8;
    /* 常规边框。用于列表、表格和内容分区。 */
    --pt-directive-border: #d7dee7;
    /* 聚焦边框。用于键盘操作反馈。 */
    --pt-directive-border-focus: #1769c2;
    /* 统一小圆角。用于输入框、按钮和工具容器。 */
    --pt-directive-radius: 6px;
    min-height: calc(100vh - 7.2rem);
    margin-top: 6rem;
    color: var(--pt-directive-text-body);
    background: var(--pt-directive-bg-page);
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.pt-directive-tool *,
.pt-directive-tool *::before,
.pt-directive-tool *::after {
    box-sizing: border-box;
}

.pt-directive-tool button,
.pt-directive-tool input,
.pt-directive-tool select {
    font: inherit;
}

.pt-directive-tool button,
.pt-directive-tool summary,
.pt-directive-tool a {
    cursor: pointer;
}

.pt-directive-header {
    padding: 3.2rem 0;
    border-bottom: 1px solid var(--pt-directive-border);
    background: var(--pt-directive-bg-content);
}

.pt-directive-header__inner {
    display: grid;
    grid-template-columns: minmax(24rem, 0.75fr) minmax(38rem, 1.25fr);
    gap: 4rem;
    align-items: center;
}

.pt-directive-header__title h1 {
    margin: 0;
    color: var(--pt-directive-text-title);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: left;
}

.pt-directive-header__title p {
    margin: 0.8rem 0 0;
    color: var(--pt-directive-text-muted);
    font-size: 1.5rem;
    line-height: 1.7;
}

.pt-directive-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.pt-directive-search > i {
    position: absolute;
    left: 1.6rem;
    color: var(--pt-directive-text-muted);
    font-size: 1.8rem;
    pointer-events: none;
}

.pt-directive-search input {
    width: 100%;
    height: 4.8rem;
    padding: 0 5rem 0 4.6rem;
    border: 1px solid #bfc9d6;
    border-radius: var(--pt-directive-radius);
    outline: 0;
    color: var(--pt-directive-text-title);
    background: #fff;
    font-size: 1.5rem;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pt-directive-search input:focus {
    border-color: var(--pt-directive-border-focus);
    box-shadow: 0 0 0 3px rgba(23, 105, 194, 0.13);
}

.pt-directive-search button {
    position: absolute;
    right: 0.8rem;
    display: inline-grid;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 4px;
    color: var(--pt-directive-text-muted);
    background: transparent;
}

.pt-directive-search button:hover {
    color: var(--pt-directive-text-title);
    background: var(--pt-directive-bg-subtle);
}

.pt-directive-shell {
    padding-top: 2.4rem;
    padding-bottom: 6rem;
}

.pt-directive-tabs {
    display: flex;
    min-height: 4.6rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--pt-directive-border);
}

.pt-directive-tabs button {
    position: relative;
    display: inline-flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: center;
    min-width: 13rem;
    padding: 0 1.6rem;
    border: 0;
    color: var(--pt-directive-text-muted);
    background: transparent;
    font-size: 1.5rem;
    font-weight: 600;
}

.pt-directive-tabs button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
    content: "";
}

.pt-directive-tabs button:hover,
.pt-directive-tabs button.is-active {
    color: var(--pt-directive-theme-primary);
}

.pt-directive-tabs button.is-active::after {
    background: var(--pt-directive-theme-primary);
}

.pt-directive-tabs button span {
    min-width: 2.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    color: var(--pt-directive-text-muted);
    background: #e8edf3;
    font-size: 1.2rem;
    line-height: 1.5;
}

.pt-directive-tabs button.is-active span {
    color: #0c4c91;
    background: #dbeafe;
}

.pt-directive-reference-layout,
.pt-directive-recipes-layout {
    display: grid;
    grid-template-columns: 28rem minmax(0, 1fr);
    min-width: 0;
    border: 1px solid var(--pt-directive-border);
    border-radius: var(--pt-directive-radius);
    background: var(--pt-directive-bg-content);
    overflow: clip;
}

.pt-directive-index {
    min-width: 0;
    border-right: 1px solid var(--pt-directive-border);
    background: #fafbfc;
}

.pt-directive-index__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5.6rem;
    padding: 0 1.8rem;
    border-bottom: 1px solid var(--pt-directive-border);
}

.pt-directive-index__header h2 {
    margin: 0;
    color: var(--pt-directive-text-title);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0;
}

.pt-directive-index__header strong {
    color: var(--pt-directive-text-muted);
    font-size: 1.3rem;
    font-weight: 500;
}

.pt-directive-index__list,
.pt-directive-recipe-list {
    display: block;
    max-height: calc(100vh - 20rem);
    min-height: 48rem;
    padding: 1.2rem 0;
    overflow-y: auto;
}

.pt-directive-index-group + .pt-directive-index-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e7ebf0;
}

.pt-directive-index-group h3 {
    margin: 0;
    padding: 0.5rem 1.8rem;
    color: #7a8696;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0;
}

.pt-directive-index-item {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    min-height: 4rem;
    padding: 0.7rem 1.8rem;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    color: var(--pt-directive-text-body);
    background: transparent;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.pt-directive-index-item:hover {
    background: #eef3f8;
}

.pt-directive-index-item.is-active {
    border-left-color: var(--pt-directive-theme-primary);
    color: #0c4c91;
    background: #e7f1fb;
}

.pt-directive-index-item code {
    overflow: hidden;
    color: inherit;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-directive-index-item span {
    overflow: hidden;
    font-size: 1.35rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-directive-detail,
.pt-directive-recipe-detail {
    min-width: 0;
    background: var(--pt-directive-bg-content);
}

.pt-directive-detail {
    padding: 3.2rem 4rem 4.8rem;
}

.pt-directive-detail__header {
    padding-bottom: 2.8rem;
    border-bottom: 1px solid var(--pt-directive-border);
}

.pt-directive-detail__identity {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.pt-directive-detail__identity > code {
    color: var(--pt-directive-theme-primary);
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 1.4rem;
    font-weight: 700;
}

.pt-directive-detail__identity > span {
    padding: 0.3rem 0.8rem;
    border: 1px solid #c6d2df;
    border-radius: 999px;
    color: var(--pt-directive-text-muted);
    background: #fff;
    font-size: 1.15rem;
}

.pt-directive-detail__header h2 {
    margin: 1.2rem 0 0;
    color: var(--pt-directive-text-title);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
}

.pt-directive-detail__header > p {
    max-width: 78rem;
    margin: 1rem 0 0;
    color: var(--pt-directive-text-body);
    font-size: 1.5rem;
    line-height: 1.8;
}

.pt-directive-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    margin: 2rem 0 0;
}

.pt-directive-facts > div {
    display: flex;
    gap: 0.8rem;
    align-items: baseline;
}

.pt-directive-facts dt,
.pt-directive-facts dd {
    margin: 0;
    font-size: 1.3rem;
}

.pt-directive-facts dt {
    color: var(--pt-directive-text-muted);
}

.pt-directive-facts dd {
    color: var(--pt-directive-text-title);
    font-weight: 600;
}

.pt-directive-detail__section {
    padding-top: 2.8rem;
}

.pt-directive-detail__section + .pt-directive-detail__section {
    margin-top: 2.8rem;
    border-top: 1px solid var(--pt-directive-border);
}

.pt-directive-detail__section > h3,
.pt-directive-section-heading h3,
.pt-directive-recipe-directives > h3 {
    margin: 0;
    color: var(--pt-directive-text-title);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
}

.pt-directive-section-heading {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.pt-directive-section-heading > span {
    color: var(--pt-directive-text-muted);
    font-size: 1.25rem;
}

.pt-directive-copy-button {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    min-height: 3.2rem;
    padding: 0 1rem;
    border: 1px solid #b8c4d1;
    border-radius: 4px;
    color: var(--pt-directive-text-body);
    background: #fff;
    font-size: 1.25rem;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.pt-directive-copy-button:hover {
    border-color: var(--pt-directive-theme-primary);
    color: var(--pt-directive-theme-primary);
    background: #f4f9ff;
}

.pt-directive-code {
    max-width: 100%;
    margin: 0;
    padding: 1.8rem 2rem;
    overflow: auto;
    border: 1px solid #273444;
    border-radius: var(--pt-directive-radius);
    color: #e6edf3;
    background: var(--pt-directive-theme-code);
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 1.3rem;
    line-height: 1.75;
    white-space: pre;
}

.pt-directive-code--compact {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.pt-directive-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--pt-directive-border);
    border-radius: var(--pt-directive-radius);
}

.pt-directive-table {
    width: 100%;
    min-width: 66rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.pt-directive-table th,
.pt-directive-table td {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #e4e8ee;
    text-align: left;
    vertical-align: top;
    font-size: 1.3rem;
    line-height: 1.65;
}

.pt-directive-table th {
    color: var(--pt-directive-text-muted);
    background: var(--pt-directive-bg-subtle);
    font-weight: 600;
}

.pt-directive-table th:nth-child(1) { width: 18%; }
.pt-directive-table th:nth-child(2) { width: 52%; }
.pt-directive-table th:nth-child(3) { width: 14%; }
.pt-directive-table th:nth-child(4) { width: 16%; }

.pt-directive-table tr:last-child td {
    border-bottom: 0;
}

.pt-directive-table td > code,
.pt-directive-table td small code {
    color: #0c4c91;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 1.2rem;
}

.pt-directive-table td strong,
.pt-directive-table td small {
    display: block;
}

.pt-directive-table td strong {
    color: var(--pt-directive-text-title);
    font-weight: 600;
}

.pt-directive-table td small {
    margin-top: 0.4rem;
    color: var(--pt-directive-text-muted);
    font-size: 1.2rem;
}

.pt-directive-required {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    color: #a12a2a;
    background: #fff0f0;
    font-size: 1rem;
}

.pt-directive-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--pt-directive-border);
    border-left: 1px solid var(--pt-directive-border);
}

.pt-directive-field {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 5.8rem;
    padding: 1rem 1.4rem;
    border: 0;
    border-right: 1px solid var(--pt-directive-border);
    border-bottom: 1px solid var(--pt-directive-border);
    text-align: left;
    color: var(--pt-directive-text-body);
    background: #fff;
}

.pt-directive-field:hover {
    color: var(--pt-directive-theme-primary);
    background: #f4f9ff;
}

.pt-directive-field > span {
    min-width: 0;
}

.pt-directive-field code,
.pt-directive-field small {
    display: block;
}

.pt-directive-field code {
    overflow-wrap: anywhere;
    color: inherit;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 1.2rem;
}

.pt-directive-field small {
    margin-top: 0.3rem;
    color: var(--pt-directive-text-muted);
    font-size: 1.2rem;
}

.pt-directive-field i {
    flex: 0 0 auto;
    color: #98a2b3;
}

.pt-directive-notes {
    margin: 1.2rem 0 0;
    padding-left: 2rem;
    color: var(--pt-directive-text-body);
    font-size: 1.35rem;
    line-height: 1.75;
}

.pt-directive-related {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.pt-directive-related-item {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    min-height: 3.8rem;
    padding: 0 1.2rem;
    border: 1px solid var(--pt-directive-border);
    border-radius: 4px;
    color: var(--pt-directive-text-body);
    background: #fff;
    font-size: 1.3rem;
}

.pt-directive-related-item:hover {
    border-color: var(--pt-directive-theme-primary);
    color: var(--pt-directive-theme-primary);
}

.pt-directive-recipe-list {
    padding: 0.8rem 0;
}

.pt-directive-recipe-list a {
    display: block;
    min-height: 5.5rem;
    padding: 0.9rem 1.8rem;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: var(--pt-directive-text-body);
}

.pt-directive-recipe-list a:hover {
    background: #eef3f8;
}

.pt-directive-recipe-list a.is-active {
    border-left-color: var(--pt-directive-theme-primary);
    color: #0c4c91;
    background: #e7f1fb;
}

.pt-directive-recipe-list span,
.pt-directive-recipe-list small {
    display: block;
}

.pt-directive-recipe-list span {
    font-size: 1.35rem;
    font-weight: 600;
}

.pt-directive-recipe-list small {
    margin-top: 0.3rem;
    color: var(--pt-directive-text-muted);
    font-size: 1.15rem;
}

.pt-directive-recipe-header {
    padding: 3rem 3.2rem 2.4rem;
    border-bottom: 1px solid var(--pt-directive-border);
}

.pt-directive-recipe-header > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pt-directive-recipe-header > div span {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    color: #0c4c91;
    background: #e7f1fb;
    font-size: 1.1rem;
}

.pt-directive-recipe-header h2 {
    margin: 1.2rem 0 0;
    color: var(--pt-directive-text-title);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
}

.pt-directive-recipe-header p {
    margin: 0.8rem 0 0;
    color: var(--pt-directive-text-muted);
    font-size: 1.4rem;
    line-height: 1.75;
}

.pt-directive-recipe-workspace {
    display: grid;
    grid-template-columns: minmax(30rem, 0.8fr) minmax(38rem, 1.2fr);
    min-width: 0;
    border-bottom: 1px solid var(--pt-directive-border);
}

.pt-directive-parameter-form,
.pt-directive-recipe-output {
    min-width: 0;
    padding: 2.8rem 3.2rem;
}

.pt-directive-parameter-form {
    border-right: 1px solid var(--pt-directive-border);
}

.pt-directive-fields {
    display: grid;
    gap: 1.4rem;
}

.pt-directive-form-field {
    min-width: 0;
}

.pt-directive-form-field label {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    color: var(--pt-directive-text-title);
    font-size: 1.3rem;
    font-weight: 600;
}

.pt-directive-form-field label span b {
    margin-left: 0.4rem;
    color: #a12a2a;
    font-size: 1rem;
    font-weight: 600;
}

.pt-directive-form-field label code {
    color: var(--pt-directive-text-muted);
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 1.1rem;
    font-weight: 400;
}

.pt-directive-form-field input:not([type="checkbox"]),
.pt-directive-form-field select {
    width: 100%;
    height: 4rem;
    padding: 0 1.1rem;
    border: 1px solid #bdc7d3;
    border-radius: 4px;
    outline: 0;
    color: var(--pt-directive-text-title);
    background: #fff;
    font-size: 1.3rem;
}

.pt-directive-form-field input:focus,
.pt-directive-form-field select:focus {
    border-color: var(--pt-directive-border-focus);
    box-shadow: 0 0 0 3px rgba(23, 105, 194, 0.12);
}

.pt-directive-form-field > small {
    display: block;
    margin-top: 0.5rem;
    color: var(--pt-directive-text-muted);
    font-size: 1.15rem;
    line-height: 1.55;
}

.pt-directive-toggle {
    width: 1.8rem;
    height: 1.8rem;
    accent-color: var(--pt-directive-theme-primary);
}

.pt-directive-advanced {
    margin-top: 1.8rem;
    border-top: 1px solid var(--pt-directive-border);
}

.pt-directive-advanced summary {
    padding: 1.4rem 0;
    color: var(--pt-directive-theme-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.pt-directive-recipe-output {
    color: #e6edf3;
    background: var(--pt-directive-theme-code);
}

.pt-directive-recipe-output .pt-directive-section-heading h3 {
    color: #f8fafc;
}

.pt-directive-copy-button--light {
    border-color: #526172;
    color: #e6edf3;
    background: #263342;
}

.pt-directive-copy-button--light:hover {
    border-color: #8abcf0;
    color: #fff;
    background: #304256;
}

.pt-directive-code--recipe {
    max-height: 54rem;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.pt-directive-notes--dark {
    color: #b8c4d1;
}

.pt-directive-recipe-directives {
    padding: 2.6rem 3.2rem 3.2rem;
}

.pt-directive-recipe-directives > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.pt-directive-used-item {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 4.4rem;
    padding: 0 1.2rem;
    border: 1px solid var(--pt-directive-border);
    border-radius: 4px;
    text-align: left;
    color: var(--pt-directive-text-body);
    background: #fff;
}

.pt-directive-used-item:hover {
    border-color: var(--pt-directive-theme-primary);
    color: var(--pt-directive-theme-primary);
}

.pt-directive-used-item code {
    color: inherit;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 1.15rem;
}

.pt-directive-used-item span {
    font-size: 1.3rem;
}

.pt-directive-search-empty,
.pt-directive-empty,
.pt-directive-noscript,
.pt-directive-plain-empty {
    color: var(--pt-directive-text-muted);
    font-size: 1.3rem;
    line-height: 1.7;
}

.pt-directive-search-empty {
    padding: 2rem 1.8rem;
}

.pt-directive-search-empty strong,
.pt-directive-search-empty span {
    display: block;
}

.pt-directive-search-empty strong {
    color: var(--pt-directive-text-title);
}

.pt-directive-search-empty span {
    margin-top: 0.5rem;
}

.pt-directive-empty,
.pt-directive-noscript {
    padding: 3rem;
    border: 1px solid var(--pt-directive-border);
    background: #fff;
}

.pt-directive-empty h2 {
    margin: 0;
    color: var(--pt-directive-text-title);
    font-size: 1.8rem;
    letter-spacing: 0;
}

.pt-directive-empty p {
    margin: 0.8rem 0 0;
}

.pt-directive-plain-empty {
    margin: 0;
    padding: 1.4rem;
}

.pt-directive-tool [hidden] {
    display: none !important;
}

.pt-directive-tool button:focus-visible,
.pt-directive-tool a:focus-visible,
.pt-directive-tool input:focus-visible,
.pt-directive-tool select:focus-visible,
.pt-directive-tool summary:focus-visible {
    outline: 3px solid rgba(23, 105, 194, 0.25);
    outline-offset: 2px;
}

@media (max-width: 1199px) {
    .pt-directive-detail {
        padding-right: 3rem;
        padding-left: 3rem;
    }

    .pt-directive-recipe-workspace {
        grid-template-columns: minmax(26rem, 0.78fr) minmax(34rem, 1.22fr);
    }

    .pt-directive-parameter-form,
    .pt-directive-recipe-output {
        padding-right: 2.4rem;
        padding-left: 2.4rem;
    }
}

@media (max-width: 991px) {
    .pt-directive-header__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .pt-directive-reference-layout,
    .pt-directive-recipes-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-directive-index {
        border-right: 0;
        border-bottom: 1px solid var(--pt-directive-border);
    }

    .pt-directive-index__list,
    .pt-directive-recipe-list {
        max-height: 30rem;
        min-height: 0;
    }

    .pt-directive-index__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1rem;
        padding: 1rem;
    }

    .pt-directive-index-group + .pt-directive-index-group {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .pt-directive-index-item,
    .pt-directive-recipe-list a {
        border-left: 0;
        border-radius: 4px;
    }

    .pt-directive-index-item.is-active,
    .pt-directive-recipe-list a.is-active {
        box-shadow: inset 3px 0 var(--pt-directive-theme-primary);
    }

    .pt-directive-recipe-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        padding: 1rem;
    }
}

@media (max-width: 767px) {
    .pt-directive-header {
        padding: 2.4rem 0;
    }

    .pt-directive-header__title h1 {
        font-size: 2.5rem;
    }

    .pt-directive-header__title p {
        font-size: 1.35rem;
    }

    .pt-directive-shell {
        padding-top: 1.6rem;
        padding-bottom: 3rem;
    }

    .pt-directive-tabs button {
        min-width: 0;
        flex: 1 1 50%;
        padding: 0 0.8rem;
    }

    .pt-directive-index__list,
    .pt-directive-recipe-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-directive-index-item {
        grid-template-columns: 9.5rem minmax(0, 1fr);
    }

    .pt-directive-detail {
        padding: 2.4rem 1.8rem 3rem;
    }

    .pt-directive-detail__header h2 {
        font-size: 2.3rem;
    }

    .pt-directive-facts {
        display: grid;
        gap: 0.8rem;
    }

    .pt-directive-section-heading {
        align-items: flex-start;
    }

    .pt-directive-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-directive-recipe-header,
    .pt-directive-recipe-directives {
        padding-right: 1.8rem;
        padding-left: 1.8rem;
    }

    .pt-directive-recipe-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-directive-parameter-form {
        border-right: 0;
        border-bottom: 1px solid var(--pt-directive-border);
    }

    .pt-directive-parameter-form,
    .pt-directive-recipe-output {
        padding: 2.4rem 1.8rem;
    }

    .pt-directive-code {
        padding: 1.4rem;
        font-size: 1.2rem;
    }

    .pt-directive-code--recipe {
        padding: 0;
    }

    .pt-directive-recipe-directives > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-directive-used-item {
        grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    }
}

@media (max-width: 420px) {
    .pt-directive-header__title h1 {
        font-size: 2.2rem;
    }

    .pt-directive-search input {
        font-size: 1.3rem;
    }

    .pt-directive-tabs button {
        font-size: 1.35rem;
    }

    .pt-directive-detail {
        padding-right: 1.4rem;
        padding-left: 1.4rem;
    }

    .pt-directive-copy-button {
        min-width: 3.4rem;
        padding: 0 0.8rem;
    }

    .pt-directive-copy-button span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-directive-tool *,
    .pt-directive-tool *::before,
    .pt-directive-tool *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}