/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid}}}@layer theme{:host,:root{--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;--radius-sm:.25rem;--default-font-family:var(--font-ui),system-ui,-apple-system,sans-serif;--default-mono-font-family:ui-monospace,SFMono-Regular,Menlo,monospace}}@layer base{*,::backdrop,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fixed{position:fixed}.sticky{position:sticky}.block{display:block}.grid{display:grid}.hidden{display:none}.inline{display:inline}.min-h-screen{min-height:100vh}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.uppercase{text-transform:uppercase}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@font-face{font-family:AXGC;src:url(../fonts/axgc_regular.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:AXGC;src:url(../fonts/axgc_medium.ttf)format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:AXGC;src:url(../fonts/axgc_semibold.ttf)format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:AXGC;src:url(../fonts/axgc_bold.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:AXGC;src:url(../fonts/axgc_extrabold.ttf)format("truetype");font-weight:800;font-style:normal;font-display:swap}:root{--font-ui:"AXGC";--font-display:"AXGC";--background:#0a0a0f;--surface:rgba(255,255,255,0.06);--surface-2:rgba(255,255,255,0.09);--surface-3:rgba(255,255,255,0.12);--foreground:#f5f7fa;--muted:#a8b0c0;--border:rgba(255,255,255,0.18);--accent:#00e8c0;--accent-ink:#021a14;--accent-soft:rgba(0,232,192,0.16);--radius:16px;--radius-sm:10px;--glass-blur:20px;--glass-sat:180%}*{box-sizing:border-box}body{background:var(--background);color:var(--foreground);font-family:var(--font-ui),system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}img{max-width:100%;display:block}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shell{width:100%;max-width:860px;margin-inline:auto;padding-inline:14px}@media (min-width:768px){.shell{padding-inline:24px}}.site-header{text-align:center;flex-direction:column;align-items:center;width:100%;max-width:720px;margin:4px auto 16px;padding:24px 22px 16px;display:flex;position:relative}.hud-corner{pointer-events:none;width:22px;height:22px;position:absolute}.hud-tl{border-top:2px solid var(--accent);border-left:2px solid var(--accent);border-top-left-radius:22px;top:0;left:0}.hud-br{border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);border-bottom-right-radius:22px;bottom:0;right:0}.brand-row{align-items:center;gap:10px;display:flex}.brand-mark{color:var(--accent);display:inline-flex}.brand-name{font-family:var(--font-display),var(--font-ui),system-ui,sans-serif;letter-spacing:.04em;color:var(--foreground);font-size:17px;font-weight:700}.brand-tagline{color:var(--muted);margin:8px 0 0;font-size:11.5px;line-height:1.5}.brand-byline{font-family:var(--font-display),var(--font-ui),system-ui,sans-serif;letter-spacing:.05em;color:var(--accent);margin:5px 0 0;font-size:10.5px;font-weight:500}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.main{padding-block:14px 6px}.page-title{font-family:var(--font-display),var(--font-ui),system-ui,sans-serif;letter-spacing:-.035em;align-items:center;gap:10px;margin:0 0 8px;font-size:clamp(26px,6vw,34px);font-weight:700;line-height:1.1;display:flex}.section-ornament{color:var(--accent);flex-shrink:0;line-height:0;display:inline-flex}.page-sub{max-width:62ch;color:var(--muted);margin:0 0 22px;font-size:14.5px;line-height:1.6}.section-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px;padding-bottom:10px;display:flex}.section-title{font-family:var(--font-display),var(--font-ui),system-ui,sans-serif;letter-spacing:-.03em;color:var(--foreground);align-items:center;gap:10px;font-size:18px;font-weight:700;display:inline-flex}.search-wrap{width:100%;position:relative}.search-form{flex-wrap:wrap;align-items:stretch;gap:10px;display:flex}.search-field{flex:260px;min-width:0;position:relative}.search-icon{color:var(--muted);pointer-events:none;display:flex;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-input{width:100%;font:inherit;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--foreground);min-height:46px;padding:13px 44px 13px 40px;font-size:15px}.search-input::placeholder{color:var(--muted)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.clear-btn{border-radius:var(--radius-sm);width:30px;height:30px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;place-items:center;transition:color .12s,background-color .12s,border-color .12s;display:grid;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.clear-btn:hover{color:var(--foreground);background:var(--surface-3);border-color:var(--border)}.clear-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn-primary{border-radius:var(--radius);background:var(--accent);min-height:46px;color:var(--accent-ink);font:inherit;letter-spacing:-.015em;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:800;transition:transform .12s,box-shadow .12s,background-color .12s;display:inline-flex;box-shadow:inset 0 -3px #04140b52}.btn-primary:hover{background:#26ffab;box-shadow:inset 0 -3px #04140b52,0 3px #04140b73}.btn-primary:active{transform:translateY(2px);box-shadow:inset 0 2px #04140b52}.btn-primary:disabled{opacity:.55;cursor:progress}.btn-primary:focus-visible{outline:2px solid var(--foreground);outline-offset:2px}.text-btn{font:inherit;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;min-height:38px;padding:8px 13px;font-size:13px;font-weight:600;transition:color .12s,border-color .12s}.text-btn.is-done,.text-btn:hover{color:var(--accent);border-color:var(--accent)}.state{border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface);color:var(--muted);flex-direction:column;gap:6px;margin-top:16px;padding:18px;font-size:14px;line-height:1.65;display:flex}.state strong{color:var(--foreground);font-size:15px;font-weight:700}.state ul{margin:4px 0 0;padding-left:18px}.state li{margin-bottom:3px}.how{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:620px;margin-top:22px;padding:18px}.how-title{font-family:var(--font-display),var(--font-ui),system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 15px;font-size:11px;font-weight:800}.how-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.how-list li{color:var(--muted);align-items:center;gap:12px;font-size:14.5px;line-height:1.5;display:flex}.how-num{background:var(--accent-soft);border:1px solid var(--accent);width:26px;height:26px;color:var(--accent);border-radius:50%;flex:none;place-items:center;font-size:13px;font-weight:800;line-height:1;display:grid}.state-miss{color:#ffb3b9;background:#ff5f6d12;border:1px solid #ff5f6d73}.state-miss strong{color:#ffd7da}.state-error{color:#ffb3b9;background:#ff5f6d14;border:1px solid #ff5f6d80}.state-error strong{color:#ffd7da}.run{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-top:22px;padding:16px 18px}.run-head{color:var(--foreground);align-items:center;gap:10px;margin-bottom:10px;font-size:13px;font-weight:700;display:flex}.spinner{border:2px solid #f2f2f338;border-top:2px solid var(--accent);border-radius:999px;flex-shrink:0;width:14px;height:14px;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.6s}.btn-primary:active,.btn-primary:hover{transform:none}}.video-meta{margin-top:24px;padding-bottom:4px}.meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;margin:14px 0 0;display:grid}.meta-item dt{letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-size:11px;font-weight:600}.meta-item dd{color:var(--foreground);overflow-wrap:anywhere;min-width:0;margin:0;font-size:14.5px;font-weight:600}.meta-account{align-items:center;gap:8px;display:flex}.meta-avatar{object-fit:cover;border:1px solid var(--border);background:var(--surface-2);border-radius:50%;flex:none;width:22px;height:22px}.meta-item dd a{color:var(--accent)}.video-preview{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);width:clamp(160px,36vw,210px);position:relative;overflow:hidden}.preview-backdrop{z-index:60;background:#060608e0;position:fixed;inset:0}.video-preview.is-open{z-index:61;border-color:var(--border);width:auto;max-width:94vw;height:min(82vh,620px);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 24px 70px #0009}.video-preview img,.video-preview video{object-fit:contain;cursor:zoom-in;width:100%;height:100%;display:block}.video-preview.is-open img,.video-preview.is-open video{cursor:default}.preset-section{margin-top:34px}.video-tools{pointer-events:none;justify-content:space-between;display:flex;position:absolute;bottom:10px;left:8px;right:8px}.video-tools button{pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:30px;height:30px;color:var(--foreground);cursor:pointer;background:#0f0f1099;border:1px solid #ffffff24;border-radius:50%;place-items:center;padding:0;transition:color .12s,background-color .12s,border-color .12s;display:grid}.video-tools button:hover{color:var(--accent);border-color:#05faa880}.video-preview.is-open .video-tools button{width:40px;height:40px}.video-preview.is-open .video-tools{bottom:16px;left:14px;right:14px}.video-progress{pointer-events:none;background:#ffffff2e;height:2px;position:absolute;bottom:0;left:0;right:0}.video-progress span{background:var(--accent);width:0;height:100%;display:block}.content-head{flex-wrap:wrap;align-items:flex-start;gap:16px;display:flex}.content-main{flex:240px;min-width:0}.video-close{border:1px solid var(--border);width:28px;height:28px;color:var(--foreground);cursor:pointer;z-index:2;background:#0f0f10c7;border-radius:4px;place-items:center;padding:0;display:grid;position:absolute;top:6px;right:6px}.video-close:hover{color:var(--accent);background:var(--surface-3)}.meta-desc{color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;max-width:72ch;margin:0;font-size:13.5px;line-height:1.6}.preset-list{flex-direction:column;gap:10px;margin-top:22px;display:flex}.preset-row{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);align-items:flex-start;gap:13px;padding:13px;transition:border-color .14s;display:flex}.preset-row:hover{border-color:#05faa873}.preset-thumb{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-3);object-fit:cover;flex-shrink:0;width:76px;height:76px}.preset-thumb-ph.preset-thumb-file{color:var(--accent)}.preset-thumb-ph{color:var(--muted);font-family:var(--font-display),var(--font-ui),system-ui,sans-serif;letter-spacing:-.03em;justify-content:center;align-items:center;font-size:15px;font-weight:800;display:flex}.preset-body{flex-direction:column;flex:auto;gap:7px;min-width:0;display:flex}.preset-title{overflow-wrap:anywhere;font-size:15px;font-weight:700;line-height:1.35}.preset-badges{flex-wrap:wrap;gap:6px;display:flex}.badge{letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--muted);background:var(--surface-2);padding:3px 8px;font-size:10.5px;font-weight:700}.badge-type{background:var(--accent-soft);color:var(--accent);border-color:#05faa873}.section-count{text-align:center;letter-spacing:0;border-radius:8px;min-width:30px;padding:4px 10px;font-size:15px;line-height:1.2}.preset-detail{color:var(--muted);margin:0;font-size:12.5px}.preset-url{font-family:var(--font-mono),ui-monospace,monospace;color:var(--muted);overflow-wrap:anywhere;font-size:12px}.preset-actions{flex-wrap:wrap;gap:8px;margin-top:2px;display:flex}.btn-open{border-radius:var(--radius-sm);background:var(--accent);min-height:38px;color:var(--accent-ink);justify-content:center;align-items:center;padding:8px 16px;font-size:13.5px;font-weight:700;transition:filter .12s;display:inline-flex}.btn-open:hover{color:var(--accent-ink);filter:brightness(1.06)}.chips{overscroll-behavior-x:contain;scrollbar-width:none;flex-wrap:nowrap;gap:7px;margin-top:16px;padding-bottom:2px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chips:empty{display:none}.chip{font:inherit;color:var(--muted);background:var(--surface);border:1px solid var(--border);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:999px;flex:none;max-width:260px;padding:6px 12px;font-size:12.5px;transition:color .12s,border-color .12s;overflow:hidden}.chip:hover{color:var(--accent);border-color:var(--accent)}.chip:disabled{cursor:default;opacity:.6}.site-footer{background:var(--surface);border-top:1px solid var(--border);margin-top:24px}.footer-inner{padding-block:40px 24px}.footer-top{flex-wrap:wrap;justify-content:space-between;gap:32px;display:flex}.footer-brand{max-width:320px}.footer-logo{align-items:center;gap:8px;margin-bottom:14px;display:flex}.footer-logo-mark{color:var(--accent);display:inline-flex}.footer-name{font-family:var(--font-display),var(--font-ui),system-ui,sans-serif;letter-spacing:.04em;color:var(--foreground);font-size:17px;font-weight:700}.footer-note{color:var(--muted);margin:0;font-size:12.5px;line-height:1.6}.footer-cols{flex-wrap:wrap;gap:48px;display:flex}.footer-col{min-width:130px}.footer-col-title{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;font-size:11px;font-weight:800}.footer-line,.footer-link{color:var(--muted);margin:0 0 10px;font-size:13px;display:block}.footer-line:last-child,.footer-link:last-child{margin-bottom:0}.footer-bottom{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:32px;padding-top:18px;display:flex}.footer-bottom p{color:var(--muted);margin:0;font-size:11.5px}@media (max-width:560px){.content-head{justify-content:center}.video-preview:not(.is-open){width:min(58vw,220px);margin:0 auto}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

/* ===== iOS Liquid Glass Brutal + Smooth Motion by Yanz ===== */

:root {
  --ios-blur: 40px;
  --ios-sat: 180%;
  --ios-radius: 22px;
  --ios-radius-sm: 14px;
  --ios-radius-btn: 16px;
  --ios-glass: rgba(255, 255, 255, 0.12);
  --ios-glass-2: rgba(255, 255, 255, 0.18);
  --ios-border: rgba(255, 255, 255, 0.28);
  --ios-border-soft: rgba(255, 255, 255, 0.14);
  --ios-text: #f5f7fa;
  --ios-muted: rgba(255, 255, 255, 0.55);
  --ios-ink: #0b0d12;
  --ios-cyan: #64d2ff;
  --ios-blue: #0a84ff;
  --ios-purple: #bf5af2;
  --ios-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ios-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ios-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ios-dur: 0.38s;
  --ios-dur-fast: 0.22s;
}

html {
  scroll-behavior: smooth;
}

html, body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: #05070f !important;
  background-image:
    radial-gradient(ellipse 120% 80% at 20% -10%, rgba(10, 132, 255, 0.28) 0%, transparent 52%),
    radial-gradient(ellipse 90% 60% at 100% 10%, rgba(191, 90, 242, 0.2) 0%, transparent 48%),
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(100, 210, 255, 0.12) 0%, transparent 42%),
    linear-gradient(180deg, #070a14 0%, #05070f 50%, #04060c 100%) !important;
  background-attachment: fixed;
  color: var(--ios-text);
  overflow-x: hidden;
}

/* Ambient floating light orbs */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
body::before {
  width: min(55vw, 420px);
  height: min(55vw, 420px);
  top: -12%;
  left: -18%;
  background: rgba(10, 132, 255, 0.4);
  animation: iosOrbA 22s var(--ios-smooth) infinite alternate;
}
body::after {
  width: min(48vw, 360px);
  height: min(48vw, 360px);
  bottom: 5%;
  right: -15%;
  background: rgba(191, 90, 242, 0.32);
  animation: iosOrbB 26s var(--ios-smooth) infinite alternate;
}
@keyframes iosOrbA {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(40px, 50px) scale(1.15); }
}
@keyframes iosOrbB {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-30px, -40px) scale(1.12); }
}
body > * {
  position: relative;
  z-index: 1;
}

