/* mulebuyproducts.com - Mulebuy Spreadsheet Chest Script. Prefix lgx-. Motif: a proofreader's sheet on practice-grid paper. */
:root{
  --paper:#f6f3eb; --card:#fffdf8; --ink:#1c2236; --ink2:#373e53; --mute:#545c6e; --rule:#d6cfbd; --rule2:#e6dfcd;
  --red:#a1371f; --red-wash:#f6e3dc; --teal:#1d5762; --teal-wash:#e1eded; --jade:#2a6450; --wash:#efe7d2;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:Consolas,"SFMono-Regular",Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.62 var(--sans)}
:lang(zh-Hans){font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif}
:lang(zh-Hant){font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Source Han Sans TC",sans-serif}
:lang(ja){font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:2px}
p,li,dd,td,th,figcaption,blockquote{overflow-wrap:break-word}
.lgx-say{font-style:italic;color:var(--ink2)}
.lgx-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.lgx-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:10}
.lgx-skip:focus{left:12px;top:12px}

/* masthead */
.lgx-masthead{background:var(--card);border-bottom:1px solid var(--rule)}
.lgx-masthead__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.lgx-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:600 1.12rem/1.2 var(--serif);min-height:44px}
.lgx-brand img{width:44px;height:44px}
.lgx-masthead__note{margin:0;font-size:.86rem;color:var(--mute)}
.lgx-menu{border-top:1px solid var(--rule2)}
.lgx-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:2px}
.lgx-menu li{flex:0 0 auto}
.lgx-menu a{display:flex;align-items:center;min-height:46px;padding:0 13px;color:var(--ink2);text-decoration:none;font-size:.95rem;border-bottom:3px solid transparent}
.lgx-menu a:hover{color:var(--red)}
.lgx-menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red);font-weight:600}

/* hero */
.lgx-hero{padding:56px 0 34px;background:
  linear-gradient(var(--paper),var(--paper)) padding-box,
  repeating-linear-gradient(90deg,transparent 0 63px,var(--rule2) 63px 64px)}
.lgx-hero__in{max-width:900px}
.lgx-hero h1{font:600 clamp(2.05rem,1.2rem + 2.4vw,3.05rem)/1.12 var(--serif);margin:0 0 16px;letter-spacing:-.01em}
.lgx-lede{font-size:1.14rem;color:var(--ink2);margin:0 0 24px;max-width:760px}
.lgx-find{display:flex;gap:0;background:var(--card);border:2px solid var(--ink);border-radius:6px;max-width:860px;box-shadow:6px 6px 0 var(--wash)}
.lgx-find label{position:absolute;left:-9999px}
.lgx-find input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:1.06rem var(--sans);padding:0 18px;min-height:60px;color:var(--ink)}
.lgx-find button{flex:0 0 auto;border:0;background:var(--ink);color:#fff;font:600 1rem var(--sans);padding:0 26px;min-height:60px;cursor:pointer;border-radius:0 3px 3px 0}
.lgx-find button:hover{background:var(--red)}
.lgx-strip{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;padding:0;list-style:none;font-size:.95rem}
.lgx-strip a{display:inline-flex;align-items:center;min-height:44px}
.lgx-heronote{margin:10px 0 0;font-size:.9rem;color:var(--mute);max-width:760px}

/* page head */
.lgx-pagehead{padding:30px 0 28px;border-bottom:1px solid var(--rule);background:var(--card)}
.lgx-pagehead h1{font:600 clamp(1.9rem,1.2rem + 1.9vw,2.7rem)/1.15 var(--serif);margin:6px 0 12px;max-width:900px}
.lgx-pagehead .lgx-lede{margin:0;max-width:820px}
.lgx-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:.9rem;color:var(--mute)}
.lgx-crumb li{display:flex;align-items:center;min-height:44px}
.lgx-crumb li+li::before{content:"/";margin:0 8px 0 4px;color:var(--rule)}
.lgx-crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}

/* sections */
.lgx-proof{padding:54px 0;border-top:1px solid var(--rule2)}
.lgx-proof:first-child{border-top:0}
.lgx-proof h2{font:600 1.75rem/1.22 var(--serif);margin:0 0 22px;display:flex;align-items:flex-start;gap:14px;max-width:900px}
.lgx-proof h2::before{content:"";flex:0 0 26px;height:26px;margin-top:4px;border:1.5px solid var(--red);
  background:linear-gradient(var(--red),var(--red)) center/1px 100% no-repeat,linear-gradient(var(--red),var(--red)) center/100% 1px no-repeat;opacity:.55}
