* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #dcd4c0; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 2rem 1.5rem; background-image: repeating-linear-gradient(45deg, rgba(180, 150, 120, 0.08) 0px, rgba(180, 150, 120, 0.08) 2px, transparent 2px, transparent 8px), radial-gradient(circle at 20% 30%, #e8dfcc 0%, #c9bc9e 100%); } .book { max-width: 1100px; width: 100%; background: #fcf6ea; background-image: linear-gradient(90deg, rgba(200, 175, 140, 0.15) 0%, transparent 5%, transparent 95%, rgba(200, 175, 140, 0.15) 100%), radial-gradient(ellipse at 20% 50%, rgba(230, 210, 180, 0.3) 0%, transparent 60%); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.2), inset 0 0 30px rgba(200, 170, 130, 0.3); border-radius: 12px 4px 4px 12px; padding: 2.5rem 2.8rem; position: relative; border-left: 6px solid #b8a68b; border-right: 2px solid #d6c8b2; } .book::before { content: ''; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 1px solid rgba(180, 150, 120, 0.2); border-radius: 6px 2px 2px 6px; pointer-events: none; } .book::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 28px, rgba(180, 150, 120, 0.06) 28px, rgba(180, 150, 120, 0.06) 29px ); pointer-events: none; border-radius: 12px 4px 4px 12px; } .content { position: relative; z-index: 2; } h1, h2, h3, h4, p, li, .rule-block { color: #2c241a; } .title-section { border-bottom: 2px solid #dac9b0; padding-bottom: 0.75rem; margin-bottom: 1.8rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; } .title-section h1 { font-weight: 600; font-size: 2.1rem; letter-spacing: -0.3px; background: linear-gradient(145deg, #3d3022, #5f4c36); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } .title-section .sub { font-weight: 400; font-size: 0.95rem; color: #6d5c48; background: rgba(200, 180, 155, 0.3); padding: 0.2rem 1rem; border-radius: 30px; letter-spacing: 0.3px; border: 1px solid #d4c0a8; backdrop-filter: blur(2px); } .rule-block { margin-bottom: 2.2rem; } .rule-block h2 { font-weight: 600; font-size: 1.5rem; margin-bottom: 0.5rem; display: inline-block; border-bottom: 3px solid #cbb59b; padding-bottom: 0.2rem; color: #3b2e1f; letter-spacing: -0.2px; } .rule-block h3 { font-weight: 600; font-size: 1.15rem; margin: 1.2rem 0 0.3rem 0; color: #4a3a28; display: flex; align-items: center; gap: 8px; } .rule-block h3::before { content: "▸"; color: #b48c5e; font-weight: 300; font-size: 1.3rem; } .rule-block ul, .rule-block p { margin-left: 0.6rem; padding-left: 1rem; border-left: 3px solid #dac9b4; margin-top: 0.25rem; margin-bottom: 0.5rem; } .rule-block ul { list-style: none; padding-left: 0.8rem; } .rule-block li { position: relative; padding: 0.2rem 0 0.2rem 1.6rem; font-size: 1rem; line-height: 1.5; font-weight: 400; color: #2e251c; } .rule-block li::before { content: "•"; color: #a5835a; font-weight: 700; position: absolute; left: 0.2rem; font-size: 1.2rem; } .rule-block li strong { color: #5d432b; font-weight: 600; } .rule-block .tag-highlight { background: #ede3d3; padding: 0.1rem 0.4rem; border-radius: 6px; font-weight: 500; color: #5c452b; border: 1px solid #d6bea4; } .tldr-block { margin-top: 2.2rem; background: #efe5d6; padding: 1.2rem 1.8rem; border-radius: 60px 12px 12px 60px; border-left: 10px solid #b28d6a; box-shadow: inset 0 1px 6px rgba(90, 70, 50, 0.1); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.2rem; } .tldr-block .tldr-label { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.5px; color: #3b2c1b; background: #dac4ab; padding: 0.1rem 1.2rem; border-radius: 40px; font-size: 0.95rem; text-transform: uppercase; } .tldr-block .tldr-text { font-weight: 450; color: #2f2419; font-size: 1.05rem; line-height: 1.5; } .tldr-block .tldr-text::before { content: "➜ "; color: #8f6f4e; font-weight: 300; } @media (max-width: 700px) { .book { padding: 1.8rem 1.2rem; border-left-width: 4px; } .title-section h1 { font-size: 1.8rem; } .rule-block h2 { font-size: 1.3rem; } .rule-block li { padding-left: 1.2rem; } .tldr-block { border-radius: 20px 6px 6px 20px; padding: 1rem 1.2rem; } } @media (max-width: 480px) { body { padding: 0.8rem; } .book { padding: 1.2rem 0.8rem; border-radius: 8px 2px 2px 8px; } } .staff-rule { background: #f3ede4; padding: 0.3rem 0.8rem; border-radius: 30px; display: inline-block; } a { color: #6d4f2f; text-decoration: underline wavy #c9af93 1.2px; text-underline-offset: 3px; font-weight: 500; } a:hover { color: #3f2b19; }