:root{--cream: #fff8e8;--cream-2: #fff1cf;--duck: #ffc93c;--duck-deep: #f5a623;--honey: #e8821e;--cocoa: #4a2a0a;--cocoa-soft: #7a4a1c;--card: #fffdf6;--border: #f3ddab;--shadow: 0 18px 50px rgba(232, 130, 30, .18);--radius: 24px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Nunito,system-ui,-apple-system,sans-serif;color:var(--cocoa);background:radial-gradient(700px 380px at 12% -40px,#ffe9a8 0%,transparent 60%),radial-gradient(800px 420px at 95% 10%,#ffd9a0 0%,transparent 55%),radial-gradient(600px 500px at 50% 115%,#ffe3b3 0%,transparent 60%),var(--cream);min-height:100vh}.page{max-width:1180px;margin:0 auto;padding:28px 20px 40px;position:relative}.grain{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.5;z-index:0;background-image:radial-gradient(rgba(122,74,28,.08) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 70%);mask-image:linear-gradient(to bottom,black,transparent 70%)}.layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:22px;position:relative;z-index:1}@media (max-width: 920px){.layout{grid-template-columns:1fr}}.preview-card,.panel{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.preview-card{padding:18px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--cream-2);border:2px solid var(--border);padding:8px;border-radius:18px}.tab{border:2px solid transparent;background:transparent;border-radius:12px;padding:10px 6px;font-family:"Baloo 2",sans-serif;font-weight:700;font-size:15px;color:var(--cocoa);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .18s ease}.tab:hover{background:#ffffffb3}.tab.active{background:var(--cocoa);color:#fff3d6;box-shadow:0 6px 16px #4a2a0a4d}.tab-emoji{font-size:17px}.tab-count{font-size:11px;font-weight:800;background:var(--duck);color:var(--cocoa);border-radius:999px;padding:1px 8px}.tab.active .tab-count{background:#fff3d6}.period-hint{color:var(--cocoa-soft);font-weight:600;font-size:14px;margin:12px 2px 14px}.canvas-wrap{position:relative;border-radius:18px;overflow:hidden;border:3px solid var(--cocoa);background:#ffe9a8;box-shadow:0 12px 30px #4a2a0a2e;width:100%;max-width:420px;margin-inline:auto}.canvas{display:block;width:100%;height:auto;aspect-ratio:9 / 16}.size-badge{position:absolute;right:10px;bottom:10px;background:#2b1a06d1;color:#ffe9a8;font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 10px;border-radius:999px}.thumbs-title{font-family:"Baloo 2",sans-serif;font-weight:700;margin:16px 2px 8px}.panel{padding:20px;height:fit-content;position:sticky;top:16px}@media (max-width: 920px){.panel{position:static}}.panel-head h2{font-family:"Baloo 2",sans-serif;margin:0;font-size:24px}.panel-head p{margin:2px 0 0;color:var(--cocoa-soft);font-weight:600}.phrase-box{background:var(--cream-2);border:2px solid var(--border);border-radius:16px;padding:12px 14px;margin:14px 0}.label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--honey);margin:0 0 4px}.phrase{font-family:"Baloo 2",sans-serif;font-size:19px;font-weight:700;margin:0;line-height:1.3}.btn{border-radius:16px;border:2px solid var(--cocoa);font-family:"Baloo 2",sans-serif;font-weight:700;font-size:15.5px;padding:11px 14px;cursor:pointer;color:var(--cocoa);display:flex;flex-direction:column;align-items:center;gap:0;transition:transform .15s ease,box-shadow .15s ease}.btn small{font-family:Nunito,sans-serif;font-size:12px;font-weight:700;opacity:.75}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn.ghost{background:#fff;box-shadow:3px 3px 0 var(--cocoa)}.btn.sunny{width:100%;margin-top:10px;color:#3d2404;background:linear-gradient(180deg,#ffe082,var(--duck) 60%,var(--duck-deep));box-shadow:3px 4px 0 var(--cocoa)}.btn.download{width:100%;margin-top:14px;color:#fff8e8;background:linear-gradient(180deg,#6b4213,var(--cocoa));border-color:#2e1a05;box-shadow:3px 4px 0 var(--duck-deep)}.footer{margin-top:22px;text-align:center;color:var(--cocoa-soft);font-size:13.5px;font-weight:600;position:relative;z-index:1}.footer code{background:#fff;border:1px solid var(--border);border-radius:6px;padding:0 6px}.caption-box{margin-top:16px;background:var(--cream-2);border:2px solid var(--border);border-radius:18px;padding:14px}.caption-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.caption-title{margin:0 0 8px}.caption-count{font-size:12px;font-weight:800;color:var(--cocoa-soft);background:#fff;border:1px solid var(--border);border-radius:999px;padding:2px 10px;white-space:nowrap}.caption-text{width:100%;border-radius:14px;border:2px solid var(--border);padding:10px 12px;font-family:Nunito,sans-serif;font-weight:600;font-size:14.5px;line-height:1.5;color:var(--cocoa);background:#fff;resize:vertical}.caption-text:focus{outline:3px solid #ffe082;border-color:var(--duck-deep)}.caption-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}@media (max-width: 520px){.caption-actions{grid-template-columns:1fr}}.btn-small{font-size:14px;padding:9px 12px}.caption-hint{font-size:12.5px;color:var(--cocoa-soft);font-weight:600;margin:8px 2px 0}