/* O caderno: mesa, orelhinhas, folhas pautadas, espiral, efeito de virar a página e avisos. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--desk);color:var(--ink);font-family:var(--f-body);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px dashed var(--pen-blue);outline-offset:3px}
.hand{font-family:var(--f-hand)}

.stage{height:100%;display:flex;flex-direction:column;align-items:center;padding-inline:16px;padding-block:calc(10px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-bottom,0px))}
.tabs{display:flex;gap:5px;width:100%;max-width:560px;padding-left:30px;position:relative;z-index:1}
.tab{flex:1;height:38px;border:0;border-radius:12px 12px 0 0;background:var(--c);color:#2A2A2A;font-family:var(--f-hand);font-size:21px;font-weight:700;line-height:1;transform:translateY(7px);filter:saturate(.75) brightness(.93);transition:transform .2s,filter .2s;box-shadow:inset 0 -6px 8px -6px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;padding:0 4px}
.tab[aria-current="page"]{transform:none;filter:none;box-shadow:none}
.tab .badge{font-family:var(--f-body);font-size:11px;font-weight:700;background:var(--pen-red);color:#fff;border-radius:99px;padding:1px 6px;line-height:16px}
.book{position:relative;flex:1;width:100%;max-width:560px;min-height:0;z-index:2}
.book::before,.book::after{content:"";position:absolute;border-radius:3px 8px 8px 3px}
.book::after{inset:4px -4px -4px 4px;background:var(--paper-edge);z-index:-1}
.book::before{inset:8px -8px -8px 8px;background:var(--paper-edge2);z-index:-2;box-shadow:0 18px 30px -12px rgba(0,0,0,.45)}

.page{position:absolute;inset:0;background:var(--paper);border-radius:2px 7px 7px 2px;overflow:hidden;user-select:none;-webkit-user-select:none;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.page::before{content:"";position:absolute;left:0;top:0;bottom:0;width:26px;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 13px 13px,var(--desk) 0 4.6px,rgba(0,0,0,.18) 5.2px,transparent 6.2px) 0 0/26px 26px repeat-y}
.page::after{content:"";position:absolute;top:0;bottom:0;left:42px;width:1.6px;background:var(--margin);z-index:3;pointer-events:none}
.inner{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;padding:62px 16px 56px 52px;font-size:16.5px;line-height:28px;
  background:linear-gradient(to bottom,var(--paper) 0 62px,transparent 62px),repeating-linear-gradient(to bottom,transparent 0 27px,var(--rule) 27px 28px);
  background-attachment:local,local;background-position:0 0,0 6px}
.inner input{user-select:text;-webkit-user-select:text}
.phead{display:flex;justify-content:space-between;align-items:flex-end;margin-top:-50px;height:40px;margin-bottom:10px;font-family:var(--f-hand);font-size:20px;color:var(--pencil)}
.pnum{position:absolute;right:16px;bottom:10px;font-family:var(--f-hand);font-size:19px;color:var(--pencil);z-index:3;pointer-events:none}

.fx{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:6}
.rings{position:absolute;left:-13px;top:0;bottom:0;width:32px;z-index:8;pointer-events:none}
.ring{position:absolute;left:0;width:28px;height:9px;border-radius:6px;background:linear-gradient(180deg,var(--ring2) 0 35%,var(--ring1));box-shadow:0 2px 2px rgba(0,0,0,.35)}
.nudge{position:absolute;left:50%;bottom:52px;z-index:9;transform:translateX(-50%) rotate(-2deg);background:var(--postit-pink);color:#2A2A2A;font-family:var(--f-hand);font-size:23px;font-weight:700;padding:8px 16px;box-shadow:0 8px 12px -8px rgba(0,0,0,.45);white-space:nowrap;pointer-events:none}
.shake{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}100%{transform:none}}

@media (min-width:760px){
  .stage{flex-direction:row;justify-content:center;align-items:stretch;padding-block:24px}
  .book{max-width:600px;max-height:900px;align-self:center;height:100%}
  .tabs{order:2;flex-direction:column;width:auto;max-width:none;padding:48px 0 0;gap:8px;align-self:center;height:100%;max-height:900px}
  .tab{flex:none;width:44px;height:118px;border-radius:0 14px 14px 0;writing-mode:vertical-rl;transform:translateX(-7px);box-shadow:inset 6px 0 8px -6px rgba(0,0,0,.25)}
  .tab[aria-current="page"]{transform:translateX(0)}
  .inner{padding-left:60px;padding-right:28px}
}
@media (max-width:380px){.inner{font-size:15.5px}.tab{font-size:18px}.title{font-size:32px;line-height:38px}}
@media (prefers-reduced-motion:reduce){.grade .circ{stroke-dashoffset:0}.shake{animation:none}}