.ctrls-diario{
  --ink:#321a12;
  --faded:#6c4634;
  --paper:#d7bd86;
  --paper-light:#ead8aa;
  --paper-dark:#9a7543;
  --leather:#2a120c;
  --gold:#9b6a24;
  position:relative;
  width:100%;
  min-height:var(--ctrls-diario-height,720px);
  padding:clamp(18px,4vw,58px);
  isolation:isolate;
  overflow:hidden;
  border-radius:10px;
  background:
    radial-gradient(circle at 18% 20%,rgba(150,72,31,.35),transparent 26%),
    radial-gradient(circle at 80% 75%,rgba(30,8,4,.6),transparent 32%),
    linear-gradient(145deg,#130806,#2b120c 45%,#0d0504);
  box-sizing:border-box;
}
.ctrls-diario *{box-sizing:border-box}
.ctrls-diario__aura{position:absolute;inset:8%;background:radial-gradient(ellipse,rgba(194,120,39,.17),transparent 66%);filter:blur(30px);z-index:-1;animation:ctrlsAura 5s ease-in-out infinite}
.ctrls-diario__book{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(1180px,100%);min-height:calc(var(--ctrls-diario-height,720px) - 116px);margin:auto;border:14px solid var(--leather);border-radius:18px 22px 22px 18px;box-shadow:0 38px 80px rgba(0,0,0,.62),inset 0 0 0 3px #6b3b22,inset 0 0 0 7px #180906;transform:perspective(1800px) rotateX(2deg)}
.ctrls-diario__book:before{content:"";position:absolute;inset:-9px;border:1px solid rgba(190,132,60,.45);border-radius:10px;pointer-events:none}
.ctrls-diario__spine{position:absolute;z-index:6;left:50%;top:0;bottom:0;width:38px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(51,24,13,.45),rgba(252,229,175,.22) 45%,rgba(51,24,13,.52));box-shadow:inset 8px 0 13px rgba(0,0,0,.25),inset -8px 0 13px rgba(0,0,0,.22);pointer-events:none}
.ctrls-diario__page{position:relative;overflow:hidden;padding:clamp(26px,4vw,64px);background-color:var(--paper);background-image:repeating-linear-gradient(0deg,transparent 0 34px,rgba(94,52,24,.10) 35px 36px),radial-gradient(circle at 30% 10%,rgba(255,255,255,.42),transparent 35%),linear-gradient(105deg,rgba(99,61,29,.12),transparent 25%,rgba(255,255,255,.15) 55%,rgba(92,54,27,.16));box-shadow:inset 0 0 70px rgba(75,39,17,.31)}
.ctrls-diario__page--left{border-radius:7px 0 0 7px;border-right:1px solid rgba(87,50,26,.25)}
.ctrls-diario__page--right{border-radius:0 7px 7px 0}
.ctrls-diario__page:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(circle at 10% 20%,#6b3c1e 0 1px,transparent 2px),radial-gradient(circle at 82% 68%,#6b3c1e 0 1px,transparent 2px);background-size:73px 61px,91px 87px;mix-blend-mode:multiply}
.ctrls-diario__corner{position:absolute;width:72px;height:72px;opacity:.62;border-color:var(--faded);z-index:2}.ctrls-diario__corner--tl{top:18px;left:18px;border-top:2px solid;border-left:2px solid;border-radius:18px 0 0}.ctrls-diario__corner--tr{top:18px;right:18px;border-top:2px solid;border-right:2px solid;border-radius:0 18px 0 0}.ctrls-diario__corner--bl{bottom:18px;left:18px;border-bottom:2px solid;border-left:2px solid;border-radius:0 0 0 18px}.ctrls-diario__corner--br{bottom:18px;right:18px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 18px}
.ctrls-diario__stain{position:absolute;border-radius:50%;filter:blur(2px);opacity:.18;background:radial-gradient(circle,rgba(87,42,15,.8),transparent 68%)}.ctrls-diario__stain--one{width:230px;height:230px;left:-90px;bottom:-70px}.ctrls-diario__stain--two{width:170px;height:170px;right:-50px;top:-45px}
.ctrls-diario__header{position:relative;z-index:3;text-align:center;color:var(--ink);margin-bottom:30px}.ctrls-diario__ornament{font-size:30px;color:var(--gold);text-shadow:0 1px 0 #f5dfad}.ctrls-diario__header h2{margin:6px 0 10px;font-family:"Segoe Print","Bradley Hand","Lucida Handwriting",cursive;font-size:clamp(30px,4vw,52px);font-weight:600;line-height:1.08;letter-spacing:.01em}.ctrls-diario__header p{max-width:500px;margin:auto;font-family:Georgia,serif;font-size:15px;font-style:italic;color:#6b432d}
.ctrls-diario__history{position:relative;z-index:3;max-height:440px;overflow:auto;padding:4px 10px 70px 2px;scrollbar-width:thin;scrollbar-color:#76502e transparent}
.ctrls-diario__entry{position:relative;margin:0 0 26px;color:var(--ink);font-family:"Segoe Print","Bradley Hand","Lucida Handwriting",cursive;font-size:clamp(17px,2vw,21px);line-height:1.65;transform:rotate(-.35deg)}
.ctrls-diario__entry--question{margin-left:12%;color:#5a2b1d;transform:rotate(.25deg)}
.ctrls-diario__entry small{display:block;margin-top:7px;font-size:12px;font-family:Georgia,serif;font-style:italic;opacity:.74}
.ctrls-diario__ink-line{white-space:pre-wrap}.ctrls-diario__ink-line.is-writing{animation:ctrlsInkBloom .8s ease both}
.ctrls-diario__writing-area{position:relative;z-index:3;display:flex;flex-direction:column;min-height:100%;padding-top:58px}
.ctrls-diario__textarea{width:100%;min-height:330px;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font-family:"Segoe Print","Bradley Hand","Lucida Handwriting",cursive;font-size:clamp(20px,2.3vw,27px);line-height:1.58;padding:0 8px;caret-color:#4b180e;text-shadow:0 .4px 0 rgba(45,14,5,.28)}
.ctrls-diario__textarea::placeholder{color:#805a43;opacity:.6;font-style:italic}
.ctrls-diario__counter{align-self:flex-end;font-family:Georgia,serif;font-size:12px;color:#76503a;margin:3px 8px 18px}
.ctrls-diario__submit{align-self:center;position:relative;border:1px solid #5d2b18;border-radius:999px;padding:13px 25px;background:linear-gradient(#6f3820,#39170e);color:#f2d9a2;font-family:Georgia,serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 7px 16px rgba(43,18,9,.32),inset 0 1px 0 rgba(255,255,255,.15);cursor:pointer;transition:.25s ease}.ctrls-diario__submit:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(43,18,9,.4),0 0 24px rgba(142,75,25,.24)}.ctrls-diario__submit:disabled{cursor:wait;opacity:.6;transform:none}.ctrls-diario__submit-icon{font-size:20px;margin-right:8px}
.ctrls-diario__status{min-height:24px;margin-top:15px;text-align:center;color:#6a3927;font-family:Georgia,serif;font-style:italic;font-size:13px}.ctrls-diario__status.is-thinking:after{content:"";display:inline-block;width:16px;animation:ctrlsDots 1.3s steps(4,end) infinite}
.ctrls-diario__seal{position:absolute;right:28px;bottom:24px;width:66px;height:66px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a33c2b,#5a100c 66%,#310805);box-shadow:0 5px 10px rgba(37,10,6,.35),inset 0 0 0 5px rgba(83,9,5,.7),inset 0 0 0 7px rgba(229,130,88,.2);color:#d39a72;font-family:Georgia,serif;font-weight:bold;transform:rotate(-10deg);z-index:3}
@keyframes ctrlsAura{50%{transform:scale(1.04);opacity:.7}}@keyframes ctrlsInkBloom{0%{opacity:0;filter:blur(4px);letter-spacing:.06em}100%{opacity:1;filter:blur(0);letter-spacing:normal}}@keyframes ctrlsDots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
@media(max-width:820px){.ctrls-diario{padding:14px;min-height:auto}.ctrls-diario__book{grid-template-columns:1fr;transform:none;min-height:auto;border-width:9px}.ctrls-diario__spine{display:none}.ctrls-diario__page{min-height:560px}.ctrls-diario__page--left{border-radius:6px 6px 0 0;border-right:0;border-bottom:1px solid rgba(87,50,26,.3)}.ctrls-diario__page--right{border-radius:0 0 6px 6px}.ctrls-diario__history{max-height:340px}.ctrls-diario__writing-area{padding-top:20px}.ctrls-diario__textarea{min-height:290px}.ctrls-diario__seal{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.ctrls-diario__aura,.ctrls-diario__ink-line.is-writing{animation:none}.ctrls-diario__submit{transition:none}}