html {
    padding: 0;
    margin: 0;
    background-color: black;
}

/* Top-bar button design tokens.
   Two shapes (pill = entry, chip = toolbar), two backgrounds
   (cream = state actions, warm = output actions), one accent
   colour and one hover treatment. Future top-bar buttons
   should reference these vars and inherit the family. */
:root {
    --btn-bg-cream:        linear-gradient(180deg, #fff9f4 0%, #f3e6dc 100%);
    --btn-bg-cream-hover:  linear-gradient(180deg, #fffaf6 0%, #ffeadc 100%);
    --btn-bg-warm:         linear-gradient(180deg, #f8e6d2 0%, #e6c8a8 100%);
    --btn-bg-warm-hover:   linear-gradient(180deg, #fbecdb 0%, #ecd3b6 100%);
    --btn-stroke:          #a44;
    --btn-ink:             #040;
    --btn-hover-glow:      0 4px 12px rgba(170, 68, 68, 0.22);
    --btn-hover-ring:      0 0 0 1px rgba(170, 68, 68, 0.45);
    --btn-inset-light:     inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --btn-inset-warm:      inset 0 -1px 0 rgba(170, 68, 68, 0.10);
    --btn-radius-pill:     999px;
    --btn-radius-chip:     10px;
}

body {
    padding: 0;
    margin: 0;
    background-color: #000;
    font-family: Georgia,Cambria,"Times New Roman",Times,serif;
}

#content_slim {
  margin-top: 0px;
  margin-left: 0px;
}

#header {
  margin: 0;
}

#header .inner {
  margin: 0px;
}

img { 
  border: 0;
}

a img { 
  outline: none;
}

#quiz label { position: absolute; text-align:right; width:130px; }
#quiz input, #quiz textarea { margin-left: 140px; }
#quiz label.check, #quiz label.radio { position:relative; text-align:left; }

.logo {
  padding: 0px;
  margin: 0px;
  background-color: #dddddd;
}

.slogan { 
  clear: both;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 120%;
  margin-bottom: 10px;
}

.showoff {
  margin:0px auto;
  text-align: center;
}

.showoff img {
  border: solid #ddd 3px;
}

.showoff a {
  color: #88f;
  text-decoration: none;
}

h1, h2 {
  font-family: Arial, sans-serif;
  color: #a44;
}

.blk {
}

h2 {
    font-size: 7vw;
    color: #fff;
    text-shadow: 0px 0px 20px #aaa, 1px 0px #fff;
    -webkit-text-stroke: 1px black;
    text-stroke: 1px black;
}

h2 a {
    color: #000;
    text-decoration: none;
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;
}

h3 {
    margin-top: 10px;
    color: black;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-variant: normal;
    font-style: normal;
    margin-top: 3em;
}

.generator_title { 
    margin: 0;
    font-size: 16px;
    color: #A22;
    font-weight: bold;
}


div.unitdesign {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    font-size: 75%;
    text-align: right;
    border: 1px solid rgba(255,255,255,0);
    position:relative; 
    width: 180px;
    height: 165px;
    overflow: hidden;
}

.unitdesign-part {
}

.unitdesign a {
    color: white;
    text-shadow: 0px 0px 5px #888;
    text-decoration: none;
}

.more a {
    padding: 40px;
    font-size: 200%;
}

.copyline { 
    font-size: 75%;
    color: #777;
    padding-bottom: 10px;
}

.copyline a { 
    text-decoration: none;
    color: #555;
}

.txt {
    color: #222;
    padding-left: 20px;
}

.txtlist { 
    list-style-image: url("/p/images/favicon.png");        
}

.clearer { 
    clear: both;
    text-align: center;
}

.tag-cloud a { 
    text-decoration: none;
    font-size: 2em;
    color: red;
    font-family: sans-serif;
}
.tag-cloud a.size-1 { font-size: 0.75em; }
.tag-cloud a.size-2 { font-size: 1em; }
.tag-cloud a.size-3 { font-size: 1.1em; }
.tag-cloud a.size-4 { font-size: 1.2em; }
.tag-cloud a.size-5 { font-size: 1.3em; }
.tag-cloud a.size-6 { font-size: 1.4em; }
.tag-cloud a.size-7 { font-size: 1.5em; }
.tag-cloud a.size-8 { font-size: 1.6em; }
.tag-cloud a.size-9 { font-size: 1.8em; }
.tag-cloud a.size-10 { font-size: 2em; }


#searchwrap { 
    padding: 0px; 
    margin: 0px; 
    margin-right: 3em !important;
    display:block;
}

