.spiralNotebook{padding-left:26px;transition:opacity .8s,translate .8s cubic-bezier(.2,.8,.58,1);position:relative}.spiralNotebook[data-revealed=false]{opacity:0;translate:0 12px}.spiralCoils{z-index:2;pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;top:18px;bottom:18px;left:0}.spiralCoils span{border:2px solid var(--ink);background:linear-gradient(#fff 0 35%,#c9c7d1 36% 100%);border-radius:999px;width:54px;height:13px;position:relative;rotate:-3deg}.spiralCoils span:after{background:var(--ink);content:"";z-index:-1;border-radius:50%;width:11px;height:11px;position:absolute;top:50%;right:-9px;translate:0 -50%}.spiralPage{min-width:0;padding:30px 30px var(--spiral-page-bottom,34px) 66px;border:2px solid var(--ink);box-shadow:6px 7px 0 var(--ink);background-color:#fffdf6;background-image:linear-gradient(90deg,#0000 50px,#e2627a8c 50px 52px,#0000 52px),repeating-linear-gradient(#0000 0 31px,#70a4c461 31px 32px);background-position:0 0,0 14px;border-radius:6px 14px 14px 6px;position:relative}@media (max-width:900px){.spiralNotebook{padding-left:20px}.spiralCoils{top:14px;bottom:14px}.spiralCoils span{width:42px;height:11px}.spiralCoils span:after{width:9px;height:9px;right:-7px}.spiralPage{box-shadow:5px 6px 0 var(--ink);background-image:linear-gradient(90deg,#0000 34px,#e2627a8c 34px 36px,#0000 36px),repeating-linear-gradient(#0000 0 31px,#70a4c461 31px 32px);padding:24px 20px 28px 48px}}@media (max-width:380px){.spiralPage{padding:22px 14px 24px 42px}}