*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:#E5E5E5;color:#434343;font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
img{max-width:100%}
a{color:#6F38A7}
.infografia{position:relative!important;overflow:hidden!important;width:100%!important;max-width:none!important;margin:0!important;background:#fff}
.copy-button{transition:transform .15s ease,background .15s ease}
.copy-button:active{transform:scale(.98)}
.prompt-text{scrollbar-width:thin}

/* Desktop reading width: section backgrounds remain full-bleed while content stays centered. */
@media (min-width:1025px){
  :root{--desktop-content-width:1000px;--desktop-gutter:max(64px,calc((100vw - var(--desktop-content-width))/2))}
  .cover-hero,.cover-question,.section,.closing-section{padding-left:var(--desktop-gutter)!important;padding-right:var(--desktop-gutter)!important}
  .book-cover{right:var(--desktop-gutter)!important}
  .line-bar span{left:var(--desktop-gutter)!important}
  .closing-grid > div:first-child{max-width:640px!important}
}

@media (max-width:1024px){
  .cover-hero{padding:64px 40px 88px!important}
  .cover-content{max-width:600px!important}
  .cover-title{font-size:58px!important}
  .book-cover{right:40px!important;width:180px!important}
  .cover-question{padding:48px 40px 56px!important}
  .section{padding-left:40px!important;padding-right:40px!important}
  .commitments-section{padding-bottom:72px!important}
  .commitments-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  .commitment-card{display:flex!important;flex-direction:column!important;grid-row:auto!important;grid-template-rows:none!important;margin-bottom:0!important}
  .prompt-grid{grid-template-columns:1fr!important}
  .closing-grid{grid-template-columns:minmax(0,1fr) 220px!important;gap:32px!important}
  .footer-grid{grid-template-columns:1fr 1fr!important}
}
@media (max-width:700px){
  body{background:#fff}
  .infografia{width:100%!important;max-width:none!important}
  .cover-hero{padding:36px 20px 40px!important;gap:32px!important}
  .cover-circle{width:160px!important;height:160px!important;right:-70px!important;top:-70px!important}
  .cover-logo{height:30px!important}
  .cover-content{gap:16px!important;max-width:none!important}
  .cover-title{font-size:42px!important;line-height:1.03!important;letter-spacing:-.015em!important}
  .cover-subtitle{font-size:20px!important;line-height:1.3!important}
  .cover-authors{font-size:13px!important;line-height:1.45!important}
  .book-cover{position:relative!important;right:auto!important;bottom:auto!important;width:138px!important;align-self:flex-end!important;margin-top:-10px!important;margin-bottom:-105px!important;z-index:3!important}
  .line-bar span{left:20px!important;font-size:11px!important;padding:5px 12px!important}
  .cover-question{padding:128px 20px 42px!important}
  .cover-question-text{font-size:23px!important;line-height:1.25!important;max-width:none!important}
  .section{padding:56px 20px!important;gap:32px!important}
  .commitments-section{padding-top:0!important;padding-bottom:56px!important}
  .section h2{font-size:31px!important;line-height:1.12!important}
  .section p{font-size:16px!important;line-height:1.55!important}
  .line-comparison{border-radius:18px!important}
  .line-panel{grid-template-columns:1fr!important;gap:22px!important;padding:26px 22px!important}
  .line-panel h3{font-size:21px!important}
  .line-panel span[style*="font-size:44px"]{font-size:36px!important}
  .line-divider span{font-size:11px!important;padding:5px 12px!important}
  .commitments-grid{grid-template-columns:1fr!important;gap:14px!important}
  .commitment-card{border-radius:14px!important}
  .commitment-card > div:first-child{padding:20px 20px 16px!important}
  .commitment-card > div:nth-child(3){padding:14px 20px 16px!important}
  .commitment-card > div:last-child{margin:0 10px 10px!important;padding:16px!important}
  .prompt-grid{grid-template-columns:1fr!important;gap:28px!important}
  .copy-link-row{flex-wrap:wrap!important;padding:10px!important}
  .copy-link-row > span:nth-child(2){flex:1 1 220px!important}
  .copy-link-button{width:100%!important;justify-content:center!important}
  .prompt-card{border-radius:14px!important}
  .prompt-card-header{padding:16px!important;align-items:flex-start!important;flex-direction:column!important}
  .copy-prompt-button{width:100%!important;justify-content:center!important}
  .prompt-text{height:440px!important;padding:18px!important;font-size:14px!important}
  .closing-section{border-radius:30px 30px 0 0!important;padding:56px 20px 28px!important;gap:40px!important}
  .closing-grid{grid-template-columns:1fr!important;gap:28px!important}
  .closing-grid h2{font-size:29px!important}
  .closing-grid p,.closing-grid span{font-size:18px!important}
  .closing-photo-wrap{display:none!important}
  .footer-grid{grid-template-columns:1fr!important;gap:28px!important;padding:24px!important;border-radius:18px!important}
}
@media (max-width:380px){
  .cover-title{font-size:37px!important}
  .section h2{font-size:28px!important}
  .cover-question-text{font-size:21px!important}
}

/* Prompt: code-like monospace typography */
.prompt-text{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important;
  letter-spacing:-0.01em;
}