#search { 
    float:right;
}

#search a { 
    font-size:10px;
    text-decoration:none;
    padding: 3px;
    color: #666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#search .hitab { 
    font-weight: bold;
    color: #000;
}

#header div.clearer {clear: both; line-height: 0; height: 0;}

body {
    background-color: black;
    background: url(/p/images/ch2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

.title-area {
}

.head-titles {
    text-align: center;
    font-family: Arial;
}

.head-titles a {
    outline-style: none;                 
}

.head-title a {
    text-decoration: none;
    display: inline-block;
    background: green;
    background: url(/p/images/ch2.jpg);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    font-size: 15vw;
    -webkit-text-stroke: 1px #f88;
    text-stroke: 1px #333;
}

.head-title a:hover {
    color: #f00;
}

.head-subtitle a { 
    text-decoration: none;
    display: inline-block;
    color: black;
    background: white;
    font-size: 2vw;
    padding: 1em;
    padding-left: 3em;
    padding-right: 3em;
    border-top-left-radius: 4em;
    border-top-right-radius: 4em;
}

#wrapper-old {
    background: rgba(255,255,255,1);
}

.head-subtitle a:hover {
}

#searchform { 
    display: inline;
}

.searchfield {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.6em;
    padding: 3px;
    text-align: left;
    width: 50px;
    background: #ddd;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

.get_personal { 
    width: 500px;
    margin: 0px auto;
    padding: 10px;
    background: #bfdcff;
    border: 3px solid #76b3ff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;   
}


#widget-bar { margin: 0; padding: 4px 0; }
#widget-bar li {
    margin: 0 4px 0 0;
    padding: 0;
    list-style: none;
    height: 40px;
    width: 60px;
    display: inline-block;
    vertical-align: middle;
    /* Toolbar chip — cream gradient base by default; output
       actions (save/upload/animate/gif/mp4) override to warm
       further down. The 400-px-wide editor column on the real
       site fits 6 standard chips at 60 px with 4 px gaps
       (380 px total) without wrapping. */
    border-radius: var(--btn-radius-chip);
    background: var(--btn-bg-cream);
    box-shadow:
        var(--btn-inset-light),
        var(--btn-inset-warm),
        0 1px 2px rgba(120, 40, 40, 0.06);
    transition:
        transform 0.12s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}
/* `.special` is currently set on `wb-upload` and the two
   make-gif/make-mp4 chips in the HTML. The gif/mp4 chips
   actually need the extra width for their label + nyan;
   upload doesn't (it's just an icon), so we pull it back
   to the standard chip width below. */
#widget-bar li.special  { width: 84px; }
#widget-bar li.special2 { width: 180px; }
#widget-bar #wb-upload { width: 60px; }
#widget-bar a {
    height: 40px;
    display: block;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: border-color 0.15s ease, filter 0.15s ease;
}
#widget-bar li:hover {
    transform: translateY(-1px);
    background: var(--btn-bg-cream-hover);
    box-shadow:
        var(--btn-inset-light),
        var(--btn-hover-glow),
        var(--btn-hover-ring);
}
/* Output-action chips: warm gradient signals "this produces a
   thing" (save still, save rendered output, upload to gallery,
   animate, GIF, MP4). Override the cream base after the
   default rule above. */
#wb-save,
#wb-working-save,
#wb-upload,
#wb-animate,
#wb-make-gif,
#wb-make-mp4 {
    background: var(--btn-bg-warm) !important;
}
#wb-save:hover,
#wb-working-save:hover,
#wb-upload:hover,
#wb-animate:hover,
#wb-make-gif:hover,
#wb-make-mp4:hover {
    background: var(--btn-bg-warm-hover) !important;
}
/* Hover brightens the SVG icon from #a44 to a hotter #c33.
   `filter` is the cheapest way to do this without restating
   each icon's data URI. The hue rotation is tiny so the icon
   stays on-palette. */
