.sfwl {
    box-sizing: border-box;
    width: 100%;
    margin: 2rem 0;
    padding: clamp(1rem, 4vw, 2.5rem);
    border: 1px solid #d8c9b8;
    border-radius: 1.25rem;
    background: #fff7ea;
    color: #292219;
    font: 1rem/1.6 system-ui, sans-serif;
}
.sfwl [hidden] { display: none !important; }
.sfwl h2, .sfwl h3 { color: #352019; margin: 0; line-height: 1.2; }
.sfwl h2 { font: bold clamp(2rem, 6vw, 3.75rem)/1.1 Georgia, serif; }
.sfwl .sfwl-kicker { margin: 0 0 .4rem; font-size: .78rem; font-weight: 750; letter-spacing: .12em; color: #78351e; }
.sfwl .sfwl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .75rem; }
.sfwl label { display: grid; gap: .25rem; font-weight: 700; }
.sfwl select, .sfwl button {
    box-sizing: border-box;
    min-height: 44px;
    border: 1px solid #836c5c;
    border-radius: .5rem;
    padding: .45rem .75rem;
    background: #fff;
    color: #352019;
    font: inherit;
}
.sfwl select { width: 100%; }
.sfwl button { cursor: pointer; font-weight: 700; }
.sfwl button[data-action="generate"] { background: #85351f; border-color: #85351f; color: #fff; }
.sfwl button:hover { text-decoration: underline; }
.sfwl :is(button, select, a):focus-visible { outline: 3px solid #285989; outline-offset: 3px; }
.sfwl .sfwl-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.sfwl .sfwl-paper { margin-top: 1.25rem; padding: clamp(.85rem, 3vw, 1.5rem); border: 1px solid #d8c9b8; border-radius: .85rem; background: #fff; overflow-wrap: anywhere; }
.sfwl .sfwl-prompt { margin: .65rem 0 0; font: 1.2rem/1.55 Georgia, serif; }
.sfwl .sfwl-status { margin: .5rem 0 0; }
.sfwl .sfwl-status:empty { margin: 0; }
.sfwl .sfwl-submit { color: #78351e; font-weight: 750; text-decoration: underline; }