:root{--ink:#36515c;--blue:#9ddbe7;--mint:#bfe5d0;--lime:#dceaa8;--paper:rgba(250,254,252,.91);--line:#c7dde0;--accent:#4da8b5}*{box-sizing:border-box}body{margin:0;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;color:var(--ink);background:#edf7f5;min-height:100vh}.bg{position:fixed;inset:0;background:linear-gradient(90deg,rgba(238,249,247,.98) 0%,rgba(238,249,247,.91) 45%,rgba(238,249,247,.38) 100%),url('assets/character.jpg') right center/auto 100% no-repeat;z-index:-1}header{text-align:center;padding:28px 16px 18px}h1{margin:0;font-size:clamp(25px,5vw,43px);letter-spacing:.04em}.tag{margin:7px 0 13px;font-weight:800;color:#679ba3}.tag span,footer span{color:#73a852}.credits{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.credits a{font-size:12px;text-decoration:none;color:#57717b;background:rgba(255,255,255,.72);padding:5px 9px;border-radius:999px;border:1px solid #d6e7e6}main{width:min(940px,94%);margin:auto;padding-bottom:70px}.card,.category{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;margin:12px 0;box-shadow:0 7px 22px rgba(66,112,117,.08);backdrop-filter:blur(5px)}input,textarea{width:100%;border:1px solid #c6dcdd;border-radius:13px;padding:12px;background:rgba(255,255,255,.9);color:var(--ink);font:inherit}button,.filebtn{border:1px solid #bad7d9;background:#f8fcfb;color:var(--ink);padding:9px 13px;border-radius:12px;font-weight:700;cursor:pointer}.primary{background:linear-gradient(135deg,#9fdde7,#c9e9bf);border-color:#a8d4d3}.pot,.row,.actions,.tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pot{margin-top:12px}.pot span{margin-left:auto;font-size:13px}.pot strong{min-width:25px;text-align:center}.section-title{font-weight:900;font-size:18px;margin-bottom:12px}.sub{margin-top:18px;font-size:15px}.category summary{cursor:pointer;font-weight:900;font-size:18px;list-style:none}.category summary::-webkit-details-marker{display:none}.category summary:after{content:'＋';float:right}.category[open] summary:after{content:'−'}.cattools{display:flex;align-items:center;gap:7px;margin:13px 0 8px;font-size:13px}.words{display:flex;gap:8px;flex-wrap:wrap}.word{min-width:92px;padding:8px 10px;background:#f7fbfa}.word small{display:block;font-size:10px;color:#789095;margin-top:3px}.word.selected{background:#c8eadb;border-color:#65a9a1;box-shadow:inset 0 0 0 1px #65a9a1}.word.selected:before{content:'✓ ';font-weight:900}.chips{display:flex;flex-wrap:wrap;gap:7px;min-height:25px;margin-bottom:12px}.chip{background:#dff0ec;border:1px solid #b7d8d1;padding:6px 9px;border-radius:999px;font-size:13px}.chip b{cursor:pointer;margin-left:5px}.card label{display:block;margin:9px 0}.card label input[type=radio],.card label input[type=checkbox]{width:auto}.wide{width:100%;margin:8px 0 10px}.result textarea{margin-top:10px;min-height:220px}.tab.active{background:#c8e8e8;border-color:#77b4b8}.filebtn input{display:none}footer{text-align:center;padding:25px;color:#6d9095}@media(max-width:650px){.bg{background:linear-gradient(rgba(239,249,247,.88),rgba(239,249,247,.94)),url('assets/character.jpg') 67% top/auto 70vh no-repeat fixed}header{padding-top:20px}.credits{gap:5px}.credits a{font-size:10px}.card,.category{border-radius:17px;padding:13px}.word{flex:1 1 29%;min-width:88px}.pot span{margin-left:0}.actions>*{flex:1 1 42%}}

footer .hashtag{color:#73a852;font-weight:800;text-decoration:none;border-bottom:1px dashed #91b96f}footer .hashtag:hover{color:#4f8835}

/* v3: Crepi refresh - light, playful, and uncluttered */
h1{display:flex;justify-content:center;align-items:baseline;gap:.28em;flex-wrap:wrap}
.title-main{color:#4f9eaa;font-weight:900}
.title-sub{font-size:.72em;font-weight:800;color:#526d76;letter-spacing:.06em}
header:after{content:'';display:block;width:58px;height:4px;margin:14px auto 0;border-radius:99px;background:linear-gradient(90deg,#9ddbe7,#bfe5d0,#e9e7a8)}
.card,.category{box-shadow:0 6px 18px rgba(66,112,117,.065)}
.primary{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.primary:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(77,168,181,.15);filter:saturate(1.04)}
.create-btn{text-transform:none;letter-spacing:.04em;padding-inline:20px;background:linear-gradient(135deg,#a9dfe8,#cce9c2)}
.section-title{color:#496872}
@media(max-width:650px){h1{gap:.18em}.title-sub{font-size:.67em}.create-btn{flex:1 1 100%}}

/* v4: title treatment + clickable top hashtag */
header h1{
  position:relative;
  width:fit-content;
  margin:0 auto;
  padding:14px 28px 15px;
  border:1px solid rgba(143,202,208,.72);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(231,248,245,.82));
  box-shadow:0 8px 24px rgba(70,130,136,.09);
}
header h1:before,header h1:after{
  content:'✦';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#a5c86f;
  font-size:.42em;
}
header h1:before{left:10px}
header h1:after{right:10px}
.title-main{
  color:#438f9c;
  text-shadow:0 2px 0 rgba(255,255,255,.9);
}
.title-sub{color:#526d76}
header:after{margin-top:10px;width:76px;height:3px}
.tag{margin-top:10px}
.top-hashtag{
  display:inline-block;
  margin-left:.35em;
  color:#73a852;
  font-weight:900;
  text-decoration:none;
  border-bottom:1px dashed #91b96f;
  transition:transform .15s ease,color .15s ease;
}
.top-hashtag:hover{color:#4f8835;transform:translateY(-1px)}
@media(max-width:650px){
  header h1{padding:12px 23px 13px;border-radius:20px}
  header h1:before{left:8px}
  header h1:after{right:8px}
}

/* v5 */
.bg{background:#edf7f5;overflow:hidden}
.bg::after{content:'';position:absolute;inset:0;background:url('assets/character.jpg') right center/auto 100% no-repeat;opacity:.46;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 53%,rgba(0,0,0,.12) 61%,rgba(0,0,0,.55) 73%,#000 88%);mask-image:linear-gradient(90deg,transparent 0%,transparent 53%,rgba(0,0,0,.12) 61%,rgba(0,0,0,.55) 73%,#000 88%)}
.prompt-header{padding:34px 16px 22px}.prompt-kicker{display:inline-flex;align-items:center;margin-bottom:5px;padding:5px 12px;border:1px solid rgba(100,174,183,.38);border-radius:999px;background:rgba(255,255,255,.58);color:#6c9ca3;font-size:11px;font-weight:900;letter-spacing:.16em}
header h1{display:flex;justify-content:center;align-items:baseline;gap:.25em;flex-wrap:wrap;width:auto;margin:0 auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
header h1:before,header h1:after{content:none}.title-main{color:#368d9c;font-size:1.08em;font-weight:950;text-shadow:0 2px 0 rgba(255,255,255,.95)}.title-sub{font-size:.68em;color:#3f5964;font-weight:900;letter-spacing:.035em}header:after{content:none;display:none}.tag{margin:5px 0 0}
.pot .create-btn,.top-reset{white-space:nowrap}.top-reset{background:rgba(255,255,255,.76)}
.actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.actions>button,.actions>.filebtn{width:100%;height:48px;min-height:48px;padding:8px 10px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap}
footer{display:flex;flex-direction:column;align-items:center;gap:14px}.footer-credits{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.footer-credits a{font-size:12px;text-decoration:none;color:#57717b;background:rgba(255,255,255,.72);padding:6px 10px;border-radius:999px;border:1px solid #d6e7e6}.footer-credits a:hover{border-color:#9fcacc;background:rgba(255,255,255,.9)}.footer-tag{font-weight:700}
@media(max-width:650px){.bg::after{background-position:67% top;background-size:auto 70vh;opacity:.24;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 82%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 82%)}.prompt-header{padding:24px 14px 16px}.prompt-kicker{font-size:9px}header h1{padding:0}.title-main{font-size:1em}.title-sub{font-size:.64em}.pot .create-btn,.pot .top-reset{flex:1 1 45%}.actions{grid-template-columns:repeat(2,minmax(0,1fr))}.actions>*{width:100%}.footer-credits{gap:6px}.footer-credits a{font-size:10px}}


/* v6 header refinement */
.prompt-header{
  padding:34px 16px 24px;
  text-align:center;
}
.prompt-kicker{
  /* 丸枠は使わず、LET'S CREATE! / #クリエピをタイトル上へ */
  display:none !important;
}
.prompt-header .tag{
  order:-1;
  margin:0 0 10px;
  color:#5b9ca7;
  font-size:14px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.prompt-header{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.prompt-header h1{
  order:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.28em;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  font-family:"Arial Black","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:clamp(34px,4vw,58px);
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:900;
}
.prompt-header .tag{order:-1}
.title-main,.title-sub{
  font:inherit !important;
  font-size:1em !important;
  letter-spacing:inherit !important;
  font-weight:900 !important;
}
.title-main{
  color:#2d94a3;
  text-shadow:3px 3px 0 rgba(255,255,255,.88);
}
.title-sub{
  color:#273b46;
  text-shadow:3px 3px 0 rgba(255,255,255,.88);
}
.top-hashtag{
  color:#72a94c;
  text-decoration:none;
  border-bottom:1px dashed #93b96e;
}

/* 背景画像の左境界を広い範囲でぼかす */
.bg::after{
  inset:0 !important;
  background-position:right center !important;
  opacity:.48 !important;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    transparent 49%,
    rgba(0,0,0,.02) 55%,
    rgba(0,0,0,.08) 61%,
    rgba(0,0,0,.20) 68%,
    rgba(0,0,0,.42) 76%,
    rgba(0,0,0,.72) 86%,
    #000 96%
  ) !important;
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    transparent 49%,
    rgba(0,0,0,.02) 55%,
    rgba(0,0,0,.08) 61%,
    rgba(0,0,0,.20) 68%,
    rgba(0,0,0,.42) 76%,
    rgba(0,0,0,.72) 86%,
    #000 96%
  ) !important;
}

@media(max-width:650px){
  .prompt-header{padding:24px 12px 18px}
  .prompt-header .tag{font-size:11px;margin-bottom:8px}
  .prompt-header h1{
    font-size:clamp(27px,8.2vw,38px);
    gap:.18em;
    letter-spacing:-.05em;
  }
  .bg::after{
    opacity:.25 !important;
    background-position:70% top !important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.12) 68%,transparent 88%) !important;
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.12) 68%,transparent 88%) !important;
  }
}


/* v7: TOPへ戻る */
.prompt-header{position:relative}
.back-to-top{
  position:absolute;
  left:clamp(16px,3vw,42px);
  top:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  height:38px;
  padding:0 14px;
  border:1px solid #b8d9dc;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:#46636d;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-decoration:none;
  box-shadow:0 5px 18px rgba(55,104,112,.07);
  backdrop-filter:blur(6px);
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.back-to-top:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.96);
  border-color:#83bdc2;
}
@media(max-width:650px){
  .back-to-top{
    position:static;
    align-self:flex-start;
    margin:0 0 12px 2px;
    min-width:68px;
    height:34px;
    padding:0 12px;
    font-size:12px;
  }
}