:root{--night:#06121c;--blue:#0d5479;--cyan:#55cef9;--copper:#d99045;--paper:#f4ead3;--ink:#17232b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#eef8fc;background:radial-gradient(circle at 50% -10%,#164e68 0,#071723 48%,#030a10 100%);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.skip{position:fixed;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:20;background:#fff;color:#000;padding:.7rem}.bookbar{height:76px;padding:0 clamp(1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1c;background:#06121ee8;backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.brand{display:flex;gap:.7rem;align-items:center;color:#fff;text-decoration:none}.brand img{width:46px;height:46px;object-fit:contain}.brand span{display:grid}.brand strong{letter-spacing:.08em}.brand small{color:#a7c6d6}.bookbar nav{display:flex;align-items:center;gap:.45rem}.bookbar nav a,.bookbar button{border:1px solid #5dcffa55;border-radius:10px;background:#0b2a3d;color:#eaf8ff;padding:.55rem .8rem;text-decoration:none;font-weight:700;cursor:pointer}.bookbar button:hover,.bookbar nav a:hover{background:#124562}.book-stage{padding:1.3rem clamp(.5rem,2.8vw,2.5rem) 2rem}.intro{text-align:center;max-width:900px;margin:0 auto 1rem}.intro span{color:#77dcff;text-transform:uppercase;letter-spacing:.15em;font-weight:800;font-size:.75rem}.intro h1{font-family:Georgia,serif;font-size:clamp(1.7rem,4vw,3.1rem);line-height:1.05;margin:.3rem}.intro p{color:#c2d8e3;margin:.35rem}.book-shell{display:grid;grid-template-columns:52px minmax(0,1150px) 52px;justify-content:center;align-items:center;gap:.55rem}.book{height:min(70vh,750px);min-height:590px;display:grid;grid-template-columns:1fr 1fr;perspective:2200px;filter:drop-shadow(0 24px 32px #0009);position:relative}.paper{position:relative;overflow:auto;color:var(--ink);background:linear-gradient(90deg,#e6d7bc 0,#f7edd8 7%,#fbf2df 94%,#dfcdae 100%);padding:clamp(2rem,4vw,4.4rem);box-shadow:inset 0 0 55px #8d6f3e24}.paper.left{border-radius:12px 2px 2px 12px;border-right:1px solid #9f835c66}.paper.right{border-radius:2px 12px 12px 2px}.paper::after{content:attr(data-number);position:absolute;bottom:1rem;color:#715f48;font:700 .8rem Georgia,serif}.paper.left::after{left:1.5rem}.paper.right::after{right:1.5rem}.paper h1,.paper h2,.paper h3{font-family:Georgia,serif;line-height:1.13;color:#132b37}.paper h1{font-size:clamp(1.75rem,2.6vw,2.65rem);margin:0 0 1.2rem}.paper h2{font-size:1.45rem}.paper h3{font-size:1.15rem}.paper p,.paper blockquote{font-family:Georgia,serif;font-size:clamp(1.03rem,1.3vw,1.22rem);line-height:1.65}.paper blockquote{border-left:4px solid var(--copper);padding:.6rem 1rem;margin:1.2rem 0;background:#d99a4b15;font-style:italic}.paper strong{color:#083f5c}.paper .tech{border:1px solid #b9772f66;border-radius:10px;background:#fff8e8;padding:.85rem 1rem}.paper .illustration{width:100%;max-height:230px;object-fit:cover;border-radius:9px;margin:0 0 1rem;box-shadow:0 8px 18px #3c2c1b36}.paper.cover{display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(0deg,#03111be8,#07354b44),url('../images/tips-tricks-10/roof-night.png') center/cover}.paper.cover h1,.paper.cover h2,.paper.cover h3,.paper.cover strong{color:#fff}.paper.cover p,.paper.cover blockquote{font-family:system-ui,sans-serif}.turn{width:48px;height:68px;border:1px solid #6ed7ff55;border-radius:14px;background:#0b2d41;color:#fff;font-size:2.6rem;cursor:pointer}.turn:disabled{opacity:.25;cursor:not-allowed}.turn:hover:not(:disabled){background:#14648b}.turn-sheet{display:none;position:absolute;inset:0 0 0 50%;z-index:5;transform-origin:left;background:#f4ead3;border-radius:0 12px 12px 0}.book.flipping .turn-sheet{display:block;animation:flip .58s ease-in-out}@keyframes flip{0%{transform:rotateY(0);box-shadow:0 0 0 #0000}50%{box-shadow:-18px 8px 28px #0008}100%{transform:rotateY(-180deg)}}.progress{text-align:center;margin:1rem auto 0;max-width:520px;color:#bad3df}.progress div{height:5px;background:#ffffff1d;border-radius:9px;margin:.5rem}.progress i{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--copper),var(--cyan));border-radius:9px;transition:width .35s}.progress small{font-size:.76rem}dialog{border:1px solid #5bcdf755;border-radius:18px;color:#eaf8ff;background:#071b29;box-shadow:0 28px 80px #000c;width:min(700px,92vw);max-height:82vh;padding:0}dialog::backdrop{background:#01060bcc;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.3rem;border-bottom:1px solid #ffffff1b;position:sticky;top:0;background:#071b29}.dialog-head h2{margin:0}.dialog-head button{border:0;background:none;color:#fff;font-size:1.8rem}#tocList{columns:2;padding:1rem 2.8rem 2rem}#tocList li{break-inside:avoid;margin:.35rem}#tocList button{border:0;background:none;color:#c9eafb;text-align:left;cursor:pointer;font:inherit}#tocList button:hover{color:#62d8ff}.end-links{display:flex;flex-wrap:wrap;gap:.5rem}.end-links a{background:#0d577b;color:white;text-decoration:none;padding:.55rem .7rem;border-radius:8px;font:700 .8rem system-ui,sans-serif}@media(max-width:820px){.bookbar{height:auto;padding:.6rem}.bookbar nav a{display:none}.bookbar nav button{font-size:.75rem;padding:.45rem}.brand small{display:none}.book-stage{padding:.8rem .35rem}.intro p{font-size:.88rem}.book-shell{grid-template-columns:38px minmax(0,1fr) 38px;gap:.2rem}.turn{width:36px;height:56px}.book{grid-template-columns:1fr;height:68vh;min-height:540px}.paper{display:none;padding:2rem 1.5rem 3rem;border-radius:10px!important}.paper.left{display:block}.paper.right.mobile-active{display:block}.paper.left.mobile-hidden{display:none}#tocList{columns:1}.paper p,.paper blockquote{font-size:1.08rem}.paper .illustration{max-height:180px}}