@font-face{font-family:"Mona Sans";src:url("mona-sans-var.woff2?v=4") format("woff2");font-weight:400 700;font-stretch:100% 112.5%;font-display:block}
@font-face{font-family:"Mona Sans Mono";src:url("mona-sans-mono-var.woff2?v=4") format("woff2");font-weight:400 700;font-display:block}

/* Tokens from isemat-brand/design/brand/kit/css/tokens.css (dark is the lead, light follows the system) */
:root{
  color-scheme:dark light;
  --bg:#14090e; --card:#241a1f; --sep:#3d2b33; --sep-strong:#54404a;
  --label:#f5eef1; --label-2:#b39aa6;
  --accent:#c04f7f; --accent-pressed:#a83c66; --accent-ink:#e07aa5; --on-accent:#fff;
  --fill:rgb(160 139 151 / .14);
  --green:#34c759;
  --shadow:0 0 0 .5px rgb(0 0 0 / .5), 0 6px 18px rgb(0 0 0 / .35);
  --font:"Mona Sans",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"Mona Sans Mono",ui-monospace,Menlo,monospace;
  --r-card:20px; --r-control:999px; --target:48px; --gutter:16px;
  --ease:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){
  --bg:#fff; --card:#fff; --sep:#e6dade; --sep-strong:#d6c6cc;
  --label:#241219; --label-2:#6d5560;
  --accent:#912050; --accent-pressed:#6e1a3d; --accent-ink:#912050;
  --fill:rgb(120 100 110 / .07); --green:#08a53f;
  --shadow:0 1px 2px rgb(36 18 25 / .06), 0 6px 18px rgb(36 18 25 / .1);
}}
[data-theme=light]{
  color-scheme:light;
  --bg:#fff; --card:#fff; --sep:#e6dade; --sep-strong:#d6c6cc;
  --label:#241219; --label-2:#6d5560;
  --accent:#912050; --accent-pressed:#6e1a3d; --accent-ink:#912050;
  --fill:rgb(120 100 110 / .07); --green:#08a53f;
  --shadow:0 1px 2px rgb(36 18 25 / .06), 0 6px 18px rgb(36 18 25 / .1);
}

*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--label);font:400 17px/22px var(--font);letter-spacing:-.011em;-webkit-text-size-adjust:100%}
body{min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:6px}

header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:16px;padding:16px var(--gutter)}
header img{display:block;height:26px;width:auto}
.logo-light{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .logo-dark{display:none}:root:not([data-theme=dark]) .logo-light{display:block}}
[data-theme=light] .logo-dark{display:none}[data-theme=light] .logo-light{display:block}
.tel{white-space:nowrap;font:500 12px/16px var(--mono);letter-spacing:.02em;color:var(--label-2);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--target);padding:0 4px}
.tel:hover{color:var(--label)}

main{width:100%;max-width:640px;margin:0 auto;padding:24px var(--gutter) 48px;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.product{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--sep-strong);font:500 14px/20px var(--font);letter-spacing:-.009em;color:var(--label-2);white-space:nowrap}
.product i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
h1{font:700 34px/41px var(--font);font-stretch:112.5%;letter-spacing:-.025em;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent-ink)}


.box{background:var(--card);border:1px solid var(--sep);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.pane{display:flex;flex-direction:column;height:100%}
.pane-body{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1}
.sealed{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.sealed i{display:block;height:12px;border-radius:6px;background:var(--fill)}
.btn{appearance:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--target);padding:0 24px;border-radius:var(--r-control);background:var(--accent);color:var(--on-accent);font:600 17px/22px var(--font);letter-spacing:-.011em;transition:background-color 120ms ease,transform 120ms var(--ease-out)}
.btn:hover{background:var(--accent-pressed)}
.btn:active{transform:scale(.985)}
.hint{font:400 13px/18px var(--font);letter-spacing:-.004em;color:var(--label-2);text-align:center;text-wrap:pretty}
.secret{font:400 15px/24px var(--mono);letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--label);user-select:text}
.attach{font:400 15px/20px var(--font);letter-spacing:-.009em;color:var(--label-2)}
.foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--sep)}
.foot button{appearance:none;border:0;background:transparent;color:var(--label);font:600 17px/22px var(--font);letter-spacing:-.011em;min-height:56px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color 120ms ease}
.foot button + button{border-left:1px solid var(--sep)}
.foot button:hover{background:var(--fill)}
.foot .copy[data-copied=true]{color:var(--accent-ink)}

.notes{display:flex;flex-direction:column;gap:12px}
.note{font:400 15px/20px var(--font);letter-spacing:-.009em;color:var(--label-2);text-wrap:pretty}
.note strong{color:var(--label);font-weight:600}
.note a{color:var(--label);text-underline-offset:3px;white-space:nowrap}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:382px){.tel{display:none}}
@media (min-width:768px){
  header{padding:24px 40px}
  header img{height:30px}
  .product{font-size:15px}
  main{padding-top:72px;gap:24px}
  h1{font-size:48px;line-height:52px}
  .pane-body{padding:28px}
  .secret{font-size:16px;line-height:26px}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}