/* ===== Global smooth transitions (iOS-like) ===== */
a, button, input, .btn-primary, .btn-open, .clear-btn,
.preset-row, .search-input, .badge, .chip, .site-header,
.state, .run, .how, .yanz-modal-card, .yanz-toast, .yanz-btn,
[class*="chip"], [class*="badge"] {
  transition:
    transform var(--ios-dur-fast) var(--ios-spring),
    opacity var(--ios-dur) var(--ios-out),
    background-color var(--ios-dur) var(--ios-smooth),
    border-color var(--ios-dur) var(--ios-smooth),
    box-shadow var(--ios-dur) var(--ios-out),
    filter var(--ios-dur) var(--ios-smooth),
    color var(--ios-dur-fast) var(--ios-smooth) !important;
}

/* Accent text */
.brand-byline, .brand-mark, .section-ornament,
.footer-logo-mark, .footer-col-title, .badge-type {
  color: var(--ios-cyan) !important;
}
.brand-byline {
  text-shadow: 0 0 16px rgba(100, 210, 255, 0.4);
  letter-spacing: 0.06em;
}

/* Hide original brand text — header is banner */
.site-header .brand-row,
.site-header .brand-tagline,
.site-header .brand-byline,
.site-header .hud-corner,
.site-header .brand-mark,
.site-header .brand-name {
  display: none !important;
}

