/* Kirobox shared look: a quiet paper surface with a hand-drawn layer that draws itself.
   Loaded by the public site, the user center and the admin console. No inline styles:
   every page runs under style-src 'self'. */
@font-face{font-family:"Kirobox Kai";src:url(/assets/fonts/kirobox-kai.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --paper:#FAF8F4;--paper-2:#F1EDE4;--paper-3:#F3F0E9;--paper-4:#F6F3EC;--card:#FFFFFF;
  --line:#E7E1D6;--line-2:#DCD5C8;--line-3:#EFEAE0;--line-4:#DDD5C6;--line-strong:#CFC6B6;--line-dash:#B9B0A1;
  --ink:#23211E;--ink-2:#6E695F;--ink-3:#A39D92;--on-ink:#FAF8F4;
  --apricot:#F2B183;--apricot-ink:#B8582A;--apricot-stroke:#E08A55;--marker:#F6CBA8;--focus:#F9DCC6;
  --apricot-fill:#FBE0CB;--apricot-bg:#FBE5D4;--apricot-chip:#8E431D;--warn-bg:#FBF0E6;--warn-ink:#7A3A18;
  --grass:#6BA539;--grass-stroke:#5E9A2E;--grass-top:#9FCB6B;--grass-fill:#DCEDC4;--grass-bg:#E8F3DA;--grass-ink:#3D6E1C;--grass-notice:#EEF6E4;--grass-soft:#CFE6AE;
  --danger:#B23F2B;--danger-bg:#F6DFDA;--danger-ink:#8F2F1F;--muted-fill:#D9D2C5;--disabled:#ECE8DF;
  --shadow:0 18px 40px -24px rgba(60,44,30,.28);
  --font-sans:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
  --font-hand:"Kirobox Kai","LXGW WenKai","LXGW WenKai Screen","Kaiti SC","STKaiti","KaiTi",serif;
  --font-mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  --radius-sketch:14px 9px 13px 10px/10px 13px 9px 14px;
  --radius-sketch-2:12px 15px 9px 13px/13px 9px 15px 12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1C1B19;--paper-2:#2C2A26;--paper-3:#201F1C;--paper-4:#2A2825;--card:#252320;
    --line:#38352F;--line-2:#48443D;--line-3:#312E2A;--line-4:#403C36;--line-strong:#5A554C;--line-dash:#6A645A;
    --ink:#ECE7DC;--ink-2:#A39C90;--ink-3:#7A746A;--on-ink:#1C1B19;
    --apricot:#D9935F;--apricot-ink:#F0A573;--apricot-stroke:#E99A66;--marker:#6E4429;--focus:#5A3822;
    --apricot-fill:#4A3020;--apricot-bg:#42291B;--apricot-chip:#F2B88E;--warn-bg:#33241A;--warn-ink:#F0C3A0;
    --grass:#86BE52;--grass-stroke:#8CC45A;--grass-top:#78A848;--grass-fill:#2F3E24;--grass-bg:#263320;--grass-ink:#A8D57E;--grass-notice:#222E1B;--grass-soft:#4E6A35;
    --danger:#E57A64;--danger-bg:#3B231E;--danger-ink:#F2A496;--muted-fill:#5C574F;--disabled:#2B2926;
    --shadow:0 18px 40px -24px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1C1B19;--paper-2:#2C2A26;--paper-3:#201F1C;--paper-4:#2A2825;--card:#252320;
  --line:#38352F;--line-2:#48443D;--line-3:#312E2A;--line-4:#403C36;--line-strong:#5A554C;--line-dash:#6A645A;
  --ink:#ECE7DC;--ink-2:#A39C90;--ink-3:#7A746A;--on-ink:#1C1B19;
  --apricot:#D9935F;--apricot-ink:#F0A573;--apricot-stroke:#E99A66;--marker:#6E4429;--focus:#5A3822;
  --apricot-fill:#4A3020;--apricot-bg:#42291B;--apricot-chip:#F2B88E;--warn-bg:#33241A;--warn-ink:#F0C3A0;
  --grass:#86BE52;--grass-stroke:#8CC45A;--grass-top:#78A848;--grass-fill:#2F3E24;--grass-bg:#263320;--grass-ink:#A8D57E;--grass-notice:#222E1B;--grass-soft:#4E6A35;
  --danger:#E57A64;--danger-bg:#3B231E;--danger-ink:#F2A496;--muted-fill:#5C574F;--disabled:#2B2926;
  --shadow:0 18px 40px -24px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease}
::selection{background:var(--marker);color:var(--ink)}
a{color:inherit}
a:hover{color:var(--apricot-ink)}
p{overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--font-hand);font-weight:700;letter-spacing:.3px;line-height:1.35}
code,.mono{font-family:var(--font-mono);font-size:.86em}
:focus-visible{outline:2.5px solid var(--apricot-stroke);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-60px;z-index:50;padding:8px 14px;border-radius:10px;background:var(--ink);color:var(--on-ink);text-decoration:none}
.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}
.kb-defs{position:absolute;width:0;height:0;overflow:hidden}
.kb-hand{font-family:var(--font-hand)}
.eyebrow{margin:0;font-size:14px;font-weight:600;color:var(--apricot-ink);letter-spacing:.5px}
.muted{color:var(--ink-2)}
.small{font-size:13px}

