/* MAKERS Circle shares the MAKERS Institute design system.
   Dark plum studio world, brand pointer as the recurring mark, sticky notes as the Circle's own object. */
:root{
  --ink:#130A1D;--plum:#2D2133;--plum-2:#3B2C47;--plum-3:#4A3858;
  --violet:#A12EE8;--magenta:#E81BF0;--lime:#D8F37E;
  --fg:#F4EEF9;--muted:#B9ABC9;--line:rgba(244,238,249,.13);
  --need:#FF8BD8;--can:#CDB0F7;--note-ink:#2A1633;
  --f-display:"Archivo","Arial Black",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --f-hand:"Caveat","Comic Sans MS",cursive;
  --r:18px;--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);font:17px/1.6 var(--f-body);overflow-x:hidden;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='32' viewBox='0 0 80 100'%3E%3Cpath d='M10 6 L72 70 L34 73 L8 96 Z' fill='%23A12EE8' stroke='%23ffffff' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto}
a,button,label,.chip{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='32' viewBox='0 0 80 100'%3E%3Cpath d='M10 6 L72 70 L34 73 L8 96 Z' fill='%23E81BF0' stroke='%23ffffff' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,pointer}
input,textarea{cursor:text}
::selection{background:var(--magenta);color:#fff}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-stretch:125%;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-weight:900;font-size:clamp(2.6rem,7vw,6.2rem)}
h2{font-weight:850;font-size:clamp(1.9rem,4.4vw,3.5rem)}
h3{font-weight:800;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.15}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--muted);max-width:58ch}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);display:inline-flex;gap:.6em;align-items:center}
.eyebrow::before{content:"";width:10px;height:10px;background:currentColor;clip-path:polygon(10% 0,100% 72%,45% 76%,0 100%)}
.hl{color:var(--violet)}.hl-m{color:var(--magenta)}
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,56px);max-width:780px}
.plum{background:var(--plum)}