.lgx-duo{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:52px;align-items:start}
.lgx-duo--l{grid-template-columns:500px minmax(0,1fr)}
.lgx-duo--l .lgx-plate{order:-1}
.lgx-duo>*{min-width:0}
.lgx-text>:first-child{margin-top:0}
.lgx-text>:last-child{margin-bottom:0}
.lgx-text p{margin:0 0 1em}
.lgx-text--after{margin-top:26px;max-width:880px}
.lgx-col{max-width:880px}
.lgx-list,.lgx-steps{margin:0 0 1em;padding-left:1.3em}
.lgx-list li,.lgx-steps li{margin:0 0 .45em}
.lgx-plate{margin:0;background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:0}
.lgx-plate img{width:100%;height:auto;border-radius:3px 3px 0 0}
.lgx-plate figcaption{font-size:.86rem;line-height:1.5;color:var(--mute);padding:9px 14px 11px;border-top:1px solid var(--rule2)}
.lgx-plate--side{max-width:500px}
.lgx-plate--wide{max-width:880px;margin:24px 0}
.lgx-onward{margin:18px 0 0;font-weight:600}
.lgx-onward a{display:inline-flex;align-items:center;min-height:44px}
.lgx-onward a{text-decoration:underline;text-decoration-color:var(--teal-wash);text-decoration-thickness:2px}
.lgx-onward a:hover{text-decoration-color:var(--red)}
.lgx-margin{border-left:3px solid var(--red);background:var(--red-wash);padding:12px 16px;margin:0 0 1em;font-size:.96rem}
.lgx-cite{margin:0 0 1em;padding:12px 18px;border-left:3px solid var(--teal);background:var(--teal-wash)}
.lgx-cite p{margin:0 0 6px}
.lgx-cite footer{font-size:.86rem;color:var(--mute)}
.lgx-defs{margin:0 0 1em;display:grid;gap:8px}
.lgx-defs div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px dashed var(--rule)}
.lgx-defs dt{font-weight:600;color:var(--ink2)}
.lgx-defs dd{margin:0}

/* wall */
.lgx-rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.lgx-rack li{min-width:0}
.lgx-swatch{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--rule);border-radius:4px;color:var(--ink);text-decoration:none;overflow:hidden}
.lgx-swatch:hover{border-color:var(--red)}
.lgx-swatch img{width:100%;aspect-ratio:1/1;object-fit:cover}
.lgx-swatch b{display:block;font:600 1.02rem/1.3 var(--serif);padding:12px 14px 4px}
.lgx-swatch span{display:block;font-size:.9rem;line-height:1.45;color:var(--mute);padding:0 14px}
.lgx-swatch em{display:inline-block;margin:10px 14px 14px;font:normal .74rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal);padding:4px 7px;border-radius:2px;align-self:flex-start}
.lgx-rackintro{max-width:820px;margin:0 0 22px;color:var(--ink2)}

