/* Loopline public pages: shared tokens, type, header, menu, footer and the sample player.
   Used by /create, /clips, /templates, template detail, guides and the account pages.
   See docs/loopline-brand.md ("Canonical public header", "Type"). */
@font-face{font-family:Manrope;src:url('./fonts/Manrope-latin.woff2') format('woff2');font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('./fonts/DMSans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#f3efe7;--paper-2:#ebe5da;--card:#faf7f1;
  --ink:#171716;--ink-2:#2c2a27;--muted:#5b554d;
  --rule:#d4cbbd;--rule-strong:#b9ad9c;--rule-ink:rgba(23,23,22,.12);
  --copper:#b8643f;--copper-text:#97492a;--copper-btn:#a24f2d;--copper-btn-hover:#8a4125;
  --night:#171716;--night-2:#1f1e1b;--night-rule:#3b3833;--night-text:#f3efe7;--night-muted:#b7b0a4;--night-accent:#e18767;
  --gutter:40px;--wrap:1320px;--header-h:64px;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --display:Manrope,'Helvetica Neue',Arial,sans-serif;
  --body:'DM Sans','Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
em,i,cite{font-style:normal}
em{color:var(--copper-text)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.ll-dark :focus-visible,.ll-footer :focus-visible{outline-color:var(--night-accent)}
.wrap{width:min(var(--wrap),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.skip{position:fixed;left:16px;top:-80px;z-index:80;padding:12px 16px;background:var(--ink);color:var(--paper);font-weight:700}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Type */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.ll-h1{font-size:clamp(44px,5.6vw,84px);letter-spacing:-.055em;line-height:.98}
.ll-h2{font-size:clamp(34px,4vw,58px);line-height:1.03}
.ll-lead{max-width:560px;font-size:18px;line-height:1.6;color:var(--ink-2)}
.ll-eyebrow{display:flex;align-items:center;gap:10px;font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text)}
.ll-eyebrow .rule{display:inline-block;width:22px;height:1px;background:currentColor}
.ll-eyebrow .num{color:var(--ink)}
.ll-dark .ll-eyebrow{color:var(--night-accent)}
.ll-dark .ll-eyebrow .num{color:var(--night-text)}
.ll-idx{font:700 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--copper-text)}
.ll-fine{font-size:13px;line-height:1.55;color:var(--muted)}
.ll-fine a{text-decoration:underline;text-underline-offset:2px}

/* Buttons and links */
.ll-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 22px;border:0;border-radius:2px;font:700 14px/1 var(--body);letter-spacing:.005em;white-space:nowrap;transition:background-color .18s,color .18s,transform .18s}
.ll-btn:hover{transform:translateY(-1px)}
.ll-btn-sm{min-height:40px;padding:0 15px;font-size:13px;gap:10px}
.ll-btn-ink{background:var(--ink);color:var(--paper)}
.ll-btn-ink:hover{background:#3a3631}
.ll-btn-copper{background:var(--copper-btn);color:#fffaf3}
.ll-btn-copper:hover{background:var(--copper-btn-hover)}
.ll-btn-paper{background:var(--paper);color:var(--ink)}
.ll-btn-paper:hover{background:#fff}
.ll-link{display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1px solid currentColor;font-size:14px;font-weight:700}
.ll-link:hover{color:var(--copper-text)}
.ll-dark .ll-link:hover{color:var(--night-accent)}

/* Canonical header */
.ll-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule-ink)}
.ll-header-inner{height:var(--header-h);display:flex;align-items:center;gap:clamp(24px,3.4vw,48px)}
.ll-wordmark{display:inline-flex;align-items:baseline;font:800 25px/1 var(--display);letter-spacing:-.055em;white-space:nowrap;color:var(--ink)}
.ll-wordmark .slash{display:inline-block;margin-right:3px;color:var(--copper);font-weight:700;transform:skewX(-8deg)}
.ll-nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px);font-size:14px;font-weight:600;color:var(--ink-2)}
.ll-nav a{position:relative;padding:8px 0}
.ll-nav a:hover{color:var(--copper-text)}
.ll-nav a[aria-current="page"]{color:var(--ink)}
.ll-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:var(--copper)}
.ll-actions{margin-left:auto;display:flex;align-items:center;gap:22px}
.ll-signin{font-size:14px;font-weight:600}
.ll-signin:hover{color:var(--copper-text)}
.ll-menu-button{display:none;align-items:center;gap:8px;min-height:40px;padding:0 13px;border:1px solid var(--rule-strong);border-radius:2px;background:transparent;font-size:13px;font-weight:700}
.ll-menu-button .bars{position:relative;width:14px;height:10px}
.ll-menu-button .bars::before,.ll-menu-button .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .18s}
.ll-menu-button .bars::before{top:1px}
.ll-menu-button .bars::after{bottom:1px}
.ll-menu-button[aria-expanded="true"] .bars::before{transform:translateY(3.5px) rotate(45deg)}
.ll-menu-button[aria-expanded="true"] .bars::after{transform:translateY(-3.75px) rotate(-45deg)}
.ll-menu{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 18px 30px -24px rgba(23,23,22,.35)}
.ll-menu[hidden]{display:none}
.ll-menu nav{display:flex;flex-direction:column;padding:6px 0 18px}
.ll-menu a{display:flex;align-items:center;justify-content:space-between;min-height:54px;border-bottom:1px solid var(--rule);font:700 20px/1.1 var(--display);letter-spacing:-.03em}
.ll-menu a::after{content:"↗";font:500 15px var(--body);color:var(--copper)}
.ll-menu a[aria-current="page"]{color:var(--copper-text)}
.ll-menu a.ll-menu-signin{border-bottom:0;font:600 16px var(--body);letter-spacing:0}