/* ---- logo ---- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.lg{display:inline-flex;align-items:center;gap:.04em;font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:20px;line-height:1;padding:.36em .7em;border:2px solid var(--fg);border-radius:.62em;color:var(--fg)}
.lg svg{width:.86em;height:1.08em;margin:0 .02em;transform:translateY(.14em);overflow:visible;transition:transform .5s var(--ease)}
.lg svg path{fill:var(--violet);stroke:var(--violet);stroke-width:9;stroke-linejoin:round}
.lg .dot{width:.3em;height:.3em;border-radius:50%;background:var(--magenta);margin-left:.14em;align-self:flex-end;margin-bottom:.02em}
.brand:hover .lg svg{transform:translate(.08em,.04em) rotate(-8deg)}
.script{font:700 2rem/1 var(--f-hand);color:var(--violet);transform:rotate(-5deg);display:inline-block;text-shadow:0 0 24px rgba(161,46,232,.45)}

/* ---- header ---- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(19,10,29,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:70px;flex-wrap:wrap;padding-block:10px}
.top nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
.top nav a,.top nav button.link{text-decoration:none;font-weight:600;font-size:.92rem;padding:8px 12px;border-radius:99px;color:var(--muted);transition:color .2s,background .2s}
.top nav a:hover,.top nav button.link:hover{color:var(--fg);background:var(--line)}
.top nav a[aria-current="page"]{color:var(--fg);background:var(--plum-2)}
@media (max-width:760px){.top nav .hide-sm{display:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 .98rem var(--f-body);text-decoration:none;color:#fff;background:var(--violet);border:0;border-radius:99px;padding:14px 22px;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.btn:hover{background:var(--magenta);box-shadow:0 10px 30px -8px rgba(232,27,240,.7)}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}
.btn.sm{padding:9px 16px;font-size:.88rem}
.btn[disabled]{opacity:.6;pointer-events:none}
button.link{background:none;border:0;color:var(--muted);font:inherit}
.btn.wide{width:100%;padding:17px 22px;font-size:1.05rem}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:transparent;color:var(--fg);border-radius:99px;padding:7px 13px;font:600 .86rem var(--f-body);transition:all .25s var(--ease)}
.chip:hover{border-color:var(--violet);transform:translateY(-2px)}
.chip.on{background:var(--violet);border-color:var(--violet);color:#fff}

/* ---- forms ---- */
.card{background:var(--plum);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3.4vw,38px)}
.field{display:grid;gap:7px}
.field label{font-weight:600;font-size:.92rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.field label small{color:var(--muted);font-weight:400}
input,textarea{width:100%;background:var(--ink);border:1.5px solid var(--plum-3);color:var(--fg);border-radius:14px;padding:14px 15px;font:500 1rem var(--f-body);transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(161,46,232,.22)}
textarea{resize:vertical;min-height:84px}
.err{color:#FF9AC0;font-weight:600;min-height:1.4em;font-size:.95rem}
.err.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.count{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}

/* ---- sticky notes (the Circle's object) ---- */
.note{position:relative;padding:28px 16px 16px;border-radius:5px;color:var(--note-ink);font:600 1.45rem/1.12 var(--f-hand);box-shadow:0 14px 24px -10px rgba(0,0,0,.65);transform:rotate(var(--r,0deg));transition:transform .35s var(--ease),box-shadow .35s;overflow-wrap:anywhere}
.note.can{background:var(--can)}.note.need{background:var(--need)}
.note::before{content:"";position:absolute;top:-9px;left:50%;width:18px;height:18px;border-radius:50%;background:var(--violet);box-shadow:inset -3px -3px 0 rgba(0,0,0,.25),0 3px 5px rgba(0,0,0,.4);transform:translateX(-50%)}
.note.need::before{background:var(--magenta)}
.note .k{display:block;font:600 .7rem var(--f-mono);letter-spacing:.14em;opacity:.65;margin-bottom:4px}
.note .who{font:700 .9rem/1.25 var(--f-body);margin-bottom:8px}
.note .who span{display:block;font-weight:500;font-size:.78rem;opacity:.72}
.note small{display:block;margin-top:10px;font:600 .78rem var(--f-body);opacity:.8}
.note small a{color:inherit;word-break:break-all}
.note:hover{transform:rotate(0) scale(1.04);z-index:2;box-shadow:0 24px 34px -14px rgba(0,0,0,.7)}
.note.hit{box-shadow:0 0 0 3px #fff,0 0 34px 4px var(--magenta)}
.note.mine{box-shadow:0 0 0 3px var(--lime),0 14px 24px -10px rgba(0,0,0,.65)}
.note.mine::after{content:"You";position:absolute;top:8px;right:10px;font:700 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--note-ink);color:var(--lime);padding:2px 7px;border-radius:99px}
.note.drop{animation:drop .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes drop{from{transform:translateY(-50px) rotate(14deg);opacity:0}}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line);padding-block:44px 34px;margin-top:40px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
footer.site p{color:var(--muted);font-size:.9rem}
footer.site .links{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--f-mono);font-size:.82rem;color:var(--muted)}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--fg)}

/* ---- motion ---- */
.rv{animation:rise .9s var(--ease) both;animation-delay:calc(var(--d,0) * 90ms)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.conf{position:fixed;top:-12px;width:10px;height:14px;z-index:90;pointer-events:none;animation:fall 2.6s cubic-bezier(.3,.5,.6,1) forwards}
.conf.ptr{width:14px;height:18px;clip-path:polygon(10% 0,100% 72%,45% 76%,0 100%)}
@keyframes fall{to{transform:translateY(106vh) rotate(760deg)}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);background:var(--fg);color:var(--plum);font-weight:700;padding:12px 20px;border-radius:99px;z-index:95;transition:transform .5s var(--ease);box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.toast.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- The Circle logo ---- */
.brand{gap:12px}
.clogo{display:block;height:46px;width:auto;max-width:none;transition:transform .5s var(--ease)}
.brand:hover .clogo{transform:rotate(-3deg) scale(1.04)}
.by{font:600 .68rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;line-height:1.3}
.by b{display:block;color:var(--fg);font-family:var(--f-display);font-stretch:125%;font-size:.95rem;letter-spacing:0;text-transform:none}
footer.site .clogo{height:56px}
@media (max-width:520px){.clogo{height:38px}.by{display:none}}

.top nav .btn,.top nav .btn:hover{color:#fff}