h1{font-size:28px;line-height:34px;letter-spacing:-.022em}
.field{display:block;width:100%;min-height:148px;resize:vertical;padding:20px;border:0;background:transparent;color:var(--label);font:400 15px/24px var(--mono);letter-spacing:0;caret-color:var(--accent-ink)}
.field::placeholder{color:var(--label-2);opacity:1}
.field:focus{outline:none}
.box:focus-within{border-color:var(--sep-strong)}
.attach-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px 16px;min-height:44px}
.link-btn{appearance:none;background:none;border:0;padding:0;min-height:var(--target);display:inline-flex;align-items:center;color:var(--label);font:600 15px/20px var(--font);letter-spacing:-.009em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.file-name{font:400 15px/20px var(--font);color:var(--label-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-name button{appearance:none;background:none;border:0;color:var(--label-2);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:8px;min-height:44px}
.err{color:#ff8a8d;font:400 15px/20px var(--font);padding:0 20px 12px}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .err{color:#9b0c22}}
[data-theme=light] .err{color:#9b0c22}
.band{border-top:1px solid var(--sep);padding:16px 20px 20px;background:var(--fill);display:flex;flex-direction:column;gap:16px}
.band label,.band .lbl{font:400 15px/20px var(--font);letter-spacing:-.009em;color:var(--label-2)}
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--sep-strong);border-radius:var(--r-control);overflow:hidden;margin-top:8px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--label);font:500 15px/20px var(--font);letter-spacing:-.009em;cursor:pointer;transition:background-color 120ms ease}
.seg label + input + label,.seg input + label + input + label{border-left:1px solid var(--sep-strong)}
.seg input:checked + label{background:var(--accent);color:var(--on-accent);font-weight:600}
.seg input:focus-visible + label{outline:2px solid var(--accent-ink);outline-offset:-4px}
.btn[disabled]{background:var(--fill);color:var(--label-2);cursor:not-allowed;transform:none}
.link{padding:20px;font:400 15px/24px var(--mono);letter-spacing:0;overflow-wrap:anywhere;color:var(--label);user-select:all}
.until{padding:0 20px 20px;font:400 15px/20px var(--font);letter-spacing:-.009em;color:var(--label-2)}
.after{display:flex;flex-direction:column;gap:8px}
.ghost{appearance:none;background:transparent;border:1px solid var(--sep-strong);color:var(--label);border-radius:var(--r-control);min-height:var(--target);font:600 17px/22px var(--font);letter-spacing:-.011em;cursor:pointer;width:100%;transition:background-color 120ms ease}
.ghost:hover{background:var(--fill)}
.destroy{appearance:none;background:none;border:0;min-height:var(--target);color:var(--label-2);font:500 15px/20px var(--font);letter-spacing:-.009em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center}
.destroy[data-armed=true]{color:#ff8a8d;font-weight:600}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .destroy[data-armed=true]{color:#9b0c22}}
[data-theme=light] .destroy[data-armed=true]{color:#9b0c22}
.btn[data-copied=true]{background:var(--accent-pressed)}
@media (min-width:768px){
  h1{font-size:34px;line-height:41px}
  .field{padding:28px;min-height:176px}
  .attach-row{padding:0 28px 20px}
  .band{padding:20px 28px 24px}
  .link,.until{padding-left:28px;padding-right:28px}
  .after{flex-direction:row;justify-content:space-between;align-items:center}
  .ghost{width:auto;padding:0 24px}
}
.reasons{display:flex;flex-direction:column}
.reason{display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:start;padding:18px 20px;font:400 17px/22px var(--font);letter-spacing:-.011em;text-wrap:pretty}
.reason + .reason{border-top:1px solid var(--sep)}
.reason b{font-weight:600;color:var(--label)}
.reason span{color:var(--label-2)}
.n{width:28px;height:28px;border-radius:50%;background:var(--fill);color:var(--label-2);display:flex;align-items:center;justify-content:center;font:600 13px/18px var(--font)}
.ask{border-top:1px solid var(--sep);padding:20px;display:flex;flex-direction:column;gap:16px;background:var(--fill)}
a.btn{text-decoration:none}
@media (min-width:768px){
  .ask{padding:20px 28px}
  .reason{padding:20px 28px}
}

/* app additions */
#app{min-height:100dvh;display:flex;flex-direction:column}
.say{padding:20px;font:400 17px/22px var(--font);letter-spacing:-.011em;color:var(--label);text-wrap:pretty}
.tel.plain{cursor:default}
.sealed i:nth-child(1){width:72%}.sealed i:nth-child(2){width:92%}.sealed i:nth-child(3){width:54%}
.foot.single{grid-template-columns:1fr}
.foot a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;color:var(--label);text-decoration:none;font:600 17px/22px var(--font);letter-spacing:-.011em;transition:background-color 120ms ease}
.foot a:hover{background:var(--fill)}
.foot a + button,.foot button + a{border-left:1px solid var(--sep)}
.attach a.inline{margin-left:12px;color:var(--label);font-weight:600;text-underline-offset:3px}
.notes{display:flex;flex-direction:column;gap:12px}
.swap-enter-active,.swap-leave-active{transition:opacity 160ms var(--ease-out)}
.swap-enter-from,.swap-leave-to{opacity:0}
@media (prefers-reduced-motion:reduce){.swap-enter-active,.swap-leave-active{transition:none}}