:root{--hb-dark: #081f36;--hb-orange: #de7d3a;--hb-light: #50c8d6;--hb-cream: #fffdf1;--hb-card-background: #fffefa;--hb-menu-background: #fff7e8;--hb-border: #dfe4ec;--hb-form-background: #fbfaf6;--hb-white: #ffffff;font-family:Roboto,PT Sans,Helvetica,Arial,sans-serif;color:var(--hb-dark);background:var(--hb-cream)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:hidden}body{font-size:18px;margin:0;min-width:320px;overflow-x:hidden}button,input{font:inherit}.login-page{align-items:center;background:var(--hb-white);display:flex;justify-content:center;min-height:100vh;padding:24px}.login-panel{background:var(--hb-cream);border:1px solid var(--hb-border);border-radius:16px;max-width:420px;padding:36px;width:100%}.brand{align-items:center;display:inline-flex;text-decoration:none}.brand img{height:auto;max-width:204px;width:100%}.login-heading{margin:42px 0 28px;text-align:center}.login-icon{color:var(--hb-orange);display:block;font-size:47px;font-weight:700;line-height:1;margin-bottom:10px;transform:rotate(180deg)}h1{color:var(--hb-dark);font-size:32px;line-height:1.1;margin:0 0 8px}.login-heading p{color:var(--hb-dark);font-size:17px;margin:0;opacity:.8}.login-form{display:grid;gap:20px}.field{display:grid;gap:8px}label{color:var(--hb-dark);font-size:17px;font-weight:700}input{background:var(--hb-form-background);border:1px solid var(--hb-dark);border-radius:10px;color:var(--hb-dark);min-height:52px;outline:none;padding:10px 12px;width:100%}input:focus{border-color:var(--hb-orange);box-shadow:0 0 0 2px var(--hb-cream)}.password-input{border-radius:10px;position:relative}.password-input input{padding-right:48px}.password-toggle{background:transparent;border:0;color:var(--hb-dark);cursor:pointer;font-size:26px;height:100%;position:absolute;right:0;top:0;width:46px}.password-toggle:hover,.password-toggle:focus-visible{color:var(--hb-orange)}.password-toggle:focus-visible{outline:2px solid var(--hb-light);outline-offset:-4px}.login-button{background:var(--hb-orange);border:1px solid var(--hb-dark);border-radius:10px;color:var(--hb-white);cursor:pointer;font-weight:700;margin:4px 4px 0 0;min-height:52px;padding:10px 20px}.login-button:hover,.login-button:focus-visible{background:var(--hb-dark)}.login-button:active{transform:translateY(1px)}.login-button:focus-visible{outline:3px solid var(--hb-light);outline-offset:3px}.login-button:disabled{cursor:wait;opacity:.7}.form-message{border-left:4px solid;border-radius:10px;font-size:16px;font-weight:700;margin:0;padding:10px 12px}.form-message--error{background:#fdf1eb;border-color:var(--hb-orange);color:var(--hb-dark)}.form-message--success{background:#e8f8fa;border-color:var(--hb-light);color:var(--hb-dark)}@media (max-width: 480px){.login-page{align-items:flex-start;padding:16px}.login-panel{margin-top:24px;padding:28px 22px}}.app-page{background:var(--hb-white);min-height:100vh;overflow-x:hidden}.app-header{align-items:center;border-bottom:1px solid var(--hb-border);display:flex;gap:32px;justify-content:space-between;margin:0 auto;max-width:1320px;min-height:82px;padding:14px 28px}.header-brand{background:transparent;border:0;cursor:pointer;padding:0}.header-brand img{display:block;height:auto;width:164px}.app-nav{align-items:center;display:flex;gap:2px}.nav-link,.logout-button{background:transparent;border:0;color:var(--hb-dark);cursor:pointer;font-weight:700}.nav-link{border-radius:8px;font-size:19.2px;padding:12px 10px;white-space:nowrap}.nav-link:hover,.nav-link:focus-visible{background:var(--hb-cream);color:var(--hb-orange)}.nav-link.is-active{background:transparent;border-radius:0;box-shadow:inset 0 -3px 0 var(--hb-dark);color:inherit}.nav-menu{position:relative}.nav-menu-trigger{align-items:center;display:inline-flex;gap:5px}.nav-menu-trigger span{font-size:15px;transition:transform .2s ease}.nav-menu:hover .nav-menu-trigger span,.nav-menu:focus-within .nav-menu-trigger span{transform:rotate(180deg)}.submenu{background:var(--hb-white);border:1px solid var(--hb-border);border-radius:12px;box-shadow:0 12px 24px #081f361a;display:grid;left:0;min-width:238px;opacity:0;padding:8px;pointer-events:none;position:absolute;top:calc(100% + 8px);transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;visibility:hidden;z-index:10}.nav-menu:hover .submenu,.nav-menu:focus-within .submenu{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.submenu button{background:transparent;border:0;border-radius:7px;color:var(--hb-dark);cursor:pointer;font-size:19.2px;font-weight:500;padding:11px 12px;text-align:left;white-space:nowrap}.submenu button:hover,.submenu button:focus-visible{background:var(--hb-cream);color:var(--hb-orange);outline:none}.nav-link--design{border-left:1px solid var(--hb-border);border-radius:0;margin-left:10px;padding-left:18px}.logout-button{align-items:center;background:transparent;border:0;border-radius:8px;display:inline-flex;height:42px;justify-content:center;padding:8px;width:42px}.logout-button svg,.mobile-logout svg{fill:none;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:20px}.logout-button:hover,.logout-button:focus-visible{background:var(--hb-dark);color:var(--hb-white)}.mobile-menu-toggle,.mobile-menu{display:none}.app-content{margin:0 auto;max-width:1120px;padding:64px 28px}.home-screen{max-width:650px}.eyebrow{color:var(--hb-orange);font-size:16px;font-weight:700;letter-spacing:.1em;margin:0 0 8px;text-transform:uppercase}.home-screen h1,.guidelines-intro h1{font-size:clamp(36px,5vw,54px);margin-bottom:14px}.home-copy{font-size:20px;margin:0}.home-card{background:var(--hb-card-background);border:1px solid var(--hb-border);border-radius:14px;margin-top:36px;padding:24px}.home-card h2{margin-top:0}.home-card p{margin-bottom:0}.guidelines{display:grid;gap:52px}.guidelines-intro>p:last-child{font-size:20px;margin:0}.guide-section{border-top:1px solid var(--hb-border);padding-top:28px}.guide-section>h2{font-size:27px;margin-top:0}.color-grid{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr))}.color-card{background:var(--hb-cream);border:1px solid var(--hb-border);border-radius:12px;display:grid;gap:8px;overflow:hidden;padding:12px}.color-swatch{border-bottom:1px solid rgb(8 31 54 / 12%);border-radius:7px;display:block;height:72px}.color-card code{color:var(--hb-dark);font-size:14px}.guide-split{display:grid;gap:56px;grid-template-columns:repeat(2,minmax(0,1fr))}.guide-split h2{margin-top:0}.type-spec{background:var(--hb-form-background);border-radius:8px;font-family:monospace;font-size:15px;padding:10px}.type-scale{display:grid;gap:18px}.type-sample{border-left:2px solid var(--hb-border);padding-left:14px}.type-label{color:var(--hb-orange);display:block;font-size:14px;font-weight:700;letter-spacing:.08em;margin-bottom:5px;text-transform:uppercase}.type-sample>:last-child{margin-bottom:0}.guide-split h1{font-size:36px}.guide-split h2{font-size:27px}.guide-split h3{font-size:21px}.body-text-sample{font-size:18px}.text-small{font-size:16px}.button-stack{align-items:flex-start;display:flex;flex-direction:column;gap:12px}.button{border-radius:9px;cursor:pointer;font-weight:700;min-height:42px;padding:9px 16px}.button-primary{background:var(--hb-orange);border:1px solid var(--hb-dark);color:var(--hb-white)}.button-secondary{background:var(--hb-white);border:1px solid var(--hb-dark);color:var(--hb-dark)}.button-text{background:transparent;border:0;color:var(--hb-orange);padding-left:0}.sample-field{display:grid;gap:8px;margin-bottom:18px;max-width:360px}.checkbox-row{align-items:center;cursor:pointer;display:flex;gap:10px;margin:12px 0}.checkbox-row input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--hb-white);border:1px solid var(--hb-dark);border-radius:4px;height:20px;min-height:0;margin:0;width:20px}.checkbox-row input:checked{background-color:var(--hb-orange);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E");border-color:var(--hb-orange)}.checkbox-row input:focus-visible{outline:3px solid var(--hb-light);outline-offset:2px}.guide-list{margin:0 0 22px;padding-left:22px}.guide-list li{margin:8px 0}.status{border-left:4px solid;border-radius:8px;font-size:16px;font-weight:700;margin:10px 0;padding:10px 12px}.status-success{background:#e8f8fa;border-color:var(--hb-light)}.status-error{background:#fdf1eb;border-color:var(--hb-orange)}@media (max-width: 760px){.app-header{padding:12px 18px}.app-content{padding:42px 18px}.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-split{gap:34px;grid-template-columns:1fr}.login-icon,.login-heading p{display:none}.login-panel .brand img{max-width:143px}.login-heading{margin:30px 0 28px}}@media (max-width: 920px){.app-page{position:relative}.app-header{min-height:72px}.app-nav{display:none}.mobile-menu-toggle{align-content:center;background:transparent;border:0;border-radius:8px;cursor:pointer;display:grid;gap:5px;height:44px;justify-items:center;padding:10px;width:44px}.mobile-menu-toggle:hover,.mobile-menu-toggle:focus-visible{background:var(--hb-cream)}.mobile-menu-toggle span{background:var(--hb-dark);border-radius:2px;display:block;height:2px;transition:transform .2s ease,opacity .2s ease;width:23px}.mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-toggle.is-open span:nth-child(2){opacity:0}.mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-menu{background:var(--hb-white);border-bottom:1px solid var(--hb-border);box-shadow:0 14px 22px #081f3614;display:grid;left:0;max-height:0;opacity:0;overflow:hidden;padding:0 18px;pointer-events:none;position:absolute;right:0;top:72px;transition:max-height .3s ease,opacity .2s ease,padding .3s ease;visibility:hidden;z-index:20}.mobile-menu.is-open{max-height:800px;opacity:1;padding-bottom:18px;padding-top:10px;pointer-events:auto;visibility:visible}.mobile-menu-link,.mobile-logout{background:transparent;border:0;border-bottom:1px solid var(--hb-border);color:var(--hb-dark);cursor:pointer;font-size:20px;font-weight:700;min-height:56px;padding:14px 4px;text-align:left}.mobile-menu-link.is-active{box-shadow:inset 0 -3px 0 var(--hb-dark)}.mobile-section-trigger{align-items:center;display:flex;justify-content:space-between;width:100%}.mobile-section-trigger span{font-size:18px;transition:transform .2s ease}.mobile-section-trigger[aria-expanded=true] span{transform:rotate(180deg)}.mobile-submenu{display:grid;max-height:0;overflow:hidden;transition:max-height .24s ease}.mobile-submenu.is-open{max-height:190px}.mobile-submenu button{background:var(--hb-cream);border:0;border-bottom:1px solid var(--hb-border);color:var(--hb-dark);cursor:pointer;font-size:18px;padding:13px 16px;text-align:left}.mobile-submenu button:hover,.mobile-submenu button:focus-visible{color:var(--hb-orange)}.mobile-logout{align-items:center;background:transparent;border:0;border-radius:8px;color:var(--hb-dark);display:inline-flex;height:42px;justify-content:center;margin-top:18px;padding:8px;width:42px}.mobile-logout:hover,.mobile-logout:focus-visible{background:var(--hb-dark);color:var(--hb-white)}}@media (min-width: 921px){.app-header{background:var(--hb-menu-background);margin:0;max-width:none;padding-left:max(28px,calc((100vw - 1264px)/2));padding-right:max(28px,calc((100vw - 1264px)/2))}.button{transition:background-color .18s ease,transform .18s ease}.button-primary:hover,.button-primary:focus-visible{background:#cf7134;transform:translateY(-2px)}.button-secondary:hover,.button-secondary:focus-visible{background:#f4f2ed;transform:translateY(-2px)}.button-text:hover,.button-text:focus-visible{color:#b9622d}}