html{visibility:hidden} html.on{visibility:visible} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased;overflow-x:hidden} :root{color-scheme:light; --paper:#f5f0e6; --paper-shadow:#e8e0d2; --ink:#1c1815; --ink-faded:#4a433c; --ink-light:#5e554d; --red-margin:#c45; --red-note:#b84040; --rule:#d6cfc4; --annotation:#b84040; --green:#3a6b4a; --green-light:#d4e8da; --blue:#3a5a8b; --tape:rgba(228,218,198,0.55); --tape-border:rgba(190,178,155,0.35); --pin:#8b4513; --spiral:#8a8278; --printout-bg:#fffdf9; --printout-border:#bfb6aa; --ctrl-border:#ccc; --ctrl-bg:white; --clip-metal:#b0a898; --note-red:#9f2f2f; --wave-bg:#faf7f2; --life-border:#ddd; --canvas-ink:#3a3530; --canvas-rule:#e0dcd4; --canvas-grid:#c8c0b0; } html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--paper); color:var(--ink); font-family:'Lora',Georgia,'Times New Roman',serif; font-size:14px; line-height:1.65; overflow-x:hidden; min-height:100vh;min-height:100dvh; position:relative; } body::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background-image:repeating-linear-gradient( to bottom, transparent,transparent 25px, var(--rule) 25px,var(--rule) 26px ); background-position:0 0; opacity:.5; } body::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .spiral{ position:fixed;left:0;top:0;bottom:0;width:52px;z-index:20; pointer-events:none; background:linear-gradient(90deg,var(--paper-shadow) 0%,var(--paper) 100%); border-right:1px solid var(--rule); } .spiral-ring{ position:absolute; left:50%;transform:translateX(-50%); width:22px;height:22px; border:3px solid var(--spiral); border-radius:50%; background:var(--paper); box-shadow:inset 0 1px 2px rgba(0,0,0,.1); } .margin-line{ position:fixed;left:68px;top:0;bottom:0;width:2px; background:var(--red-margin);opacity:.35; z-index:10;pointer-events:none; } .page{ position:relative;z-index:1; width:100%;min-height:100%; max-width:940px; margin:0 auto; overflow:visible; } h1,h2,h3,h4{ font-family:'Caveat','Lora',serif; font-weight:700; color:var(--ink); line-height:1.2; } h1{font-size:clamp(2.6rem,7vw,4.2rem)} h2{font-size:clamp(1.4rem,3.5vw,2rem);margin-bottom:.3em} h3{font-size:1.5rem;margin-bottom:.25em} p{margin-bottom:1em;color:var(--ink)} strong{font-weight:700} em{font-style:italic} a{color:var(--blue);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s} a:hover{border-bottom-color:var(--blue)} code{ font-family:'IBM Plex Mono',monospace; background:var(--paper-shadow); padding:.1em .35em; border-radius:3px; font-size:.85em; color:var(--red-note); } .hw{font-family:'Caveat',cursive;color:var(--annotation);font-weight:600;letter-spacing:.01em;margin-top:.6em} .hw-blue{font-family:'Caveat',cursive;color:var(--blue);font-weight:500} .hw-green{font-family:'Caveat',cursive;color:var(--green);font-weight:500} .divider{ border:none;height:16px; margin:1.5rem 0; background:url("data:image/svg+xml,%3Csvg width='400' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8 Q50 4 100 8 Q150 12 200 8 Q250 6 300 8 Q350 10 400 8' fill='none' stroke='%23c4bdb3' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; } .washi{ display:block; height:28px; margin:1.5rem 0; position:relative; border-radius:1px; opacity:.75; background-size:18px 18px; } .washi.red{ background-color:rgba(184,64,64,0.12); background-image: repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(184,64,64,0.08) 4px,rgba(184,64,64,0.08) 5px); } .washi.blue{ background-color:rgba(58,90,139,0.12); background-image: repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(58,90,139,0.08) 4px,rgba(58,90,139,0.08) 5px); } .washi.green{ background-color:rgba(58,107,74,0.12); background-image: repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(58,107,74,0.07) 3px,rgba(58,107,74,0.07) 4px); background-size:12px 12px; } .washi.gold{ background-color:rgba(180,150,60,0.12); background-image: repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(180,150,60,0.08) 8px,rgba(180,150,60,0.08) 9px); } .washi.teal{ background-color:rgba(0,128,128,0.10); background-image: repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(0,128,128,0.06) 5px,rgba(0,128,128,0.06) 6px); } .entry{ padding:2.5rem 0; position:relative; } .dog-ear::after{ content:'';position:absolute; top:0;right:0; width:0;height:0; border-style:solid; border-width:0 28px 28px 0; border-color:transparent var(--paper-shadow) transparent transparent; filter:drop-shadow(-1px 1px 1px rgba(0,0,0,.06)); } .dog-ear::before{ content:'';position:absolute; top:0;right:28px; width:28px;height:28px; background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.02) 50%); border-bottom-left-radius:3px; } .entry-date{ font-family:'Caveat',cursive; font-size:1rem; color:var(--ink-light); margin-bottom:.35em; } .entry-tag{ display:inline-block; font-family:'Caveat',cursive; font-size:.82rem; color:var(--annotation); padding:.1rem .5rem; border:1px dashed var(--annotation); border-radius:2px; margin-bottom:.6em; letter-spacing:.03em; } .entry-body{font-size:.98rem;line-height:1.7;color:var(--ink);overflow-wrap:break-word} .entry-body p{margin-bottom:1em} .underline{border-bottom:2px solid var(--red-note);padding-bottom:1px} .underline-blue{border-bottom:2px solid var(--blue);padding-bottom:1px} .wavy-underline{ text-decoration:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 2 Q2 0 4 2 Q6 4 8 2' fill='none' stroke='%23b84040' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat:repeat-x; background-position:0 100%; background-size:8px 4px; padding-bottom:4px; } .drop-cap::first-letter{ float:left; font-family:'Caveat',cursive; font-size:3.6rem; line-height:0.8; padding-right:.15em; padding-top:.05em; color:var(--ink); font-weight:400; } .circle{ border:2px solid var(--red-note); border-radius:255px 15px 225px 15px/15px 225px 15px 255px; padding:1px 6px; display:inline; } .hl{ background:linear-gradient(180deg,transparent 55%,rgba(230,210,80,.35) 55%,rgba(230,210,80,.35) 90%,transparent 90%); padding:0 2px; } .strike{ text-decoration:line-through; text-decoration-color:var(--annotation); text-decoration-thickness:1.5px; color:var(--ink-light); opacity:.7; } .strike-correct{ font-family:'Caveat',cursive; font-size:.82rem; color:var(--annotation); margin-left:.3em; } .pencil{ font-family:'Caveat',cursive; font-size:.92rem; color:rgba(80,76,70,0.92); font-style:italic; } .redact{ background:#1c1815; color:transparent; padding:1px 4px; border-radius:2px; cursor:help; transition:background .4s ease,color .4s ease; position:relative; user-select:none; } .redact:hover{ background:transparent; color:var(--ink); user-select:auto; } .tab{ display:inline-block; position:absolute; top:-14px; right:20px; width:48px; height:18px; border-radius:3px 3px 0 0; z-index:6; box-shadow:0 -1px 3px rgba(0,0,0,.08); } .tab::after{ content:attr(data-label); font-family:'IBM Plex Mono',monospace; font-size:.5rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.9); position:absolute; bottom:2px; left:0;right:0; text-align:center; } .tab.red{background:#b84040} .tab.blue{background:#3a5a8b} .tab.green{background:#3a6b4a} .tab.gold{background:#8b6914} .margin-note{ position:absolute; left:-90px; top:0; width:82px; font-family:'Caveat',cursive; font-size:1rem; color:var(--annotation); line-height:1.3; text-align:right; } .title-page{ padding:5rem 0 3rem; text-align:center; position:relative; } .title-page h1{ font-size:clamp(3rem,9vw,5rem); margin-bottom:.2em; color:var(--ink); position:relative; display:inline-block; } .title-page h1::after{ content:'';position:absolute; bottom:-4px;left:10%;right:10%;height:3px; background:var(--ink);opacity:.15; transform:rotate(-0.5deg); } .title-page .intro{ font-family:'Caveat',cursive; font-size:1.55rem; color:var(--ink-faded); max-width:620px; margin:1rem auto 0; line-height:1.5; } .title-page .meta-row{ margin-top:1.5rem; font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--ink-light); display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap; } .meta-row a{color:var(--ink-light);text-decoration:none;transition:color .15s} .meta-row a:hover{color:var(--ink)} .coffee-stain{ position:absolute; width:115px;height:108px; border-radius:48% 52% 47% 53% / 50% 48% 52% 47%; top:18px;right:35px; pointer-events:auto;cursor:default; transform:rotate(14deg); transition:transform 2s cubic-bezier(.4,0,.2,1); background:radial-gradient(ellipse at 48% 52%, transparent 36%, rgba(155,115,55,0.03) 40%, rgba(155,115,55,0.07) 48%, rgba(155,115,55,0.11) 56%, rgba(155,115,55,0.07) 64%, rgba(155,115,55,0.03) 72%, transparent 80% ); box-shadow:inset 0 0 0 1px rgba(155,115,55,0.05),0 1px 2px rgba(155,115,55,0.04); } .coffee-stain::after{ content:'';position:absolute; bottom:-11px;left:32%; width:2.5px;height:13px; background:linear-gradient(to bottom,rgba(140,100,50,0.10),rgba(140,100,50,0.03),transparent); border-radius:0 0 2px 2px; transform:rotate(6deg); } .coffee-stain:hover{transform:rotate(374deg)} .tape{ position:relative; } .tape::before{ content:'';position:absolute; top:-7px;left:50%; transform:translateX(-50%) rotate(-1.5deg); width:70px;height:16px; background:var(--tape); border:1px solid var(--tape-border); z-index:5; border-radius:1px; } .tape-right::before{ left:65%;transform:translateX(-50%) rotate(2deg); } .pin{ position:relative; } .pin::before{ content:'';position:absolute; top:-6px;left:50%;transform:translateX(-50%); width:12px;height:12px; background:radial-gradient(circle at 40% 35%,#d4956a,var(--pin)); border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,.2); z-index:5; } .paperclip{ position:relative; } .paperclip::before{ content:'';position:absolute; top:-18px;right:24px; width:18px;height:42px; border:2px solid var(--clip-metal); border-radius:9px 9px 0 0; border-bottom:none; transform:rotate(8deg); z-index:5; opacity:.7; } .paperclip::after{ content:'';position:absolute; top:-10px;right:28px; width:10px;height:30px; border:2px solid var(--clip-metal); border-radius:5px 5px 0 0; border-bottom:none; transform:rotate(8deg); z-index:6; opacity:.7; } .sticky-note{ display:inline-block; position:relative; background:linear-gradient(135deg,#fff9c4 0%,#fff176 100%); padding:.7rem .9rem; font-family:'Caveat',cursive; font-size:1.15rem; color:#4a4030; max-width:200px; line-height:1.4; box-shadow:2px 3px 8px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08); transform:rotate(-1.5deg); margin:1rem .5rem; vertical-align:top; } .sticky-note::before{ content:'';position:absolute; top:0;left:0;right:0;height:6px; background:rgba(0,0,0,.04); border-radius:2px 2px 0 0; } @media(min-width:641px){.title-page .sticky-note{float:right;margin-left:1.5rem;margin-bottom:.5rem;max-width:180px}} .stamp{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:rgba(130,38,33,0.95); border:2.5px solid rgba(130,38,33,0.80); padding:.15rem .55rem; transform:rotate(-3.5deg); vertical-align:middle; user-select:none; position:relative; } .stamp::after{ content:''; position:absolute; inset:-1px; border:1px solid rgba(130,38,33,0.15); pointer-events:none; } .stamp{transition:transform .3s,opacity .3s;cursor:default} .stamp:hover{transform:rotate(0deg)!important;opacity:1} .wax-seal{ display:inline-block; width:52px;height:52px; border-radius:50%; background:radial-gradient(circle at 38% 35%,#c04a3a,#8b2e22 55%,#5c1a14); box-shadow:1px 2px 6px rgba(0,0,0,.18),inset 0 -2px 4px rgba(0,0,0,.2),inset 0 2px 4px rgba(255,180,140,.25); position:relative; text-align:center; line-height:52px; color:rgba(255,220,200,.7); font-family:'Caveat',cursive; font-size:1.4rem; user-select:none; vertical-align:middle; flex-shrink:0; } .wax-seal::before{ content:''; position:absolute; inset:3px; border-radius:50%; border:1.5px solid rgba(255,200,170,.2); pointer-events:none; } .wax-seal::after{ content:''; position:absolute; width:110%;height:110%; top:-5%;left:-5%; border-radius:50%; background:radial-gradient(circle,transparent 42%,rgba(90,20,15,.08) 60%,transparent 62%); pointer-events:none; } .wax-seal{transition:transform .4s;cursor:default} .wax-seal:hover{animation:seal-wobble .6s ease} @keyframes seal-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-2deg)}} .bracket{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:rgba(58,90,139,.7); letter-spacing:.04em; user-select:none; } .splat{ position:fixed;pointer-events:none;z-index:9999; border-radius:50%;background:var(--ink); opacity:.6; animation:splat-out .8s ease-out forwards; } @keyframes splat-out{ 0%{transform:scale(1);opacity:.6;} 100%{transform:scale(3);opacity:0;} } #progress{ transform-origin:left; position:fixed;top:0;left:0;height:2px; background:var(--ink); width:100%;z-index:10000; transform:scaleX(0);transition:transform .15s linear; } .lab-box{ background:var(--paper); border:1px solid var(--rule); border-radius:3px; padding:1.5rem; margin:1.5rem 0; box-shadow:2px 3px 8px rgba(0,0,0,.04); position:relative; } .lab-label{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink-light); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.8rem; } .tone-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; margin:1rem 0; } .key{ font-family:'Caveat',cursive; background:var(--paper); border:2px solid var(--rule); border-radius:4px; padding:.7rem .4rem; cursor:pointer; text-align:center; transition:all .1s; user-select:none; -webkit-tap-highlight-color:transparent; font-size:1.25rem; font-weight:600; color:var(--ink); position:relative; } .key:hover{border-color:var(--green);background:var(--green-light)} .key:active,.key.on{ background:var(--green); border-color:var(--green); color:white; transform:scale(.95); } .key .hz{ display:block; font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--ink-light); margin-top:.15rem; font-weight:400; } .key.on .hz{color:rgba(255,255,255,.7)} #wave{ width:100%;height:90px; border-radius:3px; background:var(--wave-bg); display:block; margin:.8rem 0; border:1px solid var(--rule); } .wave-info{ font-family:'Caveat',cursive; font-size:1rem; color:var(--ink-light); } .chord-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem} .chord{ font-family:'Caveat',cursive; font-size:1.1rem;font-weight:600; padding:.3rem .8rem; background:transparent; border:2px dashed var(--green); border-radius:4px; color:var(--green); cursor:pointer; transition:all .1s; -webkit-tap-highlight-color:transparent; } .chord:hover{background:var(--green);color:white;border-style:solid} .printout{ background:var(--printout-bg); border:1px solid var(--printout-border); border-left:3px solid var(--note-red); padding:1.2rem 1.2rem 1.2rem 1.4rem; margin:1.5rem 0; box-shadow:1px 2px 8px rgba(0,0,0,.08); transform:none; position:relative; max-width:100%; overflow:hidden; } .printout::before{ content:''; position:absolute; top:6px;right:8px; width:18px;height:18px; border:1.5px solid rgba(180,140,100,.12); border-radius:50%; pointer-events:none; } .printout::after{ content:''; position:absolute; bottom:8px;left:10px; width:14px;height:14px; border:1px solid rgba(180,140,100,.08); border-radius:50%; pointer-events:none; } .printout-label{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink); border-bottom:1px dashed var(--printout-border); padding-bottom:.4rem; margin-bottom:.8rem; text-transform:uppercase; letter-spacing:.1em; } .printout canvas{ display:block; max-width:100%; margin-left:auto; margin-right:auto; image-rendering:auto; } .printout .ctrl, .printout button, .printout select, .printout input{ filter:none; } #life{ width:100%; background:white; display:block; cursor:crosshair; touch-action:none; border:1px solid var(--life-border); image-rendering:pixelated; } .ctrls input[type="range"]{vertical-align:middle;touch-action:manipulation} .ctrls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0;max-width:100%} .ctrl{ touch-action:manipulation; font-family:'Caveat',cursive; font-size:1.1rem;font-weight:600; padding:.3rem .8rem; background:var(--ctrl-bg); border:2px solid var(--ctrl-border); border-radius:4px; color:var(--ink); cursor:pointer; transition:all .1s; white-space:nowrap; } .ctrl:hover{border-color:var(--ink);color:var(--ink)} .ctrl.go{background:var(--green);border-color:var(--green);color:white} .nb-btn{ touch-action:manipulation; font-family:'Caveat',cursive; font-size:1.1rem;font-weight:600; padding:.3rem .8rem; background:var(--ctrl-bg); border:2px solid var(--ctrl-border); border-radius:4px; color:var(--ink); cursor:pointer; transition:all .1s; white-space:nowrap; } .nb-btn:hover{border-color:var(--ink);color:var(--ink)} .stats{ font-family:'IBM Plex Mono',monospace; font-size:.84rem; color:var(--ink); margin-top:.4rem; } .stats span{color:var(--green);font-weight:600} .printout-note{ font-family:'Caveat',cursive; font-size:1.05rem; color:var(--note-red); margin-top:.5rem; max-width:600px; line-height:1.6} .odd-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; margin-top:1.5rem; } .odd-card{ border-radius:3px; padding:1.2rem 1rem; position:relative; box-shadow:1px 2px 6px rgba(0,0,0,.05); transition:transform .2s; } .odd-card:nth-child(1){background:#fffde7;transform:rotate(-0.7deg)} .odd-card:nth-child(2){background:#f3f0ff;transform:rotate(0.5deg)} .odd-card:nth-child(3){background:#e8f5e9;transform:rotate(-0.3deg)} .odd-card:nth-child(4){background:#fff3e0;transform:rotate(0.8deg)} .odd-card:nth-child(5){background:#fce4ec;transform:rotate(-0.5deg)} .odd-card:nth-child(6){background:#e0f7fa;transform:rotate(0.3deg)} .odd-card:nth-child(7){background:#fff8e1;transform:rotate(-0.6deg)} .odd-card:nth-child(8){background:#f3e5f5;transform:rotate(0.4deg)} .odd-card:nth-child(9){background:#e8eaf6;transform:rotate(-0.2deg)} .odd-card:nth-child(10){background:#efebe9;transform:rotate(0.6deg)} .odd-card:nth-child(11){background:#e0f2f1;transform:rotate(-0.4deg)} .odd-card:nth-child(12){background:#fce4ec;transform:rotate(0.2deg)} .odd-card:nth-child(13){background:#f1f8e9;transform:rotate(-0.5deg)} .odd-card:nth-child(14){background:#fffde7;transform:rotate(0.7deg)} .odd-card:nth-child(15){background:#fff3e0;transform:rotate(-0.6deg)} .odd-card:nth-child(16){background:#e8eaf6;transform:rotate(0.3deg)} .odd-card:nth-child(17){background:#f1f8e9;transform:rotate(-0.4deg)} .odd-card:nth-child(18){background:#e8f5e9;transform:rotate(0.6deg)} .odd-card:nth-child(19){background:#fff8e1;transform:rotate(-0.3deg)} .odd-card:nth-child(20){background:#fce4ec;transform:rotate(0.5deg)} .odd-card:nth-child(21){background:#e3f2fd;transform:rotate(-0.6deg)} .odd-card:nth-child(22){background:#fff3e0;transform:rotate(0.4deg)} .odd-card:hover{transform:rotate(0deg) scale(1.02)!important} .odd-label{ font-family:'IBM Plex Mono',monospace; font-size:.7rem;font-weight:500; letter-spacing:.1em;text-transform:uppercase; color:var(--ink-light); margin-bottom:.4rem; opacity:.8; } .odd-card h4{ font-family:'Caveat',cursive; font-size:1.35rem; color:var(--ink); margin-bottom:.4rem; font-weight:700; line-height:1.2; } .odd-card p{ font-size:.95rem; color:var(--ink-faded); line-height:1.6; } .rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease} .rv.show{opacity:1;transform:translateY(0)} .rv canvas,.printout canvas{background:var(--paper)} canvas{display:block;max-width:100%!important} .foot{ padding:2rem 0 2rem; text-align:center; position:relative; } .foot::before{ content:'';display:block; width:60px;height:1px; background:var(--ink); opacity:.2; margin:0 auto 1.5rem; } .foot p{ font-family:'Caveat',cursive; font-size:1.2rem; color:var(--ink-light); margin:0; } .foot .name{color:var(--ink);font-weight:600} .dust{ position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden; } .mote{ position:absolute; width:2px;height:2px; background:rgba(160,150,130,0.3); border-radius:50%; opacity:0; animation:drift linear infinite; } @keyframes drift{ 0%{transform:translate(0,0) scale(1);opacity:0} 10%{opacity:.5} 90%{opacity:.3} 100%{transform:translate(80px,-300px) scale(.5);opacity:0} } .printout canvas[width]{ animation: canvasFadeIn .4s ease forwards; } canvas{font-variant-numeric:tabular-nums} @keyframes canvasFadeIn{ from{opacity:0;transform:scale(0.98)} to{opacity:1;transform:scale(1)} } .nb-strip{ position:fixed;bottom:0;left:0;right:0;z-index:60; display:flex;align-items:center;justify-content:center;gap:0; background:var(--paper); border-top:1px solid var(--rule); padding:6px 12px; touch-action:manipulation; font-family:'Caveat',cursive; user-select:none; } .nb-strip-section{ padding:5px 14px; font-size:1rem; color:var(--ink-light); cursor:pointer; border-radius:3px 3px 0 0; transition:color .2s, background .2s; white-space:nowrap; position:relative; } .nb-strip-section:hover{ color:var(--ink); background:rgba(0,0,0,.03); } .nb-strip-section.on{ color:var(--ink); background:var(--paper); box-shadow:0 -2px 0 var(--ink), 0 -3px 8px rgba(0,0,0,.06); font-weight:600; } .nb-strip-section.on::after{ content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px; background:var(--paper); } .nb-strip-sep{ width:1px;height:20px;background:var(--rule);flex-shrink:0; } .nb-strip-btn{ display:none; padding:4px 10px; font-size:.9rem; color:var(--ink-light); cursor:pointer; border-radius:3px 3px 0 0; transition:color .2s, background .2s; white-space:nowrap; flex-shrink:0; } .nb-strip-btn:hover{color:var(--ink);background:rgba(0,0,0,.04)} .nb-strip-pagenum{ display:none; font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--ink-faded); padding:4px 8px; flex-shrink:0; white-space:nowrap; } [data-mobile-only]{display:none} .nb-home{ position:fixed;bottom:52px;left:60px;z-index:60; width:48px;height:48px;border-radius:50%;min-width:48px;min-height:48px; background:var(--ink);color:var(--paper); font-family:'Caveat',cursive;font-size:1.2rem;font-weight:700; display:flex;align-items:center;justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.2); transition:transform .2s, box-shadow .2s; } .nb-home:hover{ transform:scale(1.12); box-shadow:0 3px 12px rgba(0,0,0,.3); } .nb-random{ position:fixed;bottom:52px;left:116px;z-index:60; width:48px;height:48px;border-radius:50%;min-width:48px;min-height:48px; background:var(--paper);color:var(--ink); font-size:1.4rem; display:flex;align-items:center;justify-content:center; cursor:pointer; border:2px solid var(--rule); box-shadow:0 2px 8px rgba(0,0,0,.1); transition:transform .2s, box-shadow .2s, border-color .2s; user-select:none; } .nb-random:hover{ transform:scale(1.12) rotate(90deg); box-shadow:0 3px 12px rgba(0,0,0,.15); border-color:var(--ink); } .nb-random.spinning{ animation:dice-spin .5s ease; } @keyframes dice-spin{ 0%{transform:rotate(0deg)} 50%{transform:rotate(360deg) scale(1.2)} 100%{transform:rotate(720deg) scale(1)} } .nb-scroll-top{transition:all .2s ease; position:fixed;top:50%;right:10px;z-index:50; width:36px;height:36px;border-radius:50%; background:rgba(245,240,230,0.75); border:1px solid var(--rule); box-shadow:0 1px 4px rgba(0,0,0,0.06); cursor:pointer;display:none;align-items:center;justify-content:center; font-size:1.1rem;color:var(--ink-light); transform:translateY(-50%); transition:opacity .25s,transform .15s,background .15s; } .nb-scroll-top.visible{display:flex} .nb-scroll-top:hover{background:rgba(245,240,230,0.95);transform:translateY(-50%) scale(1.1);color:var(--ink)} @media(max-width:640px){ .nb-scroll-top{width:44px;height:44px;right:6px;font-size:1.2rem} } .nb-nav{ opacity:0; } .nb-dots{display:none} .sketch-color.on{transform:scale(1.25);border-color:var(--ink)!important;box-shadow:0 0 0 2px var(--paper)} .sketch-color:hover{transform:scale(1.15)} .sk-size.on{background:var(--green);border-color:var(--green);color:white} @media(max-width:640px){ .nb-page{padding:0 0.75rem 3.5rem 0.75rem} .nb-page[data-page="1"]{padding-left:0.75rem} body{font-size:14px} .entry-date{font-size:.75rem} .spiral,.margin-line{display:none} .margin-note{display:none} .sticky-note{float:none!important;margin:.6rem auto!important;max-width:100%!important;display:block!important;width:100%} .title-page{padding:1.5rem 0 1rem} .tone-grid{grid-template-columns:repeat(4,1fr);gap:.3rem} .key{padding:.5rem .2rem;font-size:1rem} .odd-grid{grid-template-columns:1fr} .odd-card{transform:none!important} .odd-card:hover{transform:scale(1.02)!important} .entry-body{column-count:1} .printout{transform:none;overflow-x:hidden} .entry{padding:2rem 0} .rv canvas, .rv > canvas, .printout canvas{ max-width:100% !important; } .ctrls{gap:.4rem;margin:.5rem 0} .nb-btn,.ctrl{ touch-action:manipulation; font-size:1rem; padding:.3rem .6rem; min-height:34px; display:inline-flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; } .printout{ max-width:100%; box-sizing:border-box; } } .notebook-viewport{ position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;z-index:1; perspective:1800px } @media(max-width:640px){ .notebook-viewport{perspective:none} } .nb-page{z-index:1;contain:layout style;contain-intrinsic-size:auto 800px;content-visibility:hidden; position:absolute;inset:0;overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain; transform:translateX(100%);opacity:0; transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s ease,filter .8s ease; pointer-events:none; -webkit-overflow-scrolling:touch; --age-sepia:0%; --age-dark:0%; filter:sepia(var(--age-sepia)) brightness(calc(100% - var(--age-dark))); padding:0 3.5rem 5rem 9rem; backface-visibility:hidden; transform-origin:left center; } .nb-page.active{ filter:none !important; } .nb-page.active canvas{ image-rendering: auto; } .nb-page.active::-webkit-scrollbar{width:6px;background:transparent} .nb-page.active::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px} .nb-page.active::-webkit-scrollbar-thumb:hover{background:var(--ink-light)} .nb-page.active{scrollbar-width:thin;scrollbar-color:var(--rule) transparent} .nb-page.active #life, .nb-page.active #ca, .nb-page.active #rd, .nb-page.active #wv-canvas{ image-rendering: pixelated; } .nb-age-vignette{ position:absolute;inset:0;pointer-events:none;z-index:2; opacity:0;transition:opacity .8s ease; background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(80,65,45,var(--age-vignette-alpha,0)) 100%); } .nb-page[data-page="1"]{padding-left:3.5rem} .nb-page.active{content-visibility:visible;transform:translateX(0) rotateY(0deg);opacity:1;pointer-events:auto;z-index:2} .nb-page[data-nb-hidden] { display: none !important; } .nb-page.active{ box-shadow:0 2px 20px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.03); } .nb-page.exit-curl,.nb-page.enter-curl,.nb-page.enter-left{will-change:transform,opacity} .nb-page.exit-curl{ transform:perspective(1200px) rotateY(-35deg) translateX(-8%); opacity:.35; transform-origin:right center; transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .4s ease } .nb-page.exit-curl::before{ content:'';position:absolute;right:0;top:0;bottom:0;width:6px; pointer-events:none;z-index:11; background:linear-gradient(to left, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 40%, transparent 100% ); opacity:0;animation:curl-crease-in .5s ease forwards } @keyframes curl-crease-in{ 0%{opacity:0} 30%{opacity:1} 100%{opacity:.7} } .nb-page.exit-curl::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:10; background:linear-gradient(to left, rgba(0,0,0,.15) 0%, rgba(0,0,0,.06) 25%, transparent 55% ); opacity:0;animation:curl-shadow-in .5s ease forwards } @keyframes curl-shadow-in{ 0%{opacity:0} 40%{opacity:1} 100%{opacity:.8} } .nb-page.enter-curl{ transform:perspective(1200px) rotateY(25deg) translateX(30%); opacity:0; transform-origin:left center; transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .4s ease; box-shadow:-4px 0 18px rgba(0,0,0,.12) } .nb-page.enter-left{transform:translateX(-100%);opacity:0} .nb-pagenum{ position:fixed;bottom:48px;right:24px; font-family:'Caveat',cursive;font-size:1.15rem; color:var(--ink-light);z-index:50;cursor:pointer;user-select:none; background:var(--paper);padding:8px 12px;border-radius:4px;min-height:48px;min-width:48px;display:flex;align-items:center;justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.08); } .nb-pagenum:hover{color:var(--ink)} .nb-nav{ position:fixed;top:50%;z-index:50; width:48px;height:48px;border-radius:50%;min-width:48px;min-height:48px; background:rgba(245,240,230,0.82); border:1px solid var(--rule); box-shadow:0 1px 4px rgba(0,0,0,0.08); cursor:pointer;display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .25s,transform .15s;font-size:1.4rem;color:var(--ink-light); transform:translateY(-50%); } .nb-nav:hover{opacity:.7;transform:translateY(-50%) scale(1.08);background:rgba(245,240,230,0.95)} .nb-nav.prev{left:60px} .nb-nav.next{right:10px} .nb-dots{ position:fixed;bottom:20px;left:50%;transform:translateX(-50%); display:flex;gap:4px;z-index:50; background:var(--paper);padding:3px 10px;border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.06); } .nb-dot{ width:5px;height:5px;border-radius:50%;background:var(--rule); cursor:pointer;transition:background .2s,transform .2s; } .nb-dot.active{background:var(--ink);transform:scale(1.5)} .nb-toc{list-style:none;padding:1rem 0 0;max-width:none;margin:0 auto} .nb-toc li{cursor:pointer; display:flex;justify-content:space-between;align-items:baseline; padding:.55rem .5rem;border-bottom:1px dotted var(--rule); font-family:'Caveat',cursive;font-size:1.4rem;cursor:pointer; transition:color .15s,background .15s;color:var(--ink); border-radius:2px; } .nb-toc li:hover{ color:var(--annotation); background:rgba(184,64,64,0.04); } .nb-toc li:hover{color:var(--annotation)} .nb-toc .toc-pg{ font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--ink-faded) } .toc-notes{padding:0} .toc-notes-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); grid-auto-rows:min-content; gap:.95rem; margin-top:.8rem;align-items:flex-start; } .toc-note{ display:inline-block;position:relative; padding:.6rem .75rem .5rem; font-family:'Caveat',cursive; width:100%; max-width:none; line-height:1.35; box-shadow:2px 3px 8px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08); border-radius:2px; } .toc-note:nth-child(odd){transform:rotate(-.7deg)} .toc-note:nth-child(even){transform:rotate(.55deg)} .toc-note.wide{ grid-column:span 2; } .toc-note.narrow{ grid-column:span 1; } .toc-note::before{ content:'';position:absolute; top:0;left:0;right:0;height:5px; background:rgba(0,0,0,.04); border-radius:1px 1px 0 0; } .toc-note-title{ white-space:normal;word-break:break-word;overflow:hidden; font-size:1.1rem;font-weight:700; color:var(--note-text,#3a3333);margin-bottom:.3rem; padding-bottom:.2rem; line-height:1.3; border-bottom:1px dashed color-mix(in srgb, var(--note-text, #3a3333) 20%, transparent); } .toc-link{ display:inline-block; width:48%; font-family:'Caveat',cursive; font-size:1.05rem;color:var(--note-text,#3f3933); text-decoration:none;padding:.06rem .1rem; vertical-align:top; cursor:pointer;transition:color .1s; white-space:normal;overflow:visible; } .toc-link:hover{color:var(--ink)} .toc-link .toc-pg{ float:right;opacity:.7;font-size:.8rem; margin-left:.3rem; color:var(--ink-faded); } @media(max-width:640px){ .toc-notes-grid{gap:.4rem;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min-content} .toc-note,.toc-note.wide,.toc-note.narrow{font-size:1.05rem;padding:.5rem .6rem .4rem;grid-column:span 1} .toc-note-title{font-size:1rem} .toc-link{font-size:.95rem;width:auto;display:block;white-space:normal} } @media(max-width:400px){ .toc-notes-grid{grid-template-columns:1fr;grid-auto-rows:min-content} .toc-note{min-width:100%;max-width:100%} .toc-link{width:auto;display:block;white-space:normal} } .toc-section{ font-family:'IBM Plex Mono',monospace;font-size:.7rem; text-transform:uppercase;letter-spacing:.1em; color:var(--ink-light);padding:.8rem .5rem .3rem;margin-top:.5rem; border-top:1px solid var(--rule); } @media(max-width:640px){ .nb-dots{display:none} .nb-pagenum{display:none} .nb-nav{ position:fixed!important; top:auto!important;bottom:auto!important; width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; border-radius:50%!important; background:rgba(250,247,242,.85)!important; border:1px solid var(--rule)!important; box-shadow:0 1px 4px rgba(0,0,0,.08)!important; font-size:1.2rem!important; opacity:.5!important; transition:opacity .2s,transform .15s!important; z-index:90!important; } .nb-nav:active{transform:scale(.9);opacity:.8!important} .nb-nav.prev{left:6px!important;top:50%!important;transform:translateY(-50%)} .nb-nav.next{right:6px!important;top:50%!important;transform:translateY(-50%)} .nb-nav:hover,.nb-nav:active{opacity:.85!important;background:rgba(250,247,242,.95)!important} .nb-page.exit-curl{ transform:translateX(-30%); opacity:.3; transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s ease; } .nb-page.exit-curl::after,.nb-page.exit-curl::before{display:none} .nb-strip-section{padding:4px 8px;font-size:.85rem} .nb-strip{padding:5px 6px;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .nb-home,.nb-random,.nb-bookmark{display:none!important} #nb-save-btn{display:none!important} .nb-strip-btn{display:block} .nb-strip-pagenum{display:block} [data-mobile-only]{display:block} .nb-page{padding:0 0.75rem 3.5rem 0.75rem!important} } @keyframes page-enter-settle { 0% { transform: scale(0.98); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } .nb-page.entering{ animation: page-enter-settle 0.35s ease-out forwards; } @media(prefers-reduced-motion:reduce){ .nb-page{transition:opacity .2s ease;transform:none!important} .nb-page.active{transform:none!important;box-shadow:none!important} .nb-page.entering{animation:none!important} .nb-page.exit-curl::before{animation:none!important;opacity:0!important} .nb-page.enter-curl{box-shadow:none!important} .printout canvas[width]{animation:none!important;opacity:1;transform:none} } @media(prefers-contrast:more){ :root{--rule:rgba(26,26,46,0.35);--ink-light:#222} .entry-body,.hw{font-weight:500} .ctrls button,.printout button{border-width:2px} .ctrl:focus-visible,.nb-btn:focus-visible,.toc-link:focus-visible, a:focus-visible,[role="button"]:focus-visible,button:focus-visible{ outline:3px solid var(--blue);outline-offset:3px; } .nb-strip-section.active{border-bottom-width:3px} .printout{border:2px solid var(--rule)} .printout-note{font-weight:500} } .ctrl:focus-visible, .nb-btn:focus-visible, .nb-strip-section:focus-visible, .nb-strip-btn:focus-visible, .toc-link:focus-visible, a:focus-visible, [role="button"]:focus-visible, button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; } .nb-skip-link{ position:absolute;top:-100%;left:50%;transform:translateX(-50%); background:var(--ink);color:var(--paper); padding:.5rem 1rem;font-family:'IBM Plex Mono',monospace;font-size:.85rem; z-index:99999;border-radius:0 0 4px 4px; transition:top .2s; } .nb-skip-link:focus{top:0} .nb-help{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s ease} .nb-help.open{opacity:1;pointer-events:auto} .nb-help-card{background:var(--paper,#f5f0e6);border-radius:8px;padding:1.5rem 2rem;max-width:320px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,.15),0 1px 4px rgba(0,0,0,.08);font-family:'Lora',serif;font-size:.9rem;color:var(--ink,#2a2a2a);transform:translateY(8px);transition:transform .25s ease} .nb-help.open .nb-help-card{transform:translateY(0)} .nb-help-row{display:flex;align-items:center;gap:.6rem;margin:.35rem 0;line-height:1.4} .nb-help-row span{color:#555;font-size:.82rem} kbd{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.75rem;padding:2px 7px;background:#eee;border:1px solid #ccc;border-radius:3px;color:#333;min-width:22px;text-align:center;box-shadow:0 1px 0 #ccc} .nb-bookmark{ position:fixed;bottom:52px;left:148px;z-index:60; width:36px;height:36px;border-radius:50%; background:var(--paper);color:var(--ink-light); font-size:1.1rem; display:flex;align-items:center;justify-content:center; cursor:pointer; border:2px solid var(--rule); box-shadow:0 2px 8px rgba(0,0,0,.1); transition:transform .2s, box-shadow .2s, border-color .2s, color .2s; user-select:none; } .nb-bookmark:hover{ transform:scale(1.12); box-shadow:0 3px 12px rgba(0,0,0,.15); border-color:var(--ink); } .nb-bookmark.on{ color:#d4a017; border-color:#d4a017; background:rgba(212,160,23,0.08); } .nb-dogear{ position:absolute;top:0;right:0;width:28px;height:28px;z-index:3; pointer-events:none; overflow:hidden; } .nb-dogear::before{ content:'';position:absolute;top:0;right:0; width:0;height:0; border-style:solid; border-width:0 28px 28px 0; border-color:transparent var(--paper) transparent transparent; filter:drop-shadow(-1px 1px 2px rgba(0,0,0,.08)); transition:border-color .3s; } .nb-dogear::after{ content:'★';position:absolute;top:3px;right:3px; font-size:11px;color:#d4a017; opacity:0;transform:scale(0.5) rotate(-45deg); transition:opacity .3s, transform .3s; } .nb-page.bookmarked .nb-dogear::after{ opacity:1;transform:scale(1) rotate(0deg); } .nb-bm-panel{ position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s ease; } .nb-bm-panel.open{opacity:1;pointer-events:auto} .nb-bm-card{ background:var(--paper,#f5f0e6);border-radius:8px;padding:1.5rem 2rem; max-width:320px;width:90%;max-height:70vh;display:flex;flex-direction:column; box-shadow:0 4px 24px rgba(0,0,0,.15),0 1px 4px rgba(0,0,0,.08); font-family:'Lora',serif;font-size:.9rem;color:var(--ink,#2a2a2a); transform:translateY(8px);transition:transform .25s ease; } .nb-bm-panel.open .nb-bm-card{transform:translateY(0)} .nb-bm-list{ display:flex;flex-direction:column;gap:0;overflow-y:auto;max-height:50vh; } .nb-bm-item{ display:flex;justify-content:space-between;align-items:baseline; padding:.55rem .5rem;border-bottom:1px dotted var(--rule); font-family:'Caveat',cursive;font-size:1.3rem;cursor:pointer; transition:color .15s, background .15s;color:var(--ink);border-radius:2px; } .nb-bm-item:hover{ color:var(--annotation); background:rgba(184,64,64,0.04); } .nb-bm-item .bm-pg{ font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--ink-light); } .nb-bm-item .bm-remove{ font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:var(--ink-light); cursor:pointer;padding:2px 5px;border-radius:3px; transition:color .15s, background .15s;margin-left:.5rem; } .nb-bm-item .bm-remove:hover{ color:#c04040;background:rgba(192,64,64,0.08); } #wv-canvas { image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; } .sq-controls{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem;padding:0 .5rem} .sq-controls-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} .sq-bpm-label,.sq-wave-label{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--ink-light);display:flex;align-items:center;gap:.4rem} .sq-bpm-label input[type=range]{width:100px;accent-color:var(--green);cursor:pointer} .sq-wave-label select{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--ink-faded);background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:.15rem .3rem;cursor:pointer} .sq-grid-wrap{display:flex;gap:0;overflow-x:auto} .sq-step-numbers{display:flex;flex-direction:column;gap:0;padding-top:1.3rem;flex-shrink:0} .sq-step-numbers span{display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--ink-faded);height:28px;flex-shrink:0;opacity:.9} .sq-grid-body{display:flex;flex:1;min-width:0} .sq-note-labels{display:flex;flex-direction:column;gap:0;flex-shrink:0} .sq-note-labels span{display:flex;align-items:center;justify-content:flex-end;font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--ink-faded);height:28px;padding-right:.4rem;width:36px;flex-shrink:0} .sq-grid{display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(8,28px);gap:2px;flex:1;min-width:0} .sq-cell{border:1px solid var(--rule);border-radius:2px;cursor:pointer;transition:background .1s,transform .05s;user-select:none;-webkit-tap-highlight-color:transparent} .sq-cell:hover{border-color:var(--ink-light);background:rgba(0,0,0,.02)} .sq-cell.on{background:rgba(184,64,64,.75);border-color:rgba(184,64,64,.9)} .sq-cell.on:hover{background:rgba(184,64,64,.9)} .sq-cell.head{background:rgba(184,64,64,.12);border-color:rgba(184,64,64,.3)} .sq-cell.on.head{background:rgba(184,64,64,.85)} .sq-info{font-family:'IBM Plex Mono',monospace;font-size:.84rem;color:var(--ink-faded);margin-top:.4rem} .sq-info span{color:var(--green);font-weight:600} @media(max-width:640px){ .sq-grid{grid-template-rows:repeat(8,28px);gap:1px} .sq-note-labels span{width:28px;font-size:.5rem} .sq-step-numbers span{height:28px;font-size:.5rem} .sq-controls-row{gap:.3rem} .sq-bpm-label input[type=range]{width:80px} } .nb-page input[type=range]{ -webkit-appearance:none;appearance:none; height:6px;background:var(--rule);border-radius:3px;outline:none;cursor:pointer; vertical-align:middle; } .nb-page input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none; width:16px;height:16px;border-radius:50%; background:var(--ink);border:2px solid var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer; } .nb-page input[type=range]::-moz-range-thumb{ width:16px;height:16px;border-radius:50%; background:var(--ink);border:2px solid var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer; } .nb-page select{touch-action:manipulation; font-family:'IBM Plex Mono',monospace; font-size:.8rem;color:var(--ink-faded); background:var(--paper);border:1px solid var(--rule); border-radius:3px;padding:.2rem .4rem;cursor:pointer; -webkit-appearance:auto; } .nb-page input[type=checkbox]{ accent-color:var(--green); width:16px;height:16px;cursor:pointer;vertical-align:middle; } .nb-page input[type=text],.nb-page input[type=number]{ font-family:'IBM Plex Mono',monospace; font-size:.8rem;color:var(--ink); background:var(--paper);border:1px solid var(--rule); border-radius:3px;padding:.2rem .4rem;width:auto; } @media(max-width:900px){ .nb-page{padding:0 2rem 5rem 5rem} .nb-page[data-page="1"]{padding-left:2rem} .margin-note{left:-70px;width:65px;font-size:.88rem} .page{max-width:100%} } @media(max-width:640px){ h3{font-size:1.5rem} h4{font-size:1.2rem} .entry-body{font-size:.95rem;line-height:1.65} .title-page .intro{font-size:1.25rem;max-width:100%!important} .nb-page{padding:0 0.75rem 3.5rem 0.75rem!important} .page{max-width:100%} .lab-box{padding:1rem;margin:1rem 0} .printout{padding:.8rem;margin:1rem 0;overflow:hidden} .printout-label{font-size:.67rem} #life{image-rendering:pixelated} .ctrl{ touch-action:manipulation;padding:.5rem 1rem;font-size:1.1rem;min-height:44px} .nb-btn{ touch-action:manipulation;padding:.5rem 1rem;font-size:1.1rem;min-height:44px} .printout canvas{max-height:55vh!important} .key{min-height:44px;font-size:1.1rem} .chord{min-height:44px;padding:.5rem 1rem;font-size:1rem} .ctrls button,.printout button{min-height:44px!important;min-width:44px;touch-action:manipulation;padding:.4rem .6rem!important} select,input[type=text],input[type=number]{min-height:44px;font-size:.95rem;padding:.3rem .4rem} textarea{min-height:100px;font-size:.95rem} .coffee-stain{display:none!important} .wax-seal{width:40px;height:40px;line-height:40px;font-size:1.1rem} .sticky-note{max-width:100%!important;padding:.5rem .7rem;font-size:1rem;display:block!important} .tab{top:-12px;right:10px;width:40px;height:16px} .entry{padding:1.5rem 0} .dog-ear::after{border-width:0 20px 20px 0} .dog-ear::before{right:20px;width:20px;height:20px} .stamp{font-size:.55rem;padding:.1rem .4rem;margin:.5rem auto} .nb-toc{max-width:100%} .nb-toc li{font-size:1rem;padding:.35rem .4rem} .nb-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start} .nb-strip-section{flex-shrink:0} .toc-section{font-size:.6rem} .divider{margin:1rem 0} .bracket{font-size:.7rem} .redact{padding:2px 6px} .nb-help-card{padding:1rem 1.2rem;max-width:280px} .nb-help-card h3{font-size:1.3rem!important} } @media(max-width:380px){ body{font-size:14px} .entry-date{font-size:.75rem} .nb-page{padding:0 .6rem 3rem .6rem!important} .entry-body{font-size:.9rem} .title-page h1{font-size:2.4rem} .tone-grid{grid-template-columns:repeat(2,1fr)} .lab-box{padding:.7rem} .title-page .intro{font-size:1.1rem} } .nb-toc-btn{ position:fixed;top:12px;right:12px;z-index:70; width:36px;height:36px; display:flex;align-items:center;justify-content:center; background:var(--paper);color:var(--ink); border:1px solid var(--rule);border-radius:50%; font-size:1.1rem;cursor:pointer; box-shadow:1px 2px 6px rgba(0,0,0,.1); transition:transform .15s, box-shadow .15s; font-family:'Caveat',cursive; user-select:none; } .nb-toc-btn:hover{transform:scale(1.08);box-shadow:2px 3px 10px rgba(0,0,0,.15)} .nb-toc-btn:active{transform:scale(.95)} .nb-toc-overlay{ position:fixed;inset:0;z-index:80; display:none; opacity:0; transition:opacity .25s ease; } .nb-toc-overlay.open{display:flex;opacity:1} .nb-toc-backdrop{ position:absolute;inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(2px); } .nb-toc-panel{ position:absolute;top:0;right:0;bottom:0; width:min(380px,85vw); background:var(--paper); box-shadow:-4px 0 20px rgba(0,0,0,.15); overflow-y:auto; padding:1.5rem 1.2rem 2rem; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); -webkit-overflow-scrolling:touch; } .nb-toc-overlay.open .nb-toc-panel{transform:translateX(0)} .nb-toc-panel-header{ font-family:'Caveat',cursive; font-size:1.4rem;font-weight:700; color:var(--ink); padding-bottom:.6rem; margin-bottom:.6rem; border-bottom:1px solid var(--rule); display:flex;align-items:center;justify-content:space-between; } .nb-toc-close{ background:none;border:none; font-size:1.3rem;cursor:pointer; color:var(--ink-light); padding:2px 6px; font-family:'Caveat',cursive; } .nb-toc-close:hover{color:var(--annotation)} .nb-toc-panel .toc-search-wrap{margin-bottom:.8rem} .nb-toc-panel .toc-notes-grid{gap:.6rem;grid-template-columns:1fr} .nb-toc-panel .toc-note{ transform:none!important; box-shadow:1px 2px 6px rgba(0,0,0,.1); padding:.5rem .6rem .4rem; } .nb-toc-panel .toc-note-title{font-size:1rem} .nb-toc-panel .toc-link{ font-size:.9rem; display:block;width:100%; padding:.08rem .15rem; } .nb-toc-panel .toc-link .toc-pg{font-size:.7rem} @media(max-width:640px){ .nb-toc-btn{top:8px;right:8px;width:32px;height:32px;font-size:1rem} .nb-toc-panel{width:90vw;padding:1rem .8rem 1.5rem} .nb-toc-panel .toc-note-title{font-size:.9rem} .nb-toc-panel .toc-link{font-size:.85rem} .nb-toc-panel .toc-notes-grid{gap:.4rem} } .title-margin-note{display:none;position:absolute;z-index:0;background:linear-gradient(135deg,#fff9c4 0%,#fff176 100%);padding:.5rem .6rem;font-family:'Caveat',cursive;font-size:.95rem;color:#4a4030;line-height:1.3;box-shadow:2px 3px 8px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);border-radius:1px} .title-margin-note::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:rgba(0,0,0,.04);border-radius:1px 1px 0 0} .title-margin-note.left{border-left:3px solid #e8a0a0} .title-margin-note.right{border-right:3px solid #a0c8e8} @media(min-width:1100px){.title-margin-note{display:block}} .toc-link:hover{ color:var(--ink); background:rgba(107,142,90,0.08); border-radius:3px; padding-left:6px; } .toc-link:active{ background:rgba(107,142,90,0.16); } .printout::before{ content:'';display:block; height:3px;border-radius:2px 2px 0 0; background:linear-gradient(90deg,var(--green),var(--annotation),var(--blue)); margin:-1.2rem -1.2rem .8rem -1.2rem; opacity:0.6; } .ctrl:hover{ box-shadow:0 1px 4px rgba(0,0,0,0.1); transform:translateY(-1px); } .ctrl:active{ transform:translateY(0); box-shadow:none; } .nb-page.active{ will-change:auto; } .nb-toc-panel::after{ content:'';position:sticky;bottom:0;left:0;right:0; display:block;height:40px; background:linear-gradient(to top,var(--paper),transparent); pointer-events:none;z-index:1; } .toc-search:focus{ outline:2px solid var(--green); outline-offset:1px; box-shadow:0 0 0 3px rgba(107,142,90,0.2); } .toc-link.navigating{ background:rgba(107,142,90,0.15); border-radius:3px; transition:background 0.5s ease; } kbd{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.72rem; padding:.1em .4em; border:1px solid var(--rule); border-radius:3px; background:rgba(0,0,0,.03); color:var(--ink); min-width:1.5em; text-align:center; line-height:1.5; } @media print { @page { margin: 1.5cm 2cm; size: A4; } html, body { background: white !important; color: #1a1a1a !important; font-size: 11pt; line-height: 1.6; overflow: visible !important; } body::before, body::after { display: none !important; } .spiral, .margin-line, .dust, #progress, .nb-pagenum, .nb-nav, .nb-home, .nb-random, .nb-bookmark, .nb-strip, .nb-help, .nb-bm-panel, .nb-age-vignette { display: none !important; } .notebook-viewport { position: static !important; height: auto !important; overflow: visible !important; width: 100% !important; z-index: auto !important; } .nb-page { position: static !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; overflow: visible !important; content-visibility: visible !important; contain: none !important; contain-intrinsic-size: auto !important; padding: 0 1rem 1rem 1rem !important; page-break-after: always; break-after: page; filter: none !important; border-bottom: 1px solid #ddd; } .nb-page[data-page="1"] { page-break-after: always; padding-top: 2rem !important; } .nb-page[data-page="1"] .title-page { text-align: center; padding: 4rem 0 2rem; } .nb-page[data-page="1"] .coffee-stain { display: none !important; } .nb-page[data-page="1"] h1 { font-size: 3rem; border-bottom: 2px solid #1a1a1a; padding-bottom: 0.5rem; } .nb-page:last-child { page-break-after: auto; break-after: auto; border-bottom: none; } .page { max-width: 100% !important; width: 100% !important; position: static !important; z-index: auto !important; } .entry-date { color: #666 !important; } .entry-tag { color: #888 !important; border-color: #ccc !important; } .hw { color: #555 !important; } .pencil { color: #444 !important; } .bracket { color: #444 !important; } .margin-note { color: #555 !important; } .sticky-note { background: #f5f5f0 !important; box-shadow: none !important; transform: none !important; } .underline { text-decoration: underline; text-decoration-color: #333; } .hl { background: #f0f0e0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .circle { border: 1.5px solid #333; border-radius: 3px; padding: 0 3px; } .stamp, .wax-seal, .tab, .washi { -webkit-print-color-adjust: exact; print-color-adjust: exact; } a[href]:not([href="#"])::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; font-family: 'IBM Plex Mono', monospace; } .ctrls, .ctrl, button, input[type="range"], select, .sq-controls, .sq-controls-row, .printout-note, #orbit-info, .sq-info { display: none !important; } canvas { max-width: 100% !important; height: auto !important; border: 1px solid #ddd !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .printout, .lab-box, .tape, .tape-right { border: 1px solid #ccc !important; box-shadow: none !important; background: white !important; transform: none !important; margin: 0.5rem 0; padding: 0.5rem; } .printout-label, .lab-label { font-size: 10pt !important; color: #666 !important; text-transform: uppercase !important; } .stats { font-size: 10pt; color: #666 !important; } .nb-toc { column-count: 2; column-gap: 2rem; font-size: 10pt; } .nb-toc li { padding: 0.15rem 0; } .paperclip, .paperclip::before, .paperclip::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } textarea { border: 1px solid #ccc !important; font-family: 'IBM Plex Mono', monospace; font-size: 10pt; } .entry-body { column-count: 1 !important; } .nb-page { counter-increment: page; } .margin-line { border-color: #ddd !important; opacity: 0.5 !important; } } .nb-save{font-family:'IBM Plex Mono',monospace} .nb-save:active{transform:scale(0.95)!important} .toc-search-wrap{ position:relative; margin:0 0 .8rem; } .toc-search-wrap::before{ content:'\26B2'; position:absolute; left:8px;top:50%;transform:translateY(-50%); font-size:.75rem; color:var(--ink-light); opacity:.5; pointer-events:none; } .toc-search{ width:100%; padding:.45rem .7rem .45rem 1.8rem; font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink); background:var(--paper-shadow); border:1.5px solid var(--rule); border-radius:4px; outline:none; transition:border-color .2s, box-shadow .2s, background .2s; } .toc-search:focus{ border-color:var(--annotation); box-shadow:0 0 0 3px rgba(184,64,64,0.08); background:#fffdf9; } .toc-search::placeholder{ color:var(--ink-light); opacity:.5; font-style:italic; } .nb-toc li.toc-hidden{ display:none; } .toc-section.toc-hidden{ display:none; } .toc-section{ cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; } .toc-section::after{ content:'\25BE'; font-size:.6rem; transition:transform .2s; color:var(--ink-light); opacity:.5; } .toc-section.collapsed::after{ transform:rotate(-90deg); } .nb-toc li.toc-collapsed{ display:none; } .nb-page::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient( to bottom, transparent 0%, rgba(180,170,155,0.08) 5%, rgba(180,170,155,0.12) 30%, rgba(180,170,155,0.12) 70%, rgba(180,170,155,0.08) 95%, transparent 100% ); pointer-events:none; z-index:1; } @media(max-width:640px){ .nb-page::before{display:none} } .nb-age-foxing{ position:absolute;inset:0;pointer-events:none;z-index:2; opacity:0;transition:opacity 1.2s ease; background: radial-gradient(ellipse 35px 30px at 15% 20%, rgba(140,100,50,0.12) 0%, transparent 70%), radial-gradient(ellipse 25px 40px at 75% 15%, rgba(160,110,55,0.08) 0%, transparent 70%), radial-gradient(ellipse 45px 35px at 55% 70%, rgba(130,90,45,0.10) 0%, transparent 65%), radial-gradient(ellipse 20px 25px at 25% 85%, rgba(150,105,50,0.09) 0%, transparent 70%), radial-gradient(ellipse 30px 20px at 85% 55%, rgba(140,95,48,0.07) 0%, transparent 70%), radial-gradient(ellipse 18px 22px at 45% 35%, rgba(145,100,50,0.06) 0%, transparent 65%), radial-gradient(ellipse 28px 32px at 65% 90%, rgba(135,92,46,0.08) 0%, transparent 70%), radial-gradient(ellipse 22px 18px at 10% 55%, rgba(155,108,52,0.07) 0%, transparent 70%); } .rv-pad{padding:2rem 0} .canvas-default{width:100%;height:420px;display:block;border-radius:4px;margin-top:.4rem} .toc-bg-1{background:#fff9c4;transform:rotate(-2deg)} .toc-bg-2{background:#e8d5b7;transform:rotate(1deg)} .toc-bg-3{background:#c8e6c9;transform:rotate(-1.5deg)} .toc-bg-4{background:#ffccbc;transform:rotate(0.8deg)} .toc-bg-5{background:#e1bee7;transform:rotate(-0.5deg)} .toc-bg-6{background:#bbdefb;transform:rotate(1.2deg)} .toc-bg-7{background:#b2dfdb;transform:rotate(-0.8deg)} .printout-mt{margin-top:.8rem} button, [class^="btn"], .ctrls button { will-change: transform, opacity; contain: layout; min-height: 36px; min-width: 36px; border-radius: 4px; } .printout button, .ctrls button{ min-height:36px; min-width:36px; touch-action:manipulation; } .printout canvas { min-width: 200px; min-height: 200px; } canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } ::selection{background:#f0c060;color:#1a1a2e} ::-moz-selection{background:#f0c060;color:#1a1a2e} .nb-toc::-webkit-scrollbar{width:6px} .nb-toc::-webkit-scrollbar-track{background:transparent} .nb-toc::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px} .nb-toc::-webkit-scrollbar-thumb:hover{background:var(--ink)} @media print{ .nb-strip,.nb-scroll-top,.nb-bookmark,.nb-help,.toc-panel, .nb-strip-pagenum,.nb-age-vignette{display:none!important} .nb-page{position:static!important;transform:none!important; opacity:1!important;pointer-events:auto!important; content-visibility:visible!important;display:block!important; overflow:visible!important;padding:1rem 2rem!important; filter:none!important;break-inside:avoid} .printout canvas{max-height:300px!important} } body, .entry-body, .hw, h2, h3 { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .entry-body { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; } html { scroll-padding-top: 52px; } .printout:focus-within .ctrls, .ctrls:focus-within { box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.25); border-radius: 4px; } pre, code, kbd { tab-size: 2; -moz-tab-size: 2; } .toc-link { line-height: 1.6; padding: 2px 6px; border-radius: 3px; transition: background-color 0.15s ease; } .printout canvas { max-width: 100%; } @media (prefers-reduced-motion: reduce) { .toc-link { transition: none; } } @font-face { font-family: 'Caveat'; font-display: swap; } .nb-page.active { will-change: transform, opacity; } @media (max-width: 640px) { .nb-strip { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nb-strip::-webkit-scrollbar { display: none; } } canvas { image-rendering: auto; } .nb-page.active { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } canvas { display: block; max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; } html { scroll-padding-top: 52px; } .entry-body, .nb-page { overflow-x: hidden; } .info-strip { max-width: 100%; overflow-x: auto; word-break: break-word; } @media print { canvas { max-height: 300px !important; page-break-inside: avoid; } .printout { page-break-inside: avoid; } } .printout button, .ctrls button, .printout > button { min-height: 44px !important; min-width: 44px !important; touch-action: manipulation !important; padding: 8px 14px !important; font-size: 12px !important; -webkit-tap-highlight-color: transparent; } .printout input[type="range"], .ctrls input[type="range"] { min-height: 44px !important; touch-action: manipulation !important; } .printout select, .ctrls select { min-height: 44px !important; touch-action: manipulation !important; padding: 8px !important; font-size: 12px !important; } .title-page { padding: 6rem 0 3.5rem; position: relative; overflow: visible; } .title-page::after { content: ''; position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); width: 500px; height: 400px; background: radial-gradient(ellipse at 50% 40%, rgba(245,240,232,0.4) 0%, rgba(228,218,198,0.15) 40%, transparent 70% ); pointer-events: none; z-index: -2; animation: warmth-glow 8s ease-in-out infinite; } @keyframes warmth-glow { 0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } } .title-page h1 { font-size: clamp(3.2rem, 10vw, 5.5rem); margin-bottom: 0.15em; } .title-page .intro { font-size: 1.6rem; max-width: 640px; margin: 1.2rem auto 0; line-height: 1.55; } @media(max-width:640px){ .title-page { padding: 2.5rem 0 1.5rem; } .title-page h1 { font-size: clamp(2.8rem, 12vw, 4rem); } .title-page .intro { font-size: 1.2rem; line-height: 1.5; } .title-page::after { display: none; } .title-page::before { display: none; } } .title-page h1 { animation: title-breathe 4s ease-in-out infinite; } @keyframes title-breathe { 0%, 100% { text-shadow: 0 0 0 transparent, 0 1px 0 rgba(26,24,21,0.04); letter-spacing: 0.01em; } 50% { text-shadow: 0 0 30px rgba(26,24,21,0.06), 0 0 60px rgba(184,64,64,0.03), 0 1px 0 rgba(26,24,21,0.08); letter-spacing: 0.03em; } } .title-page h1::after { animation: title-rule-pulse 4s ease-in-out infinite; } @keyframes title-rule-pulse { 0%, 100% { left: 10%; right: 10%; opacity: 0.15; } 50% { left: 5%; right: 5%; opacity: 0.25; } } .title-page .intro { animation: intro-warmth 6s ease-in-out infinite; } @keyframes intro-warmth { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 20px rgba(245,240,232,0.5); } } .title-page .sticky-note { transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease; } .title-page .sticky-note:hover { transform: rotate(0deg) translateY(-3px) scale(1.03) !important; box-shadow: 3px 6px 16px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.1); } .wax-seal:hover { box-shadow: 0 2px 12px rgba(139,46,34,0.35), inset 0 -2px 4px rgba(0,0,0,.2), inset 0 2px 4px rgba(255,180,140,.35); } .stamp:hover { transform: rotate(0deg) scale(0.95) !important; opacity: 0.85; } .title-page::before { content: ''; position: absolute; inset: -2rem -4rem; background-image: radial-gradient(circle, var(--rule) 0.5px, transparent 0.5px); background-size: 24px 24px; opacity: 0.25; pointer-events: none; z-index: -1; animation: dot-grid-drift 20s linear infinite; } @keyframes dot-grid-drift { 0% { background-position: 0 0; } 100% { background-position: 24px 24px; } } .title-margin-note { animation: margin-note-in 1.2s ease-out both; } .title-margin-note:nth-child(1) { animation-delay: 0.3s; } .title-margin-note:nth-child(2) { animation-delay: 0.6s; } .title-margin-note:nth-child(3) { animation-delay: 0.9s; } @keyframes margin-note-in { from { opacity: 0; transform: translateY(8px) rotate(0deg); } to { opacity: 1; } } .coffee-stain { animation: coffee-glow 8s ease-in-out infinite; } @keyframes coffee-glow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(155,115,55,0.05), 0 1px 2px rgba(155,115,55,0.04); } 50% { box-shadow: inset 0 0 0 1px rgba(155,115,55,0.08), 0 1px 4px rgba(155,115,55,0.08); } } #nb-loading > div:first-child { animation: loading-float 2s ease-in-out infinite; } @keyframes loading-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } #nb-loading > div:last-child { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--ink); animation: loading-typing 1.5s steps(20) infinite, blink-cursor 0.6s step-end infinite alternate; max-width: 18ch; } @keyframes loading-typing { 0% { max-width: 0; } 50% { max-width: 18ch; } 100% { max-width: 18ch; } } @keyframes blink-cursor { from { border-color: transparent; } to { border-color: var(--ink); } } @keyframes loading-bar { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(300%); } } @media(prefers-reduced-motion:reduce){ .title-page h1, .title-page h1::after, .title-page .intro, .title-page::before, .title-margin-note, .coffee-stain, #nb-loading > div:first-child, #nb-loading > div:last-child { animation: none !important; } .title-page .sticky-note, .wax-seal, .stamp { transition: none !important; } } .nb-toc-overlay.open .toc-note { opacity: 0; transform: translateY(12px) scale(0.97); animation: toc-note-stagger 0.35s ease-out forwards; } .nb-toc-overlay.open .toc-note:nth-child(1) { animation-delay: 0.05s; } .nb-toc-overlay.open .toc-note:nth-child(2) { animation-delay: 0.08s; } .nb-toc-overlay.open .toc-note:nth-child(3) { animation-delay: 0.11s; } .nb-toc-overlay.open .toc-note:nth-child(4) { animation-delay: 0.14s; } .nb-toc-overlay.open .toc-note:nth-child(5) { animation-delay: 0.17s; } .nb-toc-overlay.open .toc-note:nth-child(6) { animation-delay: 0.20s; } .nb-toc-overlay.open .toc-note:nth-child(7) { animation-delay: 0.23s; } .nb-toc-overlay.open .toc-note:nth-child(8) { animation-delay: 0.26s; } .nb-toc-overlay.open .toc-note:nth-child(9) { animation-delay: 0.29s; } .nb-toc-overlay.open .toc-note:nth-child(10) { animation-delay: 0.32s; } .nb-toc-overlay.open .toc-note:nth-child(11) { animation-delay: 0.35s; } .nb-toc-overlay.open .toc-note:nth-child(12) { animation-delay: 0.38s; } .nb-toc-overlay.open .toc-note:nth-child(13) { animation-delay: 0.41s; } .nb-toc-overlay.open .toc-note:nth-child(14) { animation-delay: 0.44s; } .nb-toc-overlay.open .toc-note:nth-child(15) { animation-delay: 0.47s; } .nb-toc-overlay.open .toc-note:nth-child(16) { animation-delay: 0.50s; } .nb-toc-overlay.open .toc-note:nth-child(17) { animation-delay: 0.53s; } .nb-toc-overlay.open .toc-note:nth-child(18) { animation-delay: 0.56s; } .nb-toc-overlay.open .toc-note:nth-child(19) { animation-delay: 0.59s; } .nb-toc-overlay.open .toc-note:nth-child(20) { animation-delay: 0.62s; } .nb-toc-overlay.open .toc-note:nth-child(n+21) { animation-delay: calc(0.05s + 0.03s * var(--note-i, 20)); } @keyframes toc-note-stagger { to { opacity: 1; transform: translateY(0) scale(1); } } .nb-toc-overlay.open .nb-toc-panel { transition: transform 0.35s cubic-bezier(.22,1.2,.36,1); } .nb-toc-panel .toc-link { transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; border-radius: 2px; padding-left: 0.2rem; } .nb-toc-panel .toc-link:hover { transform: translateX(3px); background: rgba(0,0,0,0.04); } .nb-page.active::before { content: ''; position: fixed; top: 0; left: 0; width: var(--scroll-progress, 0%); height: 2px; background: linear-gradient(90deg, var(--note-red), var(--annotation)); z-index: 90; pointer-events: none; transition: width 0.08s linear; opacity: 0; } .nb-page.active.scrollable::before { opacity: 1; } .printout { box-shadow: 1px 2px 8px rgba(0,0,0,0.08), inset 0 1px 4px rgba(0,0,0,0.03); } .printout:has(canvas) { border-left-color: var(--annotation); background: linear-gradient(180deg, var(--printout-bg) 0%, rgba(245,240,232,0.5) 100%); } .printout-label { display: flex; align-items: center; gap: 0.4rem; } .printout-label::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--annotation); opacity: 0.6; flex-shrink: 0; } .printout canvas { -webkit-font-smoothing: antialiased; image-rendering: -webkit-optimize-contrast; } .ctrl, .nb-btn { transition: transform 0.12s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; position: relative; } .ctrl:hover, .nb-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .ctrl:active, .nb-btn:active { transform: translateY(0px) scale(0.96); box-shadow: none; } .ctrl.go { background: var(--green); border-color: var(--green); color: white; } .ctrl.go:hover { filter: brightness(1.1); box-shadow: 0 2px 8px rgba(72,140,90,0.3); } .ctrls { padding: 0.2rem 0; } .nb-toast { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%) translateY(10px); font-family: 'Caveat', cursive; font-size: 1.1rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1.5px solid var(--rule); border-radius: 6px; padding: 0.4rem 1rem; box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08); opacity: 0; pointer-events: none; z-index: 200; white-space: nowrap; animation: toast-in-out 1.5s ease forwards; } @keyframes toast-in-out { 0% { opacity: 0; transform: translateX(-50%) translateY(10px); } 12% { opacity: 1; transform: translateX(-50%) translateY(0); } 75% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); } } @media(prefers-reduced-motion:reduce){ .nb-toc-overlay.open .toc-note { animation: none !important; opacity: 1 !important; transform: none !important; } .nb-toc-overlay.open .nb-toc-panel { transition: none !important; transform: translateX(0) !important; } .nb-toc-panel .toc-link { transition: none !important; } .nb-page.active::before { transition: none !important; } .ctrl, .nb-btn { transition: none !important; } .nb-toast { animation: none !important; opacity: 0 !important; } } @media(prefers-color-scheme:dark){ :root{color-scheme:dark; --paper:#1a1814; --paper-shadow:#242018; --ink:#e0dbd0; --ink-faded:#a09888; --ink-light:#887e72; --red-margin:#c45; --red-note:#d45a5a; --rule:#3a3428; --annotation:#d45a5a; --green:#5a9b6a; --green-light:#1e2e22; --blue:#6a8abb; --tape:rgba(180,170,150,0.2); --tape-border:rgba(140,130,110,0.15); --pin:#a07040; --spiral:#5a5448; --printout-bg:#201c16; --printout-border:#3a3428; --ctrl-border:#4a4238; --ctrl-bg:#242018; --clip-metal:#6a6258; --note-red:#bf4040; --wave-bg:#1e1a14; --life-border:#3a3428; --canvas-ink:#d0ccc0; --canvas-rule:#2a2620; --canvas-grid:#3a3630; } body{background:#1a1814} .margin-line{background:linear-gradient(90deg,var(--paper-shadow) 0%,var(--paper) 100%)} .nb-page{background:var(--paper)} .nb-nav{background:rgba(26,24,20,0.85);border-color:var(--rule);box-shadow:0 1px 4px rgba(0,0,0,0.3)} .nb-nav:hover{background:rgba(26,24,20,0.95)} .nb-pagenum{background:var(--paper);box-shadow:0 1px 4px rgba(0,0,0,0.2)} .nb-dots{background:var(--paper);box-shadow:0 1px 4px rgba(0,0,0,0.2)} .nb-dot{background:var(--rule)} .nb-dot.active{background:var(--ink)} .nb-scroll-top{background:rgba(26,24,20,0.75);box-shadow:0 1px 4px rgba(0,0,0,0.2)} .nb-scroll-top:hover{background:rgba(26,24,20,0.95)} .nb-strip{background:var(--paper);border-top-color:var(--rule);box-shadow:0 -1px 6px rgba(0,0,0,0.3)} .nb-strip-btn{color:var(--ink-light)} .nb-strip-btn:hover{color:var(--ink);background:rgba(255,255,255,0.05)} .nb-strip-section:hover{background:rgba(255,255,255,0.03)} .nb-strip-section.on::after{background:var(--annotation)} .nb-toast{background:var(--paper);border-color:var(--rule);box-shadow:0 4px 16px rgba(0,0,0,0.3)} .toc-search{background:var(--paper-shadow);border-color:var(--rule);color:var(--ink)} .toc-search:focus{background:#201c16} .toc-search::placeholder{color:var(--ink-light);opacity:.5} .printout{box-shadow:1px 2px 8px rgba(0,0,0,0.2),inset 0 1px 4px rgba(0,0,0,0.1)} .printout:has(canvas){border-left-color:var(--annotation);background:linear-gradient(180deg,var(--printout-bg) 0%,rgba(26,24,20,0.8) 100%)} .printout canvas{-webkit-font-smoothing:antialiased} .ctrl,.nb-btn{border-color:var(--ctrl-border);color:var(--ink)} .ctrl:hover,.nb-btn:hover{box-shadow:0 2px 6px rgba(0,0,0,0.2)} .ctrl.go{background:var(--green);border-color:var(--green);color:white} .ctrl.go:hover{filter:brightness(1.15);box-shadow:0 2px 8px rgba(90,155,106,0.3)} .sticky-note{box-shadow:2px 3px 8px rgba(0,0,0,0.15);filter:brightness(0.85) saturate(0.7)} .sticky-note:hover{filter:brightness(0.9) saturate(0.8)} .odd-card:nth-child(1){background:#2a2518} .odd-card:nth-child(4){background:#2a2018} .odd-card:nth-child(7){background:#282218} .odd-card:nth-child(14){background:#2a2518} .odd-card:nth-child(15){background:#2a2018} .odd-card:nth-child(19){background:#282218} .odd-card:nth-child(22){background:#2a2018} .wax-seal{filter:brightness(0.9) saturate(0.8)} .stamp{filter:brightness(0.85)} .coffee-stain{opacity:.4} .nb-page.active::before{background:linear-gradient(90deg,var(--note-red),var(--annotation))} .entry-body,.hw{color:var(--ink)} a{color:var(--blue)} a:hover{border-bottom-color:var(--blue)} .title-page::before{opacity:.15} .title-page::after{opacity:.12} .nb-page.exit-curl::after{ background:linear-gradient(to left,rgba(0,0,0,.25) 0%,rgba(0,0,0,.1) 30%,transparent 55%)} .nb-page.exit-curl::before{opacity:.5} .nb-page.active{box-shadow:0 2px 20px rgba(0,0,0,0.15)} .ctrls input[type="range"]{background:var(--rule)} .line-bg{background-image: repeating-linear-gradient(transparent,transparent var(--line-spacing,25px),var(--rule) var(--line-spacing,25px),var(--rule) calc(var(--line-spacing,25px) + 1px)) } .hw-blue{color:var(--blue)} .meta-row a{color:var(--ink-light)} [style*="background:var(--paper-shadow)"]{background:var(--paper-shadow)!important;border-color:var(--rule)!important} } @keyframes touch-press{ 0%{transform:scale(1)} 50%{transform:scale(0.95)} 100%{transform:scale(1)} } .ctrl:active, .nb-btn:active, .nb-dot:active, .toc-link:active, .nb-strip-btn:active, .nb-nav:active, .nb-scroll-top:active, [role="button"]:active, button:active{ animation:touch-press .15s ease; } .ctrl, .nb-btn, .toc-link, .nb-strip-btn, [role="button"], button{ -webkit-tap-highlight-color:rgba(184,64,64,0.08); } .spiral-ring { border-color: var(--spiral); background: linear-gradient( 135deg, var(--paper) 0%, rgba(200,190,175,0.6) 40%, var(--paper) 60%, rgba(180,170,155,0.4) 100% ); box-shadow: inset 0 1px 2px rgba(0,0,0,.12), inset 0 -1px 1px rgba(255,255,255,.15), 0 1px 3px rgba(0,0,0,.08); } .spiral { background: linear-gradient(90deg, var(--paper-shadow) 0%, rgba(160,150,135,0.08) 30%, var(--paper) 100% ), repeating-linear-gradient( 180deg, transparent 0px, transparent 3px, rgba(0,0,0,.015) 3px, rgba(0,0,0,.015) 4px ); } .spiral-ring:first-child, .spiral-ring:last-child { width: 24px; height: 24px; border-width: 3.5px; opacity: 0.8; } .entry-tag { position: relative; padding-left: 14px; letter-spacing: 0.08em; } .entry-tag::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--ink-light); opacity: 0.35; transition: opacity 0.2s ease, transform 0.2s ease; } .nb-page.active .entry-tag::before { opacity: 0.65; transform: translateY(-50%) scale(1.15); } .nb-page:has(.printout canvas) .entry-tag::before { background: #4a9b8e; opacity: 0.6; box-shadow: 0 0 4px rgba(74,155,142,0.3); } .nb-page.active:has(.printout canvas) .entry-tag::before { opacity: 0.9; box-shadow: 0 0 6px rgba(74,155,142,0.4); } .nb-page:has(svg) .entry-tag::before { background: #8a6baa; opacity: 0.55; } .nb-page.active:has(svg) .entry-tag::before { opacity: 0.85; } .nb-page[data-page="100"], .nb-page[data-page="200"], .nb-page[data-page="300"], .nb-page[data-page="500"], .nb-page[data-page="1000"], .nb-page[data-page="2000"], .nb-page[data-page="3000"] { --milestone: 1; } .nb-page:has([style*="--milestone"]) .entry-tag::before, .nb-page[data-page="100"] .entry-tag::before, .nb-page[data-page="200"] .entry-tag::before, .nb-page[data-page="300"] .entry-tag::before, .nb-page[data-page="500"] .entry-tag::before, .nb-page[data-page="1000"] .entry-tag::before, .nb-page[data-page="2000"] .entry-tag::before, .nb-page[data-page="3000"] .entry-tag::before { background: #c49a3a; box-shadow: 0 0 5px rgba(196,154,58,0.3); } .nb-page.active .entry-body { text-shadow: 0 0 0 transparent; transition: text-shadow 0.4s ease; } .nb-page.active .line-bg .entry-body { text-shadow: 0 0 0 transparent; } .nb-page.active .hw { transition: color 0.3s ease; } .nb-strip-section.on { box-shadow: 0 -2px 0 var(--ink), 0 -4px 12px rgba(0,0,0,.08), 0 -1px 4px rgba(0,0,0,.04); transition: color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease, font-weight 0.1s; } .nb-strip-sep { background: linear-gradient( 180deg, transparent 0%, var(--rule) 30%, var(--rule) 70%, transparent 100% ); opacity: 0.6; } @media(prefers-reduced-motion:reduce){ .entry-tag::before { transition: none !important; } .nb-strip-section.on { transition: color 0.2s ease, background 0.2s ease !important; } } @media(prefers-color-scheme:dark){ .spiral-ring { background: linear-gradient( 135deg, var(--paper) 0%, rgba(100,95,85,0.5) 40%, var(--paper) 60%, rgba(80,75,65,0.3) 100% ); box-shadow: inset 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 1px rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.15); } .spiral { background: linear-gradient(90deg, var(--paper-shadow) 0%, rgba(80,75,65,0.08) 30%, var(--paper) 100% ); } .entry-tag::before { opacity: 0.45; } .nb-page.active .entry-tag::before { opacity: 0.8; } .nb-page:has(.printout canvas) .entry-tag::before { box-shadow: 0 0 5px rgba(74,155,142,0.4); } .nb-page:has(svg) .entry-tag::before { box-shadow: 0 0 5px rgba(138,107,170,0.4); } .nb-strip-section.on { box-shadow: 0 -2px 0 var(--ink), 0 -4px 12px rgba(0,0,0,.25), 0 -1px 4px rgba(0,0,0,.15); } .nb-strip-sep { opacity: 0.4; } } .nb-nav { opacity: 0; transition: opacity 0.3s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, background 0.2s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .nb-page.active ~ .nb-nav, .nb-nav.visible { opacity: 0.65; } .nb-nav.prev:hover { opacity: 0.9 !important; transform: translateY(-50%) scale(1.1) translateX(-3px); box-shadow: 0 3px 12px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08); } .nb-nav.next:hover { opacity: 0.9 !important; transform: translateY(-50%) scale(1.1) translateX(3px); box-shadow: 0 3px 12px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08); } .nb-nav:active { transform: translateY(-50%) scale(0.95) !important; transition: transform 0.08s ease; } .nb-pagenum { transition: color 0.2s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease; } .nb-pagenum:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06); } .nb-pagenum.flash { animation: pagenum-flash 0.35s ease-out; } @keyframes pagenum-flash { 0% { transform: scale(1.08); color: var(--ink); } 100% { transform: scale(1); } } .nb-dot.active { transition: background 0.2s, transform 0.3s cubic-bezier(.34,1.56,.64,1); } .nb-scroll-top { transition: opacity 0.25s, transform 0.2s cubic-bezier(.34,1.56,.64,1); } .nb-scroll-top:hover { transform: translateY(-2px) scale(1.08); } .nb-fullscreen-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(26, 26, 46, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .nb-fullscreen-overlay.open { opacity: 1; pointer-events: auto; } .nb-fullscreen-canvas-wrap { position: relative; width: 94vw; height: 88vh; max-width: 1200px; display: flex; align-items: center; justify-content: center; } .nb-fullscreen-canvas-wrap canvas { border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.2); max-width: 100%; max-height: 100%; } .nb-fullscreen-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(224, 219, 208, 0.6); } .nb-fullscreen-close { background: rgba(224, 219, 208, 0.1); border: 1px solid rgba(224, 219, 208, 0.2); color: rgba(224, 219, 208, 0.7); padding: 4px 14px; border-radius: 4px; cursor: pointer; font-family: 'Caveat', cursive; font-size: 14px; transition: background 0.15s, color 0.15s; } .nb-fullscreen-close:hover { background: rgba(224, 219, 208, 0.2); color: rgba(224, 219, 208, 1); } .nb-fullscreen-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(224, 219, 208, 0.35); white-space: nowrap; } .printout:has(canvas) { cursor: default; } .printout canvas { cursor: pointer; transition: box-shadow 0.2s ease; } .printout canvas:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.04); } .printout:has(canvas)::after { content: '\25A1'; position: absolute; top: 8px; right: 8px; font-size: 14px; color: var(--ink-light); opacity: 0.3; transition: opacity 0.2s; pointer-events: none; } .printout:hover:has(canvas)::after { opacity: 0.6; } @media(prefers-reduced-motion:reduce){ .nb-nav { transition: opacity 0.15s ease !important; } .nb-pagenum.flash { animation: none !important; } .nb-fullscreen-overlay { transition: none !important; } } @media(prefers-color-scheme:dark){ .nb-nav { background: rgba(26,24,20,0.85); border-color: var(--rule); } .nb-nav:hover { background: rgba(40,36,30,0.95); box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15); } .nb-pagenum:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.2); } .nb-fullscreen-overlay { background: rgba(26,24,20,0.95); } .nb-fullscreen-canvas-wrap canvas { box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 10px rgba(0,0,0,0.3); } .nb-fullscreen-close { background: rgba(224,219,208,0.08); border-color: rgba(224,219,208,0.15); color: rgba(224,219,208,0.6); } .nb-fullscreen-close:hover { background: rgba(224,219,208,0.15); color: rgba(224,219,208,0.9); } .printout:has(canvas)::after { color: var(--ink-light); } .printout:hover:has(canvas)::after { opacity: 0.5; } .printout canvas:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.2); } .nb-page.active .entry-date, .nb-page.active .entry-tag, .nb-page.active h2, .nb-page.active .entry-body, .nb-page.active .hw, .nb-page.active .printout, .nb-page.active .bracket, .nb-page.active .pencil, .nb-page.active .nb-pc { animation-duration: 0.3s; } .printout { border-color: rgba(232,224,210,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(26,26,46,0.5); } .printout:hover { border-color: rgba(232,224,210,0.15); } .printout-label { background: rgba(232,224,210,0.06); color: var(--ink-light); } #nb-loading > div:first-child { animation: loading-float 2s ease-in-out infinite, loading-glow-dark 3s ease-in-out infinite; } @keyframes loading-glow-dark { 0%, 100% { filter: grayscale(0.2) drop-shadow(0 0 4px rgba(184,100,64,0.0)); } 50% { filter: grayscale(0.1) drop-shadow(0 0 14px rgba(184,100,64,0.35)); } } #nb-loading > div:nth-child(3) { background: rgba(232,224,210,0.1); } #nb-loading > div:nth-child(3) > div { background: linear-gradient(90deg, var(--ink), var(--annotation)); } } .nb-page .entry-date, .nb-page .entry-tag, .nb-page h2, .nb-page .entry-body, .nb-page .hw, .nb-page .printout, .nb-page .bracket, .nb-page .pencil, .nb-page .nb-pc { opacity: 0; transform: translateY(6px); transition: none; } .nb-page.active .entry-date { animation: content-reveal 0.4s ease-out 0.05s both; } .nb-page.active .entry-tag { animation: content-reveal 0.35s ease-out 0.12s both; } .nb-page.active h2 { animation: content-reveal 0.45s ease-out 0.18s both; } .nb-page.active .entry-body:nth-of-type(1) { animation: content-reveal 0.45s ease-out 0.25s both; } .nb-page.active .entry-body:nth-of-type(2) { animation: content-reveal 0.45s ease-out 0.32s both; } .nb-page.active .entry-body:nth-of-type(3) { animation: content-reveal 0.45s ease-out 0.39s both; } .nb-page.active .entry-body:nth-of-type(n+4) { animation: content-reveal 0.45s ease-out 0.46s both; } .nb-page.active .printout { animation: content-reveal 0.5s ease-out 0.30s both; } .nb-page.active .hw { animation: content-reveal 0.45s ease-out 0.50s both; } .nb-page.active .bracket { animation: content-reveal 0.3s ease-out 0.55s both; } .nb-page.active .pencil { animation: content-reveal 0.35s ease-out 0.60s both; } .nb-page.active .nb-pc { animation: content-reveal 0.3s ease-out 0.65s both; } @keyframes content-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media(prefers-reduced-motion:reduce){ .nb-page .entry-date, .nb-page .entry-tag, .nb-page h2, .nb-page .entry-body, .nb-page .hw, .nb-page .printout, .nb-page .bracket, .nb-page .pencil, .nb-page .nb-pc { opacity: 1 !important; transform: none !important; animation: none !important; } } .nb-page[data-page="1"] .entry-date, .nb-page[data-page="1"] .entry-tag, .nb-page[data-page="1"] h2, .nb-page[data-page="1"] .entry-body, .nb-page[data-page="1"] .hw, .nb-page[data-page="1"] .bracket, .nb-page[data-page="1"] .pencil, .nb-page[data-page="1"] .nb-pc { opacity: 1; transform: none; animation: none !important; } .nb-page[data-page="1"] .sticky-note { opacity: 1; transform: rotate(1.2deg); animation: none !important; } .printout { border: 1px solid rgba(26,26,46,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(245,240,232,0.5); transition: box-shadow 0.3s ease, border-color 0.3s ease; } .printout:hover { border-color: rgba(26,26,46,0.15); box-shadow: 0 3px 12px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(245,240,232,0.5); } .printout-label { display: inline-block; background: rgba(26,26,46,0.04); padding: 1px 8px; border-radius: 3px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 4px; transition: background 0.2s ease; } .printout:hover .printout-label { background: rgba(26,26,46,0.08); } .printout canvas { border-radius: 2px; transition: box-shadow 0.3s ease; } .nb-page.active.scrollable::before { background: linear-gradient( 90deg, var(--note-red) 0%, var(--annotation) 40%, var(--note-red) 60%, var(--annotation) 100% ); background-size: 200% 100%; animation: progress-shimmer 2s linear infinite; } @keyframes progress-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } #nb-loading > div:first-child { filter: grayscale(0.3); animation: loading-float 2s ease-in-out infinite, loading-glow 3s ease-in-out infinite; } @keyframes loading-glow { 0%, 100% { filter: grayscale(0.3) drop-shadow(0 0 4px rgba(139,92,42,0.0)); } 50% { filter: grayscale(0.2) drop-shadow(0 0 12px rgba(139,92,42,0.25)); } } #nb-loading > div:nth-child(2) { color: var(--ink); font-weight: 400; } #nb-loading > div:nth-child(3) { width: 140px; height: 3px; border-radius: 2px; background: var(--rule); } #nb-loading > div:nth-child(3) > div { border-radius: 2px; background: linear-gradient(90deg, var(--ink), var(--note-red)); animation: loading-bar 1.5s ease-in-out infinite, loading-bar-shimmer 2s linear infinite; } @keyframes loading-bar-shimmer { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } } @media(prefers-reduced-motion:reduce){ #nb-loading > div:first-child { animation: none !important; filter: grayscale(0.3); } #nb-loading > div:nth-child(3) > div { animation: none !important; opacity: 1; } } .toc-link .toc-num { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--ink-light); opacity: 0.5; margin-right: 0.5rem; min-width: 3.2em; display: inline-block; text-align: right; transition: opacity 0.15s ease; } .toc-link .toc-title { font-weight: 400; color: var(--ink-faded); transition: color 0.15s ease; } .toc-link { display: flex; align-items: baseline; padding: 0.15rem 0.3rem; border-radius: 3px; transition: background 0.15s ease, transform 0.15s ease; } .toc-link:hover { background: rgba(0,0,0,0.04); transform: translateX(2px); } .toc-link:hover .toc-num { opacity: 0.7; } .toc-link:hover .toc-title { color: var(--ink); } .toc-link:active { transform: translateX(2px) scale(0.99); } .toc-link.active { background: rgba(26,26,46,0.06); border-left: 2px solid var(--annotation); padding-left: calc(0.3rem - 2px); } .toc-link.active .toc-num { opacity: 0.8; color: var(--annotation); } .toc-link.active .toc-title { color: var(--ink); font-weight: 500; } .toc-link.navigating { background: rgba(184,64,64,0.08); } .toc-link.navigating .toc-title { color: var(--note-red); } .toc-link::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.4rem; flex-shrink: 0; background: var(--rule); opacity: 0; transition: opacity 0.15s ease; align-self: center; } .toc-link:hover::before { opacity: 0.5; } .toc-link[data-tag="experiment"]::before { background: #2e8b57; opacity: 0.6; } .toc-link[data-tag="long thought"]::before { background: #1a1a2e; opacity: 0.5; } .toc-link[data-tag="oddment"]::before { background: #8b5e14; opacity: 0.6; } .toc-link[data-tag="visual"]::before { background: #8b1a4a; opacity: 0.6; } .toc-link[data-tag="mathematics"]::before { background: #0a3d5c; opacity: 0.6; } .toc-link[data-tag="physics"]::before { background: #5b2d8e; opacity: 0.6; } .toc-link[data-tag="algorithms"]::before { background: #1a6b4a; opacity: 0.6; } .toc-link[data-tag="neuroscience"]::before { background: #cc5500; opacity: 0.6; } .toc-link.active[data-tag="experiment"]::before { opacity: 1; } .toc-link.active[data-tag="long thought"]::before { opacity: 0.9; } .toc-link.active[data-tag="oddment"]::before { opacity: 1; } .toc-link.active[data-tag="visual"]::before { opacity: 1; } @media(max-width:640px){ .nb-strip { bottom: 8px; left: 50%; right: auto; transform: translateX(-50%); width: auto; max-width: calc(100vw - 20px); border-radius: 24px; border: 1px solid var(--rule); border-top: 1px solid var(--rule); box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04); padding: 4px 6px; gap: 0; background: rgba(245,240,232,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nb-strip-section.on { border-radius: 20px; background: rgba(26,26,46,0.06); box-shadow: 0 -1px 0 var(--ink), 0 1px 4px rgba(0,0,0,0.06); padding: 3px 12px; } .nb-strip-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rule); margin: 0 2px; flex-shrink: 0; } .nb-strip-pagenum { display: inline-block; font-size: 0.68rem; color: var(--ink-faded); margin: 0 4px; order: -1; } } .entry-tag { border-left: 2px solid transparent; padding-left: 0.5rem; transition: border-color 0.2s ease, background 0.2s ease; } .nb-page .entry-tag:has(+ h2) { } .nb-page:has(.printout canvas) .entry-tag { border-left-color: #2e8b57; } .nb-page:has(.printout canvas) .entry-tag::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #2e8b57; margin-left: 0.3rem; vertical-align: middle; } .nb-page:has(svg) .entry-tag { border-left-color: #8b1a4a; } .nb-page:not(:has(.printout canvas)):not(:has(svg)) .entry-tag { border-left-color: var(--rule); opacity: 0.7; } .toc-link.active { font-weight: 500; } .toc-link.navigating { transition: background 0.1s ease; } @media(prefers-color-scheme:dark){ .toc-link .toc-pg { color: var(--ink-light); } .toc-link .toc-title { color: var(--ink-light); } .toc-link:hover { background: rgba(232,224,210,0.06); } .toc-link:hover .toc-title { color: var(--ink); } .toc-link.active { background: rgba(232,224,210,0.08); border-left-color: var(--annotation); } .toc-link.active .toc-title { color: var(--ink); } .toc-link.active .toc-pg { color: var(--annotation); } .nb-strip { background: rgba(26,26,46,0.92); box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15); } .nb-strip-section.on { background: rgba(232,224,210,0.1); box-shadow: 0 -1px 0 var(--ink), 0 1px 4px rgba(0,0,0,0.15); } .nb-strip-sep { background: rgba(232,224,210,0.2); } .nb-page:has(.printout canvas) .entry-tag { border-left-color: #3ab5b0; } .nb-page:has(.printout canvas) .entry-tag::after { background: #3ab5b0; } .nb-page:has(svg) .entry-tag { border-left-color: #e88db0; } .nb-page:not(:has(.printout canvas)):not(:has(svg)) .entry-tag { border-left-color: rgba(232,224,210,0.2); } } .spiral-ring { transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.6s ease; } .spiral-ring:nth-child(odd) { transition-delay: 0.03s; } .spiral-ring:nth-child(3n) { transition-delay: 0.06s; } .spiral-ring:nth-child(5n) { transition-delay: 0.09s; } .spiral-ring.nav-forward { transform: translateY(-3px) scale(1.08); box-shadow: inset 0 1px 3px rgba(0,0,0,.18), 0 0 10px rgba(138,128,112,.2); border-color: var(--ink-light); } .spiral-ring.nav-backward { transform: translateY(3px) scale(0.95); box-shadow: inset 0 -1px 3px rgba(0,0,0,.15), 0 0 6px rgba(138,128,112,.15); } .spiral-ring.nav-highlight { transform: translateY(0) scale(1.12); box-shadow: inset 0 1px 2px rgba(0,0,0,.12), 0 0 14px rgba(184,64,64,.2), 0 0 4px rgba(138,128,112,.3); border-color: rgba(184,64,64,.35); } .wax-seal { perspective: 200px; } .wax-seal:hover { transform: rotate(-3deg) translateY(-3px) scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.1), inset 0 -2px 4px rgba(0,0,0,.12), 0 0 20px rgba(184,64,64,.08); animation: seal-wobble 0.6s ease; } .stamp { position: relative; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, opacity 0.25s ease; } .stamp:hover { transform: rotate(0deg) translateY(-1px) scale(1.04); opacity: 1; box-shadow: 0 3px 10px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08); } .stamp:active { transform: rotate(0deg) translateY(0) scale(0.97); box-shadow: 0 1px 4px rgba(0,0,0,.15); transition-duration: 0.08s; } .nb-viewport::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; mix-blend-mode: multiply; } @media (prefers-reduced-motion: reduce) { .spiral-ring { transition: none !important; } .spiral-ring.nav-forward, .spiral-ring.nav-backward, .spiral-ring.nav-highlight { transform: none !important; box-shadow: none !important; border-color: inherit !important; } .wax-seal:hover { animation: none !important; transform: none !important; box-shadow: none !important; } .stamp:active { transform: none !important; } } @media (prefers-color-scheme: dark) { .nb-viewport::before { opacity: 0.03; mix-blend-mode: screen; } .spiral-ring.nav-forward { box-shadow: inset 0 1px 3px rgba(0,0,0,.3), 0 0 10px rgba(90,84,72,.25); } .spiral-ring.nav-backward { box-shadow: inset 0 -1px 3px rgba(0,0,0,.25), 0 0 6px rgba(90,84,72,.15); } .spiral-ring.nav-highlight { box-shadow: inset 0 1px 2px rgba(0,0,0,.2), 0 0 14px rgba(200,100,100,.15), 0 0 4px rgba(90,84,72,.2); border-color: rgba(200,100,100,.3); } .wax-seal:hover { box-shadow: 0 6px 16px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2), inset 0 -2px 4px rgba(0,0,0,.2), 0 0 20px rgba(200,100,100,.1); } } .nb-page[data-page="1"] .page { width:min(1180px,calc(100vw - 112px)); max-width:none; padding:clamp(.75rem,2vh,1.35rem) 0 4.5rem; } .title-note-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; width:min(720px,72%); margin:0 auto .5rem; align-items:start; } .title-margin-note { position:relative; inset:auto; width:auto; min-height:54px; padding:.45rem .65rem; background:linear-gradient(135deg,#fff9b6,#fff07a); border:1px solid rgba(120,105,45,.12); box-shadow:1px 3px 7px rgba(40,32,20,.12); font-family:'Caveat',cursive; font-size:clamp(.9rem,1.25vw,1.05rem); line-height:1.05; color:#40382f; text-align:left; transform:rotate(-.7deg); animation:none; } .title-margin-note:nth-child(2){transform:rotate(.55deg)} .title-margin-note:nth-child(3){transform:rotate(-.35deg)} .title-page { display:grid; grid-template-columns:minmax(0,1fr) 168px; align-items:center; gap:clamp(1rem,3vw,2.25rem); width:min(820px,84%); min-height:0; margin:0 auto; padding:.35rem 0 .7rem; text-align:center; overflow:visible; } .title-page::before,.title-page::after{display:none} .title-copy{min-width:0} .title-page h1 { margin:0; font-size:clamp(3rem,6vw,4.75rem); line-height:.9; letter-spacing:.01em; animation:none; } .title-page h1::after{animation:none} .title-page .intro { max-width:600px; margin:.45rem auto 0; font-size:clamp(1.05rem,1.65vw,1.3rem); line-height:1.22; animation:none; } .title-page .intro .stamp { display:block; width:max-content; margin:.45rem auto .35rem; transform:rotate(1deg); } .title-page .intro .wax-seal { display:block; width:42px; height:42px; margin:.25rem auto; font-size:1.15rem; line-height:42px; } #nb-last-built { display:block; margin-top:.25rem; font-family:'Caveat',cursive; font-size:.86rem; color:var(--ink-faded); } .title-page .intro>.hw { display:block; max-width:560px; margin:.2rem auto 0; font-size:.92rem; line-height:1.12; color:var(--annotation); } .title-page .sticky-note.title-stats { float:none; width:168px; max-width:none; min-height:132px; margin:0; padding:.75rem .85rem; align-self:center; transform:rotate(.7deg); text-align:left; } .nb-page[data-page="1"] .coffee-stain{display:none} .nb-toc-panel .toc-search-wrap { display:grid; gap:.25rem; font-family:'IBM Plex Mono',monospace; font-size:.65rem; color:var(--ink-light); } #nb-toc-search { width:100%; padding:.48rem .6rem; border:1px solid var(--rule); border-radius:3px; background:var(--printout-bg); color:var(--ink); font:inherit; } .toc-loading{padding:1rem 0;font-family:'Caveat',cursive;color:var(--ink-faded)} body.toc-open{overflow:hidden} .archive-loading .nb-pagenum::after{content:' · opening archive';font-size:.65rem;color:var(--annotation)} .landing-full-index { width:100%; margin:.6rem auto 0; padding-bottom:2rem; } .landing-index-head { position:relative; z-index:2; display:flex; align-items:end; justify-content:space-between; gap:1rem; width:100%; margin:0 0 .75rem; padding:.45rem .7rem; border:1px solid rgba(105,92,72,.14); background:rgba(245,240,230,.93); box-shadow:0 2px 8px rgba(50,42,30,.08); backdrop-filter:blur(8px); } .landing-index-head>div{display:grid;line-height:1} .landing-index-head strong{font-family:'Caveat',cursive;font-size:1.3rem} .landing-index-head>div span,.landing-index-head label span{font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:var(--ink-light)} .landing-index-head label{display:grid;gap:.18rem;width:min(280px,42vw);text-align:left} #landing-toc-search{width:100%;padding:.38rem .55rem;border:1px solid var(--rule);border-radius:2px;background:var(--printout-bg);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:.7rem} .landing-full-index .nb-toc{max-width:none;margin:0} .landing-full-index .toc-notes-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-flow:row dense; gap:.58rem; margin:0; align-items:start; } .landing-full-index .toc-note, .landing-full-index .toc-note.wide, .landing-full-index .toc-note.narrow { grid-column:span 1; width:100%; min-width:0; max-width:none; padding:.55rem .6rem .62rem; overflow:visible; background:linear-gradient(145deg,color-mix(in srgb,var(--note-bg) 92%,white),var(--note-bg)); content-visibility:auto; contain-intrinsic-size:760px; } .landing-full-index .toc-note-title{font-size:1.15rem;line-height:1.08;margin-bottom:.32rem} .landing-full-index .toc-link { display:flex; align-items:baseline; gap:.35rem; width:100%; min-width:0; padding:.035rem .08rem; font-size:.95rem; line-height:1.08; } .landing-full-index .toc-link::before{display:none} .landing-full-index .toc-link .toc-pg { order:0; float:none; flex:0 0 3.1em; margin:0; font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-align:right; color:#5b534b; opacity:.78; } .landing-full-index .toc-link .toc-title { order:1; min-width:0; color:#40382f; overflow-wrap:anywhere; } .nb-home,.nb-random,.nb-bookmark { bottom:52px; width:42px; height:42px; min-width:42px; min-height:42px; border-width:2px; } .nb-home{left:60px} .nb-random{left:110px} .nb-bookmark{left:160px} @media(max-width:900px){ .nb-page[data-page="1"] .page{width:min(820px,calc(100vw - 92px))} .title-note-row{width:94%} .title-page{width:92%;grid-template-columns:minmax(0,1fr) 148px} .title-page .sticky-note.title-stats{width:148px} .landing-full-index .toc-notes-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:640px){ .nb-page[data-page="1"] .page{width:100%;padding:.45rem 0 4.25rem} .title-note-row{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:.3rem} .title-margin-note{min-height:46px;padding:.35rem .4rem;font-size:.78rem} .title-page{grid-template-columns:1fr;width:100%;gap:.25rem;padding:.25rem 0 .4rem} .title-page h1{font-size:clamp(2.7rem,14vw,3.75rem)} .title-page .intro{font-size:1rem;line-height:1.14} .title-page .intro>.hw{font-size:.82rem;line-height:1.05} .title-page .sticky-note.title-stats{width:min(220px,72vw);min-height:0;margin:.25rem auto;padding:.45rem .65rem} .coffee-stain{display:none} .landing-index-head{top:.25rem;align-items:stretch;flex-direction:column;gap:.35rem} .landing-index-head label{width:100%} .landing-full-index .toc-notes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem} .landing-full-index .toc-note{padding:.45rem .48rem .5rem} .landing-full-index .toc-link{font-size:.9rem;line-height:1.08} } @media(max-width:400px){ .title-note-row{grid-template-columns:1fr 1fr} .title-margin-note:nth-child(3){display:none} .landing-full-index .toc-notes-grid{grid-template-columns:1fr} } @keyframes nav-chevron-pulse { 0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); } 50% { opacity: 0.75; transform: translateY(-50%) scale(1.06); } } .nb-nav-hit { font-size: 1.8rem; font-weight: 300; line-height: 1; color: var(--ink-light, #6b6358); pointer-events: none; user-select: none; transition: color 0.2s ease, transform 0.2s ease; } .nb-nav.visible .nb-nav-hit { animation: nav-chevron-pulse 3s ease-in-out infinite; } .nb-nav.prev:hover .nb-nav-hit { color: var(--ink, #2a2a2a); transform: translateX(-2px); } .nb-nav.next:hover .nb-nav-hit { color: var(--ink, #2a2a2a); transform: translateX(2px); } .nb-nav:active .nb-nav-hit { transform: scale(0.85) !important; transition-duration: 0.08s; } .nb-nav.nav-flash { box-shadow: 0 0 20px rgba(107, 99, 88, 0.25), 0 0 6px rgba(184, 64, 64, 0.15) !important; } .nb-nav.nav-flash .nb-nav-hit { color: var(--ink, #2a2a2a) !important; opacity: 1 !important; animation: none !important; } @keyframes tap-ripple { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } @media (hover: none) and (pointer: coarse) { .nb-nav, .nb-home, .nb-random, .nb-strip-section, .nb-toc-panel .toc-link, .ctrls button, .toc-search { transition: transform 0.12s ease !important; } .nb-nav:active, .nb-home:active, .nb-random:active, .nb-strip-section:active, .nb-toc-panel .toc-link:active, .ctrls button:active { animation: tap-ripple 0.3s ease; } .nb-nav { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; } .nb-nav.prev { left: 10px !important; } .nb-nav.next { right: 10px !important; } } @media (prefers-reduced-motion: reduce) { .nb-nav.visible .nb-nav-hit { animation: none !important; } .nb-nav.nav-flash { box-shadow: none !important; } @media (hover: none) and (pointer: coarse) { .nb-nav:active, .nb-home:active, .nb-random:active, .nb-strip-section:active, .nb-toc-panel .toc-link:active, .ctrls button:active { animation: none !important; } } } @media (prefers-color-scheme: dark) { .nb-nav-hit { color: #8a8278; } .nb-nav:hover .nb-nav-hit { color: #e8e0d2; } .nb-nav.nav-flash { box-shadow: 0 0 20px rgba(138, 130, 120, 0.3), 0 0 6px rgba(200, 100, 100, 0.2) !important; } .nb-nav.nav-flash .nb-nav-hit { color: #e8e0d2 !important; } } @supports (animation-timeline: scroll()) { .nb-page .entry-body, .nb-page .hw { opacity: 0; transform: translateY(8px); animation: scroll-reveal-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 25%; } .nb-page .printout { opacity: 0; transform: translateY(10px); animation: scroll-reveal-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 20%; } .nb-page h2 { opacity: 0; transform: translateY(6px); animation: scroll-reveal-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 15%; } .nb-page svg { opacity: 0; transform: scale(0.98); animation: scroll-reveal-scale linear both; animation-timeline: view(); animation-range: entry 0% entry 20%; } } @keyframes scroll-reveal-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes scroll-reveal-scale { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } .nb-page .rv { counter-reset: entry-separator; } .nb-page.active .entry-date { position: relative; padding-left: 16px; opacity: 0; transform: translateX(-8px); animation: meta-slide-in 0.4s ease-out 0.15s forwards; } .nb-page.active .entry-date::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 14px; background: var(--annotation); opacity: 0.4; border-radius: 2px; } .nb-page.active .entry-tag { opacity: 0; transform: translateX(-6px); animation: meta-slide-in 0.4s ease-out 0.25s forwards; transition: transform 0.2s ease, box-shadow 0.2s ease; } .nb-page.active .entry-tag:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); border-style: solid; } .nb-page.active .entry-tag::after { content: ''; display: block; width: 40px; height: 1px; background: var(--ink); opacity: 0.08; margin-top: 8px; margin-bottom: 4px; transform: scaleX(0); transform-origin: left; animation: meta-line-expand 0.5s ease-out 0.4s forwards; } @keyframes meta-slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @keyframes meta-line-expand { from { transform: scaleX(0); } to { transform: scaleX(1); } } .title-page h1 { clip-path: inset(0 100% 0 0); animation: title-ink-reveal 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards, title-breathe 4s ease-in-out 2.0s infinite; } @keyframes title-ink-reveal { 0% { clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0% 0 0); } 100% { clip-path: inset(0 0% 0 0); } } .title-page h1::after { transform: scaleX(0) rotate(-0.5deg); transform-origin: left center; animation: title-rule-reveal 0.6s ease-out 1.4s forwards, title-rule-pulse 4s ease-in-out 2.0s infinite; } @keyframes title-rule-reveal { from { transform: scaleX(0) rotate(-0.5deg); } to { transform: scaleX(1) rotate(-0.5deg); } } .title-page .intro { opacity: 0; transform: translateY(12px); animation: title-intro-fade 0.8s ease-out 1.6s forwards, intro-warmth 6s ease-in-out 2.4s infinite; } @keyframes title-intro-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .title-page h1 { clip-path: none; animation: none; } .title-page h1::after { transform: rotate(-0.5deg); animation: none; } .title-page .intro { opacity: 1; transform: none; animation: none; } .nb-page.active .entry-date, .nb-page.active .entry-tag { opacity: 1; transform: none; animation: none; } .nb-page.active .entry-tag::after { transform: scaleX(1); animation: none; } @supports (animation-timeline: scroll()) { .nb-page .entry-body, .nb-page .hw, .nb-page .printout, .nb-page h2, .nb-page svg { opacity: 1; transform: none; animation: none; } } } @media (prefers-color-scheme: dark) { .nb-page.active .entry-date::before { opacity: 0.25; } .nb-page.active .entry-tag::after { opacity: 0.15; } .nb-page.active .entry-tag:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } @supports (animation-timeline: scroll()) { @keyframes scroll-reveal-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 0.95; transform: translateY(0); } } } } #nb-loading > div:nth-child(2) { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--ink-light); width: 0; animation: loading-type 1.8s steps(18, end) 0.6s forwards, loading-cursor-blink 0.6s step-end infinite; font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ink-faded); } @keyframes loading-type { from { width: 0; } to { width: 11.5ch; } } @keyframes loading-cursor-blink { 0%, 100% { border-right-color: var(--ink-light); } 50% { border-right-color: transparent; } } #nb-loading > div:nth-child(2)::after { content: ''; display: block; margin-top: 1rem; width: 0; height: 2px; background: linear-gradient(90deg, var(--ink), transparent); animation: loading-underline-grow 0.8s ease-out 2.4s forwards; border-radius: 1px; } @keyframes loading-underline-grow { from { width: 0; } to { width: 100px; } } #nb-loading > div:first-child { animation: loading-float 2.4s ease-in-out infinite, loading-tilt 4s ease-in-out infinite, loading-glow 3s ease-in-out infinite; } @keyframes loading-tilt { 0%, 100% { transform: rotate(-3deg) translateY(0); } 25% { transform: rotate(2deg) translateY(-4px); } 50% { transform: rotate(-1deg) translateY(-2px); } 75% { transform: rotate(3deg) translateY(-6px); } } #nb-loading > div:nth-child(3) > div { animation: loading-bar 2s cubic-bezier(0.4, 0, 0.2, 1) infinite, loading-bar-shimmer 2s linear infinite; } @media (prefers-reduced-motion: reduce) { #nb-loading > div:nth-child(2) { width: auto; border-right: none; animation: none; overflow: visible; white-space: normal; } #nb-loading > div:nth-child(2)::after { animation: none; width: 100px; height: 2px; background: linear-gradient(90deg, var(--ink), transparent); display: block; margin-top: 1rem; border-radius: 1px; } #nb-loading > div:first-child { animation: loading-glow 3s ease-in-out infinite; } #nb-loading > div:nth-child(3) > div { animation: loading-bar 1.5s ease-in-out infinite; } } .printout:has(canvas) { box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 6px rgba(0, 0, 0, 0.04), inset 0 0 20px rgba(74, 155, 142, 0.03); border-color: rgba(74, 155, 142, 0.25); border-left-color: var(--note-red); } .nb-page.active .printout:has(canvas) { box-shadow: 1px 3px 12px rgba(0, 0, 0, 0.1), 2px 6px 20px rgba(0, 0, 0, 0.04), inset 0 1px 8px rgba(0, 0, 0, 0.05), inset 0 0 24px rgba(74, 155, 142, 0.04); transition: box-shadow 0.3s ease; } .printout canvas { border-radius: 3px; transition: box-shadow 0.3s ease; } .nb-page.active .printout canvas { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); } .printout-note { font-family: 'Caveat', cursive; color: var(--ink-light); font-size: 0.95rem; padding: 0.6rem 0 0; border-top: 1px dashed var(--printout-border); margin-top: 0.8rem; line-height: 1.4; } .ctrls button, .printout button, .ctrl { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; } .ctrls button:hover, .printout button:hover, .ctrl:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } .ctrls button:active, .printout button:active, .ctrl:active { transform: translateY(0px); box-shadow: 0 0px 2px rgba(0, 0, 0, 0.06); background: var(--rule); } .ctrls button.on, .printout button.on, .ctrl.go { box-shadow: 0 1px 4px rgba(74, 155, 142, 0.2); } @media (prefers-color-scheme: dark) { #nb-loading > div:nth-child(2) { border-right-color: var(--ink-light); color: var(--ink-light); } #nb-loading > div:nth-child(2)::after { background: linear-gradient(90deg, var(--ink-light), transparent); } .printout:has(canvas) { box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 6px rgba(0, 0, 0, 0.08), inset 0 0 20px rgba(74, 155, 142, 0.05); border-color: rgba(74, 155, 142, 0.15); } .nb-page.active .printout:has(canvas) { box-shadow: 1px 3px 12px rgba(0, 0, 0, 0.25), 2px 6px 20px rgba(0, 0, 0, 0.1), inset 0 1px 8px rgba(0, 0, 0, 0.1), inset 0 0 24px rgba(74, 155, 142, 0.06); } .printout-note { color: var(--ink-light); border-top-color: rgba(200, 190, 170, 0.2); } .ctrls button:hover, .printout button:hover, .ctrl:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .ctrls button:active, .printout button:active, .ctrl:active { background: rgba(200, 190, 170, 0.15); box-shadow: none; } } .title-page::before { content: ''; position: absolute; top: -4rem; left: 50%; transform: translateX(-50%); width: 600px; height: 500px; background-image: radial-gradient(circle, var(--rule) 0.8px, transparent 0.8px); background-size: 20px 20px; opacity: 0.35; pointer-events: none; z-index: -1; animation: dot-grid-drift 30s linear infinite; } @keyframes dot-grid-drift { 0% { background-position: 0 0; } 100% { background-position: 20px 20px; } } .title-page .stamp:hover { transform: rotate(0deg) scale(1.05) !important; opacity: 1; text-shadow: 0 0 1px rgba(130, 38, 33, 0.3); box-shadow: 0 1px 3px rgba(130, 38, 33, 0.15); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, text-shadow 0.3s ease, box-shadow 0.3s ease; } .title-page .stamp { transition: transform 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease, box-shadow 0.3s ease; } .title-page .wax-seal:hover { transform: scale(1.12) rotate(-3deg); box-shadow: 0 3px 8px rgba(139, 69, 19, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 3px rgba(255, 255, 255, 0.1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .title-page .wax-seal { transition: transform 0.4s ease, box-shadow 0.3s ease; } .title-page .sticky-note:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 2px 6px 14px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .title-page .sticky-note { transition: transform 0.3s ease, box-shadow 0.3s ease; } .title-page .coffee-stain { animation: coffee-pulse 12s ease-in-out infinite; } @keyframes coffee-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.7; } } .ctrl:focus-visible, .nb-btn:focus-visible, .nb-strip-section:focus-visible, .nb-strip-btn:focus-visible, .toc-link:focus-visible, a:focus-visible, [role="button"]:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--blue), 0 0 12px rgba(58, 90, 139, 0.15); border-radius: 3px; transition: box-shadow 0.15s ease; } .nb-nav:focus-visible, .nb-home:focus-visible, .nb-random:focus-visible, .nb-bookmark:focus-visible, .nb-toc-btn:focus-visible, .nb-scroll-top:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--blue), 0 0 8px rgba(58, 90, 139, 0.2); border-radius: 50%; } .nb-toc-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--annotation), 0 0 10px rgba(184, 64, 64, 0.15); } @media (prefers-color-scheme: dark) { .title-page::before { opacity: 0.15; background-image: radial-gradient(circle, rgba(200, 190, 170, 0.4) 0.8px, transparent 0.8px); } .title-page .stamp:hover { text-shadow: 0 0 3px rgba(200, 100, 80, 0.4); box-shadow: 0 1px 6px rgba(200, 100, 80, 0.2); } .title-page .wax-seal:hover { box-shadow: 0 3px 10px rgba(139, 69, 19, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.05); } .ctrl:focus-visible, .nb-btn:focus-visible, .nb-strip-section:focus-visible, .nb-strip-btn:focus-visible, .toc-link:focus-visible, a:focus-visible, [role="button"]:focus-visible, button:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px rgba(120, 150, 200, 0.7), 0 0 14px rgba(120, 150, 200, 0.12); } .title-page .coffee-stain { animation: coffee-pulse-dark 12s ease-in-out infinite; } @keyframes coffee-pulse-dark { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.5; } } } @media (prefers-reduced-motion: reduce) { .title-page::before { animation: none; } .title-page .coffee-stain { animation: none; } } .margin-line { animation: margin-breathe 8s ease-in-out infinite; } @keyframes margin-breathe { 0%, 100% { opacity: 0.28; width: 2px; } 50% { opacity: 0.45; width: 2.5px; } } .nb-page.active::after { content: ''; position: absolute; left: 0; top: 5%; bottom: 5%; width: 28px; background: linear-gradient(90deg, rgba(180,140,100,0.06) 0%, rgba(180,140,100,0.03) 40%, transparent 100%); pointer-events: none; z-index: 3; animation: edge-glow-pulse 10s ease-in-out infinite; } @keyframes edge-glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .nb-page.active { box-shadow: 0 2px 20px rgba(0,0,0,0.06), 0 1px 6px rgba(0,0,0,0.03), inset -3px 0 12px -8px rgba(0,0,0,0.04); } .spiral-ring { transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease; cursor: default; } .spiral-ring:hover { border-color: #b0a898; box-shadow: 0 0 6px rgba(180,170,150,0.25), inset 0 1px 3px rgba(255,255,255,0.08); transform: scale(1.15); } .spiral-ring.shine-near { border-color: #a09888; box-shadow: 0 0 4px rgba(170,160,140,0.15); } .spiral:hover .spiral-ring { border-color: #908878; } .nb-page.active .page { animation: rule-lines-settle 0.6s ease-out; } @keyframes rule-lines-settle { 0% { transform: translateY(0.5px); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .margin-line { animation: none; opacity: 0.35; } .nb-page.active::after { animation: none; opacity: 0.8; } .nb-page.active .page { animation: none; } .spiral-ring:hover { transform: none; } } .toc-note[data-count]::after { content: attr(data-count); position: absolute; top: 6px; right: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; font-weight: 500; color: var(--ink-faded); background: rgba(0, 0, 0, 0.04); padding: 1px 5px; border-radius: 8px; line-height: 1.4; letter-spacing: 0.02em; pointer-events: none; transition: background 0.2s ease, color 0.2s ease; } .toc-note:hover[data-count]::after { background: rgba(0, 0, 0, 0.08); color: var(--ink); } .toc-note[data-count]::before { height: 5px; } .spiral-ring.scroll-shimmer { border-color: var(--note-red, #a04030); box-shadow: 0 0 6px rgba(160, 64, 48, 0.15), inset 0 0 3px rgba(255, 255, 255, 0.15); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .spiral-ring { transition: border-color 0.6s ease, box-shadow 0.6s ease, transform 0.3s ease; } .toc-note[data-count]::after { background: rgba(255, 255, 255, 0.06); color: var(--ink-light); } .toc-note:hover[data-count]::after { background: rgba(255, 255, 255, 0.12); color: var(--ink); } .spiral-ring.scroll-shimmer { border-color: var(--note-red, #a04030); box-shadow: 0 0 8px rgba(160, 64, 48, 0.25), inset 0 0 4px rgba(255, 240, 220, 0.1); } .ctrl { touch-action: manipulation; font-family: 'Caveat', cursive; font-size: 1.05rem; font-weight: 600; padding: 0.25rem 0.75rem; background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(245,240,232,0.2) 100%); border: 1.5px solid var(--ctrl-border); border-bottom-width: 2.5px; border-radius: 3px; color: var(--ink); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.12s ease, background 0.12s ease; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4); position: relative; text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.3); } .ctrl:hover { transform: translateY(-1px); border-color: var(--ink); color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5); background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(245,240,232,0.4) 100%); } .ctrl:active, .ctrl:focus:active { transform: translateY(0.5px); border-bottom-width: 1.5px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0); background: linear-gradient(180deg, rgba(245,240,232,0.3) 0%, rgba(235,228,218,0.2) 100%); transition: transform 0.04s ease, box-shadow 0.04s ease; } .ctrl.go { background: linear-gradient(180deg, rgba(120,200,120,0.3) 0%, rgba(80,160,80,0.15) 100%); border-color: var(--green); color: #2a5a2a; text-shadow: 0 0.5px 0 rgba(200,255,200,0.3); } .ctrl.go:hover { background: linear-gradient(180deg, rgba(120,200,120,0.45) 0%, rgba(80,160,80,0.3) 100%); box-shadow: 0 2px 8px rgba(80, 160, 80, 0.15), 0 1px 2px rgba(0, 0, 0, 0.04); } .ctrls input[type="range"] { height: 4px; -webkit-appearance: none; appearance: none; background: var(--rule); border-radius: 2px; border: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); cursor: pointer; } .ctrls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ctrl-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5); cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; } .ctrls input[type="range"]::-webkit-slider-thumb:hover { border-color: var(--ink); transform: scale(1.1); } .ctrls input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.95); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); } .ctrls input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ctrl-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); cursor: pointer; } .nb-page .printout { border-left: 3px solid transparent; transition: border-left-color 0.3s ease; } .nb-page:has(.entry-tag) .printout { border-left-color: var(--printout-accent, var(--rule)); } .nb-page:has([data-page]) .printout { border-left-color: var(--rule); } .nb-page .entry-tag { transition: all 0.2s ease; } .printout-note { border-top: 1px dashed var(--note-red); padding-top: 0.4rem; margin-top: 0.6rem; position: relative; } .printout-note::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--note-red); margin-right: 0.4rem; vertical-align: middle; opacity: 0.6; box-shadow: 0 0 4px rgba(180, 60, 50, 0.15); } .nb-btn { touch-action: manipulation; font-family: 'Caveat', cursive; font-size: 1.05rem; font-weight: 600; padding: 0.25rem 0.75rem; background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(245,240,232,0.2) 100%); border: 1.5px solid var(--ctrl-border); border-bottom-width: 2.5px; border-radius: 3px; color: var(--ink); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.12s ease; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .nb-btn:hover { transform: translateY(-1px); border-color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); } .nb-btn:active { transform: translateY(0.5px); border-bottom-width: 1.5px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } .ctrl { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); border-color: rgba(200, 190, 170, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); text-shadow: none; } .ctrl:hover { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%); border-color: rgba(200, 190, 170, 0.4); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .ctrl:active { box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25); } .ctrl.go { background: linear-gradient(180deg, rgba(120,200,120,0.15) 0%, rgba(80,160,80,0.08) 100%); border-color: rgba(120, 200, 120, 0.3); color: var(--ink); } .nb-btn { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); border-color: rgba(200, 190, 170, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); text-shadow: none; } .nb-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%); border-color: rgba(200, 190, 170, 0.4); } .ctrls input[type="range"]::-webkit-slider-thumb { background: rgba(200, 190, 170, 0.8); border-color: rgba(200, 190, 170, 0.3); } .nb-page .printout { border-left-color: rgba(200, 190, 170, 0.15); } .printout-note::before { background: var(--note-red); opacity: 0.4; } @media (prefers-color-scheme: dark) { .margin-line { animation-name: margin-breathe-dark; } @keyframes margin-breathe-dark { 0%, 100% { opacity: 0.22; width: 2px; } 50% { opacity: 0.35; width: 2.5px; } } .nb-page.active::after { background: linear-gradient(90deg, rgba(120,110,100,0.08) 0%, rgba(120,110,100,0.03) 40%, transparent 100%); } .spiral-ring:hover { border-color: #7a7268; box-shadow: 0 0 8px rgba(140,130,110,0.2), inset 0 1px 2px rgba(255,255,255,0.04); } .spiral-ring.shine-near { border-color: #6a6258; box-shadow: 0 0 5px rgba(120,110,90,0.12); } .spiral:hover .spiral-ring { border-color: #5a5248; } } UX RUN 30 — TIER 2: SCROLL-DRIVEN PAGE DEPTH + ENHANCED TRANSITIONS ═══════════════════════════════════════════════════════════════════ Part 1: Scroll depth — active scrollable pages get an intensified box-shadow as the reader scrolls deeper, simulating the page lifting from the notebook surface. JS sets --scroll-depth (0-1) which is consumed by box-shadow intensity. Part 2: Paper grain on curl transitions — subtle noise-like layered gradients on the curl shadow for tactile paper-bending realism. Part 3: Improved reduced-motion crossfade — subtle vertical shift replaces the flat opacity-only transition. */ .nb-page.active.scrollable { --depth-r: 0; --depth-y: 4px; box-shadow: 0 var(--depth-y, 4px) 20px rgba(0,0,0,0.08), 0 1px 6px rgba(0,0,0,0.04); transition: box-shadow 0.15s linear; } @media(prefers-color-scheme:dark){ .nb-page.active.scrollable { box-shadow: 0 var(--depth-y, 4px) 20px rgba(0,0,0,0.18), 0 1px 6px rgba(0,0,0,0.12); } } .nb-page.exit-curl::after { background: repeating-linear-gradient( 155deg, transparent 0px, transparent 2px, rgba(0,0,0,0.012) 2px, rgba(0,0,0,0.012) 3px ), linear-gradient(to left, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 20%, rgba(0,0,0,.03) 40%, transparent 60% ); } .nb-page.exit-curl::before { background: linear-gradient(to left, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 30%, rgba(245,240,232,.03) 60%, transparent 100% ); } .nb-page.enter-curl { box-shadow: -4px 0 20px rgba(0,0,0,.14), -1px 0 6px rgba(0,0,0,.06), inset -2px 0 8px rgba(0,0,0,.03); } @media(max-width:640px){ .nb-page.exit-curl::after { background: repeating-linear-gradient( 155deg, transparent 0px, transparent 3px, rgba(0,0,0,0.01) 3px, rgba(0,0,0,0.01) 4px ), linear-gradient(to left, rgba(0,0,0,.1) 0%, transparent 70% ); } } @media(prefers-color-scheme:dark){ .nb-page.exit-curl::after { background: repeating-linear-gradient( 155deg, transparent 0px, transparent 2px, rgba(0,0,0,0.018) 2px, rgba(0,0,0,0.018) 3px ), linear-gradient(to left, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 20%, rgba(0,0,0,.06) 40%, transparent 60% ); } .nb-page.enter-curl { box-shadow: -4px 0 20px rgba(0,0,0,.25), -1px 0 6px rgba(0,0,0,.12), inset -2px 0 8px rgba(0,0,0,.06); } } @media(prefers-reduced-motion:reduce){ .nb-page { transition: opacity 0.28s cubic-bezier(.4,0,.2,1), transform 0.28s cubic-bezier(.4,0,.2,1) !important; } .nb-page.exit-curl { transform: translateY(-6px) !important; opacity: 0 !important; } .nb-page.enter-curl { transform: translateY(6px) !important; opacity: 0 !important; } .nb-page.entering { animation: reduced-motion-enter 0.28s ease-out forwards !important; } @keyframes reduced-motion-enter { from { opacity: 0.5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .nb-page.exit-curl::before, .nb-page.exit-curl::after { display: none !important; } .nb-page.enter-curl { box-shadow: none !important; } .nb-page.active.scrollable { box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03) !important; } @media(prefers-color-scheme:dark){ .nb-page.active.scrollable { box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08) !important; } } } .nb-page.entering .entry-date, .nb-page.entering .entry-tag, .nb-page.entering h2, .nb-page.entering .entry-body, .nb-page.entering .hw, .nb-page.entering .printout, .nb-page.entering .meta-row, .nb-page.entering .sticky-note, .nb-page.entering .wax-seal, .nb-page.entering .stamp, .nb-page.entering .washi { opacity: 0; transform: translateY(8px); transition: none; } .nb-page.entering .entry-date { animation: content-reveal 0.32s ease-out 0.06s forwards; } .nb-page.entering .entry-tag { animation: content-reveal 0.32s ease-out 0.10s forwards; } .nb-page.entering h2 { animation: content-reveal 0.32s ease-out 0.15s forwards; } .nb-page.entering .entry-body { animation: content-reveal 0.38s ease-out 0.22s forwards; } .nb-page.entering .entry-body:nth-of-type(2) { animation: content-reveal 0.38s ease-out 0.28s forwards; } .nb-page.entering .entry-body:nth-of-type(3) { animation: content-reveal 0.38s ease-out 0.34s forwards; } .nb-page.entering .hw { animation: content-reveal 0.36s ease-out 0.40s forwards; } .nb-page.entering .printout { animation: content-reveal-scale 0.36s ease-out 0.20s forwards; } @keyframes content-reveal { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes content-reveal-scale { 0% { opacity: 0; transform: translateY(6px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .nb-page.active .printout:has(canvas) { position: relative; } .nb-page.entering .printout:has(canvas) { animation: canvas-boot-glow 0.6s ease-out 0.25s forwards; box-shadow: 0 0 0 1px rgba(74, 155, 142, 0.3), 1px 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 4px rgba(0, 0, 0, 0.03), 0 0 20px rgba(74, 155, 142, 0.08); } @keyframes canvas-boot-glow { 0% { box-shadow: 0 0 0 1px rgba(74, 155, 142, 0.5), 1px 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 4px rgba(0, 0, 0, 0.03), 0 0 30px rgba(74, 155, 142, 0.2); opacity: 0; } 100% { box-shadow: 0 0 0 1px rgba(74, 155, 142, 0.15), 1px 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 4px rgba(0, 0, 0, 0.03), 0 0 20px rgba(74, 155, 142, 0.08); opacity: 1; } } .nb-page.entering .printout canvas { opacity: 0; transform: scale(0.97); animation: canvas-fade-in 0.4s ease-out 0.30s forwards; } @keyframes canvas-fade-in { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } .nb-page.entering .ctrls { opacity: 0; animation: content-reveal 0.3s ease-out 0.35s forwards; } .entry-date { display: inline-block; transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease; cursor: default; } .entry-date:hover { color: var(--ink); transform: translateX(2px); text-shadow: 0 0 8px rgba(26, 24, 21, 0.06); } @media(prefers-reduced-motion:reduce){ .nb-page.entering .entry-date, .nb-page.entering .entry-tag, .nb-page.entering h2, .nb-page.entering .entry-body, .nb-page.entering .hw, .nb-page.entering .printout, .nb-page.entering .meta-row, .nb-page.entering .sticky-note, .nb-page.entering .wax-seal, .nb-page.entering .stamp, .nb-page.entering .washi, .nb-page.entering .ctrls { animation: none !important; opacity: 1 !important; transform: none !important; } .nb-page.entering .printout canvas { animation: none !important; opacity: 1 !important; transform: none !important; } .nb-page.entering .printout:has(canvas) { animation: none !important; } .entry-date { transition: none !important; } } @media(prefers-color-scheme:dark){ .nb-page.entering .printout:has(canvas) { animation-name: canvas-boot-glow-dark; } @keyframes canvas-boot-glow-dark { 0% { box-shadow: 0 0 0 1px rgba(74, 155, 142, 0.4), 1px 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 30px rgba(74, 155, 142, 0.15); opacity: 0; } 100% { box-shadow: 0 0 0 1px rgba(74, 155, 142, 0.2), 1px 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(74, 155, 142, 0.06); opacity: 1; } } .entry-date:hover { color: var(--ink); text-shadow: 0 0 8px rgba(224, 219, 208, 0.04); } } .nb-toc-panel .toc-note { transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, border-left-color 0.25s ease; border-left: 3px solid transparent; border-radius: 3px; } .nb-toc-panel .toc-note:hover { transform: translateY(-2px) scale(1.01); box-shadow: 2px 4px 14px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08); } .nb-toc-panel .toc-note:has(.entry-tag[data-tag="experiment"]), .nb-toc-panel .toc-note:has([data-tag*="experiment"]) { border-left-color: #b85c3a; } .nb-toc-panel .toc-note:has(.entry-tag[data-tag="mathematics"]), .nb-toc-panel .toc-note:has([data-tag*="math"]) { border-left-color: #4a7a8c; } .nb-toc-panel .toc-note:has(.entry-tag[data-tag="physics"]), .nb-toc-panel .toc-note:has([data-tag*="phys"]) { border-left-color: #7a6aaa; } .nb-toc-panel .toc-note:has(.entry-tag[data-tag="generative art"]), .nb-toc-panel .toc-note:has([data-tag*="art"]) { border-left-color: #8caa5c; } .nb-toc-panel .toc-note:has(.entry-tag[data-tag="oddment"]), .nb-toc-panel .toc-note:has([data-tag*="odd"]) { border-left-color: #caa84a; } .nb-toc-panel .toc-note:not(:has([data-tag])) { border-left-color: rgba(105,92,72,0.2); } .nb-toc-panel .toc-link { transition: color 0.2s ease, padding-left 0.2s ease; position: relative; border-radius: 2px; } .nb-toc-panel .toc-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--annotation); transition: width 0.3s ease; } .nb-toc-panel .toc-link:hover { color: var(--ink); padding-left: 4px; } .nb-toc-panel .toc-link:hover::after { width: 100%; } .nb-toc-panel .toc-note:hover .toc-pg { background: rgba(105,92,72,0.08); border-radius: 2px; padding: 1px 4px; transition: background 0.2s ease, padding 0.2s ease, border-radius 0.2s ease; } .nb-toc-panel .toc-note:hover .toc-note-title { color: var(--ink); transition: color 0.2s ease; } .nb-strip { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); right: auto; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 2px; background: linear-gradient( 135deg, rgba(245,240,232,0.97) 0%, rgba(238,232,220,0.97) 100% ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(105,92,72,0.12); border-radius: 16px; padding: 5px 10px; touch-action: manipulation; font-family: 'Caveat', cursive; user-select: none; box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.4); transition: box-shadow 0.3s ease, transform 0.2s ease; max-width: calc(100vw - 20px); } .nb-strip:hover { box-shadow: 0 6px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5); } .nb-strip-section { padding: 5px 14px; font-size: 1rem; color: var(--ink-light); cursor: pointer; border-radius: 10px; transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease; white-space: nowrap; position: relative; } .nb-strip-section:hover { color: var(--ink); background: rgba(105,92,72,0.06); transform: translateY(-1px); } .nb-strip-section.on { color: var(--ink); background: rgba(105,92,72,0.1); box-shadow: 0 1px 4px rgba(0,0,0,.06); font-weight: 600; } .nb-strip-section.on::after { display: none; } .nb-strip-sep { width: 1px; height: 16px; background: rgba(105,92,72,0.15); flex-shrink: 0; border-radius: 1px; } .nb-strip-btn { display: none; padding: 4px 10px; font-size: 0.9rem; color: var(--ink-light); cursor: pointer; border-radius: 10px; transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease; white-space: nowrap; flex-shrink: 0; } .nb-strip-btn:hover { color: var(--ink); background: rgba(105,92,72,0.06); transform: translateY(-1px); } @media(max-width:640px){ .nb-strip { bottom: 0; left: 0; right: 0; transform: none; border-radius: 16px 16px 0 0; padding: 5px 6px; gap: 0; max-width: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nb-strip::-webkit-scrollbar { display: none; } .nb-strip-section { padding: 4px 8px; font-size: 0.85rem; flex-shrink: 0; border-radius: 8px; } .nb-strip-sep { height: 14px; } } @media(prefers-reduced-motion:reduce){ .nb-toc-panel .toc-note, .nb-toc-panel .toc-link, .nb-toc-panel .toc-link::after, .nb-toc-panel .toc-pg, .nb-toc-panel .toc-note-title, .nb-strip, .nb-strip-section, .nb-strip-btn { transition: none !important; } .nb-strip-section:hover, .nb-strip-btn:hover { transform: none !important; } .nb-toc-panel .toc-note:hover { transform: none !important; } .nb-toc-panel .toc-link:hover { padding-left: 0 !important; } .nb-toc-panel .toc-link::after { display: none !important; } } @media(prefers-color-scheme:dark){ .nb-toc-panel .toc-note:hover { box-shadow: 2px 4px 14px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.2); } .nb-strip { background: linear-gradient( 135deg, rgba(26,26,46,0.95) 0%, rgba(34,32,48,0.95) 100% ); border-color: rgba(224,219,208,0.08); box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04); } .nb-strip:hover { box-shadow: 0 6px 28px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); } .nb-strip-section:hover, .nb-strip-btn:hover { background: rgba(224,219,208,0.06); } .nb-strip-section.on { background: rgba(224,219,208,0.1); box-shadow: 0 1px 4px rgba(0,0,0,.2); } .nb-strip-sep { background: rgba(224,219,208,0.1); } .nb-toc-panel .toc-link:hover::after { background: var(--annotation); } } .ctrl:active, .ctrl-btn:active, .nb-btn:active, .nb-strip-section:active, .nb-strip-btn:active, .nb-toc-btn:active, .nb-toc-close:active, .toc-link:active, .nb-nav:active, .sq-cell:active, .printout button:active { transform: scale(0.94); transition: transform 0.08s ease; } .nb-strip-section:active { background: rgba(105,92,72,0.1); transform: scale(0.93) translateY(1px); } .nb-toc-btn:active { transform: scale(0.88); box-shadow: 0 1px 4px rgba(0,0,0,0.15); } .ctrl:active, .ctrl-btn:active, .nb-btn:active, .printout button:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); filter: brightness(0.92); } .toc-link:active { padding-left: 8px; color: var(--ink); background: rgba(105,92,72,0.04); } .nb-fullscreen-close:active { transform: scale(0.9); background: var(--ink); color: var(--paper); } @media(max-width:640px){ .ctrl:active, .ctrl-btn:active, .nb-btn:active, .printout button:active { transform: scale(0.92); } .nb-strip-section:active { transform: scale(0.90) translateY(1px); } .nb-toc-btn:active { transform: scale(0.85); } } #notebook-viewport::-webkit-scrollbar { width: 6px; } #notebook-viewport::-webkit-scrollbar-track { background: transparent; } #notebook-viewport::-webkit-scrollbar-thumb { background: rgba(138,130,120,0.25); border-radius: 3px; border: 1px solid transparent; transition: background 0.2s ease, width 0.15s ease; } #notebook-viewport::-webkit-scrollbar-thumb:hover { background: rgba(138,130,120,0.45); width: 8px; border-color: rgba(138,130,120,0.1); } #notebook-viewport::-webkit-scrollbar-thumb:active { background: rgba(138,130,120,0.55); } #notebook-viewport { scrollbar-width: thin; scrollbar-color: rgba(138,130,120,0.25) transparent; } .nb-page.active::-webkit-scrollbar { width: 5px; } .nb-page.active::-webkit-scrollbar-track { background: transparent; } .nb-page.active::-webkit-scrollbar-thumb { background: rgba(138,130,120,0.2); border-radius: 3px; transition: background 0.2s ease; } .nb-page.active::-webkit-scrollbar-thumb:hover { background: rgba(138,130,120,0.4); } .nb-toc-panel::-webkit-scrollbar { width: 5px; } .nb-toc-panel::-webkit-scrollbar-track { background: transparent; margin: 0.5rem 0; } .nb-toc-panel::-webkit-scrollbar-thumb { background: rgba(138,130,120,0.2); border-radius: 3px; transition: background 0.2s ease; } .nb-toc-panel::-webkit-scrollbar-thumb:hover { background: rgba(138,130,120,0.4); } .nb-toc-panel { scrollbar-width: thin; scrollbar-color: rgba(138,130,120,0.2) transparent; } .landing-full-index::-webkit-scrollbar { width: 5px; } .landing-full-index::-webkit-scrollbar-thumb { background: rgba(138,130,120,0.2); border-radius: 3px; } @media(max-width:640px){ #notebook-viewport::-webkit-scrollbar, .nb-page.active::-webkit-scrollbar, .nb-toc-panel::-webkit-scrollbar, .landing-full-index::-webkit-scrollbar { display: none; } #notebook-viewport, .nb-toc-panel, .landing-full-index { scrollbar-width: none; } } @media(prefers-reduced-motion:reduce){ .ctrl:active, .ctrl-btn:active, .nb-btn:active, .nb-strip-section:active, .nb-strip-btn:active, .nb-toc-btn:active, .nb-toc-close:active, .toc-link:active, .nb-nav:active, .sq-cell:active, .printout button:active, .nb-fullscreen-close:active { transform: none !important; transition: none !important; } } @media(prefers-color-scheme:dark){ #notebook-viewport::-webkit-scrollbar-thumb { background: rgba(224,219,208,0.15); } #notebook-viewport::-webkit-scrollbar-thumb:hover { background: rgba(224,219,208,0.3); } #notebook-viewport { scrollbar-color: rgba(224,219,208,0.15) transparent; } .nb-page.active::-webkit-scrollbar-thumb { background: rgba(224,219,208,0.12); } .nb-page.active::-webkit-scrollbar-thumb:hover { background: rgba(224,219,208,0.25); } .nb-toc-panel::-webkit-scrollbar-thumb { background: rgba(224,219,208,0.12); } .nb-toc-panel::-webkit-scrollbar-thumb:hover { background: rgba(224,219,208,0.25); } .nb-toc-panel { scrollbar-color: rgba(224,219,208,0.12) transparent; } .ctrl:active, .ctrl-btn:active, .nb-btn:active, .printout button:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); filter: brightness(0.88); } .nb-strip-section:active { background: rgba(224,219,208,0.08); } .toc-link:active { background: rgba(224,219,208,0.04); } } .printout { box-shadow: 1px 2px 8px rgba(0,0,0,0.08), inset 0 1px 3px rgba(0,0,0,0.04), inset 0 -1px 2px rgba(0,0,0,0.02); transition: box-shadow 0.25s ease, transform 0.2s ease; } .printout::before { top: 0; left: 0; right: 0; width: auto; height: 3px; border-radius: 0; border: none; background: linear-gradient(90deg, transparent 0%, rgba(180,140,100,0.08) 15%, rgba(180,140,100,0.14) 50%, rgba(180,140,100,0.08) 85%, transparent 100% ); pointer-events: none; } .printout:hover { box-shadow: 2px 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 3px rgba(0,0,0,0.03); transform: translateY(-1px); } .nb-page.entering .printout:has(canvas) { animation: content-reveal-scale 0.4s ease-out 0.2s forwards; } .nb-page .page-turn-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'IBM Plex Mono', monospace; font-size: clamp(3rem, 10vw, 6rem); font-weight: 200; color: var(--ink); opacity: 0; pointer-events: none; z-index: 5; animation: watermark-flash 0.65s ease-out forwards; letter-spacing: 0.05em; white-space: nowrap; } @keyframes watermark-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } 15% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.04; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); } } @media(max-width:640px){ .nb-page .page-turn-watermark { font-size: clamp(2rem, 15vw, 4rem); } } @media(prefers-reduced-motion:reduce){ .printout { transition: none !important; } .printout:hover { transform: none !important; } .nb-page .page-turn-watermark { animation: none !important; display: none !important; } } @media(prefers-color-scheme:dark){ .printout { box-shadow: 1px 2px 12px rgba(0,0,0,0.25), inset 0 1px 3px rgba(0,0,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.1); } .printout:hover { box-shadow: 2px 4px 20px rgba(0,0,0,0.3), 0 1px 6px rgba(0,0,0,0.15), inset 0 1px 3px rgba(0,0,0,0.12); } .printout::before { background: linear-gradient(90deg, transparent 0%, rgba(224,219,208,0.05) 15%, rgba(224,219,208,0.08) 50%, rgba(224,219,208,0.05) 85%, transparent 100% ); } .nb-page .page-turn-watermark { color: var(--ink-light); } }