.custom-instruction-maker { max-width:none; margin:0; }
.custom-instruction-maker__intro p { margin:0; text-align:left; }.custom-instruction-maker__intro p + p { margin-top:.55rem; color:var(--muted); }.custom-instruction-maker__step-label { color:var(--teal); font-size:.8rem; font-weight:800; letter-spacing:.12em; }
.custom-instruction-maker__privacy,.custom-instruction-maker__panel { margin-top:1.5rem; padding:clamp(1.25rem,3vw,2.25rem); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 8px 26px rgba(23,32,51,.04); }.custom-instruction-maker__privacy { background:var(--soft); }.custom-instruction-maker__privacy p { margin:.25rem 0; text-align:left; }.custom-instruction-maker__panel h2 { margin:.35rem 0 1.5rem; padding:0; border:0; font-size:clamp(1.35rem,3vw,1.85rem); line-height:1.45; text-align:left; }
.custom-instruction-maker__terms { margin-top:1.5rem; padding:clamp(1.25rem,3vw,2rem); border:1px solid #e6b8be; border-radius:var(--radius); background:#f8e7e9; box-shadow:0 8px 26px rgba(105,39,50,.06); text-align:left; }.custom-instruction-maker__terms h2 { margin:0 0 .75rem; padding:0; border:0; color:#8f3542; font-size:clamp(1.15rem,2.5vw,1.4rem); line-height:1.45; }.custom-instruction-maker__terms ul { margin:0; padding:1rem 1rem 1rem 2.4rem; border:1px solid #efd5d9; border-radius:.55rem; background:#fff; }.custom-instruction-maker__terms li + li { margin-top:.55rem; }
.custom-instruction-maker__purpose-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.custom-instruction-maker__purpose { display:flex; min-height:13rem; flex-direction:column; gap:.75rem; padding:1.25rem; border:1px solid #bfd4d6; border-radius:.65rem; background:#fff; color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:.18s ease; }.custom-instruction-maker__purpose strong { color:var(--teal-deep); font-size:1.08rem; }.custom-instruction-maker__purpose span { color:var(--muted); font-size:.9rem; line-height:1.7; }.custom-instruction-maker__purpose:hover,.custom-instruction-maker__purpose:focus-visible { border-color:var(--teal); background:#eef7f4; box-shadow:0 8px 20px rgba(15,61,77,.12); transform:translateY(-2px); }
.custom-instruction-maker__progress-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.custom-instruction-maker__progress-head p { margin:0; }.custom-instruction-maker__progress { height:.6rem; overflow:hidden; margin:0 0 1.8rem; border-radius:99px; background:#dce8e5; }.custom-instruction-maker__progress span { display:block; width:0; height:100%; border-radius:inherit; background:var(--teal); transition:width .2s ease; }
.custom-instruction-maker__question { min-width:0; padding:0; margin:0; border:0; }.custom-instruction-maker__question legend { width:100%; font-size:clamp(1.2rem,2.7vw,1.55rem); font-weight:800; line-height:1.55; text-align:left; }.custom-instruction-maker__question > p { color:var(--muted); text-align:left; }.custom-instruction-maker__options { display:grid; gap:.7rem; }.custom-instruction-maker__option { position:relative; display:flex; align-items:flex-start; gap:.75rem; padding:1rem; border:1px solid #bfd4d6; border-radius:.5rem; background:#fff; cursor:pointer; text-align:left; }.custom-instruction-maker__option:hover,.custom-instruction-maker__option:focus-within { border-color:var(--teal); background:#f4fbf9; }.custom-instruction-maker__option input { width:1.2rem; height:1.2rem; flex:none; margin:.27rem 0 0; accent-color:var(--teal); }.custom-instruction-maker__option span { line-height:1.65; }.custom-instruction-maker__custom-input { width:100%; margin-top:.75rem; padding:.75rem; border:1px solid #9eb7b4; border-radius:.45rem; color:var(--ink); font:inherit; }.custom-instruction-maker__custom-input:focus-visible { outline:3px solid var(--lime); outline-offset:2px; }.custom-instruction-maker__error,.custom-instruction-maker__warning { min-height:1.75em; margin:.75rem 0 0; color:#b42318; font-weight:700; text-align:left; }
.custom-instruction-maker__actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1.75rem; }.custom-instruction-maker__button { min-height:2.8rem; padding:.6rem 1rem; border:1px solid var(--action); border-radius:.45rem; background:var(--action); color:#fff; font:inherit; font-weight:750; cursor:pointer; }.custom-instruction-maker__button:hover,.custom-instruction-maker__button:focus-visible { background:var(--teal-deep); }.custom-instruction-maker__button--secondary { background:#fff; color:var(--action); }.custom-instruction-maker__output-label { display:block; margin:1.25rem 0 .6rem; font-weight:800; text-align:left; }.custom-instruction-maker textarea { display:block; width:100%; resize:vertical; padding:1rem; border:1px solid #9eb7b4; border-radius:.5rem; background:#fff; color:var(--ink); font:inherit; line-height:1.75; text-align:left; }.custom-instruction-maker textarea:focus-visible { outline:3px solid var(--lime); outline-offset:2px; }.custom-instruction-maker__count { margin:.75rem 0 0; font-weight:700; text-align:left; }.custom-instruction-maker__guide { margin-top:2rem; padding:1.25rem; border-radius:.5rem; background:var(--soft); }.custom-instruction-maker__guide h3 { margin:0; }.custom-instruction-maker__guide ol { margin-bottom:0; }.custom-instruction-maker__note { color:var(--muted); font-size:.9rem; text-align:left; }
.custom-instruction-maker__question > .custom-instruction-maker__error { color:#b42318; }.custom-instruction-maker__error:empty { display:none; }.custom-instruction-maker__actions--question { display:grid; justify-items:start; gap:1rem; margin-top:10px; }.custom-instruction-maker__actions-primary { display:flex; flex-wrap:wrap; gap:.75rem; }.custom-instruction-maker__actions--question [data-maker-next] { box-sizing:border-box; min-width:12rem; flex:0 0 auto; white-space:nowrap; }
@media (max-width:46rem) { .custom-instruction-maker__purpose-grid { grid-template-columns:1fr; }.custom-instruction-maker__purpose { min-height:0; }.custom-instruction-maker__actions { align-items:stretch; }.custom-instruction-maker__button { width:100%; }.custom-instruction-maker__actions--question .custom-instruction-maker__button { width:auto; }.custom-instruction-maker__actions--question [data-maker-next] { min-width:12rem; }.custom-instruction-maker__actions--result [data-maker-copy-status] { width:100%; } }