/* Howto Design System 1.0.0 | Load howto.tokens.css before this file. */
@font-face{font-family:Rajdhani;src:url('../fonts/Rajdhani-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Rajdhani;src:url('../fonts/Rajdhani-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
.ht{font-family:var(--ht-font-body);font-size:16px;line-height:1.5;color:var(--ht-text);background:var(--ht-bg);-webkit-text-size-adjust:100%}
.ht *,.ht *::before,.ht *::after{box-sizing:border-box}
.ht [hidden]{display:none!important}
.ht h1,.ht h2,.ht h3,.ht h4{font-family:var(--ht-font-display);font-weight:700;color:var(--ht-heading);line-height:1.12;margin:0 0 16px}
.ht h1{font-size:clamp(40px,4.4vw,56px)}.ht h2{font-size:36px}.ht h3{font-size:28px}.ht h4{font-size:24px}
.ht p{margin:0 0 16px}.ht a{color:var(--ht-link);text-underline-offset:3px;text-decoration-thickness:1.5px}.ht a:hover{color:var(--ht-link-hover)}
.ht button,.ht input,.ht select,.ht textarea{font:inherit}.ht button{cursor:pointer}.ht button:disabled,.ht [aria-disabled=true]{cursor:not-allowed}
.ht :focus-visible{outline:var(--ht-focus-width) solid var(--ht-focus);outline-offset:var(--ht-focus-offset)}
.ht [data-inverse] :focus-visible{outline-color:#FFFFFF}
.ht :target,.ht [tabindex],.ht input,.ht select,.ht textarea{scroll-margin-block:24px}
.ht .ht-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ht .ht-skip{position:fixed;top:-100px;left:16px;background:var(--ht-surface);color:var(--ht-text);padding:12px 20px;z-index:9999;border:2px solid var(--ht-focus);border-radius:8px}.ht .ht-skip:focus{top:12px}
.ht .ht-muted{color:var(--ht-text-muted)}.ht .ht-small{font-size:14px}.ht .ht-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ht-text-muted)}
.ht .ht-stack>*+*{margin-top:16px}.ht .ht-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.ht .ht-between{justify-content:space-between}.ht .ht-wrap{overflow-wrap:anywhere}
.ht .ht-container{width:min(100% - 32px,var(--ht-layout-max));margin-inline:auto}
.ht .ht-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.ht .ht-grid>*{grid-column:span 4;min-width:0}
.ht .ht-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ht-button-gap);min-height:var(--ht-button-height);padding:10px var(--ht-button-padding-x);border:1px solid transparent;border-radius:var(--ht-button-radius);font-size:14px;font-weight:600;line-height:1.4;text-decoration:none;white-space:normal;text-align:center;transition:background-color var(--ht-duration-100) var(--ht-easing-standard),border-color var(--ht-duration-100) var(--ht-easing-standard);background:var(--ht-action-primary);color:var(--ht-on-primary)}
.ht .ht-btn:hover{background:var(--ht-action-primary-hover);color:var(--ht-on-primary)}.ht .ht-btn:active{background:var(--ht-action-primary-active)}
.ht .ht-btn--secondary{background:var(--ht-action-secondary);border-color:var(--ht-border-control);color:var(--ht-on-secondary)}.ht .ht-btn--secondary:hover{background:var(--ht-action-secondary-hover);color:var(--ht-on-secondary)}
.ht .ht-btn--ghost{background:transparent;color:var(--ht-link);border-color:transparent}.ht .ht-btn--ghost:hover{background:var(--ht-action-secondary-hover);color:var(--ht-link)}
.ht .ht-btn--secondary:active,.ht .ht-btn--ghost:active{background:var(--ht-action-secondary-hover)}
.ht .ht-btn--danger{background:var(--ht-danger);color:var(--ht-danger-bg)}.ht .ht-btn--danger:hover{background:var(--ht-danger-bg);border-color:var(--ht-danger);color:var(--ht-danger)}
.ht .ht-btn--danger:active{background:var(--ht-danger-bg);color:var(--ht-danger);border-color:var(--ht-danger)}
.ht .ht-btn:disabled,.ht .ht-btn[aria-disabled=true]{background:var(--ht-disabled-bg);border-color:var(--ht-border);color:var(--ht-disabled-text)}
.ht .ht-btn--sm{min-height:var(--ht-button-height-small);padding:7px 12px;font-size:14px}.ht .ht-btn--lg{min-height:var(--ht-button-height-large);padding:14px 24px;font-size:16px}
.ht .ht-iconbtn{width:44px;min-width:44px;height:44px;padding:0}.ht .ht-icon{width:24px;height:24px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ht .ht-btn[aria-busy=true]{position:relative;cursor:wait}.ht .ht-spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ht-spin .8s linear infinite;flex:none}@keyframes ht-spin{to{transform:rotate(360deg)}}
.ht .ht-field{display:grid;gap:8px;min-width:0}.ht .ht-field>label,.ht .ht-field legend{font-size:14px;font-weight:600;color:var(--ht-text)}
.ht .ht-input{display:block;width:100%;min-height:var(--ht-field-height);border:1px solid var(--ht-border-control);border-radius:var(--ht-field-radius);padding:11px var(--ht-field-padding-x);background:var(--ht-surface);color:var(--ht-text);line-height:1.5;font-size:16px}
.ht .ht-input::placeholder{color:var(--ht-text-muted);opacity:1}.ht .ht-input:hover{border-color:var(--ht-text)}.ht .ht-input:focus{border-color:var(--ht-focus)}.ht textarea.ht-input{min-height:112px;resize:vertical}
.ht .ht-input[aria-invalid=true]{border-color:var(--ht-danger);border-width:2px;padding:10px 11px}.ht .ht-input:disabled{background:var(--ht-disabled-bg);color:var(--ht-disabled-text);border-color:var(--ht-border)}.ht .ht-input[readonly]{background:var(--ht-surface-subtle)}
.ht .ht-help{font-size:14px;color:var(--ht-text-muted);margin:0}.ht .ht-error{font-size:14px;color:var(--ht-danger);margin:0;font-weight:600}
.ht fieldset{border:0;margin:0;padding:0;min-width:0}.ht legend{padding:0;margin-bottom:8px}
.ht .ht-choice{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:14px}.ht .ht-choice input{width:20px;height:20px;margin:0;accent-color:var(--ht-heading);flex:none}.ht .ht-choice input[role=switch]{appearance:none;width:40px;height:24px;border:1px solid var(--ht-border-control);background:var(--ht-surface-subtle);border-radius:999px;position:relative;transition:background var(--ht-duration-100)}
.ht .ht-choice input[role=switch]::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--ht-text-muted);border-radius:50%;transition:transform var(--ht-duration-100)}
.ht .ht-choice input[role=switch]:checked{background:var(--ht-action-primary);border-color:var(--ht-on-primary)}.ht .ht-choice input[role=switch]:checked::before{transform:translateX(16px);background:var(--ht-on-primary)}
.ht .ht-choice input:disabled{cursor:not-allowed}.ht .ht-choice:has(input:disabled){color:var(--ht-disabled-text);cursor:not-allowed}
.ht .ht-card{border:1px solid var(--ht-border);border-radius:var(--ht-card-radius);padding:var(--ht-card-padding);background:var(--ht-surface);min-width:0}.ht .ht-card p:last-child{margin-bottom:0}
.ht .ht-card--raised{box-shadow:0 4px 16px #071D3812}.ht .ht-card__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--ht-surface-subtle);color:var(--ht-heading);margin-bottom:24px}
.ht .ht-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ht-border);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;background:var(--ht-surface-subtle);color:var(--ht-text);line-height:1.5}
.ht .ht-badge--success{background:var(--ht-success-bg);color:var(--ht-success);border-color:var(--ht-success)}.ht .ht-badge--warning{background:var(--ht-warning-bg);color:var(--ht-warning);border-color:var(--ht-warning)}.ht .ht-badge--danger{background:var(--ht-danger-bg);color:var(--ht-danger);border-color:var(--ht-danger)}.ht .ht-badge--info{background:var(--ht-info-bg);color:var(--ht-info);border-color:var(--ht-info)}
.ht .ht-avatar{width:40px;height:40px;border-radius:50%;background:var(--ht-surface-subtle);border:1px solid var(--ht-border);display:inline-grid;place-items:center;color:var(--ht-heading);font-weight:600;font-size:14px;flex:none}
.ht .ht-alert{display:flex;gap:12px;padding:16px;border:1px solid var(--ht-info);border-radius:8px;background:var(--ht-info-bg);color:var(--ht-info)}.ht .ht-alert p{margin:4px 0 0;font-size:14px}.ht .ht-alert strong{display:block;font-weight:600}.ht .ht-alert--success{background:var(--ht-success-bg);color:var(--ht-success);border-color:var(--ht-success)}.ht .ht-alert--warning{background:var(--ht-warning-bg);color:var(--ht-warning);border-color:var(--ht-warning)}.ht .ht-alert--danger{background:var(--ht-danger-bg);color:var(--ht-danger);border-color:var(--ht-danger)}
.ht .ht-toast-region{position:fixed;bottom:24px;right:24px;z-index:var(--ht-layer-toast);max-width:min(440px,calc(100vw - 32px));display:grid;gap:12px;pointer-events:none}.ht .ht-toast{background:var(--ht-surface-raised);border:1px solid var(--ht-border-control);box-shadow:0 12px 40px #071D3826;border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;pointer-events:auto;color:var(--ht-text)}.ht .ht-toast p{margin:0;font-size:14px}
.ht .ht-tabs [role=tablist]{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--ht-border);padding-bottom:0}.ht .ht-tabs [role=tab]{border:0;background:transparent;color:var(--ht-text-muted);min-height:44px;padding:10px 16px;border-bottom:3px solid transparent;font-weight:600;font-size:14px}.ht .ht-tabs [role=tab][aria-selected=true]{color:var(--ht-heading);border-bottom-color:var(--ht-focus)}.ht .ht-tabs [role=tabpanel]{padding:24px 0 0}
.ht .ht-accordion{border:1px solid var(--ht-border);border-radius:8px;background:var(--ht-surface)}.ht .ht-accordion details+details{border-top:1px solid var(--ht-border)}.ht .ht-accordion summary{padding:16px 20px;cursor:pointer;font-weight:600;min-height:56px;font-size:16px}.ht .ht-accordion details>div{padding:0 20px 20px;color:var(--ht-text-muted)}
.ht .ht-dialog{width:min(calc(100% - 32px),var(--ht-dialog-width));max-height:calc(100dvh - 48px);border:1px solid var(--ht-border-control);border-radius:var(--ht-dialog-radius);padding:var(--ht-dialog-padding);background:var(--ht-surface-raised);color:var(--ht-text);box-shadow:0 24px 72px #071D3840;overflow:auto}.ht .ht-dialog::backdrop{background:#071D38B3}.ht .ht-dialog h2{font-size:28px}.ht .ht-dialog__actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}
.ht .ht-tooltip-wrap{position:relative;display:inline-flex}.ht [role=tooltip]{display:none;position:absolute;bottom:calc(100% + 10px);left:0;z-index:var(--ht-layer-popover);background:var(--ht-text);color:var(--ht-surface);font-size:12px;padding:8px 12px;width:max-content;max-width:min(240px,calc(100vw - 64px));border-radius:4px;box-shadow:0 4px 16px #071D3826}.ht .ht-tooltip-wrap:hover [role=tooltip],.ht .ht-tooltip-wrap:focus-within [role=tooltip]{display:block}.ht .ht-tooltip-wrap[data-dismissed=true] [role=tooltip]{display:none}
.ht .ht-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;list-style:none;padding:0;margin:0;font-size:14px}.ht .ht-breadcrumb li{display:flex;align-items:center;gap:8px}.ht .ht-breadcrumb li+li::before{content:'/';color:var(--ht-text-muted)}.ht .ht-breadcrumb [aria-current]{color:var(--ht-text-muted)}
.ht .ht-pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.ht .ht-pagination [aria-current=page]{border-color:var(--ht-focus);background:var(--ht-surface-subtle);color:var(--ht-heading)}
.ht .ht-table-wrap{width:100%;overflow:auto;border:1px solid var(--ht-border);border-radius:12px;background:var(--ht-surface)}.ht .ht-table{width:100%;border-collapse:collapse;font-size:14px;text-align:left;min-width:560px}.ht .ht-table caption{text-align:left;padding:16px 20px;color:var(--ht-text-muted);font-size:14px}.ht .ht-table th{font-weight:600;background:var(--ht-surface-subtle);color:var(--ht-heading);padding:12px 20px;border-bottom:1px solid var(--ht-border)}.ht .ht-table td{height:var(--ht-table-row-min);padding:12px 20px;border-bottom:1px solid var(--ht-border)}.ht .ht-table tbody tr:last-child td{border:0}.ht .ht-table tbody tr:hover{background:var(--ht-surface-subtle)}
.ht progress{appearance:none;width:100%;height:8px;border:0;border-radius:999px;background:var(--ht-surface-subtle);overflow:hidden;accent-color:var(--ht-heading)}.ht progress::-webkit-progress-bar{background:var(--ht-surface-subtle);border-radius:999px}.ht progress::-webkit-progress-value{background:var(--ht-heading);border-radius:999px}.ht progress::-moz-progress-bar{background:var(--ht-heading);border-radius:999px}
.ht .ht-skeleton{height:16px;border-radius:4px;background:var(--ht-border);max-width:100%}.ht .ht-empty{text-align:center;display:grid;justify-items:center;gap:16px;padding:40px 24px;border:1px dashed var(--ht-border-control);border-radius:12px;background:var(--ht-surface)}.ht .ht-empty h3,.ht .ht-empty p{margin:0}.ht .ht-empty p{max-width:44ch;color:var(--ht-text-muted)}
.ht .ht-brand{display:block;width:200px;height:auto;margin:12px 0}.ht .ht-brand--dark{display:none}.ht[data-theme=dark] .ht-brand--light,[data-theme=dark] .ht .ht-brand--light{display:none}.ht[data-theme=dark] .ht-brand--dark,[data-theme=dark] .ht .ht-brand--dark{display:block}
.ht .ht-nav{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}.ht .ht-nav a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:8px;color:var(--ht-text-muted);font-size:14px;font-weight:600;text-decoration:none}.ht .ht-nav a:hover{background:var(--ht-surface-subtle);color:var(--ht-heading)}.ht .ht-nav [aria-current=page]{background:var(--ht-surface-subtle);color:var(--ht-heading);box-shadow:inset 3px 0 0 var(--ht-focus)}.ht .ht-nav--vertical{flex-direction:column}
@media(min-width:640px){.ht .ht-container{width:min(100% - 48px,var(--ht-layout-max))}.ht .ht-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:24px}.ht .ht-grid>.ht-col-half{grid-column:span 4}.ht .ht-grid>.ht-col-full{grid-column:span 8}}
@media(min-width:1024px){.ht .ht-container{width:min(100% - 64px,var(--ht-layout-max))}.ht .ht-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.ht .ht-grid>.ht-col-half{grid-column:span 6}.ht .ht-grid>.ht-col-third{grid-column:span 4}.ht .ht-grid>.ht-col-full{grid-column:span 12}}
@media(pointer:coarse){.ht .ht-btn--sm{min-height:44px}}
@media(prefers-reduced-motion:reduce){.ht *,.ht *::before,.ht *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.ht .ht-btn,.ht .ht-input,.ht .ht-choice input[role=switch],.ht .ht-badge,.ht .ht-alert{border:1px solid ButtonText}.ht .ht-choice input[role=switch]:checked::before{background:Highlight}.ht :focus-visible{outline-color:Highlight}}