/* agents table */
.lgx-agents{overflow:hidden}
.lgx-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--rule);font-size:.95rem}
.lgx-table caption{text-align:left;font-size:.9rem;color:var(--mute);padding:0 0 10px}
.lgx-table th,.lgx-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--rule2)}
.lgx-table thead th{background:var(--wash);font-weight:600}
.lgx-table tbody th{font:600 1rem var(--serif)}
.lgx-table td small{display:block;color:var(--mute);font-size:.82rem;margin-top:4px}
.lgx-go{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.lgx-scenes{margin-top:22px}

/* status */
.lgx-status{border:1px solid var(--rule);border-left:5px solid #7d3d93;background:var(--card);padding:14px 18px;margin:0 0 26px;font-size:.98rem}
.lgx-status p{margin:0}
.lgx-statusline{display:flex;gap:10px;align-items:flex-start;max-width:900px;margin:0;color:var(--ink2);font-size:.95rem}
.lgx-dot{flex:0 0 10px;height:10px;border-radius:50%;background:#7d3d93;margin-top:8px}
.lgx-statusbar{padding:30px 0;border-top:1px solid var(--rule2)}

/* glyph match tool */
.lgx-gm{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:30px;align-items:start}
.lgx-gm>*{min-width:0}
.lgx-gm fieldset{border:0;margin:0 0 14px;padding:0;min-width:0}
.lgx-gm legend{font-weight:600;margin-bottom:8px;font-size:.95rem}
.lgx-chips{display:flex;flex-wrap:wrap;gap:8px}
.lgx-chip{min-height:44px;padding:0 14px;border:1px solid var(--rule);background:var(--card);color:var(--ink2);border-radius:22px;font:.92rem var(--sans);cursor:pointer}
.lgx-chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.lgx-flips{display:flex;flex-wrap:wrap;gap:10px}
.lgx-flip{min-height:44px;padding:0 16px 0 12px;border:1px solid var(--ink);background:var(--card);color:var(--ink);border-radius:4px;font:600 .92rem var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.lgx-flip::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-radius:3px}
.lgx-flip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.lgx-flip[aria-pressed="true"]::before{background:#fff;box-shadow:inset 0 0 0 3px var(--red)}
.lgx-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:6px 0 0;padding:0;list-style:none}
.lgx-tiles li{min-width:0}
.lgx-tile{width:100%;padding:0;border:2px solid var(--rule);border-radius:6px;background:var(--card);cursor:pointer;overflow:hidden;display:block}
.lgx-tile img{width:100%;aspect-ratio:1/1;transition:transform .25s ease}
.lgx-tile[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.lgx-gm.is-mirror .lgx-tile img{transform:scaleX(-1)}
.lgx-card{position:sticky;top:16px;background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--red);border-radius:4px;padding:18px 20px}
.lgx-card h3{font:600 1.2rem/1.3 var(--serif);margin:0 0 4px}
.lgx-card .lgx-card__glyph{font-size:2.2rem;line-height:1.2;margin:4px 0 10px;color:var(--ink)}
.lgx-card dl{margin:0}
.lgx-card dt{font:600 .78rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.lgx-card dd{margin:3px 0 0;font-size:.96rem}
.lgx-card .lgx-card__hint{margin:14px 0 0;padding:10px 12px;background:var(--wash);font-size:.9rem}
.lgx-card ul{margin:4px 0 0;padding-left:1.1em;font-size:.88rem}
.lgx-card__empty{color:var(--mute);margin:0}

/* colophon */
.lgx-colophon{background:var(--ink);color:#e8e5dc;margin-top:0;padding:40px 0 34px}
.lgx-colophon a{color:#f3d9a8}
.lgx-colophon a:hover{color:#fff}
.lgx-colophon__in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px}
.lgx-colophon__name{font:600 1.1rem var(--serif);color:#fff;margin:0 0 10px}
.lgx-colophon__words p{margin:0 0 12px;font-size:.92rem;line-height:1.6;max-width:640px}
.lgx-colophon__links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}
.lgx-colophon__links li{min-height:44px;display:flex;align-items:center}
.lgx-colophon__links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:.92rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (prefers-color-scheme:dark){
  :root{--paper:#15192a;--card:#1d2236;--ink:#ece8de;--ink2:#d2cfc6;--mute:#b2b0aa;--rule:#3a4058;--rule2:#2c3147;
    --red:#ef8f74;--red-wash:#3a2620;--teal:#8fd0d8;--teal-wash:#1d3338;--wash:#2a2e40}
  .lgx-find button{background:#ece8de;color:#15192a}
  .lgx-plate img,.lgx-swatch img,.lgx-tile img{background:#fff}
  .lgx-colophon{background:#0e1120}
}

/* narrower screens: rules at the end so they win */
@media (max-width:1179px){
  .lgx-menu ul{flex-wrap:wrap}
}
@media (max-width:1099px){
  .lgx-duo,.lgx-duo--l{display:block}
  .lgx-duo .lgx-text{max-width:560px}
  .lgx-duo .lgx-plate{margin-top:24px;max-width:500px}
  .lgx-gm{grid-template-columns:minmax(0,1fr)}
  .lgx-card{position:static}
  .lgx-rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lgx-colophon__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:17px}
  .lgx-wrap{padding:0 18px}
  .lgx-masthead__in{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0}
  .lgx-menu a{padding:0 10px}
  .lgx-hero{padding:36px 0 26px}
  .lgx-find button{padding:0 16px}
  .lgx-proof{padding:40px 0}
  .lgx-proof h2{font-size:1.45rem}
  .lgx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lgx-defs div{grid-template-columns:minmax(0,1fr)}
  .lgx-table thead{display:none}
  .lgx-table,.lgx-table tbody,.lgx-table tr,.lgx-table th,.lgx-table td{display:block;width:100%}
  .lgx-table tr{border-bottom:2px solid var(--rule)}
  .lgx-table td::before{content:attr(data-label);display:block;font:600 .74rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin-bottom:3px}
}
@media (max-width:420px){
  .lgx-rack{gap:12px}
  .lgx-swatch b{font-size:.95rem;padding:10px 10px 2px}
  .lgx-swatch span{padding:0 10px}
  .lgx-swatch em{margin:8px 10px 10px}
  .lgx-colophon__links{grid-template-columns:minmax(0,1fr)}
}
