*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}:root{--navy: #1a2e44;--navy-l: #243d5c;--navy-d: #111f30;--accent: #c9a96e;--white: #fff;--g50: #f9fafb;--g100: #f3f4f6;--g200: #e5e7eb;--g400: #9ca3af;--g600: #4b5563;--green: #2d7d6f;--purple: #7c4dba;--red: #dc2626}body{font-family:Roboto,sans-serif;background:var(--g50);color:var(--navy-d);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-shell{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--g50);display:flex;flex-direction:column;position:relative;overflow:hidden}.screen{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:90px}.screen::-webkit-scrollbar{display:none}.tb{background:var(--white);padding:16px 20px 14px;padding-top:max(env(safe-area-inset-top,16px),16px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--g100);position:sticky;top:0;z-index:5}.tb .ttl{font-size:25px;font-weight:700;color:var(--navy-d);letter-spacing:-.02em}.tb .ttl.sm{font-size:17px;font-weight:600}.tb .sub-label{font-size:11px;color:var(--g400);letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}.back{width:36px;height:36px;border-radius:50%;background:var(--g100);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--navy);flex-shrink:0}.back.on-dark{background:#ffffff26;color:#fff}.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-l));display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;box-shadow:0 2px 8px #1a2e444d;flex-shrink:0}.av.lg{width:64px;height:64px;font-size:20px}.card{background:var(--white);border-radius:16px;padding:18px 20px;box-shadow:0 1px 3px #0000000d,0 4px 16px #1a2e440f}.tag{display:inline-block;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.tag.cro{background:#1a2e441a;color:var(--navy)}.tag.ki{background:#2d7d6f1a;color:var(--green)}.tag.vo{background:#7c4dba1a;color:var(--purple)}.tag.ux{background:#c9a96e33;color:#8b7340}.tag.gold{background:#c9a96e33;color:var(--accent)}.tag.green{background:#2d7d6f1a;color:var(--green)}.tag.active{background:#2d7d6f26;color:var(--green)}.hero{border-radius:20px;padding:24px;background:linear-gradient(135deg,var(--navy-d),var(--navy),var(--navy-l));position:relative;overflow:hidden;color:#fff}.tabs{display:flex;background:var(--white);padding:0 16px;border-bottom:1px solid var(--g200)}.tabbtn{border:none;background:none;padding:12px 16px;font-size:14px;font-weight:400;color:var(--g400);border-bottom:2px solid transparent;cursor:pointer;font-family:Roboto,sans-serif;transition:all .2s}.tabbtn.on{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}.pb{padding:16px}.btn{width:100%;padding:14px;border-radius:14px;border:none;background:var(--navy);color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:Roboto,sans-serif;transition:opacity .15s;text-align:center;display:inline-flex;align-items:center;justify-content:center}.btn:active{opacity:.85}.btn.out{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}.btn.sm{padding:9px 16px;width:auto;border-radius:10px;font-size:13px}.btn.white{background:#fff;color:var(--navy)}.btn.danger{background:#fef2f2;color:var(--red);border:none}.ptrack{height:4px;border-radius:100px;background:#ffffff26;flex:1}.pfill{height:100%;border-radius:100px;background:var(--accent);transition:width .3s ease}.ptrack.dark{background:var(--g200)}.pfill.dark{background:var(--navy)}.mrow{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--g100);cursor:pointer}.mrow:last-child{border-bottom:none}.tog{width:48px;height:28px;border-radius:100px;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}.tog.on{background:var(--navy)}.tog.off{background:var(--g200)}.tog:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:3px;transition:left .2s}.tog.on:after{left:23px}.tog.off:after{left:3px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-header h2{font-size:18px;font-weight:700;color:var(--navy-d)}.section-header a{font-size:13px;color:var(--navy);font-weight:600;text-decoration:none}.art p{font-size:15px;line-height:1.75;color:#374151;margin-bottom:16px}.art h2{font-size:18px;font-weight:700;color:var(--navy-d);margin:24px 0 12px}.art blockquote{border-left:3px solid var(--accent);padding:16px 20px;background:var(--g50);border-radius:0 12px 12px 0;margin:20px 0;font-style:italic;color:var(--g600)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.text-sm{font-size:13px}.text-xs{font-size:11px}.text-gray{color:var(--g400)}.text-navy{color:var(--navy)}.font-bold{font-weight:700}.font-medium{font-weight:500}.w-full{width:100%}.sub-screen{position:fixed;top:0;right:0;bottom:0;left:0;max-width:480px;margin:0 auto;z-index:10;background:var(--g50);transform:translate(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch}.sub-screen.open{transform:translate(0)}.bottom-spacer{height:90px}