@charset "UTF-8";
:root {
  --tomato:#FF6347;
  --ghost:#F8F8FF;
  --accent:#b7412d;
  --ink:#352f32;
  --muted:#71676e;
  --line:#e8e4e8;
  --white:#fff;
  --soft:#fff0eb;
  font-family:"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  color:var(--ink);
  background:var(--ghost);
  font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; font-size:15px; line-height:1.6; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; }
button:disabled { opacity:.5; cursor:wait; }
button,a,summary,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid var(--tomato);
  outline-offset:4px;
}
[hidden] { display:none!important; }
.shell { width:min(1160px,100%); margin-inline:auto; padding-inline:32px; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; top:10px; left:10px; padding:12px; background:white; z-index:100; }
.site-header { background:var(--ghost); border-bottom:1px solid var(--line); }
.topbar { min-height:94px; display:flex; align-items:center; gap:34px; }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; font-weight:800; font-size:19px; letter-spacing:-.7px; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:43px; height:43px; flex-shrink:0; }
.brand-mark img, img.brand-mark { display:block; width:43px; height:43px; }
.modes { display:flex; align-self:stretch; align-items:stretch; gap:6px; }
.mode { display:flex; align-items:center; justify-content:center; min-width:54px; padding:0 11px; border:0; border-bottom:2px solid transparent; background:none; font-size:15px; font-weight:600; color:var(--muted); line-height:1; }
.mode.selected { color:var(--accent); border-bottom-color:var(--tomato); }
.mode:hover { color:var(--accent); }
.mode .icon { width:21px; height:21px; }
.header-controls { display:flex; align-items:center; gap:12px; margin-left:auto; }
.search-box { position:relative; width:260px; max-width:100%; height:42px; background:var(--white); border:1px solid #e1dde3; border-radius:8px; display:flex; align-items:center; }
.search-box>.icon { width:18px; height:18px; color:#81757d; position:absolute; left:12px; pointer-events:none; }
.search-box input { border:0; background:none; width:100%; height:100%; padding:0 38px; font-size:14px; min-width:0; outline-offset:3px; }
.search-box input::placeholder { color:#7c6d77; }
.search-box input::-webkit-search-cancel-button { display:none; }
.clear-search { position:absolute; right:4px!important; width:32px!important; height:32px!important; min-width:32px!important; }
.icon { display:block; flex-shrink:0; width:20px; height:20px; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:8px; width:40px; height:40px; flex-shrink:0; color:#8b7f88; padding:0; }
.icon-button:hover { background:var(--soft); color:var(--accent); }
.icon-button.favorite[aria-pressed=true] { color:var(--accent); }
.add-button { background:var(--tomato); color:#382324; width:42px; height:42px; }
.add-button:hover { background:#ff7f67; color:#382324; }
.subnav a { font-size:14px; color:var(--muted); text-decoration:none; }
.main { padding-top:30px; padding-bottom:60px; min-height:65vh; }
.section-heading { display:flex; align-items:center; gap:9px; margin:0 0 14px; }
.section-heading h2,.library-heading h2 { font-size:16px; margin:0; letter-spacing:-.3px; font-weight:700; }
.section-heading>span,.library-heading>span { font-size:13px; color:#7c6d77; }
.featured-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.featured-card { padding:17px 18px 12px; background:var(--white); border:1px solid var(--line); border-radius:10px; min-width:0; display:flex; flex-direction:column; }
.featured-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.category-label { font-size:12px; color:var(--muted); }
.featured-top .favorite { width:32px; height:32px; margin-top:-6px; margin-right:-7px; }
.featured-visual { display:flex; justify-content:center; align-items:center; height:104px; border-radius:7px; margin:8px 0 1px; background:#fff6f2; }
.tone-2 .featured-visual { background:#f9f2f3; }
.tone-3 .featured-visual { background:#f7f3f0; }
.tone-4 .featured-visual { background:#f7f2f7; }
.featured-visual .profile-art { width:96px; height:96px; }
.featured-card h3 { font-size:18px; line-height:1.5; letter-spacing:-.45px; margin:12px 0 7px; overflow-wrap:anywhere; }
.featured-card h3 a { text-decoration:none; }
.featured-card h3 a:hover { text-decoration:underline; text-underline-offset:4px; }
.featured-card>p { font-size:14px; color:var(--muted); margin:0 0 15px; line-height:1.7; overflow-wrap:anywhere; min-height:48px; }
.featured-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:8px; }
.featured-author { display:flex; align-items:center; gap:6px; font-size:12px; color:#7c6d77; }
.tiny-avatar { display:block; width:24px; height:24px; }
.tiny-avatar img { width:24px; height:24px; }
.featured-bottom .copy-button { width:34px; height:34px; }
.library { margin-top:34px; }
.library-heading { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:14px; min-height:36px; }
.filters { display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; align-items:center; }
.filter { background:transparent; border:0; border-radius:7px; min-height:34px; padding:6px 11px; font-size:13px; color:var(--muted); }
.filter:hover { color:var(--accent); background:var(--soft); }
.filter.active { color:var(--accent); background:var(--soft); font-weight:700; }
.prompt-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:30px; background:var(--white); border:1px solid var(--line); padding-inline:20px; align-items:start; border-radius:10px; }
.prompt-list:empty { display:none; }
#public-grid:not([hidden])+#local-grid:not([hidden]) { margin-top:16px; }
.prompt-card { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:14px; align-items:center; padding:25px 0; border-bottom:1px solid var(--line); min-width:0; }
.prompt-card[hidden] { display:none; }
.profile-art { position:relative; overflow:hidden; display:block; flex-shrink:0; width:72px; height:76px; }
.avatar { width:72px; height:76px; border-radius:12px; background-color:#fff4ef; }
.avatar.variant-2 { background-color:#fbf1f1; }
.avatar.variant-3 { background-color:#faf5f0; }
.avatar.variant-4 { background-color:#f7f1f7; }
.avatar img { width:48px; height:54px; }
.row-content { min-width:0; }
.row-meta { display:flex; align-items:center; gap:9px; flex-wrap:wrap; row-gap:2px; line-height:1.45; margin:0 0 6px; }
.author { font-size:12px; color:#7c6d77; }
.row-meta .category-label { font-size:12px; color:#7c6d77; }
.prompt-card h3 { font-size:17px; letter-spacing:-.4px; line-height:1.55; margin:0 0 5px; overflow-wrap:anywhere; }
.prompt-card h3 a { text-decoration:none; }
.prompt-card h3 a:hover,.title-button:hover { text-decoration:underline; text-underline-offset:4px; }
.title-button { border:0; padding:0; margin:0; font:inherit; letter-spacing:inherit; line-height:inherit; font-weight:inherit; background:none; text-align:left; }
.description { font-size:14px; color:var(--muted); line-height:1.75; margin:0; overflow-wrap:anywhere; }
.row-actions { display:flex; align-items:center; justify-content:flex-end; gap:2px; max-width:76px; }
.row-actions .icon-button { width:36px; height:38px; }
.row-actions .icon { width:19px; height:19px; }
.copy-button.copied { color:var(--accent); background:var(--soft); }
.personal .row-actions { display:grid; grid-template-columns:repeat(2,36px); gap:2px; }
.row-actions .minor-action { color:#897c86; height:28px; }
.minor-action .icon { width:16px; height:16px; }
.private-panel { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; padding:12px 16px; background:var(--soft); border:1px solid #ffe1d6; border-radius:8px; }
.private-panel p { margin:0; font-size:13px; color:#815f55; }
.backup-controls { display:flex; gap:18px; }
.text-button { display:inline-flex; align-items:center; gap:6px; font-size:13px; background:none; border:0; padding:4px 0; color:var(--accent); min-height:32px; }
.text-button .icon { width:17px; height:17px; }
.warning { padding:15px 17px; margin:15px 0; background:#fff0e1; color:#765036; font-size:13px; border-radius:8px; }
.empty { text-align:center; padding:32px 20px 42px; background:white; border:1px solid var(--line); border-radius:10px; }
.empty>img,.empty>.profile-art { display:block; margin:0 auto 14px; object-fit:contain; }
.empty>.profile-art { width:132px; height:132px; }
.empty h3 { font-size:17px; margin:0 0 7px; }
.empty p { font-size:14px; color:var(--muted); margin:0 0 19px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 19px; min-height:43px; border:1px solid transparent; border-radius:8px; font-size:14px; font-weight:700; background:var(--tomato); color:#382324; text-decoration:none; }
.button:hover { background:#ff7f67; }
.button .icon { width:18px; height:18px; }
.button.secondary { background:#fff; border-color:var(--line); color:var(--muted); }
.footer { padding-top:22px; padding-bottom:30px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font-size:12px; color:#7c6d77; }
.footer div { display:flex; gap:19px; }
.footer a { text-decoration:none; }
.footer a:hover { color:var(--accent); }
dialog { width:590px; max-width:calc(100% - 32px); max-height:calc(100% - 40px); padding:27px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:white; overflow:auto; box-shadow:0 16px 70px #302d3125; }
dialog::backdrop { background:#30252c66; }
dialog h2 { font-size:22px; letter-spacing:-.6px; margin:0 0 11px; }
.dialog-intro { font-size:13px; color:var(--muted); margin:7px 0 18px; }
.field { display:block; font-size:13px; font-weight:700; margin-top:16px; }
.field input,.field select,.field textarea { display:block; width:100%; padding:11px 12px; border:1px solid #ded7df; border-radius:7px; background:#fff; margin-top:7px; font-size:15px; }
.field textarea { min-height:190px; resize:vertical; line-height:1.7; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:23px; }
.error { font-size:13px; color:#a02722; min-height:19px; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; margin:-9px -9px 5px 0; }
.preview-category { font-size:12px; color:var(--accent); }
.preview-body,.prompt-body { white-space:pre-wrap; overflow-wrap:anywhere; font:15px/1.85 "Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif; background:var(--ghost); border:1px solid var(--line); padding:20px; border-radius:8px; margin:18px 0 0; }
.preview-body { max-height:55vh; overflow:auto; }
.preview-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:21px; }
.text-link { font-size:13px; color:var(--muted); }
.manual-text { width:100%; height:260px; padding:13px; font-size:15px; line-height:1.7; border:1px solid var(--line); border-radius:7px; resize:vertical; }
.clipboard-fallback { position:fixed; top:0; left:-9999px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:12px 19px; max-width:calc(100% - 30px); border-radius:8px; background:#3b2d31; color:white; font-size:13px; z-index:100; opacity:0; pointer-events:none; }
.toast.visible { opacity:1; }
.detail-main { max-width:810px; padding-top:36px; padding-bottom:65px; }
.breadcrumb { display:flex; gap:17px; margin-bottom:25px; font-size:13px; color:var(--muted); }
.breadcrumb a { text-decoration:none; }
.detail-author { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.detail-main h1 { font-size:30px; letter-spacing:-1px; line-height:1.4; margin:20px 0 11px; }
.detail-description { font-size:15px; color:var(--muted); margin:0; }
.detail-main .prompt-body { font-size:15px; padding:24px; margin:24px 0 19px; }
.detail-main h2 { font-size:18px; margin:33px 0 12px; }
.detail-main>p { color:var(--muted); font-size:14px; line-height:1.85; }
.detail-note { font-size:12px!important; }
.raw-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.related { display:flex; flex-wrap:wrap; gap:10px; }
.related a { font-size:13px; padding:9px 13px; border:1px solid var(--line); background:white; border-radius:7px; text-decoration:none; }
.prose { max-width:810px; margin:auto; padding:35px 0 60px; }
.prose h1 { font-size:30px; line-height:1.4; letter-spacing:-1px; margin:15px 0 24px; }
.prose h2 { font-size:20px; margin-top:33px; }
.prose h3 { font-size:17px; }
.prose p,.prose li { font-size:14px; line-height:1.9; color:#6b6167; }
.prose a { color:var(--accent); overflow-wrap:anywhere; }
.prose table { border-collapse:collapse; width:100%; font-size:13px; line-height:1.7; }
.prose th,.prose td { border:1px solid var(--line); padding:12px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.prose th { background:var(--soft); }
.eyebrow { font-size:11px; color:var(--accent); letter-spacing:1px; }
.note { padding:16px 19px; background:var(--soft); border-radius:8px; }
body.no-js .js-only { display:none!important; }
body.no-js .topbar { justify-content:space-between; }
.featured-card,.prompt-card,.button,.icon-button { transition:background-color .15s,color .15s; }
.featured-card:hover { border-color:#e7c9bf; }
.prompt-list[data-single="true"] { grid-template-columns:1fr; }
@media(max-width:1050px) {
  .topbar { gap:23px; }
  .header-controls .search-box { width:215px; }
  .brand { font-size:18px; }
  .modes { gap:1px; }
  .mode { min-width:48px; padding-inline:8px; }
  .featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-card>p { min-height:auto; }
  .prompt-list { column-gap:24px; padding-inline:18px; }
  .prompt-card { gap:11px; grid-template-columns:64px minmax(0,1fr) 36px; }
  .avatar { width:64px; height:72px; }
  .row-actions { flex-direction:column; gap:0; }
  .personal .row-actions { display:flex; max-width:36px; }
}
@media(max-width:880px) {
  .topbar { gap:18px; }
  .header-controls .search-box { width:180px; }
  .brand { font-size:17px; }
  .prompt-list { grid-template-columns:1fr; }
  .prompt-card { grid-template-columns:72px minmax(0,1fr) auto; gap:16px; padding-block:23px; }
  .avatar { width:72px; height:76px; }
  .row-actions { flex-direction:row; max-width:76px; }
  .personal .row-actions { display:grid; max-width:76px; }
}
@media(max-width:760px) {
  .shell { padding-inline:21px; }
  .topbar { display:grid; grid-template-columns:1fr auto; gap:0; min-height:0; padding-top:13px; padding-bottom:17px; }
  .brand { font-size:19px; }
  .header-controls { display:contents; }
  .add-button { grid-column:2; grid-row:1; }
  .modes { grid-column:1 / -1; grid-row:2; min-height:49px; gap:6px; justify-self:start; margin-top:6px; }
  .mode { min-width:56px; padding-inline:12px; }
  .search-box { grid-column:1 / -1; grid-row:3; width:100%!important; margin-top:11px; }
  .main { padding-top:25px; }
  .featured-grid { gap:12px; }
  .featured-card { padding:14px 15px 10px; }
  .featured-card h3 { font-size:17px; margin-top:11px; }
  .featured-card>p { font-size:14px; margin-bottom:11px; min-height:47px; }
  .featured-author { font-size:12px; }
  .library { margin-top:28px; }
  .filters { width:100%; margin:9px 0 0; gap:2px; }
  .filter { padding-inline:10px; }
  .prompt-list { padding-inline:17px; }
  .private-panel { align-items:flex-start; flex-wrap:wrap; gap:8px; }
  .footer { gap:13px; flex-wrap:wrap; }
  dialog { padding:22px; }
  .detail-main { padding-top:25px; }
  .detail-main h1,.prose h1 { font-size:27px; }
  .prose table { font-size:12px; }
  .prose th,.prose td { padding:8px; }
}
@media(max-width:480px) {
  .shell { padding-inline:17px; }
  .brand { font-size:18px; gap:8px; }
  .brand-mark,.brand-mark img,img.brand-mark { width:40px; height:40px; }
  .featured-card { padding-inline:12px; }
  .featured-visual { height:90px; }
  .featured-visual .profile-art { width:86px; height:86px; }
  .featured-card h3 { font-size:16px; }
  .featured-card>p { font-size:13px; min-height:66px; }
  .featured-author { font-size:11px; }
  .prompt-list { padding-inline:14px; }
  .prompt-card { grid-template-columns:56px minmax(0,1fr) 34px; gap:11px; padding-block:22px; }
  .avatar { width:56px; height:64px; }
  .row-actions,.personal .row-actions { display:flex; flex-direction:column; max-width:34px; gap:0; }
  .row-actions .icon-button { width:34px; height:36px; }
  .row-actions .minor-action { height:28px; }
  .row-meta { gap:6px; }
  .row-meta .category-label { font-size:11px; }
  .prompt-card h3 { font-size:17px; }
  .description { font-size:14px; }
  .backup-controls { gap:15px; }
  .preview-body,.prompt-body { padding:16px; }
}
@media(max-width:350px) {
  .featured-grid { grid-template-columns:1fr; }
  .featured-card>p { min-height:auto; }
  .featured-author { font-size:12px; }
  .prompt-card { gap:9px; grid-template-columns:50px minmax(0,1fr) 32px; }
  .avatar { width:50px; height:58px; }
  .brand { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }
.prompt-assist-line{display:flex;align-items:center;gap:7px;margin:-5px 0 16px;color:var(--muted);font-size:12px;line-height:1.6}
.prompt-field-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.assist-copy{flex-shrink:0;width:32px;height:32px;min-height:32px;color:var(--accent);border:1px solid var(--line);border-radius:7px;background:var(--white)}
.assist-copy:hover,.assist-copy:focus-visible{border-color:var(--tomato);background:var(--soft)}
.assist-copy .icon{width:17px;height:17px}