#widget-bar li:hover a {
    filter: brightness(1.12) saturate(1.25);
}
#widget-bar a:hover { border-color: transparent; }
/* Ticker text inside #wb-working2. Transparent so the
   underlying toolbar background shows; italic, on-palette,
   readable size. The animation loops infinitely; the JS
   driveAnimation() just swaps the text every 3 s without
   touching the DOM, so there's never a "ghost" frame where
   the previous element hasn't been swept out yet. */
#widget-bar span {
    display: block;
    height: 40px;
    line-height: 40px;
    background: transparent;
    color: var(--btn-stroke);
    font-style: italic;
    font-size: 13px;
    text-align: left;
    padding: 0 4px;
    animation: tickerFade 3s ease-in-out infinite;
}

@keyframes tickerFade {
    0%, 100% { opacity: 0; transform: translateY(3px); }
    15%, 85% { opacity: 1; transform: translateY(0); }
}

/* Widget-bar icons: monochrome SVG paths inlined as data URIs.
   Each icon is 24x24 in viewBox, painted in `#a44` (encoded as
   `%23a44`), then centred at 22px inside the 40px <a> child of
   each <li>. (The <li> keeps the cream gradient; the icon needs
   to live on a separate element so the gradient's `background`
   shorthand doesn't wipe it out.) The old multicoloured sprite
   at /p/jv/buttons.png is no longer referenced anywhere; safe
   to delete on the server when convenient. */
#widget-bar li[id^="wb-"] a {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}
#wb-add a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a44' stroke-width='2.5' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
}
#wb-remove a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a44' stroke-width='2.5' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>");
}
#wb-save a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/><line x1='12' y1='9' x2='12' y2='15'/><polyline points='9 12 12 15 15 12'/></svg>");
}
#wb-animate a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a44' stroke='%23a44' stroke-width='1.5' stroke-linejoin='round'><path d='M8 5v14l11-7z'/></svg>");
}
#wb-front a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L2 7l10 5 10-5-10-5z'/><path d='M2 17l10 5 10-5'/><path d='M2 12l10 5 10-5'/></svg>");
}
#wb-upload a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 17H6a4 4 0 0 1-2-7.4A6 6 0 0 1 16 5a5 5 0 0 1 4 8'/><polyline points='16 14 12 10 8 14'/><line x1='12' y1='10' x2='12' y2='19'/></svg>");
}
#wb-working a {
    /* Spinning film reel (E2 from the status review) — SMIL
       `animateTransform` is the only way to drive rotation
       inside a CSS background-image data URI; CSS animations
       declared inside such an SVG don't fire. The whole reel
       rotates around its centre at 1.4 s/turn. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a44' stroke-width='2'><g><circle cx='12' cy='12' r='9.5'/><circle cx='12' cy='12' r='2.8'/><circle cx='12' cy='5' r='1' fill='%23a44'/><circle cx='12' cy='19' r='1' fill='%23a44'/><circle cx='5' cy='12' r='1' fill='%23a44'/><circle cx='19' cy='12' r='1' fill='%23a44'/><animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1.4s' repeatCount='indefinite'/></g></svg>");
}
/* Working spinner + ticker aren't buttons — strip the chip
   frame so they read as inline status. The cream gradient is
   on the <li>, the icon on the <a>, so both have to go
   transparent. */
#widget-bar #wb-working,
#widget-bar #wb-working2 {
    background: transparent !important;
    box-shadow: none;
}
#widget-bar #wb-working a {
    border: none;
}
#wb-working-save a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/><line x1='12' y1='9' x2='12' y2='15'/><polyline points='9 12 12 15 15 12'/></svg>");
}
/* GIF / MP4 buttons: warm bg comes from the shared
   output-action rule above; here we just stack a faded nyan
   illustration behind a bold label. GIF uses the pixel-art
   Pup nyan; MP4 uses the hi-res Pup-Bold (thicker face
   outline). Boosted selector specificity beats the earlier
   22x22 default size on the icon `<a>`. */