/* Hand-drawn primitives */
.kb-cube{flex:none}
.kb-cube path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kb-cube .kb-cube-top{fill:var(--grass-top)}
.kb-ico{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kb-ico .kb-soft-grass{fill:var(--grass-fill);stroke:none}
.kb-ico .kb-soft-apricot{fill:var(--apricot-fill);stroke:none}
.kb-ico .kb-dot-grass{fill:var(--grass-top);stroke:none}
.kb-ico .kb-dot-apricot{fill:var(--apricot);stroke:none}
.kb-ico .kb-dot-ink{fill:var(--ink);stroke:none}
.kb-ico .kb-dot-paper{fill:var(--card);stroke:var(--ink);stroke-width:1.2}
.kb-ok{color:var(--grass-stroke)}
.kb-warm{color:var(--apricot-ink)}
.kb-note{font-family:var(--font-hand);color:var(--apricot-ink)}
.kb-stamp{display:inline-block;padding:1px 10px;border:1.5px solid var(--apricot-ink);border-radius:8px 5px 9px 6px;color:var(--apricot-ink);font-family:var(--font-hand);font-size:14px;transform:rotate(-6deg)}
.kb-line{display:block;width:100%;height:10px;overflow:visible}
.kb-line path{fill:none;stroke:var(--line-4);stroke-width:1.6;stroke-linecap:round}

/* Buttons: a sketched outline plus a faint second stroke that wobbles on hover. */
button,.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:var(--radius-sketch);background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
button::after,.button::after{content:"";position:absolute;inset:2px -3px -3px 2px;border:1px solid var(--ink);border-radius:var(--radius-sketch-2);opacity:.26;pointer-events:none}
button:hover:not(:disabled),.button:hover{transform:translateY(-1px);color:var(--ink)}
button:hover:not(:disabled)::after,.button:hover::after{animation:kb-boil .3s steps(1) infinite}
button:active:not(:disabled),.button:active{transform:translateY(1px)}
button:disabled{cursor:not-allowed;opacity:.45}
.primary,button.primary,.button.primary{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.primary:hover:not(:disabled),.button.primary:hover{color:var(--on-ink)}
.primary::after,.button.primary::after{inset:-6px;opacity:.4}
.danger,button.danger{border-style:dashed;border-color:var(--danger);color:var(--danger)}
.danger::after,button.danger::after{display:none}
.danger:hover:not(:disabled){color:var(--danger);background:var(--danger-bg)}
.text-button,button.text-button{min-height:40px;padding:0 8px;border-color:transparent;color:var(--ink-2)}
.text-button::after{display:none}
.text-button:hover:not(:disabled){color:var(--ink);background:var(--paper-2)}

/* Fields */
label{font-size:14px;font-weight:600}
input:where(:not([type=checkbox],[type=radio],[type=file])),select,textarea{display:block;width:100%;min-height:46px;margin-top:6px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;font-weight:400;line-height:1.5;transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--focus)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--ink)}
fieldset{margin:0;padding:0;border:0;min-width:0}
fieldset:disabled{opacity:.5}