/* ===== HEADER BANNER — liquid glass frame ===== */
.site-header {
  padding: 0 !important;
  margin: 14px auto 18px !important;
  max-width: 720px !important;
  width: calc(100% - 28px) !important;
  min-height: 120px !important;
  border-radius: var(--ios-radius) !important;
  border: 1.5px solid var(--ios-border) !important;
  background-image: url("../images/banner-am.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: rgba(15, 20, 40, 0.5) !important;
  -webkit-backdrop-filter: blur(var(--ios-blur)) saturate(var(--ios-sat));
  backdrop-filter: blur(var(--ios-blur)) saturate(var(--ios-sat));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  isolation: isolate;
  animation: iosFadeUp 0.55s var(--ios-out) both;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.14) 0%,
    transparent 40%,
    transparent 60%,
    rgba(10, 132, 255, 0.08) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 2;
}
.yanz-header-banner {
  display: block !important;
  width: 100%;
  line-height: 0;
  position: relative;
  z-index: 0;
}
.yanz-header-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: cover;
  object-position: center;
}
.site-header:has(.yanz-header-banner img) {
  background-image: none !important;
  min-height: 0 !important;
}
@media (min-width: 480px) {
  .site-header { min-height: 140px !important; }
  .yanz-header-banner img { max-height: 180px; }
}
@media (min-width: 720px) {
  .site-header { min-height: 160px !important; }
  .yanz-header-banner img { max-height: 200px; }
}

