:root{
--ink:#0a2540;
--accent:#16ff72;
--note:#FFFFC5;
--sky-1:#78c7ff;
--sky-2:#c9ecff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
color:var(--ink);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
line-height:1.5;
background:linear-gradient(var(--sky-1),var(--sky-2));
overflow-x:hidden;
}
.container{position:relative;max-width:860px;margin:0 auto;padding:0 1rem}
.ascii-sky-wrap{position:relative;height:96px;margin:10px auto 10px auto;max-width:860px;overflow:hidden;border-radius:14px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.5);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.ascii-sky{margin:0;padding:10px 12px;font-family:monospace;font-size:13px;line-height:1.05;color:#0b0b0b;white-space:pre;animation:skyshift 36s linear infinite}
@keyframes skyshift{0%{transform:translateX(0)}100%{transform:translateX(-30%)}}
.ascii-side{position:fixed;pointer-events:none;font-family:monospace;white-space:pre;line-height:1;color:rgba(10,37,64,.95);opacity:.98;z-index:0;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.clouds-left{top:60%;left:8px;color:#ffffff}
.clouds-top{top:8%;left:50%;transform:translateX(-50%);color:#ffffff}
.jesus-right{top:52%;right:12px;transform:translateY(-50%);font-size:15px;line-height:1;color:#1b1b1b}
.panel{position:relative;z-index:1;background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:1rem;margin:0 0 10px 0;box-shadow:0 10px 20px rgba(0,0,0,.12)}
.note-form{display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem;align-items:end}
.note-form label{display:grid;gap:.35rem;font-size:.95rem;color:#0b0b0b}
.note-form input,.note-form textarea,.note-form button{width:100%;padding:.7rem .8rem;border-radius:10px;border:1px solid rgba(0,0,0,.2);background:#ffffff;color:#121212}
.note-form textarea{min-height:3.1rem;resize:vertical}
.note-form button{background:var(--accent);color:#0b0b0b;font-weight:700;cursor:pointer;border:0}
.board{position:relative;z-index:1;min-height:78vh;border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:1.2rem;overflow:hidden;box-shadow:inset 0 10px 20px rgba(0,0,0,.12);background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08))}
/* --- sticky (matchar referensbilden) --- */
.note{position:absolute;width:300px;min-height:230px;padding:26px 28px 34px 28px;border-radius:8px;background:#FFFFC5;box-shadow:0 24px 52px rgba(0,0,0,.34),0 8px 20px rgba(0,0,0,.18);transform:rotate(var(--tilt,-1.5deg));color:#1b1b1b;border:1px solid rgba(0,0,0,.10);cursor:grab;user-select:none;touch-action:none;font-size:1.26rem;line-height:1.55}
/* liten fiber/ljusremsa upptill, utan att byta kulör */
.note .topsheen{position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));pointer-events:none;border-top-left-radius:8px;border-top-right-radius:8px}
/* pinna */
.note .pin{position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(8deg);width:18px;height:18px;border-radius:50%;background:#e20f2f;box-shadow:0 14px 16px rgba(0,0,0,.5),inset 3px -3px 4px rgba(0,0,0,.28),inset -3px 3px 5px rgba(255,255,255,.65)}
.note .pin::after{content:"";position:absolute;left:8px;top:14px;width:2px;height:14px;background:#6f6f6f;box-shadow:0 1px 0 rgba(255,255,255,.6)}
/* vikt hörn nere vänster (dog ear) */
.note::before{content:"";position:absolute;bottom:0;left:0;width:78px;height:78px;background:radial-gradient(80% 60% at 8% 92%,rgba(0,0,0,.18),rgba(0,0,0,0) 70%);clip-path:polygon(0 100%,0 0,100% 100%)}
.note::after{content:"";position:absolute;bottom:0;left:0;width:78px;height:78px;background:linear-gradient(135deg,#FFFFC5 0%,#FFFFC5 62%,#fffde0 78%,#ffffff 96%);clip-path:polygon(0 100%,0 0,100% 100%);border-bottom-left-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.note.dragging{cursor:grabbing;opacity:.98}
.note.pinned .pin{display:block}
.note h2{font-size:2rem;margin:0 0 .45rem 0;color:#0d0d0d}
.note p{margin:0;white-space:pre-wrap;font-size:1.18rem}
.note .meta{position:absolute;right:10px;bottom:8px;font-size:.85rem;color:rgba(0,0,0,.55)}
.site-footer{display:flex;justify-content:center;align-items:center;padding:1rem;border-top:1px solid rgba(0,0,0,.12);color:#0a2540}