:root{--uini-primary: #FF7F27}html,body{margin:0;padding:0;height:100%;font-family:ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Arial,sans-serif}input[type=checkbox],input[type=radio]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;padding:0;border:1.5px solid #c4c4c4;background:#fff;cursor:pointer;flex-shrink:0;vertical-align:middle;display:inline-grid;place-content:center;transition:border-color .12s ease,background-color .12s ease}input[type=checkbox]{border-radius:3px}input[type=radio]{border-radius:50%}input[type=checkbox]:hover:not(:disabled),input[type=radio]:hover:not(:disabled){border-color:var(--uini-primary)}input[type=checkbox]:checked{background-color:var(--uini-primary);border-color:var(--uini-primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 5.5-5.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 100%}input[type=radio]:checked{border-color:var(--uini-primary);background-color:#fff}input[type=radio]:checked:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--uini-primary)}input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--uini-primary);outline-offset:2px}input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed;border-color:#d4d4d4}.app-layout{--bar-height: 48px;display:flex;flex-direction:column;height:100vh}.nav-bar{display:flex;gap:.5rem;padding:0 2rem;min-height:var(--bar-height);align-items:center;background:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0;z-index:100}.nav-logo{display:flex;align-items:center;margin-inline-start:auto}.nav-logo-img{height:28px;object-fit:contain}.nav-link{text-decoration:none;color:#555;font-size:.95rem;font-weight:500;padding:.4rem 1rem;border-radius:8px;transition:background .2s,color .2s}.nav-link:hover{background:#f5f5f5;color:#222}.nav-link.active{background:#f0f0f0;color:#111;font-weight:600}.main-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;scrollbar-gutter:stable}.footer-bar{display:flex;justify-content:center;align-items:center;padding:0 2rem;min-height:var(--bar-height);background:#fff;border-top:1px solid #e0e0e0;font-size:.85rem;color:#999;flex-shrink:0;z-index:100}@media(max-width:600px){.nav-bar{padding:0 1rem}.nav-link{padding:.4rem .7rem}.nav-logo-img{height:20px}}:root{--gap: 20px;--box: 400px;--bottomH: 300px;--titleH: 22px}*{box-sizing:border-box}.site-wrap{width:100%;flex-shrink:0}.comic-title-text{font-size:17px}.comic-header{width:100%;text-align:center;margin-top:0;padding:3rem 0 2rem;position:relative}.slogan{font-size:3.2rem;color:#17150f;margin:36px 25px 0;font-family:Calibri,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.04}.slogan em{font-style:normal;color:#ff7f27}.slogan-keep{white-space:nowrap}.comic-logo{height:75px;object-fit:contain;z-index:2}.grid{display:grid;gap:var(--gap);align-items:start;justify-content:center;justify-items:center;padding:var(--gap);grid-auto-rows:max-content}.box{background:#fff;border:1px solid darkgray;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative;padding:20px;line-height:1.4;margin-top:var(--titleH);box-shadow:0 6px 18px #00000026,0 2px 4px #0000001a;transition:box-shadow .3s ease,transform .2s ease;border-radius:15px}.box:hover{box-shadow:0 10px 28px #00000040,0 4px 8px #00000026;transform:translateY(-2px)}#box1,#box2,#box3{width:var(--box);height:var(--box)}#box4{width:calc(3 * var(--box) + 2 * var(--gap));min-height:var(--bottomH);height:auto;border:none;box-shadow:none;align-items:center;justify-content:center;text-align:center;transition:none}#box4>*{max-width:100%}#box4:hover{box-shadow:none;transform:none}strong{color:#000}.titlebox{position:absolute;top:calc(-1 * var(--titleH));left:20px;background:#fff;border:1px solid #000;border-bottom:none;padding:4px 8px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 3px 6px #0000001a;font-family:JetBrains Mono,monospace;font-weight:500;letter-spacing:.12em;text-transform:uppercase}.comic{object-fit:contain;align-self:stretch;margin-top:auto;padding:2px}.demo-title{font-family:Calibri,sans-serif;font-size:2rem;font-weight:700;margin-bottom:5px}.demo-subtitle{padding-bottom:20px}.box-link{text-decoration:none;color:inherit;display:contents}p{margin:0 0 10px;width:100%;max-width:100%}.emotive-quote{margin-top:3rem}.category-definition{margin-top:10px;display:inline-block;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#17150f;border:1px solid rgba(23,21,15,.1);padding:5px 11px;border-radius:6px;background:#fff}.sub-title{font-family:Hanken Grotesk,system-ui,sans-serif;margin:22px auto 0;max-width:72ch;font-size:clamp(17px,2.1vw,20px);color:#56524a}.box-title{font-family:Calibri,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.04}.text{font-size:16px;color:#56524a}@media(min-width:1700px){.grid{grid-template-columns:repeat(3,var(--box))}#box1{grid-area:1 / 1}#box2{grid-area:1 / 2}#box3{grid-area:1 / 3}#box4{grid-column:1 / -1}}@media(max-width:1699px)and (min-width:1100px){.grid{grid-template-columns:repeat(2,var(--box));grid-template-areas:"b1 b2" "b3 b4"}#box1{grid-area:b1}#box2{grid-area:b2}#box3{grid-area:b3}#box4{grid-area:b4;width:var(--box)}}@media(max-width:1099px){.grid{grid-template-columns:var(--box);grid-auto-rows:max-content}#box4{width:var(--box);max-width:100%}body{overflow-x:auto}}@media(max-width:600px){.grid{grid-template-columns:1fr}.comic-logo{height:50px}.slogan{font-size:2.8rem;margin:20px 16px 0}.comic-header{padding:2rem 0}.demo-title{font-size:3rem}#box1,#box2,#box3,#box4{width:100%;max-width:400px;height:auto;min-height:0}.comic{width:auto;max-width:250px;height:auto;align-self:center}}