@charset "UTF-8";

.tool-intro { padding-bottom: 36px; }
.tool-intro h1 { font-size: clamp(36px, 4.2vw, 58px); }
.tool-index { display: flex; align-items: center; gap: 20px; color: var(--secondary); padding-right: 16px; }
.tool-index>span:first-child { font-size: 72px; line-height: 1; font-weight: 200; letter-spacing: -.07em; color: #d2e5ff9c; }
.tool-index>span:last-child { font-size: 13px; }
.prompt-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 38px; padding: 0 26px; }
.prompt-workspace { min-width: 0; padding: 20px; background: linear-gradient(125deg, #243f6980, #183151a6); border: 1px solid #d3e6ff38; border-radius: 28px; box-shadow: inset 0 1px 1px #ffffff20; }
.category-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; gap: 4px; padding: 4px; margin: 0; min-width: 0; border: 1px solid #e0edff24; border-radius: 18px; background: #091a353b; }
.category-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.category-option { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 46px; padding: 9px; border-radius: 14px; font-size: 14px; color: #c7d6eb; cursor: pointer; transition: background .2s, color .2s; }
.category-option svg { width: 19px; height: 19px; }
.category-picker input:checked + label { color: #f4f8ff; background: linear-gradient(140deg, #bed9ff40, #a9c6f01f); box-shadow: inset 0 1px 1px #ffffff36, 0 2px 6px #08122230; }
.category-picker input:focus-visible + label { outline: 3px solid #bce8ff; outline-offset: 3px; }
.category-picker:disabled label { cursor: default; }
.prompt-result { min-height: 304px; padding: 27px 7px 16px; }
.prompt-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.prompt-topline .experience-tag { font-size: 12px; color: #c4d5eb; }
.prompt-mark { font-size: 29px; line-height: 1; color: #d5e9ffb3; }
.prompt-result h3 { font-size: clamp(25px, 2.7vw, 33px); font-weight: 550; line-height: 1.4; letter-spacing: -.025em; margin: 18px 0 13px; }
.prompt-result>p { font-size: 16px; color: #e1e9f6; line-height: 1.9; margin: 0; }
.prompt-constraint { margin-top: 22px; padding-left: 15px; border-left: 2px solid #b9d9ff66; }
.prompt-constraint>span { font-size: 12px; color: #bfd1e9; }
.prompt-constraint p { font-size: 14px; color: #d4e0f0; line-height: 1.85; margin: 5px 0 0; }
.prompt-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid #d2e4ff26; }
.prompt-actions>span { font-size: 12px; color: #bdcde3; }
.prompt-actions .launch-button { min-height: 54px; font-size: 15px; }
.prompt-actions .launch-button:disabled { cursor: default; opacity: .55; transform: none; }
.prompt-guide { padding: 17px 10px 0 0; }
.prompt-guide h3 { font-size: 26px; font-weight: 500; line-height: 1.6; letter-spacing: -.02em; margin: 8px 0 24px; }
.guide-steps { list-style: none; padding: 0; margin: 0; }
.guide-steps li { display: flex; gap: 15px; margin-top: 24px; }
.guide-steps li>span { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #d8e7ff38; border-radius: 11px; background: #dcecff0c; color: #c1d3ef; font-size: 11px; }
.guide-steps h4 { font-size: 15px; font-weight: 500; margin: 1px 0 5px; }
.guide-steps p { color: #c5d2e5; font-size: 14px; line-height: 1.85; margin: 0; }
.tool-privacy { margin: 26px 0 0; padding-top: 19px; border-top: 1px solid #ccddff26; font-size: 12px; color: #bccde3; line-height: 1.9; }
.tool-noscript { color: #e1ebf9; font-size: 14px; line-height: 1.9; margin: 22px 0 0; }
.prompt-library { padding-top: 65px; scroll-margin-top: 28px; }
.content-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.content-heading h2 { font-size: 28px; font-weight: 500; letter-spacing: -.025em; margin: 8px 0 0; }
.content-heading>p { font-size: 14px; line-height: 1.85; color: #c3d0e5; margin: 0; }
.library-group { margin-top: 14px; border: 1px solid #d4e5ff36; border-radius: 25px; background: linear-gradient(120deg, #c7daff0f, #d8e8ff08); backdrop-filter: blur(24px); overflow: hidden; }
.library-group summary { display: flex; align-items: center; gap: 17px; list-style: none; cursor: pointer; padding: 22px 25px; }
.library-group summary::-webkit-details-marker { display: none; }
.library-group summary:focus-visible { outline-offset: -5px; border-radius: 24px; }
.library-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; border: 1px solid #e1eeff35; flex-shrink: 0; }
.library-symbol svg { width: 23px; height: 23px; }
.library-group summary strong { display: block; font-size: 17px; font-weight: 500; }
.library-group summary span>span { display: block; color: #c0cee3; font-size: 13px; margin-top: 3px; }
.library-chevron { width: 19px; height: 19px; margin-left: auto; color: #bdcde5; transition: transform .2s; }
.library-group[open] .library-chevron { transform: rotate(90deg); }
.prompt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 38px; padding: 0 28px 14px 48px; margin: 0; }
.prompt-list li { padding: 20px 0; border-top: 1px solid #deebff26; }
.prompt-list li::marker { color: #adbed9; font-size: 12px; }
.prompt-list h3 { font-size: 18px; font-weight: 500; margin: 0 0 9px; }
.prompt-list p { font-size: 16px; line-height: 1.9; color: #dce5f3; margin: 0; }
.prompt-list small { display: block; color: #bfcee3; font-size: 14px; line-height: 1.85; margin-top: 12px; }
.practice-notes { padding-top: 55px; }
.practice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.practice-grid article { padding: 26px; border-radius: 25px; border: 1px solid #d6e5ff26; background: #c5dcff08; backdrop-filter: blur(24px); }
.practice-grid h3 { font-size: 22px; font-weight: 500; margin: 8px 0 15px; }
.practice-grid p { font-size: 16px; color: #cbd8eb; line-height: 1.95; }
.practice-grid p:last-child { margin-bottom: 0; }
.tool-faq { padding-block: 55px; }
.lab-return { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 28px; border-radius: 25px; border: 1px solid #d7e7ff3b; background: linear-gradient(115deg, #c4dcff16, #bad0ff08); margin-bottom: 48px; backdrop-filter: blur(20px); transition: background .2s; }
.lab-return:hover { background: #c4dcff20; }
.lab-return strong { font-size: 20px; font-weight: 500; }
.lab-return .launch-arrow { flex-shrink: 0; }

@media (max-width: 1050px) {
  .prompt-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding-inline: 20px; }
  .prompt-actions>span { display: none; }
  .prompt-actions { justify-content: flex-end; }
  .prompt-guide { padding-right: 0; }
  .tool-index { display: none; }
  .content-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 760px) {
  .tool-intro h1 { font-size: clamp(30px, 7.8vw, 48px); letter-spacing: -.045em; }
  .tool-intro { padding-bottom: 27px; }
  .prompt-layout { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; gap: 26px; }
  .prompt-studio .studio-header { padding: 21px 18px 18px; }
  .prompt-studio .studio-header h2 { font-size: 21px; }
  .prompt-studio .ready-badge { font-size: 10px; white-space: nowrap; }
  .prompt-workspace { border-radius: 23px; padding: 14px; }
  .category-option { min-height: 46px; font-size: 14px; gap: 7px; padding-inline: 5px; }
  .prompt-result { padding: 24px 3px 20px; min-height: 328px; }
  .prompt-result h3 { font-size: 27px; }
  .prompt-result>p { font-size: 16px; line-height: 1.9; }
  .prompt-constraint p { font-size: 14px; }
  .prompt-actions { padding-top: 17px; }
  .prompt-actions .launch-button { width: 100%; justify-content: space-between; min-height: 54px; font-size: 16px; }
  .prompt-guide { padding: 0 9px; }
  .prompt-guide h3 { font-size: 24px; margin: 8px 0 17px; }
  .prompt-guide h3 br { display: none; }
  .guide-steps li { margin-top: 18px; }
  .guide-steps p { font-size: 16px; }
  .tool-privacy { font-size: 13px; }
  .prompt-library { padding-top: 43px; }
  .content-heading { gap: 11px; margin-bottom: 19px; }
  .content-heading h2 { font-size: 25px; }
  .content-heading>p { font-size: 16px; }
  .content-heading>p br { display: none; }
  .library-group { border-radius: 22px; }
  .library-group summary { padding: 19px 16px; gap: 12px; }
  .library-group summary strong { font-size: 16px; }
  .library-group summary span>span { font-size: 12px; }
  .library-symbol { width: 39px; height: 39px; border-radius: 13px; }
  .library-chevron { width: 16px; height: 16px; }
  .prompt-list { grid-template-columns: minmax(0, 1fr); padding: 0 19px 8px 37px; }
  .practice-notes { padding-top: 39px; }
  .practice-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .practice-grid article { padding: 21px; }
  .practice-grid h3 { font-size: 20px; }
  .tool-faq { padding-block: 40px; }
  .lab-return { padding: 21px; gap: 14px; margin-bottom: 32px; }
  .lab-return strong { font-size: 17px; }
}
@media (max-width: 360px) {
  .prompt-studio .studio-header { align-items: flex-start; flex-direction: column; }
  .prompt-studio .ready-badge { align-self: flex-start; }
  .prompt-result h3 { font-size: 25px; }
  .library-group summary { gap: 9px; padding-inline: 12px; }
  .library-group summary span>span { font-size: 11px; }
}