#widget-bar #wb-make-gif a {
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36'%3E%3Ctext x='50' y='27' text-anchor='middle' font-family='Arial,sans-serif' font-weight='800' font-size='24' fill='%23a44' stroke='white' stroke-width='3' paint-order='stroke fill' letter-spacing='1'%3EGIF%3C/text%3E%3C/svg%3E"),
        linear-gradient(rgba(255,249,244,0.55), rgba(255,249,244,0.55)),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10' shape-rendering='crispEdges'%3E %3Crect x='0' y='2' width='20' height='1' fill='%23ff3b3b'/%3E %3Crect x='0' y='3' width='20' height='1' fill='%23ff8a00'/%3E %3Crect x='0' y='4' width='20' height='1' fill='%23ffe53b'/%3E %3Crect x='0' y='5' width='20' height='1' fill='%233bd03b'/%3E %3Crect x='0' y='6' width='20' height='1' fill='%233b8eff'/%3E %3Crect x='0' y='7' width='20' height='1' fill='%23a73bff'/%3E %3Crect x='0' y='1.7' width='20' height='0.3' fill='%23000'/%3E %3Crect x='0' y='8' width='20' height='0.3' fill='%23000'/%3E %3Crect x='18' y='2' width='11' height='6' fill='%23ff9bc6'/%3E %3Crect x='19' y='3' width='9' height='4' fill='%23ffc0d8'/%3E %3Crect x='20' y='4' width='1' height='1' fill='%23fff'/%3E %3Crect x='23' y='3' width='1' height='1' fill='%23fff'/%3E %3Crect x='22' y='5' width='1' height='1' fill='%23fff'/%3E %3Crect x='25' y='4' width='1' height='1' fill='%23fff'/%3E %3Crect x='26' y='6' width='1' height='1' fill='%23fff'/%3E %3Crect x='18' y='2' width='11' height='0.4' fill='%23000'/%3E %3Crect x='18' y='7.6' width='11' height='0.4' fill='%23000'/%3E %3Crect x='18' y='2' width='0.4' height='6' fill='%23000'/%3E %3Crect x='28.6' y='2' width='0.4' height='6' fill='%23000'/%3E %3Crect x='28' y='1' width='7' height='6' fill='%23cfcfcf'/%3E %3Crect x='28' y='0' width='1.5' height='1' fill='%23cfcfcf'/%3E %3Crect x='33.5' y='0' width='1.5' height='1' fill='%23cfcfcf'/%3E %3Crect x='29.2' y='2.2' width='1.6' height='1.8' fill='%23000'/%3E %3Crect x='32.2' y='2.2' width='1.6' height='1.8' fill='%23000'/%3E %3Crect x='29.5' y='2.45' width='0.7' height='0.7' fill='%23fff'/%3E %3Crect x='32.5' y='2.45' width='0.7' height='0.7' fill='%23fff'/%3E %3Crect x='29' y='4.6' width='0.8' height='0.6' fill='%23ff7eaa'/%3E %3Crect x='33.2' y='4.6' width='0.8' height='0.6' fill='%23ff7eaa'/%3E %3Crect x='31' y='4.7' width='1.2' height='0.5' fill='%23000'/%3E %3Crect x='28' y='1' width='7' height='0.3' fill='%23000'/%3E %3Crect x='28' y='6.7' width='7' height='0.3' fill='%23000'/%3E %3Crect x='28' y='1' width='0.3' height='6' fill='%23000'/%3E %3Crect x='34.7' y='1' width='0.3' height='6' fill='%23000'/%3E %3C/svg%3E");
    background-position: center, 0 0, center;
    background-size: 70px 26px, 100% 100%, 76px 21px;
    background-repeat: no-repeat, no-repeat, no-repeat;
}
#widget-bar #wb-make-mp4 a {
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36'%3E%3Ctext x='50' y='27' text-anchor='middle' font-family='Arial,sans-serif' font-weight='800' font-size='24' fill='%23a44' stroke='white' stroke-width='3' paint-order='stroke fill' letter-spacing='1'%3EMP4%3C/text%3E%3C/svg%3E"),
        linear-gradient(rgba(255,249,244,0.55), rgba(255,249,244,0.55)),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E %3Cdefs%3E %3ClinearGradient id='body' x1='0' y1='0' x2='0' y2='1'%3E %3Cstop offset='0' stop-color='%23ffc8db'/%3E %3Cstop offset='1' stop-color='%23f29bbf'/%3E %3C/linearGradient%3E %3ClinearGradient id='head' x1='0' y1='0' x2='0' y2='1'%3E %3Cstop offset='0' stop-color='%23e6e6e6'/%3E %3Cstop offset='1' stop-color='%23bcbcbc'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg%3E %3Crect x='0' y='2' width='20' height='1.05' fill='%23ff5050'/%3E %3Crect x='0' y='3.05' width='20' height='1.05' fill='%23ff9a2e'/%3E %3Crect x='0' y='4.1' width='20' height='1.05' fill='%23ffe25e'/%3E %3Crect x='0' y='5.15' width='20' height='1.05' fill='%2362d764'/%3E %3Crect x='0' y='6.2' width='20' height='1.05' fill='%235aa3ff'/%3E %3Crect x='0' y='7.25' width='20' height='1.05' fill='%23b46cff'/%3E %3C/g%3E %3Crect x='17.5' y='2' width='11.5' height='6' rx='1.4' ry='1.4' fill='url(%23body)' stroke='%235a2438' stroke-width='0.18'/%3E %3Ccircle cx='20.4' cy='4.2' r='0.35' fill='%23fff'/%3E %3Ccircle cx='23.2' cy='3.4' r='0.35' fill='%23fff'/%3E %3Ccircle cx='22.5' cy='5.8' r='0.35' fill='%23fff'/%3E %3Ccircle cx='25.6' cy='4.6' r='0.35' fill='%23fff'/%3E %3Ccircle cx='26.6' cy='6.2' r='0.35' fill='%23fff'/%3E %3Cpolygon points='28.4,0.2 29.6,1.2 28.4,1.4' fill='url(%23head)' stroke='%231a1a1a' stroke-width='0.36' stroke-linejoin='round'/%3E %3Cpolygon points='34.6,0.2 33.4,1.2 34.6,1.4' fill='url(%23head)' stroke='%231a1a1a' stroke-width='0.36' stroke-linejoin='round'/%3E %3Crect x='27.5' y='1' width='7.5' height='6' rx='1.6' ry='1.6' fill='url(%23head)' stroke='%231a1a1a' stroke-width='0.36'/%3E %3Cellipse cx='29.7' cy='3.2' rx='0.75' ry='0.9' fill='%231a1a1a'/%3E %3Cellipse cx='32.8' cy='3.2' rx='0.75' ry='0.9' fill='%231a1a1a'/%3E %3Ccircle cx='29.95' cy='2.95' r='0.28' fill='%23fff'/%3E %3Ccircle cx='33.05' cy='2.95' r='0.28' fill='%23fff'/%3E %3Ccircle cx='28.8' cy='5' r='0.5' fill='%23ff8db4' opacity='0.85'/%3E %3Ccircle cx='33.7' cy='5' r='0.5' fill='%23ff8db4' opacity='0.85'/%3E %3Cpath d='M30.6,4.9 Q31.2,5.5 31.7,4.9 Q32.2,5.5 32.8,4.9' stroke='%231a1a1a' stroke-width='0.18' fill='none' stroke-linecap='round'/%3E %3C/svg%3E");
    background-position: center, 0 0, center;
    background-size: 70px 26px, 100% 100%, 76px 21px;
    background-repeat: no-repeat, no-repeat, no-repeat;
}