/* Surfaces and chips */
.kb-card{background:var(--card);border:1px solid var(--line);border-radius:20px}
.chip,.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 11px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.6;white-space:nowrap}
.chip::before,.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.chip.ok,.badge{background:var(--grass-bg);color:var(--grass-ink)}
.chip.ok::before,.badge::before{background:var(--grass);opacity:1}
.chip.warm{background:var(--apricot-bg);color:var(--apricot-chip)}
.chip.warm::before{background:var(--apricot-stroke);opacity:1}
.chip.bad,.badge.bad{background:var(--danger-bg);color:var(--danger-ink)}
.chip.bad::before,.badge.bad::before{background:var(--danger);opacity:1}
.chip.plain::before{display:none}
.tag{display:inline-flex;padding:1px 10px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);font-family:var(--font-mono);font-size:12px;line-height:1.8}
.theme-toggle{min-width:44px;padding:0 10px;border-color:transparent;color:var(--ink-2)}
.theme-toggle::after{display:none}
.theme-toggle:hover:not(:disabled){background:var(--paper-2);color:var(--ink)}
.theme-toggle .kb-sun{display:none}
.theme-toggle[aria-pressed="true"] .kb-sun{display:block}
.theme-toggle[aria-pressed="true"] .kb-moon{display:none}

/* Motion: strokes draw in, markers sweep, doodles boil. */
.kb-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:kb-draw 1.1s cubic-bezier(.6,0,.3,1) forwards}
.kb-loop{stroke-dasharray:1;stroke-dashoffset:1;animation:kb-loop 6s cubic-bezier(.6,0,.3,1) infinite}
.kb-fade{opacity:0;animation:kb-fade .7s ease forwards}
.kb-rise{opacity:0;transform:translateY(8px);animation:kb-rise .55s cubic-bezier(.3,.7,.3,1) forwards}
.kb-mark{background-image:linear-gradient(var(--marker),var(--marker));background-repeat:no-repeat;background-position:0 88%;background-size:0% 38%;padding:0 .12em;animation:kb-mark .9s cubic-bezier(.6,0,.3,1) .5s forwards}
.kb-boil{animation:kb-boil .45s steps(1) infinite}
.kb-float{animation:kb-float 6s ease-in-out infinite}
.kb-grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:kb-grow .7s cubic-bezier(.3,.7,.3,1) forwards}
.kb-spin{animation:kb-spin 1.4s linear infinite;transform-origin:50% 50%}
.kb-spin path{stroke-dasharray:1;animation:kb-spin-path 1.4s ease-in-out infinite}
.kb-d1{animation-delay:.15s}.kb-d2{animation-delay:.3s}.kb-d3{animation-delay:.45s}.kb-d4{animation-delay:.6s}.kb-d5{animation-delay:.75s}.kb-d6{animation-delay:.9s}.kb-d7{animation-delay:1.05s}.kb-d8{animation-delay:1.2s}.kb-d9{animation-delay:1.35s}
@keyframes kb-draw{to{stroke-dashoffset:0}}
@keyframes kb-loop{0%{stroke-dashoffset:1}28%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes kb-fade{to{opacity:1}}
@keyframes kb-rise{to{opacity:1;transform:none}}
@keyframes kb-mark{to{background-size:100% 38%}}
@keyframes kb-boil{0%{filter:url(#kb-r1)}33%{filter:url(#kb-r2)}66%{filter:url(#kb-r3)}}
@keyframes kb-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes kb-grow{to{transform:scaleY(1)}}
@keyframes kb-spin{to{transform:rotate(360deg)}}
@keyframes kb-spin-path{0%{stroke-dashoffset:.95}50%{stroke-dashoffset:.25}100%{stroke-dashoffset:-.95}}
/* Below-the-fold sections wait until theme.js sees them. Without JS they play on load. */
.kb-js .kb-reveal:not(.is-in) :is(.kb-draw,.kb-fade,.kb-rise,.kb-mark,.kb-grow){animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .kb-draw,.kb-loop{animation:none;stroke-dashoffset:0}
  .kb-fade,.kb-rise{animation:none;opacity:1;transform:none}
  .kb-mark{animation:none;background-size:100% 38%}
  .kb-grow{animation:none;transform:none}
  .kb-boil,.kb-float,.kb-spin,.kb-spin path,button:hover::after,.button:hover::after{animation:none}
  body{transition:none}
}