/* inter-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/inter-v20-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100;
  src: url('fonts/inter-v20-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/inter-v20-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 200;
  src: url('fonts/inter-v20-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/inter-v20-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/inter-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/inter-v20-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/inter-v20-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/inter-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/inter-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  src: url('fonts/inter-v20-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/inter-v20-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/inter-v20-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root{
  color-scheme:dark;--bg:#070912;--panel:#101524;--panel2:#151b2d;--line:rgba(174,199,255,.14);--text:#f2f5ff;--muted:#929db8;--cyan:#63e8ff;--violet:#9d7dff;--mint:#65e6ad;--danger:#ff7890;--shadow:0 28px 80px rgba(0,0,0,.42);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit}button,input{font:inherit}.portal-body{min-height:100vh;background:radial-gradient(circle at 8% 4%,rgba(55,104,255,.18),transparent 34rem),radial-gradient(circle at 92% 2%,rgba(165,73,255,.15),transparent 32rem),linear-gradient(180deg,#0b0f1c 0,#070912 46%,#090c16 100%)}
.portal-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(20px,5vw,76px);border-bottom:1px solid var(--line);background:rgba(7,9,18,.78);backdrop-filter:blur(20px)}.portal-nav nav,.portal-footer nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.portal-nav nav a,.portal-footer nav a{font-size:13px;color:var(--muted);text-decoration:none}.portal-nav nav a:hover,.portal-footer nav a:hover{color:var(--cyan)}
.portal-brand,.mini-brand{display:flex;align-items:baseline;gap:7px;text-decoration:none;place-items:center;}.portal-brand b{font-size:19px;letter-spacing:.01em}.portal-brand small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.portal-brand.small b{font-size:15px}.logo-grid{display:grid;grid-template-columns:repeat(3,5px);grid-template-rows:repeat(3,5px);gap:2px;margin-right:4px}.logo-grid i{display:block;border-radius:1px;background:#29314a}.logo-grid i:nth-child(2),.logo-grid i:nth-child(4),.logo-grid i:nth-child(5),.logo-grid i:nth-child(8){background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 12px rgba(99,232,255,.35)}
.hero-section{min-height:calc(100vh - 70px);display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);gap:clamp(40px,7vw,110px);align-items:center;padding:clamp(70px,9vw,130px) clamp(20px,6vw,100px)}.hero-copy{max-width:790px}.hero-kicker,.section-heading>span,.section-index,.auth-step{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}.hero-copy h1{margin:20px 0 22px;font-size:clamp(52px,6.3vw,96px);line-height:.96;letter-spacing:-.055em}.hero-copy h1 em{display:block;font-style:normal;background:linear-gradient(90deg,var(--cyan),#8bc6ff 36%,#b28cff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lead{max-width:730px;font-size:clamp(18px,1.65vw,25px);line-height:1.55;color:#c3cbde}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 30px}.portal-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid rgba(151,177,255,.23);border-radius:10px;background:#171d2f;color:var(--text);text-decoration:none;font-weight:800;font-size:13px;cursor:pointer;transition:.18s ease}.portal-button:hover{transform:translateY(-1px);border-color:rgba(99,232,255,.5)}.portal-button.primary{border-color:transparent;background:linear-gradient(135deg,#39cfe8,#6b61ed);box-shadow:0 12px 32px rgba(59,115,255,.25)}.portal-button.ghost{background:transparent}.portal-button:disabled{opacity:.48;cursor:wait;transform:none}.hobby-note{display:flex;align-items:flex-start;gap:12px;max-width:680px;color:var(--muted);font-size:13px;line-height:1.6}.hobby-note span{flex:0 0 auto;padding:4px 7px;border:1px solid rgba(101,230,173,.24);border-radius:5px;color:var(--mint);font-size:9px;font-weight:900;letter-spacing:.12em}
.hero-machine{position:relative;padding:18px;border:1px solid rgba(119,151,255,.18);border-radius:22px;background:linear-gradient(180deg,rgba(20,27,46,.92),rgba(10,14,27,.88));box-shadow:var(--shadow);overflow:hidden}.hero-machine:before{content:"";position:absolute;inset:-1px;background:linear-gradient(130deg,rgba(99,232,255,.08),transparent 32%,transparent 66%,rgba(157,125,255,.1));pointer-events:none}.machine-top{position:relative;display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:10px;letter-spacing:.12em;color:var(--muted)}.machine-top b{color:var(--cyan)}.machine-grid{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:7px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#090d18}.machine-grid i{aspect-ratio:1;border-radius:6px;background:#171e32;border:1px solid rgba(255,255,255,.035)}.machine-grid i.on{background:linear-gradient(145deg,rgba(99,232,255,.8),rgba(54,129,255,.48));box-shadow:0 0 20px rgba(99,232,255,.26)}.machine-grid i.hot{background:linear-gradient(145deg,rgba(157,125,255,.8),rgba(90,67,225,.46));box-shadow:0 0 20px rgba(157,125,255,.24)}.machine-wave{position:relative;margin-top:10px;padding:10px 4px 4px;border-radius:10px;background:rgba(7,10,18,.68)}.machine-wave svg{display:block;width:100%;height:86px}.machine-wave path{fill:none;stroke:url(#none);stroke:var(--cyan);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.72}.machine-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.machine-tags span{padding:5px 7px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.1em}
.feature-section,.access-section{padding:110px clamp(20px,6vw,100px)}.feature-section{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(13,18,33,.58),rgba(8,11,20,.45))}.section-heading{display:grid;grid-template-columns:.33fr 1.2fr 1fr;gap:30px;align-items:start;margin-bottom:52px}.section-heading h2,.about-section h2{margin:0;font-size:clamp(36px,4vw,61px);line-height:1.02;letter-spacing:-.04em}.section-heading p{margin:4px 0 0;color:var(--muted);font-size:16px;line-height:1.7}.section-heading.compact{grid-template-columns:.32fr 1fr .9fr}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.feature-grid article{min-height:260px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(13,18,31,.36)}.feature-grid article.featured{background:linear-gradient(145deg,rgba(99,232,255,.055),rgba(157,125,255,.05))}.feature-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:46px;border:1px solid rgba(99,232,255,.22);border-radius:8px;color:var(--cyan);font-weight:900}.feature-grid h3{margin:0 0 12px;font-size:18px}.feature-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.feature-grid article>a{display:inline-block;margin-top:16px;color:var(--cyan);font-size:12px;text-decoration:none}
.about-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;padding:110px clamp(20px,6vw,100px);border-top:1px solid var(--line)}.about-section h2{margin-top:18px}.about-copy{display:grid;grid-template-columns:1fr 1fr;gap:34px}.about-copy p{margin:0;color:#bdc6da;font-size:17px;line-height:1.75}.about-copy strong{color:var(--text)}
.access-section{border-top:1px solid var(--line);background:radial-gradient(circle at 50% 100%,rgba(79,74,225,.11),transparent 38rem)}.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1120px;margin:0 auto}.auth-card{padding:30px;border:1px solid rgba(150,178,255,.16);border-radius:16px;background:linear-gradient(180deg,rgba(18,24,42,.95),rgba(12,16,28,.96));box-shadow:0 22px 60px rgba(0,0,0,.22)}.auth-card h3{margin:12px 0 8px;font-size:27px}.auth-card>p{margin:0 0 24px;color:var(--muted);line-height:1.6}.auth-card label{display:block;margin:14px 0}.auth-card label span{display:block;margin-bottom:7px;color:#b8c1d5;font-size:11px;font-weight:700}.auth-card input{width:100%;height:48px;padding:0 13px;border:1px solid rgba(158,184,255,.18);border-radius:9px;background:#090d18;color:var(--text);outline:none}.auth-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(99,232,255,.08)}.auth-card .portal-button{width:100%;margin-top:6px}.code-fields{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.form-message{display:block;min-height:22px;margin-top:14px;color:var(--mint);font-size:12px;line-height:1.5}.form-message.error{color:var(--danger)}.noscript-note{color:var(--danger);text-align:center}
.portal-footer{display:grid;grid-template-columns:1fr auto auto;gap:40px;align-items:center;padding:34px clamp(20px,6vw,100px);border-top:1px solid var(--line);color:var(--muted)}.portal-footer p{margin:6px 0 0;font-size:11px}.portal-footer>small{font-size:10px}
.compact-page{display:grid;place-items:center;padding:24px}.status-card{width:min(560px,100%);padding:42px;border:1px solid var(--line);border-radius:20px;background:rgba(16,21,36,.96);box-shadow:var(--shadow);text-align:center}.mini-brand{display:inline-block;margin-bottom:28px;color:var(--muted);font-size:12px;text-decoration:none}.status-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 20px;border-radius:50%;font-size:28px;font-weight:900}.status-icon.success{background:rgba(101,230,173,.12);color:var(--mint);border:1px solid rgba(101,230,173,.3)}.status-icon.error{background:rgba(255,120,144,.1);color:var(--danger);border:1px solid rgba(255,120,144,.28)}.status-card h1{margin:0 0 12px}.status-card p{color:var(--muted);line-height:1.65}.status-card .portal-button{margin-top:12px}
.legal-shell,.player-shell{width:min(1080px,calc(100% - 40px));margin:0 auto;padding:56px 0 90px}.legal-shell .portal-brand,.player-shell .portal-brand{margin-bottom:46px}.legal-card{padding:34px;border:1px solid var(--line);border-radius:16px;background:rgba(15,20,35,.82)}.legal-card h1{font-size:42px;margin:0 0 18px}.legal-card h2{margin-top:34px;font-size:20px}.legal-card p,.legal-card li{color:#bbc4d8;line-height:1.75}.legal-warning{padding:13px 15px;border:1px solid rgba(255,202,106,.24);border-radius:9px;background:rgba(255,202,106,.06);color:#ffd992!important}.code-panel{overflow:auto;padding:18px;border:1px solid var(--line);border-radius:10px;background:#080c16;color:#cfe8ff;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.player-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.player-hero h1{font-size:clamp(44px,6vw,78px);line-height:.98;letter-spacing:-.05em}.player-hero p{color:#bbc4d8;font-size:17px;line-height:1.7}.player-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}.player-steps article{padding:24px;border:1px solid var(--line);border-radius:12px;background:rgba(16,21,36,.68)}.player-steps span{font-size:10px;color:var(--cyan);font-weight:800}.player-steps h3{margin:10px 0}.player-steps p{color:var(--muted);font-size:13px;line-height:1.6}
@media(max-width:1050px){.hero-section{grid-template-columns:1fr;min-height:auto}.hero-machine{max-width:760px}.section-heading,.section-heading.compact{grid-template-columns:1fr;gap:14px}.feature-grid{grid-template-columns:repeat(2,1fr)}.about-section{grid-template-columns:1fr;gap:40px}.about-copy{grid-template-columns:1fr 1fr}.player-hero{grid-template-columns:1fr}}
@media(max-width:720px){.portal-nav{align-items:flex-start}.portal-nav nav{display:none}.hero-section,.feature-section,.about-section,.access-section{padding-left:20px;padding-right:20px}.hero-copy h1{font-size:48px}.feature-grid{grid-template-columns:1fr}.about-copy,.access-grid{grid-template-columns:1fr}.portal-footer{grid-template-columns:1fr;gap:18px}.portal-footer nav{gap:14px}.player-steps{grid-template-columns:1fr}.legal-shell,.player-shell{width:min(100% - 28px,1080px)}}
.language-switch{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(12,17,30,.72);font-size:10px;font-weight:900;letter-spacing:.08em}.language-switch a{color:var(--muted);text-decoration:none}.language-switch a:hover,.language-switch a[aria-current="true"]{color:var(--cyan)}.language-switch span{color:#46516c}.legal-toolbar,.player-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:46px}.legal-toolbar .portal-brand,.player-toolbar .portal-brand{margin-bottom:0}.legal-card code{overflow-wrap:anywhere}
@media(max-width:720px){.language-switch{margin-left:auto}.legal-toolbar,.player-toolbar{align-items:flex-start}.portal-nav{flex-wrap:wrap}}

/* NybbleNote 2.8 - editorial landing page motion and interaction */
.portal-body{position:relative;overflow-x:hidden}
.portal-glow{position:fixed;z-index:-1;width:46rem;height:46rem;left:var(--glow-x,12vw);top:var(--glow-y,10vh);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(99,232,255,.095),rgba(157,125,255,.045) 34%,transparent 68%);filter:blur(10px);pointer-events:none;transition:left .35s ease-out,top .35s ease-out}
.portal-nav{transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
.portal-nav.scrolled{background:rgba(7,9,18,.91);border-color:rgba(174,199,255,.2);box-shadow:0 16px 48px rgba(0,0,0,.18)}
.logo-grid i{transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}.portal-brand:hover .logo-grid i:nth-child(2),.portal-brand:hover .logo-grid i:nth-child(5),.portal-brand:hover .logo-grid i:nth-child(8){transform:translateY(-2px);box-shadow:0 0 18px rgba(99,232,255,.55)}
.hero-section{position:relative;isolation:isolate}.hero-section:after{content:"";position:absolute;z-index:-1;right:4%;bottom:4%;width:38vw;height:38vw;border-radius:50%;background:radial-gradient(circle,rgba(157,125,255,.09),transparent 67%);filter:blur(24px)}
.hero-machine{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--float-y,0));transform-style:preserve-3d;transition:transform .25s ease-out,border-color .3s ease,box-shadow .3s ease;will-change:transform}.hero-machine:hover{border-color:rgba(99,232,255,.32);box-shadow:0 34px 100px rgba(0,0,0,.48),0 0 70px rgba(74,112,255,.08)}
.machine-shine{position:absolute;inset:-35%;z-index:0;background:linear-gradient(120deg,transparent 37%,rgba(255,255,255,.055) 48%,transparent 58%);transform:translateX(-55%) rotate(8deg);animation:machineShine 8s ease-in-out infinite;pointer-events:none}.hero-machine>*:not(.machine-shine){position:relative;z-index:1}
.status-dot{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(101,230,173,.8);animation:statusPulse 1.8s ease-in-out infinite}
.machine-grid{overflow:hidden}.machine-grid i{transition:background .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease}.machine-grid i.beat{transform:scale(.91);background:linear-gradient(145deg,rgba(101,230,173,.92),rgba(54,129,255,.55));box-shadow:0 0 24px rgba(101,230,173,.35)}
.machine-playhead{position:absolute;z-index:3;top:9px;bottom:9px;left:15px;width:calc((100% - 30px)/8);border:1px solid rgba(255,255,255,.08);border-radius:8px;background:linear-gradient(180deg,rgba(99,232,255,.06),rgba(157,125,255,.025));box-shadow:0 0 26px rgba(99,232,255,.07);pointer-events:none;animation:gridPlayhead 3.64s steps(8,end) infinite}
.machine-wave path{stroke-dasharray:930;stroke-dashoffset:930;animation:drawWave 4.8s ease-in-out infinite}
.machine-tags span{transition:color .2s ease,border-color .2s ease,transform .2s ease}.hero-machine:hover .machine-tags span:nth-child(2n){transform:translateY(-1px);border-color:rgba(157,125,255,.25);color:#c8bbff}
.signal-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(10,14,25,.62)}.signal-strip article{position:relative;min-height:126px;padding:24px clamp(18px,2.6vw,38px);border-right:1px solid var(--line);overflow:hidden}.signal-strip article:last-child{border-right:0}.signal-strip article:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .35s ease}.signal-strip article:hover:after{width:100%}.signal-strip b{display:block;margin-bottom:15px;color:#46516b;font-size:10px;letter-spacing:.16em}.signal-strip span{font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--cyan)}.signal-strip p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.feature-grid article{position:relative;overflow:hidden;transition:transform .25s ease,background .25s ease,border-color .25s ease}.feature-grid article:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%),rgba(99,232,255,.08),transparent 42%);opacity:0;transition:opacity .25s ease;pointer-events:none}.feature-grid article:hover{transform:translateY(-3px);background:rgba(17,24,41,.64);border-color:rgba(99,232,255,.19)}.feature-grid article:hover:before{opacity:1}.feature-grid article>*{position:relative;z-index:1}.feature-icon{transition:transform .25s ease,box-shadow .25s ease}.feature-grid article:hover .feature-icon{transform:rotate(-4deg) scale(1.05);box-shadow:0 0 22px rgba(99,232,255,.08)}
.auth-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.auth-card:focus-within{transform:translateY(-2px);border-color:rgba(99,232,255,.3);box-shadow:0 26px 70px rgba(0,0,0,.28),0 0 0 1px rgba(99,232,255,.04)}
.has-motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}.has-motion [data-reveal].is-visible{opacity:1;transform:none}.has-motion .feature-grid [data-reveal]:nth-child(2),.has-motion .signal-strip [data-reveal]:nth-child(2){transition-delay:.06s}.has-motion .feature-grid [data-reveal]:nth-child(3),.has-motion .signal-strip [data-reveal]:nth-child(3){transition-delay:.12s}.has-motion .feature-grid [data-reveal]:nth-child(4),.has-motion .signal-strip [data-reveal]:nth-child(4){transition-delay:.18s}
@keyframes machineShine{0%,18%{transform:translateX(-60%) rotate(8deg)}48%,100%{transform:translateX(65%) rotate(8deg)}}@keyframes statusPulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}@keyframes gridPlayhead{from{transform:translateX(0)}to{transform:translateX(800%)}}@keyframes drawWave{0%{stroke-dashoffset:930;opacity:.35}35%,70%{stroke-dashoffset:0;opacity:.82}100%{stroke-dashoffset:-930;opacity:.35}}
@media(max-width:900px){.signal-strip{grid-template-columns:repeat(2,1fr)}.signal-strip article:nth-child(2){border-right:0}.signal-strip article:nth-child(-n+2){border-bottom:1px solid var(--line)}}@media(max-width:520px){.signal-strip{grid-template-columns:1fr}.signal-strip article{min-height:auto;border-right:0;border-bottom:1px solid var(--line)}.signal-strip article:last-child{border-bottom:0}.hero-machine{transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portal-glow,.machine-shine,.status-dot,.machine-playhead,.machine-wave path{animation:none!important}.hero-machine,.portal-button,.feature-grid article,.feature-icon,.auth-card,.has-motion [data-reveal]{transition:none!important;transform:none!important}.has-motion [data-reveal]{opacity:1!important}}


/* NybbleNote 2.9 - public Showcase */
.showcase-body{padding-bottom:104px}.showcase-shell{width:min(1440px,calc(100% - 48px));margin:0 auto;padding:132px 0 70px}.showcase-hero{max-width:940px;padding:54px 0 70px}.showcase-hero>span,.showcase-section-head>span,.showcase-dialog-head>div>span{display:block;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.16em}.showcase-hero h1{margin:14px 0 20px;max-width:900px;font-size:clamp(48px,7vw,92px);line-height:.94;letter-spacing:-.055em}.showcase-hero p{max-width:780px;color:#bbc4d8;font-size:17px;line-height:1.75}.showcase-auto{display:flex;align-items:center;gap:10px;max-width:440px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(13,18,31,.72);color:var(--muted);font-size:12px}.showcase-auto input{accent-color:var(--cyan)}
.showcase-section{padding:42px 0;border-top:1px solid var(--line)}.showcase-section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}.showcase-section-head h2{margin:0;font-size:26px;letter-spacing:-.025em}.showcase-card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.showcase-card{position:relative;display:flex;min-width:0;min-height:220px;flex-direction:column;justify-content:space-between;overflow:hidden;padding:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,25,43,.92),rgba(9,13,24,.86));transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.showcase-card:hover,.showcase-card.is-playing{transform:translateY(-2px);border-color:rgba(99,232,255,.28);box-shadow:0 18px 50px rgba(0,0,0,.22)}.song-pulse{display:grid;height:46px;grid-template-columns:repeat(8,1fr);align-items:end;gap:3px;margin-bottom:18px}.song-pulse i{display:block;height:var(--h,30%);min-height:4px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,rgba(99,232,255,.86),rgba(126,98,255,.32));opacity:.7}.song-pulse i:nth-child(1){height:28%}.song-pulse i:nth-child(2){height:72%}.song-pulse i:nth-child(3){height:46%}.song-pulse i:nth-child(4){height:90%}.song-pulse i:nth-child(5){height:38%}.song-pulse i:nth-child(6){height:65%}.song-pulse i:nth-child(7){height:48%}.song-pulse i:nth-child(8){height:78%}.showcase-card.is-playing .song-pulse i{animation:showcaseBars .72s ease-in-out infinite alternate}.showcase-card.is-playing .song-pulse i:nth-child(2n){animation-delay:-.24s}.song-card-main{min-width:0}.song-card-main h3{margin:0 0 7px;overflow:hidden;font-size:17px;line-height:1.25;text-overflow:ellipsis}.song-card-main p{margin:0;color:#aeb8ce;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-card-main small{display:block;margin-top:9px;color:#68738e}.song-duration{float:right;margin-left:8px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.song-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}.portal-button.compact{min-height:34px;padding:8px 11px;font-size:11px}.showcase-empty{grid-column:1/-1;color:var(--muted)}
.showcase-ranking{border:1px solid var(--line);border-radius:14px;background:rgba(12,17,29,.72)}.showcase-ranking summary{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer}.showcase-ranking summary span{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.16em}.ranking-list{display:grid;border-top:1px solid var(--line)}.ranking-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px 18px;border:0;border-bottom:1px solid rgba(169,191,237,.08);background:none;color:inherit;text-align:left;cursor:pointer}.ranking-row:hover{background:rgba(99,232,255,.035)}.ranking-row.is-playing{background:rgba(99,232,255,.07);box-shadow:inset 3px 0 0 var(--cyan)}.ranking-row>b{color:#56637f;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace}.ranking-row span{display:grid;min-width:0}.ranking-row span strong,.ranking-row span small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-row span small{margin-top:2px;color:var(--muted)}.ranking-row em{color:var(--cyan);font-size:11px;font-style:normal}
.showcase-filters{display:grid;grid-template-columns:minmax(260px,1fr) 170px 120px auto auto;align-items:end;gap:10px;margin:0 0 18px;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(12,17,29,.68)}.showcase-filters label{display:grid;gap:6px}.showcase-filters label>span{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.showcase-filters input,.showcase-filters select{width:100%;min-height:41px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#0a0f1b;color:#e9efff}.showcase-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;color:var(--muted)}
.showcase-player{position:fixed;z-index:30;left:20px;right:20px;bottom:18px;display:grid;grid-template-columns:minmax(180px,.8fr) minmax(340px,1.6fr) minmax(150px,.5fr);align-items:center;gap:20px;padding:12px 16px;border:1px solid rgba(99,232,255,.2);border-radius:14px;background:rgba(8,12,22,.94);box-shadow:0 24px 70px rgba(0,0,0,.45);backdrop-filter:blur(14px)}.showcase-player[hidden]{display:none}.player-copy{display:grid;min-width:0}.player-copy>span{color:var(--cyan);font-size:9px;font-weight:900;letter-spacing:.14em}.player-copy strong,.player-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-copy strong{margin-top:3px}.player-copy small{color:var(--muted)}.player-transport{display:grid;grid-template-columns:auto minmax(100px,1fr) auto;align-items:center;gap:11px}.player-progress{height:6px;overflow:hidden;border-radius:999px;background:#192033}.player-progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .08s linear}.player-transport>span{color:var(--muted);font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.player-volume{display:grid;grid-template-columns:auto minmax(70px,1fr);align-items:center;gap:8px;color:var(--muted);font-size:10px}.player-volume input{width:100%;accent-color:var(--cyan)}
.showcase-dialog{width:min(760px,calc(100% - 28px));padding:0;border:0;background:transparent;color:inherit}.showcase-dialog::backdrop{background:rgba(3,6,12,.76);backdrop-filter:blur(5px)}.showcase-dialog-card{padding:24px;border:1px solid var(--line);border-radius:16px;background:#0c1220;box-shadow:0 30px 100px rgba(0,0,0,.55)}.showcase-dialog-head{display:flex;justify-content:space-between;gap:16px}.showcase-dialog-head h2{margin:7px 0 4px;font-size:30px}.showcase-dialog-head p{margin:0;color:var(--muted)}.showcase-dialog .icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:#11192a;color:#dce6ff}.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.detail-stats span{display:grid;padding:11px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.detail-stats b{margin-bottom:4px;color:#f1f5ff;font-size:16px;text-transform:none;letter-spacing:0}.showcase-dialog section{padding:13px 0;border-top:1px solid var(--line)}.showcase-dialog section h3{margin:0 0 7px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.showcase-dialog section p{margin:0;color:#c1cbe0;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.showcase-count-note{color:#71809c;font-size:11px}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.showcase-error{padding:14px;border:1px solid rgba(255,120,144,.24);border-radius:10px;background:rgba(255,120,144,.06);color:#ffafbd}
@keyframes showcaseBars{from{transform:scaleY(.45);opacity:.45}to{transform:scaleY(1);opacity:1}}
@media(max-width:1180px){.showcase-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.showcase-filters{grid-template-columns:1fr 160px 110px}.showcase-filters .portal-button{min-width:0}.showcase-player{grid-template-columns:1fr 2fr}.player-volume{grid-column:1/-1}}
@media(max-width:760px){.showcase-shell{width:min(100% - 28px,1440px);padding-top:112px}.showcase-card-grid{grid-template-columns:1fr}.showcase-hero{padding-top:30px}.showcase-filters{grid-template-columns:1fr}.showcase-player{left:8px;right:8px;bottom:8px;grid-template-columns:1fr;gap:9px}.player-transport{grid-template-columns:auto 1fr}.player-transport>span{grid-column:1/-1;text-align:center}.detail-stats{grid-template-columns:1fr}.ranking-row{grid-template-columns:34px minmax(0,1fr)}.ranking-row em{grid-column:2}.showcase-body{padding-bottom:180px}}

/* NybbleNote 2.9.5 - shared responsive portal navigation */
.legal-toolbar,.player-toolbar{position:relative}.portal-menu-toggle,.portal-mobile-menu{display:none}.portal-menu-toggle{align-items:center;justify-content:center;gap:8px;min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(14,20,34,.84);color:var(--text);font:800 11px/1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.04em;cursor:pointer}.portal-menu-toggle:hover,.portal-menu-toggle:focus-visible{border-color:rgba(99,232,255,.48);outline:none}.portal-menu-icon{display:grid;gap:3px;width:17px}.portal-menu-icon i{display:block;height:2px;border-radius:999px;background:currentColor;transition:transform .18s ease,opacity .18s ease}.portal-menu-toggle[aria-expanded="true"] .portal-menu-icon i:nth-child(1){transform:translateY(5px) rotate(45deg)}.portal-menu-toggle[aria-expanded="true"] .portal-menu-icon i:nth-child(2){opacity:0}.portal-menu-toggle[aria-expanded="true"] .portal-menu-icon i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:720px){
  .portal-nav{align-items:center;gap:10px;padding:12px 20px}.portal-nav>nav{display:none}.portal-menu-toggle{display:inline-flex;flex:0 0 auto}.language-switch{margin-left:auto}.portal-mobile-menu{position:absolute;z-index:80;top:calc(100% + 8px);right:0;left:0;padding:10px;border:1px solid rgba(174,199,255,.2);border-radius:14px;background:rgba(9,14,26,.98);box-shadow:0 24px 70px rgba(0,0,0,.46);backdrop-filter:blur(18px)}.portal-mobile-menu:not([hidden]){display:block}.portal-mobile-menu nav,.portal-nav .portal-mobile-menu nav{display:grid;grid-template-columns:1fr 1fr;gap:6px}.portal-mobile-menu nav a{display:flex;align-items:center;min-height:42px;padding:10px 12px;border-radius:9px;color:#c8d2e8;font-size:12px;font-weight:750;text-decoration:none}.portal-mobile-menu nav a:hover,.portal-mobile-menu nav a:focus-visible,.portal-mobile-menu nav a[aria-current="page"]{background:rgba(99,232,255,.08);color:var(--cyan);outline:none}.portal-nav .portal-mobile-menu{right:20px;left:20px}.legal-toolbar .portal-mobile-menu,.player-toolbar .portal-mobile-menu{right:0;left:0}.portal-menu-expanded{z-index:90}
}
@media(max-width:440px){.portal-menu-label{display:none}.portal-menu-toggle{width:32px;padding:7px}.portal-mobile-menu nav,.portal-nav .portal-mobile-menu nav{grid-template-columns:1fr}}