.makesweet-thumbnail-img { 
    cursor: pointer; border-top: 1px solid #e78f08; border-bottom: 1px solid #e78f08; padding-top: 1px;
}

.ms-hover {
    margin: 0; padding: 0; opacity:0.4; filter:alpha(opacity=40); position: absolute; background: orange; z-index: 1000; display: none;
}

.msdemo { background: none;  }

.msdemo-top { border-top: 5px solid red;  }
.msdemo-bottom { border-bottom: 5px solid red;  }

.ms-hover-top { 
    border-top-left-radius: 10px; border-top-right-radius: 10px; 
}

.ms-hover-bottom { 
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}

#texts input { 
    vertical-align:middle;
}

#texts textarea { 
    vertical-align:middle;
    width: 120px;
}

#texts input { 
    width: 50px; margin: 5px; padding: 5px; text-align: center; cursor: pointer; font-size: 55%; border-radius: 5px; outline: none;
}

#texts input.fore_color { 
    color: white; background: black;
}

#texts input.back_color { 
    color: black; background: white;
}

#texts select { 
    width: 80px;
}               

.generator-spot table { 
    background: white;
    margin: 0;
    padding: 0;
}

.generator-spot td, .generator-spot tr { 
    border: 0;
    margin: 0;
    padding: 0;
}