/* ===== SEARCH — iOS liquid field ===== */
.search-input {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1.5px solid var(--ios-border-soft) !important;
  border-radius: var(--ios-radius-btn) !important;
  min-height: 50px !important;
  color: #fff !important;
  font-size: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.search-input:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
.search-input:focus {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(100, 210, 255, 0.55) !important;
  box-shadow:
    0 0 0 4px rgba(10, 132, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 28px rgba(0, 0, 0, 0.3) !important;
  outline: none !important;
}
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* ===== BUTTONS — thick liquid glass ===== */
.btn-primary {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(200, 220, 255, 0.88) 40%,
    rgba(100, 180, 255, 0.85) 100%
  ) !important;
  color: var(--ios-ink) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--ios-radius-btn) !important;
  min-height: 52px !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  box-shadow:
    0 8px 28px rgba(10, 132, 255, 0.35),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.08) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 75%
  );
  transform: translateX(-130%);
  transition: transform 0.6s var(--ios-out);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  filter: brightness(1.04);
  box-shadow:
    0 14px 36px rgba(10, 132, 255, 0.45),
    0 0 40px rgba(100, 210, 255, 0.2),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.8) !important;
}
.btn-primary:hover::before {
  transform: translateX(130%);
}
.btn-primary:active {
  transform: scale(0.96) !important;
  transition-duration: 0.1s !important;
}
.btn-primary:disabled {
  opacity: 0.72;
  animation: iosBtnPulse 1.5s ease-in-out infinite;
}

