:root { --night:#0c1117; --ink:#f5f8f6; --fog:#aab6bc; --lime:#c7f36b; --coral:#ff806b; --line:rgba(255,255,255,.15); --glass:rgba(18,27,34,.88); font-family:"Bricolage Grotesque","Noto Sans SC",sans-serif; color:var(--ink); background:var(--night); }
body { color:var(--ink); background:var(--night) linear-gradient(90deg,rgba(12,17,23,.96) 0 38%,rgba(12,17,23,.72) 70%,rgba(12,17,23,.9)),url("https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=2200&q=85") center top/cover fixed; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 76% 18%,rgba(199,243,107,.14),transparent 23%),radial-gradient(circle at 15% 90%,rgba(255,128,107,.1),transparent 28%); mix-blend-mode:screen; z-index:0; }
.site-header,.page-shell,.site-footer { position:relative; z-index:1; }
.site-header { height:76px; padding:0 5vw; background:rgba(12,17,23,.78); border-color:var(--line); backdrop-filter:blur(14px); }
.brand { color:var(--ink); } .brand-mark { border-color:var(--lime); color:var(--lime); } .brand small { color:var(--fog); font-family:"Bricolage Grotesque",sans-serif; }
.nav-links { color:#d9e3e2; } .nav-links a:hover,.nav-links .active { color:var(--lime); } .header-note { color:var(--lime); }
.page-shell { max-width:1280px; padding:0 6vw 86px; }
.breadcrumbs { padding:30px 0 62px; margin:0; color:var(--fog); } .breadcrumbs a:hover { color:var(--lime); }
.hero { padding:0 0 55px; border:0; background:transparent; } .hero::before { content:"OPEN / STYLE / READ"; display:block; margin-bottom:32px; color:var(--lime); font:700 11px/1 "Bricolage Grotesque",sans-serif; letter-spacing:.18em; }
.hero h1 { max-width:800px; margin:0 0 20px; font:900 clamp(52px,8vw,104px)/.92 "Noto Serif SC",serif; letter-spacing:-.08em; } .hero h1 em { color:var(--lime); text-shadow:10px 10px 0 rgba(255,128,107,.34); }
.hero>p:not(.eyebrow) { color:#d1dcdb; font-size:17px; line-height:1.75; } .trust-row { color:var(--fog); font-family:"Bricolage Grotesque",sans-serif; }
.qr-workspace { margin-top:0; background:var(--glass); border:1px solid var(--line); box-shadow:0 20px 55px rgba(0,0,0,.35); backdrop-filter:blur(14px); }
.tabs { padding:12px; border-color:var(--line); background:rgba(8,13,18,.82); } .tab { color:var(--fog); } .tab.active { color:var(--lime); background:rgba(199,243,107,.1); box-shadow:none; }
.tab-panel { padding:32px; } .panel-copy h2 { color:var(--ink); font-size:24px; } .panel-copy>p:not(.eyebrow) { color:var(--fog); } .panel-copy label:not(.upload) { color:var(--fog); }
.panel-copy textarea,.decode-result textarea { color:var(--ink); background:#0b1016; border-color:rgba(255,255,255,.28); } .panel-copy textarea:focus { border-color:var(--lime); }
.button.primary { background:var(--lime); color:#111820; } .button.primary:hover { background:#d7ff89; } .button.outline { border-color:rgba(255,255,255,.3); color:var(--ink); background:transparent; } .button.outline:hover { border-color:var(--lime); color:var(--lime); }
.preview-box,.decode-result { background:rgba(8,13,18,.62); border-color:var(--line); } .qr-preview { background:#fff; border-color:rgba(255,255,255,.25); } .preview-box p,.decode-placeholder,.decode-result p { color:var(--fog); }
.color-row label { color:var(--fog); } .color-row input[type=range] { accent-color:var(--lime); } .upload { border-color:rgba(199,243,107,.55); background:rgba(199,243,107,.05); color:var(--lime); } .privacy-tip { color:var(--fog) !important; }
.tips { padding-top:86px; } .tips h2 { color:var(--ink); } .tip-grid article { background:var(--glass); border-top-color:var(--lime); } .tip-grid strong { color:var(--ink); } .tip-grid p { color:var(--fog); }
.site-footer { padding:28px 6vw; border-color:var(--line); color:var(--fog); background:rgba(12,17,23,.8); } .site-footer p,.footer-links,.site-footer>small { color:var(--fog); }
@media(max-width:800px){ .tab-panel{grid-template-columns:1fr;} .preview-box,.decode-result{border-left:0;border-top:1px solid var(--line);} .tips{display:block;} .tip-grid{margin-top:24px;} }
@media(max-width:600px){ body{background-attachment:scroll;} .site-header{height:64px;padding:0 18px;} .nav-links{display:none;} .page-shell{padding:0 20px 60px;} .breadcrumbs{padding:22px 0 42px;} .hero{padding-bottom:42px;} .hero::before{margin-bottom:25px;} .hero h1{font-size:52px;} .tab-panel{padding:18px;} .site-footer{display:block;padding:24px 20px;} .footer-links{margin:24px 0;} }

/* Keep the QR editor within the first viewport; the tool is the page's main content. */
.page-shell { padding-bottom:64px; }
.breadcrumbs { padding:14px 0 18px; }
.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);
  align-items:center;
  gap:8px 36px;
  padding:0 0 16px;
}
.hero::before { display:none; }
.hero .eyebrow { grid-column:1/-1; margin-bottom:0; font-size:9px; }
.hero h1 {
  grid-column:1;
  max-width:none;
  margin:0;
  font-size:clamp(32px,3.2vw,44px);
  line-height:1.18;
  letter-spacing:-.045em;
}
.hero h1 em { text-shadow:5px 5px 0 rgba(255,128,107,.3); }
.hero>p:not(.eyebrow) {
  grid-column:2;
  grid-row:2;
  max-width:450px;
  margin:0;
  font-size:14px;
  line-height:1.65;
}
.trust-row { grid-column:1/-1; gap:10px 22px; margin-top:5px; font-size:11px; }
.qr-workspace { margin-top:0; }
.tabs { padding:8px 10px; }
.tab-panel { grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:28px; padding:22px 24px; }
.panel-copy h2 { margin:7px 0 6px; font-size:21px; }
.panel-copy>p:not(.eyebrow) { margin-bottom:14px; font-size:13px; line-height:1.65; }
.panel-copy textarea,.decode-result textarea { min-height:84px; max-height:150px; }
.button.primary { margin-top:13px; }
.preview-box,.decode-result { min-height:280px; padding:16px; }
.qr-preview { min-width:230px; min-height:230px; }
.tips { padding-top:64px; }

@media(max-width:800px){
  .page-shell { padding:0 20px 52px; }
  .breadcrumbs { padding:18px 0 14px; }
  .hero { grid-template-columns:minmax(0,1fr); gap:7px; padding-bottom:14px; }
  .hero .eyebrow,.hero h1,.hero>p:not(.eyebrow),.trust-row { grid-column:1; grid-row:auto; }
  .hero h1 { max-width:18em; font-size:clamp(30px,7vw,38px); line-height:1.2; }
  .hero>p:not(.eyebrow) { max-width:48ch; font-size:14px; }
  .trust-row { margin-top:4px; font-size:10px; }
  .tab-panel { grid-template-columns:minmax(0,1fr); gap:20px; padding:20px; }
  .preview-box,.decode-result { min-height:270px; border-top:1px solid var(--line); }
  .tips { padding-top:48px; }
}
@media(max-width:580px){
  .page-shell { padding:0 16px 44px; }
  .breadcrumbs { padding:14px 0 10px; }
  .hero { gap:6px; padding-bottom:12px; }
  .hero .eyebrow { font-size:8px; }
  .hero h1 { font-size:30px; }
  .hero>p:not(.eyebrow) { font-size:13px; line-height:1.55; }
  .trust-row { gap:5px 12px; font-size:9px; }
  .tabs { padding:7px; }
  .tab { padding:9px 10px; font-size:11px; }
  .tab-panel { gap:16px; padding:16px; }
  .panel-copy h2 { font-size:19px; }
  .panel-copy>p:not(.eyebrow) { font-size:12px; }
  .preview-box,.decode-result { min-height:220px; padding:10px; }
  .qr-preview { min-width:180px; min-height:180px; padding:8px; }
  .preview-box p { margin-top:10px; }
  .preview-box .button.outline { margin-top:10px; }
}
@media(max-height:760px) and (min-width:801px){
  .breadcrumbs { padding:10px 0 12px; }
  .hero { gap:5px 28px; padding-bottom:12px; }
  .hero h1 { font-size:clamp(30px,2.8vw,38px); }
  .trust-row { margin-top:2px; }
  .tab-panel { padding:16px 20px; }
  .preview-box,.decode-result { min-height:250px; }
  .qr-preview { min-width:210px; min-height:210px; }
}