.generator-spot input, .file-upload {
    cursor: pointer;
    color: var(--btn-ink);
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    vertical-align: middle;
    /* Pill — same token family as the widget chips, just a
       larger radius. The shape (pill) signals "entry action"
       vs. the toolbar chips' rounded-square. Trimmed a little
       so both Insert pills fit side-by-side on narrower preview
       columns without wrapping. */
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 10px 0 8px;
    border: 1px solid transparent;
    border-radius: var(--btn-radius-pill);
    background: var(--btn-bg-cream);
    box-shadow:
        var(--btn-inset-light),
        var(--btn-inset-warm),
        0 1px 2px rgba(120, 40, 40, 0.06);
    transition:
        transform 0.12s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
    white-space: nowrap;
}
/* 6 px between sibling pills (Insert text → Insert photo)
   matches the gap between sibling chips below. */
.file-upload + .file-upload {
    margin-left: 6px;
}

/* The pills are display:inline-flex separated by whitespace
   text nodes; without this, the second pill breaks to a new
   line whenever the adder cell gets narrow. Internal label
   text already has white-space:nowrap, so this only constrains
   the inter-pill break point. */
#adder_block td:first-child,
#adder_block #inserter,
.file-upload + .file-upload {
    white-space: nowrap;
}

/* Pills drop in with a slight overshoot when #adder_block
   becomes visible — gives the "+" button's effect an
   authoritative reveal rather than a flat display-toggle.
   Re-runs every time the container goes from display:none to
   block (each click of "+"). Staggered so the second pill
   arrives a beat after the first. */
.file-upload {
    animation: pillSlideIn 320ms cubic-bezier(0.2, 0.9, 0.3, 1.18) both;
}
.file-upload + .file-upload {
    animation-delay: 70ms;
}
@keyframes pillSlideIn {
    0%   { opacity: 0; transform: translateY(-8px) scale(0.94); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.generator-spot input:hover, .file-upload:hover {
    transform: translateY(-1px);
    background: var(--btn-bg-cream-hover);
    box-shadow:
        var(--btn-inset-light),
        var(--btn-hover-glow),
        var(--btn-hover-ring);
}

/* Leading-edge icon for the Insert buttons. Same `#a44` stroke
   vocabulary as the widget-chip icons — small bold red glyph
   inline with the green text, no red plate. Sits at 18 px so
   the glyph carries enough weight against the 16 px label and
   the surrounding 22 px chip icons. Injected via ::before so the
   django template stays untouched. */
#add_text::before,
label.file-upload[for="files"]::before {
    margin-right: 3px;
    color: var(--btn-stroke);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}
#add_text::before                      { content: "Aa"; }
label.file-upload[for="files"]::before { content: "▣"; }

.generator-spot button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.generator-spot input[type="file"] {
    display: none;
}

.big-gen { 
}

.reg-gen {
    width: 410px;
    margin: 0 auto;
}

.subber a {
    color: #44f;
    text-decoration: none;
    text-align: left;
}

.generator-spot .preview-animation {
    display: float;
    float: right;
    color: red;
    margin-left: 1em;
}

.subber img { 
    vertical-align:middle;border:0;margin:0px;padding:2px;
}

.explain-watermark { 
    margin: 10px;
    padding: 10px;
    border: 1px solid #faa;
    background: #fee;
    border-radius: 10px;
    box-shadow: 0 0 10px #888888;
}

.nth { 
    display: none;
}

#slider { 
    height:150px; 
    margin: 0px auto;
}

#gen-main { 
}

.intro { 
    color: #533;
}

.intro b { 
    color: #faa;
    font-family: Arial, sans-serif;
    font-size: 70%;
}

ul.index {
    list-style-type: none;
    padding: 0px;
    margin: 0px; 
}

ul.index li a {
    display: block;
    max-width: 400px;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    color: white;
    background: #800;
    text-decoration: none;
}

ul.index li a.draft {
    background: #888;
}

ul.index li a:hover {
    background: #000;
    text-decoration: none;
}

.post img { 
    max-width: 100%;
}

.hey { 
}

.hey a { 
    display: block;
    background: #844;
    border: 3px solid #844;
    padding: 7px;
    border-radius: 7px;
    font-family: sans-serif;
    color: white;
    text-decoration: none;
    font-size: 90%;
}

.hey a b {
    color: #faa;
}

.hey a:hover { 
    background: #955;
    border-color: #a66;
}