.btn-open {
  background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(140,190,255,0.85)) !important;
  color: var(--ios-ink) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 14px !important;
  min-height: 42px !important;
  font-weight: 700 !important;
  box-shadow:
    0 4px 18px rgba(10, 132, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
.btn-open:hover {
  transform: translateY(-2px) scale(1.03) !important;
  filter: brightness(1.05);
}
.btn-open:active {
  transform: scale(0.96) !important;
}

.clear-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  width: 34px !important;
  height: 34px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.clear-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  transform: scale(1.1) !important;
}
.clear-btn:active {
  transform: scale(0.9) !important;
}

/* ===== CARDS — liquid glass panels ===== */
.preset-row,
.state,
.run,
.how {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 100%
  ) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border: 1.5px solid var(--ios-border-soft) !important;
  border-radius: var(--ios-radius) !important;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  animation: iosFadeUp 0.5s var(--ios-out) both;
}
.preset-row:hover {
  border-color: rgba(100, 210, 255, 0.4) !important;
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(10, 132, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
.preset-row:active {
  transform: scale(0.99) !important;
  transition-duration: 0.1s !important;
}
.state-error {
  border-color: rgba(255, 120, 140, 0.35) !important;
  background: linear-gradient(165deg, rgba(255, 80, 100, 0.12), rgba(255, 255, 255, 0.05)) !important;
}

.preset-list .preset-row:nth-child(1) { animation-delay: 0.04s; }
.preset-list .preset-row:nth-child(2) { animation-delay: 0.08s; }
.preset-list .preset-row:nth-child(3) { animation-delay: 0.12s; }
.preset-list .preset-row:nth-child(4) { animation-delay: 0.16s; }
.preset-list .preset-row:nth-child(5) { animation-delay: 0.2s; }
.preset-list .preset-row:nth-child(n+6) { animation-delay: 0.24s; }

.preset-thumb {
  border-radius: 14px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transition: transform var(--ios-dur-fast) var(--ios-spring) !important;
}
.preset-row:hover .preset-thumb {
  transform: scale(1.05);
}

.badge {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.badge-type {
  background: rgba(100, 210, 255, 0.18) !important;
  color: var(--ios-cyan) !important;
  border-color: rgba(100, 210, 255, 0.35) !important;
}

.chip {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.chip:hover:not(:disabled) {
  border-color: rgba(100, 210, 255, 0.45) !important;
  color: #fff !important;
  transform: translateY(-2px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}
.chip:active:not(:disabled) {
  transform: scale(0.96) !important;
}

.footer-inner {
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px 24px 0 0;
}

.video-preview,
[class*="video-preview"] {
  border-radius: 18px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
  background: #0a0e18;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--ios-cyan);
  border-radius: 50%;
  animation: iosSpin 0.75s linear infinite;
  display: inline-block;
}

.how-num {
  background: rgba(100, 210, 255, 0.14) !important;
  border: 1.5px solid rgba(100, 210, 255, 0.35) !important;
  color: var(--ios-cyan) !important;
  border-radius: 10px !important;
}

.page-title {
  animation: iosFadeUp 0.5s var(--ios-out) 0.05s both;
}
.page-sub {
  animation: iosFadeUp 0.5s var(--ios-out) 0.1s both;
}
.search-wrap {
  animation: iosFadeUp 0.55s var(--ios-out) 0.15s both;
}

/* ===== MODAL — iOS sheet style ===== */
.yanz-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ios-out), visibility 0.4s;
}
.yanz-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.yanz-modal-card {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 28px;
  padding: 28px 22px 22px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-align: center;
  transform: scale(0.88) translateY(24px);
  opacity: 0;
  transition: transform 0.45s var(--ios-spring), opacity 0.35s var(--ios-out);
  position: relative;
  overflow: hidden;
}
.yanz-modal-overlay.is-open .yanz-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.yanz-modal-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-size: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.yanz-modal-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}
.yanz-modal-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px;
}
.yanz-modal-actions {
  display: flex;
  gap: 10px;
}
.yanz-btn {
  flex: 1;
  min-height: 48px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.yanz-btn:active {
  transform: scale(0.95) !important;
}
.yanz-btn-skip {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.yanz-btn-skip:hover {
  background: rgba(255, 255, 255, 0.16);
}
.yanz-btn-join {
  background: linear-gradient(165deg, #fff, rgba(180, 210, 255, 0.92));
  color: var(--ios-ink);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 6px 20px rgba(10, 132, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.yanz-btn-join:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* ===== TOAST — iOS pill ===== */
.yanz-toast-wrap {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  width: calc(100% - 32px);
  max-width: 380px;
  pointer-events: none;
}
.yanz-toast {
  pointer-events: auto;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  backdrop-filter: blur(32px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 14px 14px 14px 16px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(140%) scale(0.94);
  opacity: 0;
  transition:
    transform 0.5s var(--ios-spring),
    opacity 0.35s var(--ios-out);
}
.yanz-toast.is-show {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.yanz-toast-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.yanz-toast-text strong {
  color: var(--ios-cyan);
  font-weight: 700;
}
.yanz-toast-join {
  flex-shrink: 0;
  background: linear-gradient(165deg, #fff, rgba(180, 210, 255, 0.9));
  color: var(--ios-ink);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(10, 132, 255, 0.25);
}
.yanz-toast-join:active {
  transform: scale(0.94);
}
.yanz-toast-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
}
.yanz-toast-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Keyframes */
@keyframes iosFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes iosSpin {
  to { transform: rotate(360deg); }
}
@keyframes iosBtnPulse {
  0%, 100% {
    box-shadow: 0 8px 28px rgba(10, 132, 255, 0.3), inset 0 1.5px 0 rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 8px 36px rgba(10, 132, 255, 0.5), 0 0 0 4px rgba(100, 210, 255, 0.12), inset 0 1.5px 0 rgba(255, 255, 255, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}