/* Create page layout, based on the supplied visual reference. */
body:has(#createView:not(.hidden))::before {
    left: auto;
    right: max(32px, calc((100% - 1480px)/2));
    transform: scale(.90);
    transform-origin: top right;
}
.create-site-nav,.create-bookshelf-link{display:none}
/* Create header — visually match the public marketing navigation. */
body:has(#createView:not(.hidden)) header{
    border-bottom:0;
    display:grid;
    grid-template-columns:240px 1fr 240px;
    align-items:center;
    gap:0;
}
body:has(#createView:not(.hidden)) .main-nav,
body:has(#createView:not(.hidden)) header .privacy{display:none}
body:has(#createView:not(.hidden)) .create-site-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:48px;
    height:100%;
    margin:0;
}
.create-site-nav a{
    position:relative;
    color:#eee0dd;
    text-decoration:none;
    font-size:15px;
    font-weight:400;
    padding:36px 0 14px;
    white-space:nowrap;
}
.create-site-nav a.active{color:#ffd2c8}
.create-site-nav a.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:9px;
    height:2px;
    background:#e9a08f;
}
body:has(#createView:not(.hidden)) .header-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:12px;
}
body.signed-in:has(#createView:not(.hidden)) #accountButton{display:none}
body.signed-in:has(#createView:not(.hidden)) .create-bookshelf-link{display:inline-flex}
.create-bookshelf-link,body:has(#createView:not(.hidden)) #accountButton{
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,221,213,.30);
    background:rgba(10,8,9,.46);
    border-radius:13px;
    padding:13px 24px;
    color:#f6e9e6;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:.2s;
}
.create-bookshelf-link:hover,body:has(#createView:not(.hidden)) #accountButton:hover{
    transform:translateY(-1px);
    border-color:rgba(255,221,213,.55);
}
#createView .hero{padding-top:58px;padding-bottom:72px;min-height:390px}
#createView .hero .eyebrow{font-size:12px;letter-spacing:2.5px}
#createView .hero h1 {
    font: 400 clamp(42px, 6.5vw, 86px)/0.98 'Libre Baskerville', Georgia, serif;
    letter-spacing: -2.2px;
    margin: 18px 0 30px;
}
#createView .hero h1 em{font-weight:500;color:#f4aaa0;font-style: normal;}
#createView .hero p{max-width:510px;font-size:16px;line-height:1.55;margin-bottom:0}
#createView .create-trust {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 30px;
    color: #d9aaa3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

#createView .creator{width:min(calc(100% - 64px),1480px);max-width:none;margin:0 auto 48px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#createView .create-panel{padding:24px 30px;border:1px solid rgba(224,153,144,.48);border-radius:18px;background:linear-gradient(135deg,rgba(37,18,22,.78),rgba(15,9,11,.9) 65%,rgba(78,34,34,.65));box-shadow:inset 0 -2px 6px rgba(224,145,133,.08);margin-bottom:18px}
#createView .section-head{align-items:center;gap:24px;margin-bottom:22px}
#createView .section-head>span{width:55px;height:55px;font:500 30px 'Cormorant Garamond',Georgia,serif;background:radial-gradient(circle,rgba(165,81,70,.16),transparent);border-color:rgba(229,157,147,.5);color:#efaaa1}
#createView .section-head h2{font:500 clamp(29px,3.6vw,42px)/1.1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.6px;margin:0 0 4px}
#createView .section-head p{font-size:13px;line-height:1.5;color:#c9b8b4}
#createView .character-grid{gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
#createView .character-card{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;padding:14px;background:rgba(9,6,8,.7);border:1px solid #443034;border-radius:12px}
.character-portrait{display:block;min-height:130px;border-radius:8px;background-position:center top;background-repeat:no-repeat;background-size:cover}
.portrait-one{background-image:url('/images/characterOne.jpeg')}
.portrait-two{background-image:url('/images/characterTwo.jpeg')}
.character-fields{min-width:0}
#createView .character-card b{display:block;font:600 9px 'DM Sans',sans-serif;letter-spacing:2px;margin:4px 0 10px}
#createView .character-card textarea{height:100px;min-height:100px;margin:0;padding:10px 12px;font:12px/1.55 'DM Sans',sans-serif;border-radius:8px;background:rgba(12,8,10,.65)}
#createView .third-character-wrap{margin-top:14px}
#createView .add-character{padding:8px 20px;border:1px solid #bd817b;border-radius:99px;font-size:12px;background:linear-gradient(110deg,rgba(203,120,108,.22),transparent);color:#f1dcd5}
#createView .add-character span{color:#a28c89}
#createView .third-character{display:block;margin-top:12px}
.create-inspiration{margin-top:12px;color:#ad9690;font-size:12px}
.create-inspiration summary{cursor:pointer;width:fit-content}
#createView .inspire-strip{margin:12px 0 0}
.scene-fields{display:grid;gap:14px}
#createView .scene-field{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;border:1px solid #443034;border-radius:12px;background:rgba(8,6,8,.68)}
.field-icon{width:32px;flex:none;text-align:center;font:28px/1.3 Georgia,serif;color:#e9a397}
.field-content{display:block;min-width:0;flex:1}
#createView .field-content>span,#createView .custom-style,#createView .intensity-label,#createView .field-title{font:400 15px/1.4 'Cormorant Garamond',Georgia,serif;letter-spacing:0;color:#f8e9e2}
#createView .scene-field input,#createView .scene-field textarea{margin:2px 0 0;padding:0;border:0;border-radius:0;background:transparent;font:12px/1.55 'DM Sans',sans-serif;color:#f3e3df}
#createView .scene-field textarea{height:70px;min-height:70px}
#createView .scene-field:focus-within{border-color:#e9a08f;box-shadow:0 0 0 3px rgba(233,160,143,.1)}
#createView .scene-field input:focus,#createView .scene-field textarea:focus{box-shadow:none}
#createView .field-title{margin:26px 0 10px}
#createView .field-title small{font:11px 'DM Sans',sans-serif;color:#ad9690}
#createView .moods{gap:8px}
#createView .moods button{padding:8px 15px;font-size:11px;border-color:#63423f;background:rgba(8,6,7,.5);color:#eededa}
#createView .moods button.active{background:linear-gradient(120deg,#ffd3c8,#edaaa0);color:#1b1010;border-color:#efafa5;box-shadow:0 3px 15px rgba(227,151,139,.2)}
#createView .custom-style{margin:28px 0 20px}
#createView .custom-style textarea{height:56px;min-height:56px;margin-top:8px;font:12px/1.55 'DM Sans',sans-serif;padding:10px 14px;background:rgba(8,6,8,.65);border-color:#443034}
#createView .intensity-label select{margin-top:8px;background:rgba(8,6,8,.65);font:14px 'DM Sans',sans-serif;border-color:#443034}
#createView #generate{min-width:300px;margin:34px auto 0;padding:17px 30px;border-radius:99px;font-size:16px;background:linear-gradient(110deg,#ffd4c9,#e99090);box-shadow:0 8px 28px rgba(224,135,127,.15)}
#createView #generate span{margin-left:12px}
#createView .fine{font-size:11px;color:#a68d86;margin:20px 0 10px}
#createView .privacy-lock{width:17px;height:17px;vertical-align:middle;margin-right:7px;fill:none;stroke:currentColor;stroke-width:1.4}
@media(min-width:1500px){#createView .hero{padding-top:54px;padding-bottom:45px}#createView .hero p{max-width:600px}}
@media(max-width:850px){
 body:has(#createView:not(.hidden))::before{right:18px}
 body:has(#createView:not(.hidden)) header{grid-template-columns:auto 1fr auto;gap:12px}
 body:has(#createView:not(.hidden)) .create-site-nav{gap:28px}
 #createView .creator{width:calc(100% - 36px)}
 #createView .hero{padding-top:30px}
 #createView .hero p{max-width:470px}
 #createView .character-grid{grid-template-columns:1fr}
 #createView .create-panel{padding:22px}
}
@media(max-width:560px){
 body:has(#createView:not(.hidden))::before{right:12px}
 #createView .creator{width:calc(100% - 24px)}
 #createView .hero{padding-top:24px;padding-bottom:28px}
 #createView .hero h1{font-size:42px}
 #createView .hero p{font-size:14px}
 #createView .create-panel{padding:18px 14px}
 #createView .section-head{gap:14px;align-items:flex-start}
 #createView .section-head>span{width:42px;height:42px;font-size:25px}
 #createView .section-head h2{font-size:29px}
 #createView .section-head p{font-size:12px}
 #createView .character-card{grid-template-columns:74px minmax(0,1fr);gap:10px;padding:10px}
 #createView .moods{gap:7px}#createView .moods button{padding:8px 11px}
 #createView #generate{min-width:0;width:100%}
 #createView .scene-field textarea{height:115px}
 .create-site-nav a{font-size:12px}
 body:has(#createView:not(.hidden)) .create-site-nav{gap:22px}
}

/* Refine create-page section numbers and location marker */
#createView .section-head>span{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1}
#createView .field-icon.location-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Create hero: extra breathing room on desktop; image scaled down from top-right. */
@media(min-width:1500px){
    #createView .hero{
        padding-top:90px;
        padding-bottom:88px;
        min-height:520px
    }
     #createView .hero h1{
        font-size:70px;
    }
}
@media(max-width:850px){#createView .hero{min-height:350px;padding-bottom:58px}}
@media(max-width:560px){body:has(#createView:not(.hidden))::before{transform:none}#createView .hero{min-height:0;padding-bottom:42px}}

#createView .section-head>span>i {
    font-style: normal;
    position: relative;
    top: -4px;
}

#createView .hero h1 {
    font-size: clamp(36px, 4.5vw, 72px) !important;
}
/* Quiet clear control in the top-right of the inspiration panel. */
#createView .inspire-strip{position:relative;}
#clearInspiration.clear-inspiration{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid rgba(233,160,143,.3);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:#c9a09d;
  font:400 22px/1 'DM Sans',sans-serif;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
#clearInspiration.clear-inspiration:hover,
#clearInspiration.clear-inspiration:focus-visible{
  background:rgba(233,160,143,.12);
  border-color:rgba(233,160,143,.65);
  color:#fff;
}
#clearInspiration.hidden{display:none!important;}

/* Keep the circular Clear control; make room by nudging Inspire Me left. */
#createView .inspire-action .inspire-button{
  transform:translateX(-48px);
}
@media(max-width:560px){
  /* On phones, keep the action compact and centred below the heading. */
  #createView .inspire-action .inspire-button{
    transform:none;
    width:min(100%, 320px);
    max-width:calc(100% - 24px);
    margin-inline:auto;
    align-self:center;
  }
}

/* The clear control is an icon-only circle; prevent inherited button text/layout rules from overflowing. */
#clearInspiration.clear-inspiration{min-width:30px;max-width:30px;flex:0 0 30px;overflow:hidden;white-space:nowrap;line-height:1;}
#clearInspiration.clear-inspiration span{display:block;font:400 22px/1 "DM Sans",sans-serif;}