#control-translation { 
    position: absolute;
    left: 102px;
    top: 102px;
    border-radius: 102px;
    width: 204px;
    height: 204px;
    opacity: 0.2;
    background-color: #faa;
    border-left: 3px solid #400;
    border-right: 3px solid #400;
}

.control-translation-active {
    opacity: 0.1 !important;
    background-image: initial !important;
}

.control-translation-unavailable {
    opacity: 0.05;
    background-color: green;
}

#control-scale {
    position: absolute;
    width: 40px;
    height: 40px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #faa;
    box-shadow: 0 0 3px 3px #fff;
    opacity: 0.2;
    border-bottom: 3px solid #400;
}

.control-scale-active {
    opacity: 0.5 !important;
    background-color: #f00 !important;
    background-image: initial !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid #400 !important;
}

.ok_button {
    background: url('/p/images/tick.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: white;
}

.ghost_button {
    background: url('/p/images/ghost.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: white;
}

/* Mirror the bar's ghost1/ghost2 state onto the button itself so
   the user can read its current cycle (off / dim / solid) from the
   button. Previously you'd only know which state you were in by
   counting clicks, since only the bar background changed. */
.ghost_button.ghost1 {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.ghost_button.ghost2 {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.85);
}

/* The textbar floats over the canvas; mousedown on its background
   (not on a form control) starts a drag — the cursor hint helps
   the affordance read. `touch-action: none` on the bar background
   lets touch events fire on the bar instead of being interpreted
   as a page pan/zoom. Form controls get the default touch-action
   so the textarea, font picker, and color inputs keep their
   native interactions. */
.textbar {
    cursor: move;
    touch-action: none;
}
.textbar input, .textbar textarea, .textbar select, .textbar button,
.textbar .font-select {
    cursor: auto;
    touch-action: auto;
}
.textbar button { cursor: pointer; }

/* "Aa" master toggle for the styling controls (font picker + the
   two color swatches). Inherits font-size from the bar so its em-
   based sizing matches the icon buttons. The uppercase A is
   ink-black; the lowercase a is rendered in a warm accent so the
   button hints that color belongs here without needing a label. */
.font_button {
    background: white;
    font-weight: 600;
    color: #333;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.font_button .aa-up { color: #222; }
.font_button .aa-lo { color: #d8665a; margin-left: 1px; }

/* The bar inherits text-align: center from the page; the button
   row would centre under the textarea otherwise. Force left so
   the buttons line up with the textarea's left edge. */
.textbar {
    text-align: left;
}
.textbar button {
    margin-right: 0.5em;
    height: 2em;
    width: 3em;
    vertical-align: middle;
}

#texts {
    display: none;
}

.textbar_text {
    background-color: rgba(255, 255, 255, 0.5);
}

textarea.ghost1, div.ghost1 div.font-select {
    background-color: rgb(255, 255, 255);
    opacity: 0.1;
}

textarea.ghost2, div.ghost1 div.font-select {
    background-color: rgba(255, 255, 255, 1.0);
}

#note { 
    display: none;
}


.font-select {
    font-size: 16px;
    width: 210px;
    position: relative;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.font-select .fs-drop {
    background: #fff;
    border: 1px solid #aaa;
    border-top: 0;
    position: absolute;
    top: 29px;
    left: 0;
    -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
    -moz-box-shadow   : 0 4px 5px rgba(0,0,0,.15);
    -o-box-shadow     : 0 4px 5px rgba(0,0,0,.15);
    box-shadow        : 0 4px 5px rgba(0,0,0,.15);
    z-index: 999;
}

.font-select > a {
    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
    background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
    background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
    -webkit-border-radius: 4px;
    -moz-border-radius   : 4px;
    border-radius        : 4px;
    -moz-background-clip   : padding;
    -webkit-background-clip: padding-box;
    background-clip        : padding-box;
    border: 1px solid #aaa;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 26px;
    line-height: 26px;
    padding: 0 0 0 8px;
    color: #444;
    text-decoration: none;
}

.font-select > a span {
    margin-right: 26px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.8;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    cursor: pointer;
}

.font-select > a div {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius   : 0 4px 4px 0;
    border-radius        : 0 4px 4px 0;
    -moz-background-clip   : padding;
    -webkit-background-clip: padding-box;
    background-clip        : padding-box;
    background: #ccc;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
    background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
    background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
    border-left: 1px solid #aaa;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 18px;
}

.font-select > a div b {
    background: url('/p/fs-sprite.png') no-repeat 0 1px;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.font-select .fs-drop {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius   : 0 0 4px 4px;
    border-radius        : 0 0 4px 4px;
    -moz-background-clip   : padding;
    -webkit-background-clip: padding-box;
    background-clip        : padding-box;
}

.font-select .fs-results {
    margin: 0 4px 4px 0;
    max-height: 190px;
    width: 200px;
    padding: 0 0 0 4px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

.font-select .fs-results li {
    line-height: 80%;
    padding: 7px 7px 8px;
    margin: 0;
    list-style: none;
    font-size: 18px;
}

.font-select .fs-results li.active {
    background: #3875d7;
    color: #fff;
    cursor: pointer;
}
.font-select .fs-results li em {
    background: #feffde;
    font-style: normal;
}

.font-select .fs-results li.active em {
    background: transparent;
}

.font-select-active > a {
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
    -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
    -o-box-shadow     : 0 0 5px rgba(0,0,0,.3);
    box-shadow        : 0 0 5px rgba(0,0,0,.3);
    border: 1px solid #5897fb;
}

.font-select-active > a {
    border: 1px solid #aaa;
    -webkit-box-shadow: 0 1px 0 #fff inset;
    -moz-box-shadow   : 0 1px 0 #fff inset;
    -o-box-shadow     : 0 1px 0 #fff inset;
    box-shadow        : 0 1px 0 #fff inset;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
    background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
    background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
    background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
    background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
    background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
    -webkit-border-bottom-left-radius : 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomleft : 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-left-radius : 0;
    border-bottom-right-radius: 0;
}

.font-select-active > a div {
    background: transparent;
    border-left: none;
}

.font-select-active > a div b {
    background-position: -18px 1px;
}


#content {
    margin: 0 0 10px 0;
}

.contents-old .inner {
    padding-top: 1px;
    margin: 0 5% 20px 5%;
}

.mgroup {
    display: block;
    width: auto;
    padding-left: 1em;
}

#content .mgroup {
    padding-right: 10px;
}

.mtitle {
    display: block;
    width: auto;
    padding-left: 1.5em;
    border-top-left-radius: 3em;
    padding-left: 2em;
}

.mbody {
    display: block;
    width: auto;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius-old: 3em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 3em;
    background-image: linear-gradient(to top, rgba(255,255,255,0) 0px, rgba(255,255,255,1) 5px, rgba(255,255,255,1) 10px, rgba(255,255,255,1));
}

.mbody-list {
    background-image: inherit;
}

.mtitle h2 {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0.75em;
    padding-bottom: 0.25em;
    background: rgba(0,0,0,0.1);
}

#side {
  background: rgba(255, 255, 255, 1);
}

.logo-form {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
}

.simple-content {
    background-color: white;
    padding: 1em;
}

#download_link, .simple-act {
    font: bold 16px Arial;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333;
    border: 1px solid black;
    border-radius: 3px;
    padding: 6px;
    margin: 6px;
}

.choose-style {
    border: 1px solid white;
}

.choose-style:hover {
    border: 1px solid green;
}


.range-slider {margin:0 10px 10px}
.range-slider-track {
  width:auto;
  height:20px;
  margin:0 auto;
  position:relative;
}
.range-slider-track .dragger {
  display:block;
  width:20px;
  height:inherit;
  position:relative;
  z-index:2;
  cursor:ew-resize;
  background: #aaa;
  background: repeating-linear-gradient(
    45deg,
    #d06dbc,
    #d06dbc 2px,
    #a65298 4px,
    #a65298 6px
  );
  opacity: 0.6;
}
#makesweet_range {
  width: 100%;
  position: relative;
  height: 20px;
}

.numbered-list {
  counter-reset: custom-counter;
  list-style-type: none;
}

.numbered-list li::before {
  content: "[" counter(custom-counter) "] ";
  counter-increment: custom-counter;
}

.pay {
  max-width: 560px;
  text-align: center;
}

.pay a {
  display: inline-block;
  background: red;
  border-radius: 3px;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  color: white;
  text-decoration: none;
  font-size: 200%;
}

.pay a:hover {
  background: #f0f;
}