/* Kapnick Placemat Builder */body{margin:0}img{max-width:100%}[hidden]{display:none!important}:root{--bg: #F3F3F5;--surface: #FFFFFF;--ink: #404041;--muted: #6D6A6C;--hairline: #D1CFD1;--field: #FFFFFF;--brand-grey: #545255;--blue: #3A6EA8;--blue-press: #074E87;--blue-text: #3A6EA8;--green: #BBD444;--green-text: #849539;--orange: #F7901E;--orange-text: #BB6E2A;--warn-bg: #FEF3E6;--desk: #E6E5E8;--focus: #3A6EA8;--on-blue: #FFFFFF;--shadow: 0 1px 2px rgba(9,74,110,.08),0 6px 18px rgba(9,74,110,.10);--font: 'Jost','Century Gothic','Avenir Next',Arial,sans-serif;--radius: 8px}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg: #1C1B1E;--surface: #26252A;--ink: #ECEBEE;--muted: #A9A6AC;--hairline: #3E3C43;--field: #1F1E22;--brand-grey: #545255;--blue: #3A6EA8;--blue-press: #2F5E93;--blue-text: #8DA9D6;--green: #BBD444;--green-text: #BBD444;--orange: #F7901E;--orange-text: #F9A34A;--warn-bg: #3A2C1C;--desk: #141316;--focus: #8DA9D6;--on-blue: #FFFFFF;--shadow: 0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);color-scheme: dark}}:root[data-theme="dark"]{--bg: #1C1B1E;--surface: #26252A;--ink: #ECEBEE;--muted: #A9A6AC;--hairline: #3E3C43;--field: #1F1E22;--brand-grey: #545255;--blue: #3A6EA8;--blue-press: #2F5E93;--blue-text: #8DA9D6;--green: #BBD444;--green-text: #BBD444;--orange: #F7901E;--orange-text: #F9A34A;--warn-bg: #3A2C1C;--desk: #141316;--focus: #8DA9D6;--on-blue: #FFFFFF;--shadow: 0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);color-scheme: dark}*{box-sizing: border-box}body{background: var(--bg);color: var(--ink);font-family: var(--font);font-size: 15px;line-height: 1.5}body::before{content: "";position: fixed;inset: 0 0 auto;height: env(safe-area-inset-top,0px);z-index: 10;background: var(--brand-grey)}button,input{font: inherit;color: inherit}:focus-visible{outline: 2px solid var(--focus);outline-offset: 2px}.topbar{background: var(--brand-grey);color: #fff}.topbar-inner{display: flex;align-items: center;gap: 18px;flex-wrap: wrap;max-width: 1440px;margin: 0 auto;padding-block: 14px;padding-left: max(16px,env(safe-area-inset-left,0px));padding-right: max(16px,env(safe-area-inset-right,0px))}.topbar img{height: 30px;width: auto;display: block}.topbar .divider{width: 1px;align-self: stretch;background: rgba(255,255,255,.35)}.topbar h1{margin: 0;font-size: 17px;font-weight: 600;letter-spacing: .08em;text-transform: uppercase}.topbar h1 span{color: var(--green)}.topbar .spec{margin-left: auto;font-size: 13px;color: rgba(255,255,255,.78);font-variant-numeric: tabular-nums}.wrap{max-width: 1440px;margin: 0 auto;display: grid;grid-template-columns: minmax(0,440px) minmax(0,1fr);gap: 28px;padding-block: 24px 48px;padding-left: max(16px,env(safe-area-inset-left,0px));padding-right: max(16px,env(safe-area-inset-right,0px))}@media (max-width: 920px){.wrap{grid-template-columns: minmax(0,1fr)}}@media (max-width: 560px){.topbar .divider{display: none}.topbar .spec{margin-left: 0;width: 100%}}.steps{display: flex;flex-direction: column;gap: 14px;min-width: 0}.step{background: var(--surface);border: 1px solid var(--hairline);border-radius: var(--radius);padding: 18px 18px 20px;display: flex;flex-direction: column;gap: 12px;min-width: 0}.step-head{display: flex;align-items: baseline;gap: 10px}.step-num{font-size: 12px;font-weight: 700;color: var(--green-text);letter-spacing: .06em;font-variant-numeric: tabular-nums}.step h2{margin: 0;font-size: 14px;font-weight: 700;letter-spacing: .07em;text-transform: uppercase;color: var(--blue-text)}.step .hint{margin: 0;font-size: 13px;color: var(--muted);max-width: 60ch}.lbl{font-size: 12px;font-weight: 600;letter-spacing: .06em;text-transform: uppercase;color: var(--muted)}.field{display: flex;flex-direction: column;gap: 6px}input[type="text"],input[type="search"]{width: 100%;background: var(--field);border: 1px solid var(--hairline);border-radius: 6px;padding: 9px 11px;font-size: 15px}input[type="text"]:focus,input[type="search"]:focus{border-color: var(--focus);outline: none;box-shadow: 0 0 0 3px color-mix(in srgb,var(--focus) 25%,transparent)}.picker{position: relative}.results{list-style: none;margin: 6px 0 0;padding: 4px;border: 1px solid var(--hairline);border-radius: 6px;background: var(--surface);max-height: 280px;overflow-y: auto}.results li{display: flex;align-items: center;gap: 10px;padding: 6px 8px;border-radius: 5px;cursor: pointer}.results li[aria-selected="true"],.results li:hover{background: color-mix(in srgb,var(--blue) 12%,transparent)}.results img,.results .initials{width: 34px;height: 34px;border-radius: 50%;object-fit: cover;flex: none}.initials{display: grid;place-items: center;background: var(--brand-grey);color: #fff;font-size: 12px;font-weight: 700;letter-spacing: .04em}.me .initials{width: 64px;height: 64px;border-radius: 50%;flex: none;box-shadow: 0 0 0 3px var(--green);font-size: 18px}.results .who{display: flex;flex-direction: column;min-width: 0;line-height: 1.25}.results .who b{font-weight: 600;font-size: 14px}.results .who span{font-size: 12px;color: var(--muted);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.tag{margin-left: auto;flex: none;font-size: 11px;font-weight: 600;letter-spacing: .05em;padding: 1px 7px;border-radius: 999px;border: 1px solid var(--hairline);color: var(--muted)}.results .empty{color: var(--muted);font-size: 13px;cursor: default}.results .empty:hover{background: none}.me{display: flex;align-items: center;gap: 14px;padding: 12px;border-radius: 6px;background: var(--brand-grey);color: #fff}.me img{width: 64px;height: 64px;border-radius: 50%;object-fit: cover;box-shadow: 0 0 0 3px var(--green);flex: none}.me .who{display: flex;flex-direction: column;min-width: 0;line-height: 1.3}.me .who b{color: var(--green);font-weight: 700;letter-spacing: .03em;text-transform: uppercase;font-size: 15px}.me .who span{font-size: 13px;overflow-wrap: anywhere}.me .who .ttl{font-weight: 600}.linkbtn{background: none;border: 0;padding: 0;color: var(--blue-text);font-weight: 600;font-size: 13px;cursor: pointer;text-decoration: underline;text-underline-offset: 3px}.me .linkbtn{color: #fff;margin-left: auto;flex: none;align-self: flex-start}.missing{font-size: 13px;color: var(--muted);display: flex;flex-wrap: wrap;gap: 4px 8px;align-items: center}.missing code{font-family: inherit;color: var(--ink);user-select: all}.tgroup{display: flex;flex-direction: column;gap: 8px}.tgroup h3{margin: 4px 0 0;font-size: 11px;font-weight: 700;letter-spacing: .08em;text-transform: uppercase;color: var(--green-text)}.tcards{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 8px}.tcard{position: relative;display: flex;flex-direction: column;gap: 6px;padding: 8px;border: 1px solid var(--hairline);border-radius: 6px;cursor: pointer;background: var(--surface)}.tcard input{position: absolute;opacity: 0;pointer-events: none}.tcard img{width: 100%;aspect-ratio: 792 / 612;object-fit: cover;border-radius: 3px;border: 1px solid var(--hairline);max-width: 100%}.tcard .tname{font-size: 12.5px;font-weight: 600;line-height: 1.3}.tcard:has(input:checked){border-color: var(--blue);box-shadow: 0 0 0 2px var(--blue)}.tcard:has(input:focus-visible){outline: 2px solid var(--focus);outline-offset: 2px}.tcard .check{position: absolute;top: 12px;right: 12px;width: 20px;height: 20px;border-radius: 50%;background: var(--blue);color: #fff;display: none;place-items: center}.tcard:has(input:checked) .check{display: grid}.drop{border: 1.5px dashed var(--hairline);border-radius: 6px;padding: 16px;display: flex;flex-direction: column;align-items: center;gap: 8px;text-align: center;cursor: pointer;background: var(--field)}.drop:hover,.drop.over{border-color: var(--blue);background: color-mix(in srgb,var(--blue) 6%,var(--field))}.drop strong{font-weight: 600;font-size: 14px}.drop span{font-size: 12.5px;color: var(--muted);max-width: 46ch}kbd{font-family: inherit;font-size: 12px;border: 1px solid var(--hairline);border-bottom-width: 2px;border-radius: 4px;padding: 0 5px;color: var(--ink)}.logo-set{display: flex;gap: 14px;align-items: center;flex-wrap: wrap}.logo-thumb{width: 150px;height: 68px;background: #fff;border: 1px solid var(--hairline);border-radius: 6px;display: grid;place-items: center;padding: 6px;flex: none}.logo-thumb img{display: block;width: auto;height: auto;max-width: 136px;max-height: 54px}.logo-ctrl{display: flex;flex-direction: column;gap: 6px;min-width: 0;flex: 1 1 180px}.logo-ctrl .row{display: flex;gap: 14px;align-items: center}input[type="range"]{width: 100%;accent-color: var(--blue)}.note{font-size: 13px;padding: 8px 10px;border-radius: 6px;background: var(--warn-bg);color: var(--ink);border-left: 3px solid var(--orange)}.agenda{display: flex;flex-direction: column;gap: 8px}.aline{display: flex;gap: 8px;align-items: center}.aline .dash{color: var(--orange-text);font-weight: 700;flex: none;width: 10px;text-align: center}.aline input{flex: 1;min-width: 0}.iconbtn{flex: none;width: 34px;height: 34px;border: 1px solid var(--hairline);border-radius: 6px;background: var(--surface);cursor: pointer;display: grid;place-items: center;color: var(--muted)}.iconbtn:hover{color: var(--ink);border-color: var(--muted)}.agenda-foot{display: flex;gap: 16px;align-items: center;flex-wrap: wrap;font-size: 13px;color: var(--muted)}.agenda-foot .count{margin-left: auto;font-variant-numeric: tabular-nums}.agenda-foot .count.over{color: var(--orange-text);font-weight: 600}.btn-ghost{border: 1px solid var(--hairline);background: var(--surface);border-radius: 6px;padding: 6px 12px;font-size: 13px;font-weight: 600;cursor: pointer}.btn-ghost:hover{border-color: var(--muted)}.site-row{display: flex;gap: 8px;align-items: stretch}.site-row input{flex: 1;min-width: 0}.site-open{flex: none;display: inline-flex;align-items: center;gap: 6px;text-decoration: none;color: var(--blue-text);border-color: var(--blue);padding-inline: 14px}.site-open:hover{background: color-mix(in srgb,var(--blue) 10%,transparent);border-color: var(--blue)}.step .hint a{color: var(--blue-text);font-weight: 600;text-underline-offset: 3px}.step .hint.bad{color: var(--orange-text);font-weight: 600}#hs-retry{align-self: flex-start}.dl{background: var(--surface);border: 1px solid var(--hairline);border-left: 3px solid var(--green);border-radius: var(--radius);padding: 18px;display: flex;flex-direction: column;gap: 10px}.dl .fname{font-size: 13px;color: var(--muted);overflow-wrap: anywhere}.dl .fname b{color: var(--ink);font-weight: 600}.btn-primary{appearance: none;border: 0;border-radius: 6px;background: var(--blue);color: var(--on-blue);padding: 12px 18px;font-size: 15px;font-weight: 600;letter-spacing: .04em;text-transform: uppercase;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;gap: 10px}.btn-primary:hover{background: var(--blue-press)}.btn-primary[disabled]{opacity: .5;cursor: not-allowed;background: var(--blue)}.ready{font-size: 13px;color: var(--muted)}.ready:empty,.status:empty{display: none}.status{font-size: 13px;color: var(--muted)}.status.ok{color: var(--ink);font-weight: 600}.status.ok::before{content: "";display: inline-block;width: 8px;height: 8px;border-radius: 50%;background: var(--green);margin-right: 8px;vertical-align: 1px}.status.err{color: var(--orange-text);font-weight: 600}.preview{min-width: 0}.preview-inner{position: sticky;top: calc(env(safe-area-inset-top,0px) + 16px);background: var(--desk);border-radius: var(--radius);padding: 18px;display: flex;flex-direction: column;gap: 18px}.seg{display: inline-flex;align-self: center;background: var(--surface);border: 1px solid var(--hairline);border-radius: 999px;padding: 3px;gap: 2px}.seg button{border: 0;background: none;border-radius: 999px;padding: 6px 16px;font-size: 13px;font-weight: 600;cursor: pointer;color: var(--muted);display: flex;gap: 6px;align-items: baseline}.seg button small{font-size: 11px;font-weight: 500}.seg button[aria-pressed="true"]{background: var(--brand-grey);color: #fff}.sheet{width: min(100%,calc((100vh - 150px) * 1.294));margin-inline: auto}.sheet canvas{width: 100%;height: auto;aspect-ratio: 792 / 612;display: block;background: #fff;box-shadow: var(--shadow);border-radius: 2px;max-width: 100%}.preview-foot{text-align: center;font-size: 12px;color: var(--muted)}#front{cursor: copy}@media (max-width: 920px){.preview-inner{position: static}}.sr{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap}.loading{font-size: 14px;color: var(--muted);padding: 40px 0;text-align: center}@media (prefers-reduced-motion: no-preference){.tcard,.drop,.btn-primary,.results li{transition: background-color .15s,border-color .15s,box-shadow .15s}}