@media (max-width:980px){.ll-nav{gap:16px;font-size:13.5px}.ll-actions{gap:16px}}
@media (max-width:760px){
  :root{--gutter:20px;--header-h:60px}
  .ll-nav,.ll-signin{display:none}
  .ll-menu-button{display:inline-flex}
  .ll-actions{gap:10px}
  .ll-wordmark{font-size:23px}
  .ll-h1{font-size:clamp(38px,10.5vw,46px)}
  .ll-lead{font-size:16px}
}
@media (max-width:340px){.ll-actions .ll-btn-sm{padding:0 11px}.ll-menu-button{padding:0 10px}}

/* Section rhythm */
.ll-section{padding-block:clamp(64px,8vw,112px)}
.ll-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:clamp(28px,4vw,48px)}
.ll-section-head h2{margin-top:14px}
.ll-section-head>p,.ll-section-head>div>p.ll-side{max-width:440px;color:var(--muted);font-size:16px;line-height:1.6}
.ll-dark{background:var(--night);color:var(--night-text)}
.ll-dark .ll-section-head>p,.ll-dark .ll-fine{color:var(--night-muted)}
@media (max-width:760px){.ll-section-head{display:block}.ll-section-head>p{margin-top:16px}}

/* Sample player: native controls are replaced by a bar outside the frame, so
   burned-in captions stay readable. Without JavaScript the native controls stay. */
.ll-player{position:relative;min-width:0;container-type:inline-size}
.ll-frame{position:relative;aspect-ratio:9/16;background:#141412;overflow:hidden}
.ll-frame video{width:100%;height:100%;object-fit:cover;background:#141412}
.ll-frame.is-wide{aspect-ratio:16/9}
.ll-bigplay{position:absolute;left:50%;top:42%;width:64px;height:64px;margin:-32px 0 0 -32px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(23,23,22,.62);color:#fff;display:grid;place-items:center;transition:transform .18s,background-color .18s}
.ll-bigplay:hover{transform:scale(1.05);background:rgba(23,23,22,.8)}
.ll-bigplay svg{width:20px;height:20px;margin-left:3px}
.ll-player.is-playing .ll-bigplay{display:none}
.ll-progress{height:2px;background:var(--rule)}
.ll-progress span{display:block;height:100%;width:0;background:var(--copper)}
.ll-bar{display:flex;align-items:center;gap:6px;min-height:36px;padding-top:6px}
.ll-bar[hidden]{display:none}
.ll-bar button{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 9px 0 0;border:0;background:transparent;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ll-bar button:hover{color:var(--copper-text)}
.ll-bar button svg{width:12px;height:12px;flex:none}
.ll-bar button+button{padding-left:9px;border-left:1px solid var(--rule)}
.ll-time{white-space:nowrap;margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.ll-dark .ll-bar button{color:var(--night-text)}
.ll-dark .ll-bar button:hover{color:var(--night-accent)}
.ll-dark .ll-bar button+button{border-color:var(--night-rule)}
.ll-dark .ll-time{color:var(--night-muted)}
.ll-dark .ll-progress{background:var(--night-rule)}
.ll-dark .ll-progress span{background:var(--night-accent)}

@container (max-width:280px){.ll-time{display:none}}

/* Footer */
.ll-footer{background:var(--night-2);color:var(--night-text);padding:56px 0 40px;border-top:1px solid var(--night-rule)}
.ll-footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:32px}
.ll-footer .ll-wordmark{color:var(--night-text)}
.ll-footer-brand p{margin-top:14px;max-width:360px;font-size:13.5px;color:var(--night-muted)}
.ll-footer nav{display:flex;flex-direction:column;gap:9px;font-size:14px}
.ll-footer nav h2{margin-bottom:6px;font:700 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a39b8e}
.ll-footer nav a:hover{color:var(--night-accent)}
.ll-footer-fine{grid-column:1/-1;margin-top:18px;padding-top:22px;border-top:1px solid var(--night-rule);font-size:12px;color:#a39b8e}
.ll-footer-fine a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:960px){.ll-footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ll-footer-brand{grid-column:1/-1}}
@media (max-width:640px){.ll-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}